xe 오픈 세미나(2014-06-28) - (3/3) 레이아웃 제작 디자인
Post on 22-Jan-2015
5.820 Views
Preview:
DESCRIPTION
TRANSCRIPT
레이아웃 디자인카메론 고진화 대표
순서
1.세계 웹 디자인 트렌드
2.세계 트렌드에서 한국의 웹 이슈
3.웹 컨텐츠 디자인에 대해
세계 웹 디자인 트렌드
1. 컨텐츠가 잘 보여야 한다 !
화려함보다는 심플하고 깔끔한 레이아웃
2. 에너지와 환경이 중요하다 !
배경색 흰색보다는 회색 사용
3. 사람이 중요하다 !
웹접근성 , UI / UX, 웹사용의 즐거움
세계 트렌드에서 한국의 웹 이슈1. 한글을 사용해도 예뻐야 한다 !
이미지가 아닌 텍스트 사용시에도 예뻐야 한다 .
2. 반응 속도가 빨라야 한다 .
효과가 너무 많으면 정신없고 효과가 느리면 답답하다 !
느린 사이트 예 ) http://quickloans.konnessa.com/
3. IE7, IE8 을 지원해야 한다 .
HTML5 와 CSS3 의 최신 기술과 반응형 , 모바일 기능 체험 등의 제약
웹 컨텐츠 디자인
공간과 간격
공간과 간격
컨텐츠 간 규칙적인 간격이 안정적이고 신뢰감 있는
컨텐츠 구성을 만들어 줍니다 .
적절한 공간은 컨텐츠를 더욱 잘 보이게 합니다 .
상품성 디자인
선
선 – 1px 의 중요성
• 컨텐츠를 구분하는 중요한 요소입니다 . 하지만 , 컨텐츠를 방해해서는 안됩니다 .
• 선의 구성 , 두께 , 색상에 민감할 수록 좋은 디자인이 나옵니다 .
• 예시를 통해 , 선을 어떻게 사용했느냐에 따라
페이지 느낌과 가독성 / 사용성이 확연히 차이남을 느낄 수 있습니다 .
색상
색상• 포인트 색상을 3 가지 이내로 사용하여 규칙성있게 사용합니다 .
예 ) 제목색 / 선택색 파랑 , 롤오버색 / 강조색 주황 , 일반텍스트 회색 등
• 규칙성 있는 색상의 사용은 사용자로 하여금 컨텐츠를 식별하고 이용하는데 좋은
경험을 주게 됩니다 .
• 하지만 , 웹접근성 규정에 따라 색을 사용하여야 합니다 .
웹접근성 3) 컨텐츠의 색에 무관하게 인식이 가능하게 만들어야 한다 .
색상을 배제 ( 흑백 ) 하여도 원하는 내용을 전달할 수 있도록 명암이나 패턴
모양등으로 컨텐츠의 구분을 할 수 있어야 한다 .
색상 - #fff 와 #f8f8f8 의 차이
레이아웃 전체 배경색과 컨텐츠 글자색
배경색 : #ffffff → #f8f8f8
글자색 : #000000 → #333333
이 조그만 차이로 컨텐츠를 편안히 볼 수 있게 됩니다 .
전세계적으로 환경과 에너지 , 건강 이슈로 웹 권고사항이기도 합니다 .
폰트
폰트• 영문을 사용하여 예쁜 레이아웃은 많지만 , 한글을 사용하여 예쁜 레이아웃은 적다 .
• 한글 웹 폰트 사용의 한계 : 돋움 , 굴림 , 맑은고딕 , 나눔고딕
• 각각의 폰트의 가장 가독성이 좋고 예쁜 폰트 사이즈를 적용합니다 .– 돋움 : 11,12px
– 나눔고딕 : 12px, 15px, 18px, 20px, 22px, …
• 웹 페이지 내 폰트는 두 가지 종류 내에서 사용하는 것이 좋습니다 .
예 ) 일반 텍스트 : 돋움 , 제목 / 강조 텍스트 : 나눔고딕
• 나눔고딕과 같은 외부폰트는 하나만 사용해야 합니다 .
나눔고딕 Light, Bold, ExtraBold 각각 1.2MB 이상의 용량을 홈페이지 접속시 다운로드해야 함 .
효과
효과• 효과는 사용자로 하여금 반응과 즐거움을 줍니다 .
또한 , 적절한 효과는 사이트를 능동적으로 만들어 주며 , 퀄리티 또한 배 이상 높여줍니다 .
• 효과가 많으면 사용성이 떨어지게 되는 경우가 많습니다 .
효과는 용도에 따라 통일성 있게 넣어주면 같은 경험을 통해 사용성을 유도하는 역할을 합니다 .
• 최근 느린 효과들이 적용된 웹페이지가 등장하면서 멋있어 보이지만 ,
결국은 사용자가 불편함을 느끼게 되어 다시 빨라지고 있습니다 .
멋보다 사용성이 우선입니다 !
느린 효과의 예 ) http://quickloans.konnessa.com/
디자인 프레임웍
디자인 프레임웍의 탄생 !
• 폰트크기 1px 차이로 하루 종일 고민한 적이 있다 .
• 선 두께 1px 차이로 하루 종일 고민한 적이 있다 .
• 글자와 선의 색을 정하는데 하루 종일 걸린 적이 있다 .
• 컨텐츠간 공백이나 글자간 여백을 정하는데 하루 종일 걸린 적이 있다 .
top related