웹 디자인 비평 # 71 : 가장 귀여운 발

/2018-04-04 00:54:06/
Tionne
/비평/

매주 새로운 웹 사이트를보고 디자인을 분석합니다. 우리는 일부 작업을 수행 할 수있는 영역 외에 잘 수행 된 영역을 모두 지적 할 것입니다. 마지막으로 피드백을 제공하여 마무리합니다.

오늘의 사이트는 전세계 동물 사진 갤러리 인 Cutest Paw입니다. 우리가 어떻게 생각하는지 봅시다!

Envato Elements 살펴보기

향후 Design Critique에 웹 사이트를 제출하려면 몇 분이면됩니다. 귀사의 설계를 평가하는 데 49 달러의 비용이 청구됩니다. 컨설턴트가 귀하의 사이트를 살펴 보는 데 드는 비용보다 훨씬 저렴합니다! 자세한 내용은 여기를 참조하십시오.

Cutest Paw 소개

이 사이트는 사이트 비평을 유도하는 가장 "awwww"의 상을받습니다. 이 사이트는 말 그대로 귀엽고 재미있는 동물 사진의 끝이 아닙니다. 우리는 어떻게 그런 것을 보며 잠자는 강아지에게 방해받지 않고 건설적인 피드백을 줄 수 있습니까? 다행히도, 우리는 100 %가 크리에이티브가 웹 디자인 절단을 개선하도록 돕고 있습니다. 강아지를 물러서, 할 일이있어

다음은 홈페이지의 스크린 샷입니다.

첫 인상

디자인을 평가할 때마다 미학을 넘어 작품의 목적이 무엇인지, 완성 된 디자인이 그 목표를 충족시키는 지 여부를 묻습니다. 사용자의 목표는 간단합니다. 많은 사진을 보는 것입니다. Cutest Paw 사이트는 그 목적을 잘 수행하는 것처럼 보입니다. 레이아웃은 공간을 최대한 활용하도록 최적화되었으며 중요하지 않은 불필요한 안구 사탕에 너무 많은 픽셀을 낭비하지 않습니다.

지난주의 디자인 비평과 마찬가지로, 이것은 매우 간단합니다. Cutest Paw 웹 사이트는 매우 단순하므로 비판 할 것이 많지 않습니다. 그러나 항상 그렇듯이 디자이너가 사이트를 개선하는 데 도움이 될만한 피드백이 있습니다. 뛰어 들어서 시작하자.

나열한 것

이 사이트는 정말 불가능한 레이아웃을 설정하기 쉬운 멋진 레이아웃 플러그인 인 jQuery Masonry의 유용한 예입니다. Masonry의 장점은 콘텐츠를 세로로 배포하기 전에 가로 레이아웃을 설정하는 CSS 동작을 무시한다는 것입니다. 대신 벽돌이 쌓이는 것과 비슷한 멋지고 단단한 수직 스택을 만듭니다.

이 경우 결과는 위에서 언급 한 것처럼 작은 공간에서 볼 수있는 사진 수를 최대화하는 엄청나게 단단한 이미지 격자입니다. 이 사이트는 또한 페이지를 아래로 이동할 때 내용을 계속로드하는 무한 스크롤 기술을 사용합니다.

Pinterest는 최근 석조 스타일의 레이아웃과 무한 스크롤의 조합을 매우 인기있게 만들었습니다.이 사이트를 사용할 때는 생각하지 않아도됩니다. 이 두 가지 기술의 조합으로 전례없는 브라우징이 쉬워집니다. 이에 비해 페이지 매김에는 사용자가 많은 노력을 기울여야합니다. 여기 당신은 당신이 볼 수있는 모든 것을 보거나 다른 것으로 넘어 가기로 결정할 때까지 스크롤하고 스크롤합니다.

사이드 바

내용이 계속 스크롤되므로 탐색이 다소 고정되어 있어야합니다. Pinterest는 사이트 상단을 따라 막대를 사용하며, Cutest Paw는 자체적으로 진행되며 페이지를 아래로 이동할 때 빠르게 따라 잡을 수있는 지연된 사이드 바를 구현합니다. 이것은 매우 효과적이지만 처음에는 다소 매력적인 애니메이션이 빠르게 산만 해지고 다소 성가신 것으로 인정됩니다.

사이드 바는 유용성 관점 (애니메이션 제외)에서 훌륭하게 디자인되고 명확하게 구성되어 있습니다. 스크롤을 시작하자마자 바로 여기에서“Back to Top”버튼이 구현되어있는 것을 보는 것이 좋습니다. 그러나 사진 스택의 오른쪽 상단 또는 하단에 일종의 레이 오버가 더 효과적 일 수 있습니다. 이렇게하면 사용자의주의가 집중 될 수있는 위치에 배치되고이를 찾아야 할 필요성이 줄어 듭니다.

테마

페이지의 전체적인 미학은 논의 할 가치가 있습니다. 실제로, 가장 주목할만한 점 중 하나 일 수 있습니다. 한편으로는 페이지가 매력적입니다. 검정색 배경은 매끄럽고 고급스럽고 사진이 정말 두드러집니다. 다른 한편으로, 내가 방금 사용한 배경과 형용사조차도이 웹 사이트에 모두 잘못된 것 같습니다.

"귀여운"및 "퍼지"와 같은 단어는 사람들이 내용을 설명하는 방법이지만 사이트의 시각적 테마는 검은 색 그런지 질감입니다. 이 두 개념은 정반대의 것처럼 보이고 일종의 시각적 불협화음을 만듭니다. 내가 이미 언급했듯이, 나는 단순히 디자인을 눈 사탕처럼 사용하는 것이 아니라 목적과 메시지를 강화하는 데 큰 지지자입니다. 페이지 디자인은 개성을 전달하며, 개성이 잘못되면 프로젝트의 영향과 성공을 줄입니다. 이 디자인에서 개념의 병치 현상은 유치원 수업을 가르치는 300 파운드의 가죽으로 덮인 문신으로 덮인 자전거를 보는 것과 매우 흡사합니다. 두 사람은 단순히 서로 상충되는 것처럼 보입니다.

디자이너는 레이아웃을 정교하게 만들었습니다. 레이아웃은 솔직히 이런 사이트에서 가장 까다로운 부분입니다. 이제 핵심 구조를 유지하면서 사이트의 모습을 완전히 다시 테마로 만들 차례입니다. 더 친근한 색 구성표로 시작하거나 훨씬 덜 초조 한 질감을 사용하십시오. 어쩌면 부드러운 느낌을주는 무언가 일 것입니다 (추악하고 치즈가없는). 훌륭한 자료는 미묘한 패턴을 확인하십시오.

심벌 마크

로고는 이전 스크린 샷에 표시되어 있습니다. 발은 즉각적으로 관련있는 상징입니다. 그러나 로고로서 너무 일반적이라는 사실에 큰 결함이 있습니다. 발이있는 원일 것입니다. 아마도 비 디자이너 100 명 중 99 명이 가장 먼저 발 로고를 만들라는 명령을 내릴 것입니다.

이것의 문제는 당신이 그것을 소유 할 수 없다는 것입니다. 당신이 충분히 열심히 보인다면 아마도 수많은 비즈니스와 웹 사이트에 비슷한 것을 발견 할 수있을 것입니다. 글로벌 브랜드를 구축하려는 것은 아니지만 로고의 요점은 여전히 브랜드를 향한 (작지만 작지만) 식별 할 수있는 무언가를 갖는 것입니다. 우선 순위 목록에서 높지는 않지만 장기적으로 조금 더 독특한 것을 탐색하는 것이 좋습니다.

페이지 제출

이 기사의 시작 부분에서 언급 했듯이이 사이트는 매우 간단하므로 곧 마무리하겠습니다. 마지막으로 논의하고 싶은 것은 사용자가 자신의 사진을 제출할 수있는 페이지입니다.

이 페이지에서 발생하는 문제는 발생하는 일종의 시작 효과입니다. 매우 유사한 웹 페이지에 웹 페이지를 캡처 한 스크린 샷이 있습니다. 기울어 져서 약간 눈에 띄지 만 여전히 불안정한 조합입니다. 여기서 문제는 페이지의 배경과 그림이 본질적으로 동일하므로 이미지가 실제로 크게 구분되지 않는다는 것입니다. 획 효과를보고 더 확대 된보기에서 사진 격자를 자르는 것이 좋습니다. 쉬운 방법으로 공유, 업로드 등의 아이디어를 전달하는 크고 귀여운 동물을 여기에 넣을 수 있습니다.