레이아웃 디자인카메론 고진화 대표

순서

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 차이로 하루 종일 고민한 적이 있다 .

• 글자와 선의 색을 정하는데 하루 종일 걸린 적이 있다 .

• 컨텐츠간 공백이나 글자간 여백을 정하는데 하루 종일 걸린 적이 있다 .