웹사이트의 흰색 배경이
첨부파일 https://eond.com/layout_design/356948

#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

코멘트 0
접기/펴기 | 댓글 새로고침
 
 
Total 38 articles in 1 / 2 pages
번호 제목 제목 날짜날짜 조회 수
공지 눈 여겨 보는 디자인 2013/10/18 3399
38 인스타그램 해시태그 파일 2020/05/02 12
37 [디자인] 게시판 디자인 파일 2019/04/04 512
36 [디자인] 미니멀리즘 모바일 화면 파일 2019/01/23 55
35 [컨텐츠 레이아웃] 상담위젯 파일 2018/08/20 41
34 [부동산] 식신 파일 2017/10/27 52
33 [XE 레이아웃] 30 Premium Responsive WordPress Themes 2015/12/18 81
32 [디자인] 추억의 예전 사이트들 2015/11/03 145
31 [팁] 하이퀄리티 One Page Website 와이어프레임 무료 다운로드 2015/09/18 87
30 [팁] 그래픽버거(Graphic Burger) 포토샵 임펙트 사이트 2015/09/18 846
29 [팁] 어시스터PS가 안될 땐, guideguide.me 2015/09/09 61
28 [팁] 어시스터PS 2015/09/09 108
27 [컨텐츠 레이아웃] 국립국악원 파일 2015/09/07 95
26 [정보] 레이아웃의 형태 [일반 / 특색 / 실험] (이미숙, 2012.09.16.) 파일 2015/08/30 165
현재글 [정보] 웹사이트의 흰색 배경이 파일 2015/05/06 278
24 [정보] 포털사이트의 인덱스 레이아웃의 넓이 2015/02/22 362
23 [디자인] 2014년 2월 5일 눈여겨 보는 디자인 2014/02/15 1777
22 [XE 레이아웃] 비밀글 이지샵 레이아웃 2014/02/04 2
21 [컨텐츠 레이아웃] 일기장 스킨 디자인 파일 2014/01/29 1991
20 [컨텐츠 레이아웃] 2013년 11월 다음 뷰와 네이트 컨텐츠 레이아웃 파일 2013/11/18 2432
19 [디자인] 웹디자이너를 위한 스케치북 Sneakpeek 2013/10/22 2619

해시태그 디렉터리