WooJI's 포트폴리오

Connect Communication Coding

Developer

box

circle

01 이마트24

브랜드의 컬러를 돋보이게 하여 브랜드 이미지를 각인시키고자 디자인하였습니다. 원사이트의 내용은 최대한 유지하되 리듬감을 줄 수 있도록 레이아웃을 재배치 하였습니다. 카카오맵 API를 활용하여 지도를 사용할 수 있게 하였고, 모바일에서도 확인이 가능하도록 반응형으로 제작되었습니다.

option
TYPE	개인 작업 100%, 모바일 반응형 (768px)
TOOLS	HTML5, CSS3, javaScript, jQuery, swiper-slide, Hamburgers, Kakao map Developer
FONT	Pretendard, Google Material Icons, Feather Icons
COLOR	#f9bb00 #DC2F34

WEB SITE ORIGINAL DESIGN : FIGMA

02 경희대학교

그누보드를 활용하여 서브페이지 조립 및 게시판을 사용할 수 있도록 하였습니다.
대학교 홈페이지의 특성상 명확한 정보전달과 깔끔한 느낌을 줄 수 있도록 그리드를 활용하여 내용을 정렬하고, 아이콘을 활용하였습니다. 모바일에서도 확인이 가능하도록 반응형으로 제작되었습니다.

option
TYPE	개인 작업 100%, 모바일 반응형 (768px)
TOOLS	HTML5, CSS3, javaScript, jQuery, PHP, 그누보드, swiper-slide, Hamburgers
FONT	Pretendard, Google Material Icons
COLOR	#990E17 #243971 #b49759

WEB SITE ORIGINAL DESIGN : FIGMA

03 Le Labo

그누보드를 활용하여 서브페이지 조립 및 게시판을 사용할 수 있도록 하였으며, 유저에게 필요한 정보와 브랜드의 특색이 잘 드러나는 이미지를 위주로 배치했습니다. 모바일에서도 확인이 가능하도록 반응형으로 제작되었습니다.

option
TYPE	개인 작업 100%, 모바일 반응형 (768px)
TOOLS	HTML5, CSS3, javaScript, jQuery, PHP, 그누보드, swiper-slide, Hamburgers
FONT	Pretendard, Noto Serif, Google Material Icons
COLOR	#F6F8F6 #202123

WEB SITE ORIGINAL DESIGN : FIGMA

04 부산도서관

풀페이지의 특성을 살리기 위해 1440px 그리드 시스템을 사용했으며, 탭 메뉴와 슬라이드를 활용하여 정보를 효율적으로 전달할 수 있도록 디자인 했습니다.
흐르는 텍스트 애니메이션과 그림자를 활용하여 역동성을 주었고, 모바일에서도 확인이 가능한 반응형으로 제작되었습니다.

option
TYPE	개인 작업 100%, 모바일 반응형 (768px)
TOOLS	HTML5, CSS3, jQuery, FullPage, swiper-slide
FONT	Pretendard, Google Material Icons, Feather Icons
COLOR	#123a6e #66C6F0 #F1F7FE

WEB SITE ORIGINAL DESIGN : FIGMA

05 청담우리동물병원

그누보드를 활용하여 서브페이지 조립 및 게시판을 사용할 수 있도록 하였으며, 카카오맵 API를 사용하여 지도를 이용할 수 있도록 하였습니다.
다양한 정보를 보기쉽게 전달하기 위하여 1440px 그리드 시스템으로 넓게 디자인 하였고, 모바일에서도 확인이 가능하도록 반응형으로 제작되었습니다.

option
TYPE	개인 작업 100%, 모바일 반응형 (768px)
TOOLS	HTML5, CSS3, javaScript, jQuery, swiper-slide, PHP, 그누보드, Kakao map Developer
FONT	Noto Sans KR, Google Material Icons
COLOR	#2455C5 #A4D1FF

WEB SITE ORIGINAL DESIGN : FIGMA

06 BOUCHERON

유저에게 필요한 정보들로 홈페이지를 재구성하고, SVG 애니메이션을 활용하여 유연한 느낌으로 리뉴얼하였습니다. 모바일에서도 확인할 수 있도록 반응형으로 제작되었습니다.

option
TYPE	개인 작업 100%, 모바일 반응형 (768px)
TOOLS	HTML5, CSS3, jQuery, slick-slide
FONT	Noto Sans KR, DM Serif Text Google Material Icons, xeicon
COLOR	#014841 #FFFFFF