2011. 4. 19. 15:49
가상공간에서 웹 사이트와 고객과의 관계는 오프라인 세계의 백화점이나 책과 같은 인쇄물하고는 다르다. 오프라인 세계에 익숙한 고객들이 웹 사이트라는 가상공간에서 별 불편을 느끼지 않고 물건을 사고 컨텐트를 찾아 읽을 수 있도록 하자는 것이 유저빌리티의 핵심이다. 말하자면 웹사이트 이용자들이 가상공간에서 느끼는 보이지 않는 장벽을 낮추자는 것이다.

유저빌리티에서의 성과는 하나의 웹사이트 안에서 수 백가지에 이르는 크고 작은 문제점들을 하나씩 찾아서 고쳐나가야 이룩할 수 있다. 유저빌리티의 문제점은 아주 작고 사소한 경우가 많다. 그 동안 진정 이용자의 입장에서 바라보지 않았기 때문에 발견할 수 없었던 경우가 대부분이다. 그래서 유저빌리티는 작은 노력으로 커다란 효과를 볼 수 있다는 잇점을 갖고 있다.


관행을 지켜라.
인터넷의 역사가 길어지면서 웹사이트 디자인은 어느 정도 굳어진 정형을 갖게 됐다. 웹사이트의 로고나 이름을 일정한 위치에 두거나, 왼쪽에 세로로 길게 네비게이션 바를 두는 것 등이 그 예다. 유저빌리티 전문가인 제이콥 닐슨은 "이용자들이 당신의 웹사이트가 아닌 다른 웹사이트들에서 대부분의 시간을 보낸다는 점을 명심하라"며 "이용자들은 당신의 웹사이트에 찾아오기 전에 이미 웹사이트가 어떻게 움직일 것인가에 대한 일정한 기대를 갖고 있다"고 강조한다.

`마이크로 컨텐트'를 직설적으로 써라.
마이크로 컨텐트는 웹페이지의 타이틀, 컨텐트 페이지의 헤드라인이나 중간 제목, 링크의 이름, 이미지나 링크의 ALT 값, 간단한 안내문 등 웹페이지 곳곳에서 보이는 20글자 이하의 짧은 글들을 말한다. 마이크로 컨텐트는 그 뒤에 따라오는 내용이나 페이지가 무엇에 관한 것인지를 이용자들이 한 눈에 알아 볼 수 있도록 씌어져야 한다. 키워드를 담은 직설적인 표현이 제격이다.

한 눈에 훑어 볼 수 있도록 하라.
웹 페이지를 읽는 독자들은 한 줄 한 줄 꼼꼼히 읽지 않는다. 읽기 보다는 훑어본다고 하는 편이 더 정확하다. 이런 독자들의 시선을 붙잡기 위해서는 페이지를 여러 토막으로 나눠 곳곳에 중간 제목을 달거나 중간 제목들을 한 군데 모아 전체 내용을 한 눈에 가늠할 수 있도록 해줘야 한다.

이미지는 손톱 크기부터 시작하라.
이미지를 다룰 때는 손톱 크기의 샘플부터 본래 크기의 이미지로 찾아갈 수 있게 하자. 손톱 크기 샘플을 만들 때는 실제 이미지를 단순히 가로 세로 사이즈만 조절하는 데 그치지 말고, 크기와 함께 해상도를 떨어뜨려 독자들의 다운로드 시간을 최소화해 줘야 한다. 샘플과 함께 제 사이즈 이미지의 파일 크기와 파일 형태를 미리 알려주는 것도 잊지 말아야 한다.

핵심정보는 가로 세로 4대3 비율 안에 넣어라.
컴퓨터 모니터의 가로 세로 크기는 4대 3의 비율을 유지한다. 독자들에게 보여줄 핵심 정보나 웹사이트 브라우징에 결정적인 요소들은 이 비율을 벗어나는 곳에 위치해서는 안된다. 이 중에서도 거의 대부분의 퍼스널 컴퓨터에서 스크롤링 없이 볼 수 있는 가로 640, 세로 480 픽셀 이내의 화면은 그야말로 황금의 자리다.

Posted by design-h
2011. 4. 19. 15:47





최근의 웹디자인 동향을 잘 살피면 이미지를 많이 사용하지만, 그중에서도 PC 바탕에 깔려 있을 법한 대형 이미지를 많이 활용하는 추세인 것 같습니다.
다양한 이미지의 합성을 통한 화면 구현한 홈페이지들도 있지만, 있는 그대로의 이미지를 활용하는 홈페이지들도 많이 있더군요.
자연을 배경으로 표현한 사이트, 일러스트 이미지를 활용한 사이트, 이미지 합성을 통해 구현한 화면들... 참 다양하더군요.
아래 소개하는 웹사이트들은 해외 사이트 중에서도 대형 배경이미지를 활용한 사이트들 중에서 40여개 사이트들만 소개하고 있습니다.


웹디자이너에게 조금은 참고가 될 만한 사이트이니 한번쯤 살펴 보는 것도 나쁠 것 같지 않습니다.


01. Morphix Design (http://www.morphix.si/)



02. Stephan Siegrist (
http://stephan-siegrist.ch/de/home)




03. 8th Continent (
http://www.8thcontinent.com/)



04. Hotel Rottnest (
http://www.hotelrottnest.com.au/)




05. Compal International (
http://www.compal-international.com/)




06. Ecoki (
http://ecoki.com/iphone/)



07. Solace Beeswax (
http://www.solacebeeswax.com/)




08. Christina Lauer (
http://www.christinalauer.net/)




09. Old Loft (
http://oldloft.com/)



10. Raven at Lora Bay (
http://www.ravenatlorabay.com/)



11. MacAllan Ridge (
http://macallanridge.com/)




12. Grand Canyon Skywalk (
http://www.grandcanyonskywalk.com/)



13. Yes I am Precious (
http://www.yesiamprecious.com/)




14. Believe In (
http://believein.co.uk/)



15. Image Now (
http://www.imagenow.ie/)



16. Aussie Bbq Legends (
http://www.aussiebbqlegends.com/)




17. Sayonara (
http://www.misayonara.com/)



18. Florida Flourish (
http://www.floridaflourish.com/)



19. IL Frutteto (
http://www.campingilfrutteto.it/)




20. Sur La Piste – Carlos (
http://carlos.canalplus.fr/)



21. Mavic (
http://www.mavic.com/)




22. Airwalk (
http://airwalk.com/)



23. BVD (
http://www.bvd.se/)



24. Because Studio (
http://www.becausestudio.co.uk/)




25. Derek Welsh (
http://derekwelsh.co.uk/)



26. Benito’s Hat (
http://www.benitos-hat.com/)



27. Gazelle Touch (
http://www.gazelletouch.com/)




28. Hangar Door (
http://www.hangardoor.com/)



29. Innocent Village Fete (
http://www.innocentvillagefete.com/)



30. Peter Clarke (
http://peterclarke.com.au/)



31. Cayena (
http://cayena.es/)




32. Lipton Green Mint (
http://www.liptongreenmint.ro/)



33. Electric Current (
http://www.electricurrent.com/)



34. Immersive Garden (
http://www.immersive-garden.com/)




35. Mozi Design Studio (
http://www.moziweb.com/)




36. Signal 7 (
http://signal7.de/)



37. Caramel Ink (
http://www.caramelink.com/)




38. Digimurai (
http://digimurai.com/)




39. Food Inc. Movie (
http://foodincmovie.com/)



40. Thorsten Van Elten (
http://www.thorstenvanelten.com/)


Posted by design-h
2011. 4. 19. 15:36

1. Flash 사용은 가급적 피할 것.

인터랙티브하고 역동적인 사이트 디자인에 있어 플래시 사용은 지극히 당연한 것인지도 모릅니다. 그러나 만약 회사가 사이트 유지 및 디자인에 소규모의 꽉 짜여진 예산을 준수해야 하는 상황이라면 플래시 애니메이션 및 비디오 활용을 제외하는 것이 좋습니다.

대신에 HTML5, Javascript와 CSS3를 활용하는 센스를 발휘하는 것이 더 나을 수도 있으며 모바일 환경에 대응하기가 수월해 질 수 있습니다. 참고로 Flash를 완전히 배제하기 보다는 가급적 효과적이고 상황에 따라 유연하게 적용하는 테크닉을 발휘해야 한다는 것은 잊지 말아야 합니다.

2. 폰트(글꼴)의 사용

사이트 디자인에서 타이포그래피는 미려하고 효율성 높은 사이트를 디자인하는데 매우 중요한 요소이지만 사이트 디자인의 결정적인 핵심사항은 아니라고 할 수 있습니다.

그러나 고객에게 보다 나은 기업의 메시지와 가치를 전달하는데 있어 타이포그래피는 큰 역할을 하게 됨으로 좋은 맞춤형 폰트를 사용하는 것은 아주 바람직한 부분입니다. 여러분의 사이트에 어떤 폰트를 적용하면 좋을지 충분히 고려해 보는 것을 제안하고 있습니다.

3. 모바일 호환성(Mobile Compatibility)

스마트폰의 출시 이후, 모바일을 통한 서핑은 세계의 수많은 사용자들이 이용하는 하나의 일상이 되었습니다. 마치 하나의 새로운 세상을 만난 것과 같습니다. 오늘도 모바일에 접속해 머무르는 사용자들이 수없이 많다는 사실을 간과해서는 안됩니다.

최근 들어 크고 작은 모든 기업과 금융사들이 많은 사용자들에게 한걸음 더 다가갈 수 있도록 발빠른 준비를 서두르고 있는 것도 그런 까닭입니다. 어떠한 모바일 버전과도 원만하게 호환되는 사이트 디자인을 제공한다는 것은 고객에게 최대의 혜택을 제공하게 되는 것이고 그들로 하여금 기업의 마인드를 높게 평가하게 하는 좋은 요인이 되기도 합니다.

4. 소셜 미디어(Social Media) 활용

만약 잠재고객과 폭넓은 접촉을 기대하고 그들을 액티비티 고객으로 활용하려고 한다면 SNS는 더할 나위 없이 유용한 솔루션이 될 것입니다. 트위터(twitter)와 페이스북(facebook) 등과 같은 소셜미디어는 브랜드 입지와 사이트 트래픽을 창출하는데 많은 도움이 되고 있어 인터렉션과 커뮤니케이션의 최근 트렌드가 되고 있습니다.

5. 미래지향적 감동을 추가

중소기업으로서, 사이트 디자인에 모든 첨단 트렌드를 수용하기란 벅찬 일이고 감당할 수 없을 수도 있습니다. 하지만 사이트에  기술 개발의 최고 혜택을 누를 수 있도록 일부라도 CSS3 또는 HTML5를 도입, 미래지향적 감동을 전달 할 수 있도록 하는 것을 제안하고 있습니다.

Posted by design-h