웹 디자인 비평 # 11 : Scott Block
매주 새로운 웹 사이트를보고 디자인을 분석합니다. 우리는 잘 수행 된 영역과 일부 작업을 수행 할 수있는 영역을 모두 지적 할 것입니다. 마지막으로 피드백을 제공하여 마무리합니다.
오늘의 사이트는 메릴랜드의 웹 디자이너 인 Scott Block의 개인 포트폴리오입니다.
향후 Design Critique에 웹 사이트를 제출하려면 몇 분이면됩니다. 귀사의 설계를 평가하는 데 24 달러의 비용이 청구됩니다. 컨설턴트가 귀하의 사이트를 살펴 보는 데 드는 비용보다 훨씬 저렴합니다! 자세한 내용은 여기를 참조하십시오.
스캇 소개
“저는 볼티모어와 수도에서 차로 가까운 거리에 컬럼비아 메릴랜드에 살고 있습니다. 열두 살 때, 저는 볼티모어 레이븐에 대한 열정과 기술에 대한 관심이 커지면서 레이븐에 대한 사이트를 만들기 시작했습니다. 그 이후로 저는 실력을 다듬어 다양한 개인과 단체를위한 웹 사이트를 만들었습니다. 저는 이제 HTML을 CSS, Javascript, PHP 및 Ajax와 결합하여 아름답고 기능적인 웹 사이트를 만드는 데 능숙합니다. "
사이트 홈페이지는 다음과 같습니다.
여기에는 약간의 잠재력이 있지만이 페이지에서 고칠 수있는 것들이 많이 있습니다. 하나씩 살펴 보자.
색 구성표
Scott 사이트에서 사용 된 색상은 아래와 같이 개별적으로 제거 할 때 상당히 멋진 팔레트를 만듭니다.
그러나 나는 색상의 분포에 열광하지 않습니다. 그것들은 목적과 논리로 적용되는 대신 단순히 변형을 위해 페이지의 임의의 지점에 무작위로 구현되는 것처럼 보입니다. 선택한 각 색상과 그것이 페이지의 나머지 내용과 어떻게 연결되어 있는지 생각해보십시오.
심벌 마크
사이트 왼쪽 상단에있는이 로고는 사용자가 스테이지를 방문 할 때 가장 먼저 보게되는 로고입니다. 이 기회를 통해 첫 인상을 강하게하고 싶습니다. 불행히도, 이 로고가 짧아 진 것 같습니다.
블록 모양이 문자로 어떻게 처리되는지 볼 수 있습니다. 아마도 디자이너의 성과 연결되어 있지만 작동하지 않습니다. SB는 가독성이 상당히 떨어지고 약간 오래되었습니다.
전체 탐색 및 헤더
탐색 영역은 매우 간단합니다. 가로 구분선이있는 일부 텍스트와 현재 페이지를 나타내는 밑줄이 있습니다. 내비게이션을 단순하게 유지하기 위해 모든 것이이 영역이 잘 이루어 졌다고 생각합니다.
탐색에서 링크 위로 마우스를 가져 가면 Scott Block 로고 아래에 아이콘이 나타납니다. 이것은 내가 이런 식으로 실행 된 것을 본 적이없는 깔끔한 효과입니다 (링크에서 멀리 떨어진 호버 효과가 있음).
헤더 영역 전체를 살펴보면 주소 지정을 사용할 수있는 몇 가지 주목할만한 문제가 있습니다. 위에서 말했듯이 아이콘 호버 효과는 깔끔하지만 몇 가지 문제가 있습니다. 탐색에서 링크 위에 마우스를 올리지 않으면 헤더 사본 옆에 왜 아무것도 정렬되지 않은지 궁금해하는 큰 빈 자리가 있습니다.
이를 가능하게하는 방법은 링크 위로 마우스를 가져 가면 다른 아이콘으로 바뀌고 마우스를 놓으면 원래 아이콘으로 되돌아가는 기본 상태로 아이콘을 적용하는 것입니다. 불행히도, 아이콘 호버 효과가 존재하면 로고와 아이콘이 어색한 수직 스택을 만듭니다.
전반적으로이 영역의 부정적인 공간은 완전한 구조 조정을 사용할 수 있습니다. 누락 된 아이콘 문제 외에, 기본 로고는 너무 많은 수직 공간을 차지하고 이상한 틈을 만듭니다.
특색 지어진 지역
나는 디자인의 반복을 좋아하는데, 이 섹션의 각도가 로고의 각도를 어떻게 반영하는지 볼 수 있지만, 실제로 로고에서 작동하지 않기 때문에 여기에도 동일하게 적용됩니다. 제목의 기울어 진 특성은 여기의 색상으로 만들어진 열 십자 패턴뿐만 아니라 약간 이상하게 느껴집니다.
무의식적으로 뇌는 같은 색의 두 항목을 연결하려고하지만 두 영역은 관련이 없습니다.
또한이 영역에는 목적에 맞지 않는 여러 가지 호버 효과가 있습니다. 섹션 위로 마우스를 가져 가면 그림자가 만들어집니다. 웹은 우리가 가리키고있는 것이 클릭 가능한 영역이라는 표시와 같은 활동을 인식하도록 가르쳐주었습니다. 그러나 이러한 영역은 클릭 할 수 없으며 마치 사용자에게 혼란을주는 것처럼 느끼게합니다.
보행인
바닥 글은 매우 간단하지만 다시 정제 할 수 있습니다.
우선, 버튼이 어색한 위치에 있습니다. 디자인 할 때는 항상 공간이 있기 때문에 구멍에 물건을 집어 넣는 것에주의하십시오. 여기에서 텍스트에 의해 강한 왼쪽 정렬이 설정되지만 버튼의 배치에 의해 파괴됩니다.
또한 버튼 호버 애니메이션이 너무 많습니다. 여기에 이미지 스프라이트가 사용되며 두 버튼 상태 사이에 애니메이션이 표시되어 이미지의 한 부분이 다른 슬라이드로 슬라이드 아웃되는 것을 볼 수 있습니다. 처음에 무슨 일이 일어나고 있는지 쉽게 알 수 없으므로 약간 당황합니다.
전반적인 권장 사항
나는 위의 몇 가지 가혹한 비판을 제시했으며 그것을 함께 묶는 것이 최선이라고 생각합니다. 내 제안은 다음과 같습니다.
시작하려면 로고를 더 현대적이고 수평적인 것으로 다시 디자인하십시오. 그런 다음 페이지 끝까지 완전히 왼쪽 정렬을 설정하십시오. 탐색 영역과 그 아래에있는 복사 블록을 페이지 왼쪽에 정렬하고 새 로고를 오른쪽으로 이동하십시오.
페이지의 텍스트 크기를 다양하게하여 명확한 헤드 라인과 지원 사본을 만듭니다. 모든 것이 현재 매우 큽니다. 기억하십시오 : 모든 것을 특별하게 만들면 특별한 것이 없습니다.
추천 섹션과 현재 글 머리 기호 목록에서 현재 모양을 버리십시오 (서비스를 다른 곳에 통합). 컨텐츠 영역 전체에 걸쳐 확장 된 하나의 대형 프로젝트 미리보기를 작성하십시오.
마지막으로 바닥 글을 다시 작성하여 위의 왼쪽 정렬이 적용되도록합니다. 즉, 오른쪽 모서리에서 해당 단추를 가져옵니다.
네 차례 야!
이제 내 의견을 읽었으며 디자이너에게 추가 조언을 제공하여 의견을 제시하고 도움을주었습니다. 디자인에 대해 좋은 점과 더 강하다고 생각되는 점을 알려주십시오. 항상 그렇듯이 사이트의 디자이너를 존중하고 가혹한 모욕이없는 명확한 건설적인 조언을 제공하십시오.
자신의 사이트를 비평하는 데 관심이 있습니까? 자세한 내용은 여기를 참조하십시오.
