이전글
uiㆍux convergence design, samsungpop Microsite
01 OVERVIEW

실사아이콘과 인포그래픽 디자인 삼성증권 웹사이트

기존 웹사이트는 사용자가 직접 정보를 찾아 들어가야 하는 불편한 인터페이스로 구성되어 있습니다.
실사 이미지와 일러스트를 이용하여 기업이미지를 효과적으로 전달하고 삼성증권의 컬러와 비주얼을 적용하여 웹 아이덴티티를 새롭게 구축하였습니다. 또한 메인영역에 상품 채널을 충분히 노출시켜 사용자로 하여금 필요한 메뉴로 한 번에 연결할 수 있도록 구성하였습니다.

Web Convergence A class / 김지영 학생 제작작품

Web Convergence A class, 김지영 학생 제작작품
- 브랜드
: 삼성증권
- 종류
: UI/UX
- 제작프로그램
: Photoshop , Dreamwever
- 레이아웃
: 비주얼, 퀵메뉴 중심의 고정너비 레이아웃
- 타이포그래피
: 이미지폰트 70%, 시스템 폰트 30%
- 디자인 이론
: 기업의 신뢰도를 바탕으로 컬러와 글꼴 등 일관성을 부여했다.
- 비주얼 스킬
: 명암스킬과 인포그래픽
- 웹표준
: 부분 웹 표준화
- 제작컨셉
: 기업의 아이덴티티 표현과 증권에 대한 정보전달, 신뢰도를 중점으로 기획하고 디자인하였다.
상단 네비게이션과 하단 풋터는 확 트인 느낌을 주어 넓게 제작하고, 비주얼 영역은 기존의 서비스보다 더 많은 서비스를 보여주되 여백에 맞는 자리를 배치하여 답답해보이지 않고, 넓어보이는 효과를 준다.
02 Plan & analysis

삼성증권 웹사이트 기획 및 방향성 분석

컬러와 비주얼 폰트 스타일 가이드로 일관성을 부여하여 삼성증권 브랜드에 대한 아이덴티티를 느낄 수 있도록 하였고, 메인 페이지에 꼭 필요한 정보만을 효과적으로 노출시켜 불필요한 클릭을 최소화 하여 사용성을 높였으며, 퀵메뉴 아이콘을 통해 상품으로의 접근을 용이하게 하였습니다.

PROJECT GOAL
information + indentity + relivabllity
situation
  • 원클릭 시스템이 아닌
    정보를 찾아 들어가야 하는 불편함
  • 삼성증권 웹사이트의 아이덴티티 미확립
  • 효과적인 상품노출 채널 부족
  • 실사 이미지와  일러스트를 이용하여
    기업이미지를 효과적으로 전달
  • 삼성증권의 컬러와 비주얼 적용으로
    웹 아이덴티티 재구축
  • 메인영역에 효과적인 상품홍보 채널 구축
03 work Story

삼성증권 웹사이트 아이콘 및 그래프 작업 과정

사이트의 성격과 기획에 맞는 비주얼 구상 후 실사 이미지와 일러스트를 정교하게 리터칭하여 삼성증권의 아이덴티티를 효과적으로 표현하였고, 모든 아이콘과 그래프는 학생이 직접 그린 결과물 입니다.

diagram
diagram_detail
visual
visual-detail
icon
icon_detail
04 OUTPUT

실사 아이콘과 인포그래픽을 통한 오브젝트 비주얼 구성

컬러와 비주얼, 폰트 스타일 가이드 작업으로 사용자가 삼성증권 브랜드에 대한 아이덴티티를 느낄 수 있도록 하였습니다.

main page design
main page design
main page layout
main page layout
sub page design
sub page design01
sub page design02
sub page design03
sub page design04
sub page design05
sub page design06
05 publishing

웹 접근성을 높인 제이쿼리와 CSS 웹표준 코딩

웹표준 코딩으로 크로스 브라우징에도 같은 화면이 출력될 수 있도록 하였으며, 플래시가 아닌 제이쿼리 운용으로 가볍고 부드러운 모션을 표현하였습니다. 네비게이션, 비주얼, 스크롤 배너, 탭 메뉴, 풋터링크 영역을 제작하였습니다.

01. Slide Navigation: 제이쿼리 메뉴 동작
Slide Navigation
02. Slide Visual: 비주얼 배너 슬라이드 동작
Slide Visual
03. Quickmenu Slide: 퀵메뉴 좌, 우 버튼 동작
Quickmenu Slide

UI디자인사이트 학생작품

저작권은 디자인나스에 있습니다. 스크랩하실 때출처를 남겨주세요.

디자인나스의 작품은 모두 학생작품입니다.

 

디자인나스는 국내최고의 디자인아카데미이자, 선두주자입니다.

  • 페이스북
  • 블로그
  • 인스타그램

nothing more than quality, designnas