웹 디자인 비평 # 4 : Anthem Design Group
매주 새로운 웹 사이트를보고 디자인을 분석합니다. 우리는 잘 수행 된 영역과 일부 작업을 사용할 수있는 영역을 모두 지적 할 것입니다. 마지막으로 피드백을 제공하여 마무리합니다.
오늘의 사이트는 Anthem Design Group입니다. Anthem은 미국 조지아 애틀랜타에 위치한 소규모의 수상 경력에 빛나는 독창적 인 대화 형 디자인 대행사입니다.
향후 Design Critique에 웹 사이트를 제출하려면 몇 분이면됩니다. 귀사의 설계를 평가하는 데 24 달러의 비용이 청구됩니다. 컨설턴트가 귀하의 사이트를 살펴 보는 데 드는 비용보다 훨씬 저렴합니다! 자세한 내용은 여기를 참조하십시오.
축가
“우리는 멋진 웹 사이트, 앱, 게임 및 예술 제작을 좋아하는 최고 수준의 표준을 갖춘 친근하고 열심히 일하는 창의적이고 기술적 인 사람들입니다. 우리의 작품은 수상 경력에 빛나는 매력적이고 정교하게 제작되었습니다. 우리는 모든 규모의 비즈니스와 함께 일하는 것을 좋아하며 다양하고 환상적인 고객 그룹을 자랑스럽게 생각합니다.”
웹 사이트의 홈페이지는 다음과 같습니다.
3 개의 기본 열과 사이드 바 (기본적으로 4 개의 열)를 포함하는 상당히 강력한 디자인입니다. 큰 이미지 위로 가기는 기본 페이딩 전환이있는 이미지 슬라이더입니다.
이 디자인에 정말 좋은 몇 가지 사항을 살펴 보겠습니다.
쉬운 탐색
단일 페이지에 대해서는 많은 것들이 진행되고 있지만 대부분 논리적으로 정리되어 정렬하기 쉽습니다. 홈페이지는 사이트에서 찾을 수있는 모든 것에 대한 훌륭한 개요로 작용하는 것 같습니다. 탐색을 통해 액세스 할 수있는 여러 페이지가 여기에 약간의 내용으로 표시됩니다.
큰 사이트의 홈페이지를 채우는 방법에 대해 실마리가 없으면 언제든지 다른 사이트의 게이트웨이 역할을해야합니다. 여기에 나머지 사이트의 바이트 크기 미리보기를 삽입하면 사용자가 제공하는 내용에 빠르게 익숙해지고 특정 콘텐츠를 찾는 프로세스를 지원하는 데 도움이됩니다.
줄을 끊기
이 사이트에는 모든 것을 깨끗하고 체계적으로 유지하는 데 적합한 상당히 엄격한 정렬 및 격리 장치가 있습니다. 그러나 우리는 바닥 글에서 이와 같은 디자인을 가져 와서 몇 곳에서 깰 수있는 것이 종종 좋습니다.
여기에는 바닥 글과 내용 분리에 의해 설정되는 가혹한 선을 위반하는 상자에 배치 된 로고와 연락처 정보가 표시됩니다. 페이지 상단에 디자인의 강성을 완화하기 위해이 아이디어를 선택하고 싶습니다.
개선 할 영역
이제 비평에 대해 알아 보겠습니다. 다음은 디자인과 관련하여 개인적으로 해결해야 할 몇 가지 문제입니다.
인터렉티브?
Anthem의 기능과 관련하여 페이지의 여러 위치에서 "대화 형"이라는 단어가 표시되지만 이미지 슬라이더를 제외하면 사이트는 대화식으로 느껴지지 않습니다. 내가 겪고있는 주요 영역 중 하나는 링크 호버 효과 또는 그 부족입니다.
탐색에서 호버가 아닌 상태와 호버 상태의 링크 색상 차이가 너무 미묘하여 색맹 사용자가 작은 텍스트를 눈치 채지 못할 수도 있습니다. 또한 사이드 바의 링크를 제외하고 페이지의 거의 모든 링크는 호버링 효과가 전혀 없습니다. 브라우저의 커서가 링크에 대해 자동으로 변경되지 않은 경우 사용자는 페이지에 존재하는 것을 알지 못할 수도 있습니다.
다시, 이것은 "대화 형"이라는 개념과 밀접한 관련이 있습니다. 페이지 전체의 다양한 지점에서 상호 작용으로 변경되는 항목을 추가하면 사이트가 훨씬 활기차고 활성화됩니다. 이러한 요소는 사용자에게 소리를 지르지 않아도되지만 숨겨져서는 안됩니다.
링크 추가
현재의 연결을 현실화하는 것과 같은 맥락에서 몇 가지 더 추가해야한다고 생각합니다. 앞에서 말했듯이 홈페이지 콘텐츠와 내비게이션이 어떻게 연결되어 있는지 좋아합니다. 예를 들어, 탐색에는 서비스 링크가 있고 페이지에는 서비스 섹션이 있습니다. 그러나 내용 섹션에 "서비스 및 기능"이라는 텍스트는 "서비스 및 기능"페이지에 대한 링크로 사용할 수 없습니다.
항상 사용자에게 우스운 일을 만들기 위해 노력하십시오. 원하는 장소와 일치하는 헤드 라인이 표시되면 해당 링크를 클릭하여 올바른 링크를 찾아 다니지 않고 해당 위치로 이동할 수 있어야합니다.
간격
페이지에는 각각 고유 한 헤더가있는 3 개의 열로 콘텐츠를 분할하는 두 곳이 있습니다. 문제는 헤더와 열이 너무 멀리 떨어져 있다는 것입니다.
사용자가이 두 영역을 단일 단위로 해석해야한다는 것을 즉시 알 수 있도록 여기에서 간격의 절반을 제거하는 것이 좋습니다.
정렬 및 오버 플로우
작은 항목이 제대로 정렬되지 않는 문제를 발견하는 데는 두 가지 주요 영역이 있습니다. 첫 번째는 사이드 바에 있습니다. 여기의 Twitter 피드가 격리 상자에서 넘쳐 나오는 것 같습니다.
두 번째는 바닥 글의 법적 사본 및 탐색 링크입니다. 그들은 실제로 어떤 정렬도 공유하지 않으며 공간에서 무작위로 떠 다니는 것처럼 보입니다. 왼쪽 정렬을 강하게하고 왼쪽의 로고 영역 근처로 밀어 넣는 것이 좋습니다.
네 차례 야!
이제 내 의견을 읽었으며 디자이너에게 추가 조언을 제공하여 의견을 제시하고 도움을주었습니다. 디자인에 대해 좋은 점과 더 강하다고 생각되는 점을 알려주십시오. 항상 그렇듯이 사이트의 디자이너를 존중하고 가혹한 모욕이없는 명확한 건설적인 조언을 제공하십시오.
자신의 사이트를 비평하는 데 관심이 있습니까? 자세한 내용은 여기를 참조하십시오.
