본 포트폴리오는 1920X1080(100%)
해상도에 최적화 되어 있습니다.
PC버전의 경우 : 브라우저 창을 더 늘려주세요
태블릿 또는 모바일의 경우 : PC로 보시길 권장합니다.
Copyright © 2024 Hanna Kang All Right Reserved
본 포트폴리오는 취업 지원을 위한 비상업적 용도로 제작되었습니다.
profile
skill
SCSS
Bootstrap5
Github
Web Animation API
SVG
Notion
Ms Office
Premiere pro
시멘틱 태그를 이용하여 HTML5 웹사이트 구조 작성이 가능하며, CSS3의 transition, animation을 바탕으로 동적인 효과를 구현할 수 있습니다. 웹 접근성과 크로스 브라우징 측면에 대한 이해를 기반으로 웹 표준을 준수하여 웹/모바일 페이지를 제작할 수 있으며 JQuery 및 JavaScript의 문법 및 구조에 대한 기본기를 보유하고 있습니다. 이를 통한 각종 플러그인 활용이 가능하며 이외의 디자인 관련 프로그램 사용이 가능합니다.
experience
about me
사용자와의 소통을 중요시하는 디자이너입니다.
상징적이면서도 창의적인 디자인을 구현하여 사용자에게 명확한 메시지를 전달해주는 것을 작업 목표로 삼고 있습니다. 또한, 웹사이트의 주제에 맞추어 다양한 디자인을 제작할 수 있습니다.
상상하는 것을 실현시키기 위해 끊임없이 도전하는 퍼블리셔입니다.
새로운 기술과 트렌드를 학습하고 적용하여 프로젝트를 향상시키며
최상의 결과물을 창출하기 위해 노력합니다.
썸네일을 클릭하여 자세한 디자인 과정을 살펴보세요
이니셜 로고 디자인
분위기 컨셉 디자인 [서울우유 요하임 리디자인]
붓터치 컨셉 디자인 [에뛰드하우스 메인페이지]
다이어리 일러스트
카드 프로모션 페이지 디자인 [현대카드 The Pink Edition]
심볼 일러스트 팝업
사이즈별 배너 디자인 [CIDER 블랙프라이데이]
그리드컨셉 디자인 [LG Mobile 2023]
리본 일러스트 포스터
이벤트 팝업창 디자인
구인공고 팝업창 디자인
배송안내 팝업창 디자인
아이폰 광고 포스터 디자인
메타볼컨셉 디자인 [한국타이어 메인페이지]
리본과 블렌드컨셉 디자인 [당근마켓 메인페이지]
이벤트 페이지 & 배너 디자인 [스타벅스 크리스마스 이벤트]
캐릭터 드로잉 일러스트
doosan
art center
제작범위 웹사이트 전체
작업기여도 개인작업 100%
제작기간 2week
제작툴
overview_
두산아트센터는, 다양한 공연과 전시를 선보이며 뮤지컬, 연극음악, 무용, 미술 등의 각자의 장르에서 활발히 활동하는 젊은예술가들을 발굴 육성합니다. 두산아트센터의 기존 사이트 전체페이지를 재기획및 디자인하여 ‘젊은 창작자 지원’이라는 두산아트센터의 비전에 걸맞게, 샘솟는 아이디어와 역동성을 표현했습니다. 또한 이용자들이 두산아트센터의 서비스를 놓치지 않고 바로 확인하고 이용할 수 있도록 접근성과 편리성을 높이는 디자인을 구현하였습니다_
main page
section 01
두산아트센터의 캐치프레이즈와 이용자들이 많이 찾는 메뉴로 메인화면을 구성하였습니다.
section 02
사이트 이용자들이 가장 많이 찾는 '현재 진행중인 공연 및 전시를' 메인화면에서 바로 확인할 수 있습니다.
section 03
두산아트센터의 다양한 소식을 한 눈에 확인할 수 있으며, 클릭시 뉴스레터 페이지로 바로 이동할 수 있습니다.
trigger menu
상단에 고정되어 있는 트리거메뉴를 클릭하여 언제든지 사이트맵을 확인하고 해당 서브메뉴로 이동할 수 있습니다.
sub page
DAC Artist
두산아트센터는 만 40세 이하 젊은 예술가들의 다양한 창작활동을 지원합니다. 현재 지원하고 있는 아티스트들과 아티스트들의 작품을 연도별로 확인할 수 있습니다. 선정된 아티스트들을 좀 더 눈에띄게 소개하고 싶어 가로형 스크롤을 채택하였습니다.
두산아트센터 소개
예술을 통한 사회공헌, 젊은 창작자 지원이라는 두산아트센터의 비전과 기업이념을 확인할 수 있습니다. 젊은층에 초점을 맞추고 있는만큼 너무 밋밋하지 않게 트렌드를 담아 디자인했습니다.
대관안내
두산아트센터의 전체 시설을 대관하여 이용할 수 있습니다. 먼저 두산아트센터의 시설을 갤러리 형태로 소개하고 세부사항은 표를 사용하여 나타내었습니다.
오시는 길
두산아트센터로 오는 길을 확인할 수 있도록 하기 위해 iframe태그로 연결하였습니다. 또한 방문 전 이용과 관련하여 자주 하는 질문들을 정리하여 탭메뉴로 확인할 수 있도록 하였습니다.
두산아트센터 전체페이지 리디자인 및 퍼블리싱
DOOSAN ART CENTER Renewal
위 작업물은 비상업적 개인 프로젝트임을 밝힙니다.
This work is a non-commercial personal project
UI/UX Design & Publishing By Hanna Kang
Whipped
제작범위 메인페이지
작업기여도 개인작업 100%
제작기간 1week
제작툴
overview_
휩드는 피부를 위해 정성다해 만든 화장품이라는 컨셉을 가지고 있습니다. 브라운 컬러를 사용하고 종이질감같은 바탕을 사용하여 소중한 마음을 정성껏 노트에 꾹꾹 눌러담는 듯한 느낌을 주었습니다. 이용자가 많이 찾는 베스트 상품 섹션을 상단에 넣어 접근성을 높이면서도, 제품과 함께 휩드의 철학과 스토리를 확인할 수 있도록 메인페이지를 구성하였습니다.
detail view
section 01
어릴적 포근했던 추억을 회상하는 느낌을 주기 위해서 구름처럼 떠오르는 슬라이드 효과로 대표 상품들과 브랜드 스토리를 소개합니다.
section 02
상품에 마우스를 오버하면 제품명과 함께 제품이 떠오르는 효과가 나타납니다. 휩드의 가장 대표되는 상품인 만큼 시각적인 효과를 주어 이용자들의 이목이 집중될 수 있도록 하였습니다.
section 03
클릭모션을 통해 휩드에 사용되는 원재료를 이용자들이 확인할 수 있으며 마치 꼼꼼히 확인해서 직접 원재료를 골라 담는 듯한 체험을 할 수 있습니다.
휩드의 브랜드 철학을 소개하는 섹션입니다. 각 항목에 마우스를 오버하면 각 항목을 나타내주는 이미지와 자세한 내용을 확인할 수 있습니다.
마지막 섹션에는 탭메뉴를 넣어 자주 하는 질문(FAQ)과 제품에 대한 사용자들의 리뷰를 확인할 수 있습니다. 각 항목에서 클릭을 통하여 자세한 내용을 확인할 수 있습니다. 사용자 리뷰에 적용된 슬라이드 효과는 마우스를 올렸을 때 일시정지하여서 확인할 수 있습니다.
휩드 메인페이지 리디자인 및 퍼블리싱
WHIPPED website Main page Redesign
위 작업물은 비상업적 개인 프로젝트임을 밝힙니다.
This work is a non-commercial personal project
UI/UX Design & Publishing By Hanna Kang
제작범위 원페이지
작업기여도 개인작업 100%
제작기간 5days
제작툴
overview_
html과 css만을 활용하여 코카콜라의 웹페이지를 원페이지로 리뉴얼 제작하였습니다. 코카콜라는 콜라 뿐 아니라 많은 음료브랜드를 운영하고 있으며 깊은 역사를 가지고 있기 때문에 이용자가 자칫 놓칠 수 있는 많은 정보들을 한 페이지에 전부 확인할 수 있도록 하는 것이 어떨까 라는 생각에 제작하게 되었습니다. 주로 마우스 오버 효과를 주어 이용자가 컨텐츠에 집중할 수 있도록 하였고, 폼양식 체크박스를 이용해 클릭과 슬라이드 효과를 구현하여 많은 내용들을 간추려 확인하도록 하였습니다.
detail view
section 01
코카콜라 고유의 레드컬러와 트렌디한 이미지로 첫 화면에서 브랜드 이미지가 돋보이도록 하였습니다. 메인비주얼에 마우스를 오버하면 이미지가 변경됩니다.
section 02
코카콜라에서 많은 브랜드를 보유하고 있음을 확인할 수 있습니다. 애니메이션 효과를 넣어 브랜드 소개가 자칫 밋밋해지지 않도록 하였습니다.
section 03
체크박스를 이용하여 이미지 슬라이드 효과를 구현하였습니다. 코카콜라 브랜드의 오랜 역사를 확인할 수 있습니다.
section 04
CSS의 마우스 오버효과를 활용하여 아코디언 형식의 갤러리를 표현하였습니다. 코카콜라 브랜드에서 진행하고 있는 환경친화적인 사업을 소개하며 홍보하고 있습니다.
마지막으로 브랜드 뉴스를 소개합니다. 카드 뉴스 형태이면서 애니메이션 효과를 넣어 이용자들의 시선을 주목시킵니다. 하단의 버튼을 누르면 상세페이지로 이동할 수 있습니다.
코카콜라 원페이지 리디자인 및 퍼블리싱
Coca-cola Onepage Redesign
위 작업물은 비상업적 개인 프로젝트임을 밝힙니다.
This work is a non-commercial personal project
UI/UX Design & Publishing By Hanna Kang
제작범위 메인페이지
작업기여도 개인작업 100%
제작기간 2days
제작툴
overview_
기존 소니코리아의 사이트를 반응형페이지로 제작하며 홈페이지를 리디자인하였습니다. PC버전 기준으로 제작된 컨텐츠를 사용자 환경을 고려하여 디바이스 별 사이즈에 맞추어 재배치했습니다. Sony 웹페이지에 활용할 메타포 아이콘을 직접 디자인하여 사용자들이 아이콘만 보고도 원하는 메뉴를 빠르게 확인할 수 있도록 하였습니다. 소니코리아의 대표컬러 블랙과 골드색상 아이콘을 조화시켜서 좀 더 고급스러운 브랜드 이미지를 구현하고자 하였습니다. 메인페이지의 아이콘 메뉴를 통해 소니에서 진행하는 대표적인 사업들을 확인할 수 있으며, 최근 소식과 뉴스를 확인할 수 있습니다.
step 01
wireframe
step 02
metaphor icon
sketch
metaphor icon design
company playstation product sony pictures road to zero sony technology아이콘에 마우스 커서를 올리면 호버효과가 나타납니다.
step 03
responsive web design
pc (1200px) 1200px을 기준으로 메인에 들어갈 구성요소들을 배치하였습니다. 메타포아이콘을 메인 비주얼과 함께 3x2로 배열했고, 메인페이지에서 최신 소식과 뉴스들을 확인할 수 있습니다. PC ver. view
tablet (768px) 최근소식의 섹션을 확대하였고 뉴스레터 섹션은 축소시켜 많은 정보를 한 눈에 확인할 수 있도록 변화를 주었습니다. Tablet ver. view
mobile (360px) 메타포아이콘을 2x3배열로 변경하여 아이콘이 너무 작아지지 않도록 확대하였고, 뉴스레터 섹션을 없애고 푸터메뉴를 확대하여 사용자의 편리성을 높였습니다. Mobile ver. view
소니코리아 반응형메인페이지 리디자인
Sony Korea responsive web mainpage redesign
위 작업물은 비상업적 개인 프로젝트임을 밝힙니다.
This work is a non-commercial personal project
UI/UX Design & Publishing By Hanna Kang
paradice city
제작범위 전체페이지(Main+6page)
작업기여도 개인작업 100%
제작기간 1week
제작툴
파라다이스시티 호텔 모바일웹 전체페이지 리디자인
Paradice City Hotel Mobile webpage redesign
위 작업물은 비상업적 개인 프로젝트임을 밝힙니다.
This work is a non-commercial personal project
UI/UX Design & Publishing By Hanna Kang
아래 이미지에 마우스를 올려 프로젝트 기획과정을 확인하세요
sony 소니코리아
01 스토리보드
02 산출물목록표
03 수정완료보고서
04 프로젝트완료보고서
01 메타포아이콘 구상보고서
02 와이어프레임
03 스타일가이드
01 와이어프레임
02 스타일가이드
03 프로토타입
04 프로토타이핑
