웹 디자인 비평 # 40 : FanExtra
40 번째 디자인 비평에 오신 것을 환영합니다! 매주 새로운 웹 사이트를보고 디자인을 분석합니다. 우리는 일부 작업을 수행 할 수있는 영역 외에 잘 수행 된 영역을 모두 지적 할 것입니다. 마지막으로 피드백을 제공하여 마무리합니다.
오늘날의 사이트는 디자이너를위한 환상적인 리소스 사이트 인 FanExtra입니다.
Envato Elements 살펴보기
향후 Design Critique에 웹 사이트를 제출하려면 몇 분이면됩니다. 귀사의 설계를 평가하는 데 34 달러가 청구됩니다. 컨설턴트가 귀하의 사이트를 살펴 보는 데 드는 비용보다 훨씬 저렴합니다! 자세한 내용은 여기를 참조하십시오.
FanExtra 소개
“이 모든 것은 2 년 전 긴 여름과 디자인에 대한 열정으로 시작되었습니다. 당시에 게시 된 일부 Photoshop 자습서를 즐기고 나 자신의 몇 가지를 작성하기로 결정했습니다. 목적에 맞게 블로그 (PSDFAN.com)를 설정하고이를 내 창조적 인 아울렛으로 사용하기 시작했습니다. 성장하는 커뮤니티에 더 많은 것을 제공하고 PSDFAN을 더 큰 것으로 발전시키고 싶었습니다. FanExtra에 대한 아이디어가 곧 탄생했습니다! FanExtra 네트워크는 전 세계의 디자이너들이 함께 모여 아이디어와 창의성을 탐색 할 수있는 공간입니다. 포럼에서 토론에 참여하거나 FanExtra 회원 프로그램을 통해 학습을 더욱 진전시킬 수 있습니다.”
다음은 홈페이지의 스크린 샷입니다.
초기 인상
FanExtra는 아직 디자인 비평의 가장 흥미로운 사례 중 하나입니다. 그 이유는 실제로 실제로는 매력적인 페이지이지만 권장하는 페이지는 거의 완전히 다시 생각하기 때문입니다.
로고에서 썸네일에 이르기까지 페이지의 모든 섹션이 멋지게 보입니다. 그러나 페이지 전체를 살펴볼 때 가장 큰 문제 외에 각 섹션의 흐름에 일부 실제 문제가 있으며, 이는 기본 메시지의 의사 소통의 명확성입니다.
이 문제는 매우 일반적이며 웹 디자인에서 매우 더러운 단어 인 가정으로 인해 발생합니다. 여기서 디자이너는 프로젝트에 가깝기 때문에 방문자가 무슨 일이 일어나고 있는지 이해하지 못할 수도 있습니다. 이 페이지를 찾는 방문자는 "FanExtra"가 무엇인지 알 것입니다. 여기에서는 반드시 가정해서는 안됩니다.
커뮤니케이션
웹 페이지에 방문하면 패스트 푸드 식당에서 메뉴 판을 분석 할 때와 같은 방식으로 헤더 영역을 본능적으로 분석합니다. 가능한 질문은 다음과 같습니다. 비용은 얼마입니까? 그들은 내 돈을 위해 무엇을 줄 것인가? 그들은 콜라 또는 펩시 제품을 제공합니까? 좋아, 아마도 그 마지막 질문은 여기에 적용되지 않을 것입니다.
제 요점은이 사이트의 헤더를 볼 때 다음과 같은 중요한 질문을 모두 다루지 않는 것입니다.
우리는 어떤 종류의 가입을위한 큰 필드와 함께 사이트 (FanExtra)라는 것을 봅니다. 네트워크에 가입했다는 의미입니까? 이것이 무료 서비스입니까? 오른쪽에는“튜토리얼 (tutorials)”에서 힌트를 얻어 올바른 길을 찾은 다음“텍스처”와“벡터”와 같은 단어가 있습니다.
내가 디자이너라면, 이 시점에서 아마도 어떤 일이 벌어지고 있는지 알았을 것입니다. 그러나 이것이 실제로 목표입니까? 방문자가 단서를 찾아서 사이트의 내용을 해석해야합니까?
미스터리가 드러난다
우리가 웹 사이트의 중간으로 내려 가면 신비가 드러납니다.
이제 FanExtra는 한 달에 $ 9의 멤버십을 제공하는 "멋진 튜토리얼 사이트 네트워크"임을 알 수 있습니다. 이것은 페이지에서 가장 중요한 커뮤니케이션 부분이지만 페이지의 절반 아래에 있습니다. 사용자가 가장 먼저 보게됩니다.
사실, 나는이 메시지가 더 분명하다고 생각합니다. “멋진 튜토리얼 사이트”라는 문구는 외부인의 관점에서 생각하면 여전히 모호합니다. “창의적인 전문가를위한 훌륭한 튜토리얼 사이트” 와 같은 것이이 진술을 훨씬 더 진전시킬 것입니다. 이 페이지를 찾으면이 사이트가 나와 같은 사람들을위한 것임을 알리는 멋진 인사말을 보게됩니다.
시각적 대비 대 시각적 혼란
메시징에서 볼 수있는 또 다른 문제는 시각적 관점에서 어떻게 구성되는지입니다. 현재 의사 소통의 상태를 살펴 보자 :
여기서 우리는 각각 다른 색상의 텍스트와 대담함과 크기 모두에서 동일한 글꼴의 약간의 변형을 사용하는 세 줄의 스택을 봅니다. 나는 디자인과 대조적으로 전체 기사를 쓸 수 있고 쓸 수는 있지만, 디자인 저자 인 로빈 윌리엄스 (Robin Williams)의 충고에 따르면“사악하지 말아라”는 것이 가장 좋습니다. 이를 통해 그녀는 대비를 효과적으로 사용하기 위해 요소가 실제로 서로 크게 떨어져 있어야합니다. 그렇지 않으면 결과가 단순히 시각적 혼란입니다.
인기있는 다른 디자인 멤버십 프로그램 인 Think Vitamin이 어떻게 자신의 페이지에서 주요 메시지를 구성하는지 확인하십시오.
여기서 우리는 헤드 라인과 서브 헤드 사이의 거대하고 과장된 대조를 볼 수 있습니다. 결과는 완벽하게 읽는 아름답고 명확한 의사 소통입니다. 페이지를 탐색하는 사람들은 거의 우연히 헤드 라인을 읽으며, 더 관심이 있다면 서브 헤드를 읽는 데 시간이 걸릴 수 있습니다.
특징
페이지는 왼쪽을 따라 내려 오는 방대한 총알 점으로 끝납니다. 이것은 공간을 상당히 어색하게 사용하며 오른쪽에 불편한 간격을 만듭니다.
이를위한 빠른 수정은 간단히 글 머리 기호를 두 개의 개별 스택으로 나누는 것입니다.
이것은 궁극적으로 반창고이며 페이지가 실제로 일부 주요 수술을 사용할 수 있다고 생각합니다. 다음 섹션에서 간단히 설명하겠습니다.
나의“큰 그림”추천
솔직히, 이 사이트에서 깨지지 않은 이중 컬럼 설정이 작동하지 않는다고 생각합니다. 너무 엄격해서 구조적인 레이아웃의 목표 인 의사 소통을 촉진하기보다는 의사 소통의 자연스러운 흐름을 방해합니다.
이 레이아웃을 완전히 던지는 것이 좋습니다. 먼저 견고한 이중 칼럼 구조를 버립니다. 그런 다음 기본 통신을 페이지 맨 위로 이동하십시오. 전체 페이지 너비에 걸쳐있는 큰 "기능"상자를 만들고 나중에 세분화 한 내용 중 일부 (140 개 이상의 파일, 40 개의 벡터 등)를 강조 표시합니다. 헤드 라인에서 강한 대비, 수정처럼 맑은 표현 및 타겟팅, 최대 2 가지 색상을 함께 사용하십시오.
마지막으로, 사이트가 무엇인지, 누가 누구인지, 포함하는 것이 무엇인지 완벽하게 이해하는이 멋진 헤더 영역을 만든 후에는 다른 정보를 2 열 또는 3 열 형식으로 구성하는 데 집중할 수 있습니다.
네 차례 야!
이제 내 의견을 읽었으며 디자이너에게 추가 조언을 제공하여 의견을 제시하고 도움을주었습니다. 디자인에 대해 좋은 점과 더 강하다고 생각되는 점을 알려주십시오. 항상 그렇듯이 사이트의 디자이너를 존중하고 가혹한 모욕이없는 명확한 건설적인 조언을 제공하십시오.
