메뉴 보이기
Profile
이온디

2015.05.06

정보

웹사이트의 흰색 배경이

조회 수 254 추천 수 1

#F2F2F2

apple.com 의 백그라운드 컬러

#FAFAFA

일부 영역

bg_color_apple_20150506.png

 

#F4F5F6

네이버 밴드의 백그라운드 컬러

bg_color_band_20150506.png

#F9F9F9

이온디 온 레이아웃의 백그라운드 컬러

bg_color_eond_on_20150506.png


이온디 온의 경우 최대한 흰색을 유지하면서 화이트톤 백그라운드를 유지하고 있다.

애플의 경우는 실버, 그레이 느낌의 백그라운드 톤이다.

애플은 외국 회사 느낌이 나는 차가운 흰색인데

네이버 밴드는 국내사라 그런지  따뜻한 느낌의 흰색을 백그라운드로 사용하였다.

 

 

#FAFAFA

#F2F2F2

#F9F9F9

F4F5F6

 이렇게 놓고 비교해보면 일단 네이버의 배경이 따뜻하다고 생각이 들었는데, 두 색을 비교하면 오히려 어두운 색(애플의 배경색)이 더 따뜻한 느낌을 주었다.

하지만 그 색만을 바라보면 애플의 경우는 그레이 느낌이 강하기 때문에 차가운 색이란 생각이 든다.

반면 네이버는 밝은 톤이라 따뜻하게 느껴진 것 같다. (*색이란 빛이나 모니터, 눈이나 환경에 따라 각자 느끼는 바는 다르다.)

 

이온디 온 레이아웃은 흰색을 주 컬러로 사용하면서 포인트 컬러를 사용했다. 주로 흰색 톤의 색을 군데군데 배치했기에 흰색의 사용이 중요한 몫을 차지하고 있다.

이번에 흰색 배경색을 조사하면서 기존에 F9F9F9 컬러를 FAFAFA로 변경해보았는데, FFF 색과 비교해서 좀 더 확 눈에 띄게 되었지만 눈에 보이는 색 자체는 더 편안해진 것 같다.

 

탑네비게이션과 컨텐츠의 구분을 할 때, 위젯을 강조할 때 등 흰색의 다양한 버전은 웹디자인에서 굉장히 중요하다.

#F4F4F4 : 네이버 카페의 탑네비게이션의 색

#FBFBFB : 네이버 메인의 탑네비게이션의 색

#FAFAFA : 네이버 검색의 탑네비게이션의 색

 

※참조

1. 가독성, 눈의 피로함에 대한 웹 사이트 배경색의 영향

http://academic.naver.com/view.nhn?doc_id=13699766&dir_id=0&page=0&query=%EC%9B%B9%EC%82%AC%EC%9D%B4%ED%8A%B8%20%EB%B0%B0%EA%B2%BD%EC%83%89%20F7f7f7&ndsCategoryId=10204&library=141

2. 실전 웹표준 가이드

http://www.slideshare.net/hyun/web-standard-guide-2005-appendix

3. Designing Interfaces 인터페이스 디자인 94가지 패턴

http://book.naver.com/bookdb/text_view.nhn?bid=2954032&dencrt=K6ydKIG64A7KiKn%252BgOesYB%253%393IzNMfICtDOwSPEEsUqw%253D&term=%BE%D6%C7%C3+%C0%A5+%BB%E7%C0%CC%C6%AE+%B9%E8%B0%E6&query=%EC%95%A0%ED%94%8C+%EC%9B%B9%EC%82%AC%EC%9D%B4%ED%8A%B8+%EB%B0%B0%EA%B2%BD

4. 웹사이트에 '빽'이 있어야 산다?

http://cafe.naver.com/stshanghai/257

Profile
7
Lv
이온디

이온디 홈페이지는 간결하며,

 손쉽게 수정할 수 있습니다.

0개의 댓글

에디터
번호 제목 날짜 조회 수
공지 [디자인] 눈 여겨 보는 디자인 2013.10.18 3350
36 [디자인] 게시판 디자인 2019.04.04 110
35 [디자인] 미니멀리즘 모바일 화면 2019.01.23 28
34 [컨텐츠 레이아웃] 상담위젯 2018.08.20 23
33 [부동산] 식신 2017.10.27 45
32 [XE 레이아웃] 30 Premium Responsive WordPress Themes 2015.12.18 78
31 [디자인] 추억의 예전 사이트들 2015.11.03 119
30 [팁] 하이퀄리티 One Page Website 와이어프레임 무료 다운로드 2015.09.18 73
29 [팁] 그래픽버거(Graphic Burger) 포토샵 임펙트 사이트 2015.09.18 811
28 [팁] 어시스터PS가 안될 땐, guideguide.me 2015.09.09 58
27 [팁] 어시스터PS 2015.09.09 91
26 [컨텐츠 레이아웃] 국립국악원 2015.09.07 87
25 [정보] 레이아웃의 형태 [일반 / 특색 / 실험] (이미숙, 2012.09.16.) 2015.08.30 140
[정보] 웹사이트의 흰색 배경이 2015.05.06 254
23 [정보] 포털사이트의 인덱스 레이아웃의 넓이 2015.02.22 357
22 [디자인] 2014년 2월 5일 눈여겨 보는 디자인 2014.02.15 1768
21 [XE 레이아웃] 이지샵 레이아웃 2014.02.04 2
20 [컨텐츠 레이아웃] 일기장 스킨 디자인 2014.01.29 1987
19 [컨텐츠 레이아웃] 2013년 11월 다음 뷰와 네이트 컨텐츠 레이아웃 2013.11.18 2430
18 [디자인] 웹디자이너를 위한 스케치북 Sneakpeek 2013.10.22 2610