웹 디자인 비평 # 18 : 두 개의 챕터
매주 새로운 웹 사이트를보고 디자인을 분석합니다. 우리는 잘 수행 된 영역과 일부 작업을 수행 할 수있는 영역을 모두 지적 할 것입니다. 마지막으로 피드백을 제공하여 마무리합니다.
오늘의 사이트는 볼티모어 기반의 웹 디자인 및 마케팅 회사 인 Two Chaps Branding입니다.
디자인 리소스 살펴보기
향후 Design Critique에 웹 사이트를 제출하려면 몇 분이면됩니다. 귀사의 설계를 평가하는 데 24 달러의 비용이 청구됩니다. 컨설턴트가 귀하의 사이트를 살펴 보는 데 드는 비용보다 훨씬 저렴합니다! 자세한 내용은 여기를 참조하십시오.
두 개의 챕터에 관하여
“여기에서 TwoChaps는 브랜드가 단순한 로고 이상이며 최신 업계 유행어가 실린 사명 선언이라고 생각합니다. 우리는 브랜드가 회사, 고객 및 고객과의 과거, 현재 및 미래의 관계를 정의하는 스토리라고 생각합니다. 우리는 브랜드가 당신이 인식하기를 원하는 방식 이상이며, 실제로 당신이 인식하는 방식이라고 생각합니다. 무시하거나 양육하든 – 브랜드가 당신을 정의합니다.”
Two Chaps 홈페이지는 다음과 같습니다.
전반적인 디자인은 매우 매력적입니다. 오래된 테마는 색상, 유형 및 질감에서 잘 실행되며 레이아웃은 간단하지만 강력합니다. 명확하게 정의 된 열을 포함하는 대부분의 내용으로 정렬이 매우 엄격합니다.
디자인의 일부 측면을 분석하고 좀 더 심도있게 살펴 보겠습니다.
로고
나는 그들이 로고에서 한 일을 정말 좋아합니다. 중산모와 콧수염은“Two Chaps”이름에 대한 완벽한 시각적 메시지입니다. 마찬가지로, 강력한 세리프체는 디자이너가 촬영하는 기간 동안 사용됩니다.
로고가 얼마나 좋은지 좋아하지만 콧수염이 더 강한 지 궁금 할 것입니다. 현재 로고에는 두 개의 경쟁 그래픽 요소가 있으며이를 단일로 줄이면 조각이 향상 될 수 있습니다. 나는 콧수염, 글자 및 모자가 함께 얼굴을 제안한다는 것을 알고 있지만, 여전히 콧수염과 모자가있는 글자처럼 읽습니다.
기본 그래픽으로 볼링을 로고의 나머지 부분과 독립적으로 독립형 요소로 사용할 수 있습니다.
헤드 라인
제목은 사이트에서 내가 가장 좋아하는 것입니다. 오른쪽에 표시되지만 크기와 굵기 때문에 페이지가로드 될 때 가장 먼저 보는 것 중 하나입니다.
문자 크기는 사용자의주의를 끌고 빠르게 읽을 수있는 응집력있는 단위를 만들도록 완벽하게 구성되었습니다. 덜 중요한 단어 (들 중)가 더 중요한 단어를위한 공간을 제공하기 위해 어떻게 크기가 줄 었는지 주목하십시오 (진술).
이 그래픽은 라이브 형식이 아니라 그래픽이므로 여기에서 텍스트 커닝에 시간을 할애하는 것이 좋습니다. "True"의 "T"및 "r"과 같은 일부 문자는 이상하게 멀리 떨어져 있고 다른 문자는 약간 뭉개져 있습니다.
디자인 할 때이 단계를 잊어 버리는 것은 쉽지만, 타이포그래피가 디자인의 주요 기능이 될 경우 항상 글자 간격이 가능한 한 완벽해야합니다.
이미지 썸네일
홈페이지의 이미지는 훌륭한 국경 처리되었습니다. 섀도 잉은 실제로 세 개의 개별 레벨을 생성하므로 이미지에 깊이를 더해줍니다.
기본적으로 이미지는 그레이 스케일이지만 이미지 위로 마우스를 가져 가면 1 ~ 2 픽셀 (고의?)이 드롭 다운되고 풀 컬러가됩니다. 처음으로 사이트를 체크 아웃하는 경우 재미있는 재미있는 효과입니다.
사이드 바
보시다시피, 사이드 바는 로고, 탐색, 몇 개의 소셜 버튼 및 일부 법적 정보가 들어있는 세로 리본입니다. 라이브 사이트를 확인하면 사이트가 스크롤 될 때 바닥 글이 편리하게 고정되어 있음을 알 수 있습니다. 이를 통해 사이트 어디에 있든 페이지를 쉽게 변경할 수 있습니다.
나는 빨강의 대담함과 나머지 디자인에서 얼마나 두드러 지는지를 좋아합니다. 또한 Facebook 및 Behance 버튼에 사용되는 처리 및 색상이 마음에 듭니다. “Facebook”의 글자는 그렇게 단단한 그림자를 가지고 있지만“Behance”의 글자는 그렇지 않은 것이 조금 이상합니다.
사이드 바의 탐색 섹션은 머리글을 클릭 할 때 부드러운 애니메이션으로 확장 및 축소됩니다. 여기서 핵심은 JavaScript가 비활성화 된 상태에서 모든 항목에 여전히 액세스 할 수 있다는 것입니다. 메뉴는 모두 열린 위치에 표시되며 아무것도 빠진 것을 알 수 없습니다.
추가 마일을 사용하고 작은 시각적 치료를 지원하는 브라우저와 그렇지 않은 브라우저를 지원하는 브라우저를 사용하는 것이 좋습니다.
보행인
바닥 글은 회사를 고용하기위한 행동을 불러 일으키고 세 주제에 대한 또 다른 멋진 디자인의 스핀입니다.
상단과 하단의 선은 페이지 터치가있는 작은 "여기를 클릭하십시오"기호뿐만 아니라 멋진 터치입니다. 이 섹션은 "브랜드"라는 단어가 작은 텍스트에 대해 너무 많은 시간을 보이므로 일부 SEO "전문가"가 그것을 이해 한 것처럼 보입니다.
가독성
위에서 언급했듯이 전반적으로 사이트 디자인이 정말 좋습니다. 독특하고 대담하고 매력적이며 기능적입니다. 그러나 나는 텍스트 때문에 사이트의 유용성이 어려움을 겪고 있다고 생각합니다. “Our Story”페이지에서 아래 이미지를 확인하십시오.
보시다시피, 질감이 적용된 배경에서 큰 컬러 헤드 라인이나 흰색 본문은 읽을 수 없습니다. 텍스트가 스크롤 될 때 배경이 그대로 유지되어 사이트를 탐색 할 때 매우 복잡하고 번잡 한 시각적 효과가 발생하기 때문에 상황이 악화됩니다.
결국, 좋은 질감 배경은 좋은 것보다 더 열심히 일하고 있습니다. 불투명도를 줄이거 나 더 간단한 것을 선호하여 완전히 긁는 것으로 실험하는 것이 좋습니다. 듣기에는 좋지 않을 수 있지만 전체 사이트에서 텍스트의 가독성을 높이면 노력할 가치가 있습니다.
네 차례 야!
이제 내 의견을 읽었으며 디자이너에게 추가 조언을 제공하여 의견을 제시하고 도움을주었습니다. 디자인에 대해 좋은 점과 더 강하다고 생각되는 점을 알려주십시오. 항상 그렇듯이 사이트의 디자이너를 존중하고 가혹한 모욕이없는 명확한 건설적인 조언을 제공하십시오.
자신의 사이트를 비평하는 데 관심이 있습니까? 자세한 내용은 여기를 참조하십시오.
