웹 디자인 비평 # 30 : 회색 중앙
30 번째 디자인 비평에 오신 것을 환영합니다! 매주 새로운 웹 사이트를보고 디자인을 분석합니다. 우리는 일부 작업을 수행 할 수있는 영역 외에 잘 수행 된 영역을 모두 지적 할 것입니다. 마지막으로 피드백을 제공하여 마무리합니다.
오늘의 사이트는 말레이시아 웹 디자이너의 개인 포트폴리오 인 그레이 앙 (Gray Ang)입니다.
향후 Design Critique에 웹 사이트를 제출하려면 몇 분이면됩니다. 귀사의 설계를 평가하는 데 24 달러의 비용이 청구됩니다. 컨설턴트가 귀하의 사이트를 살펴 보는 데 드는 비용보다 훨씬 저렴합니다! 자세한 내용은 여기를 참조하십시오.
그레이 앙 소개
“제 이름은 그레이이며 말레이시아 쿠알라 룸푸르에 본사를 둔 웹 디자이너이자 프론트 엔드 개발자입니다. 웹 사이트를 연구, 계획, 디자인 및 코딩합니다. 저는 Photoshop 및 HTML / CSS / jQuery와 좋은 친구이며 클라이언트, 사용자 및 컴퓨터를 행복하게 만듭니다. "
다음은 홈페이지의 스크린 샷입니다.
보시다시피이 사이트는“웹 디자인”및“CSS3”와 같은 것을 포함하는 불투명도가 감소 된 태그 클라우드가있는 다채로운 스펙트럼 배경에 구축됩니다. 스크린 샷에서 얻지 못하는 것은 배경에 애니메이션 요소가 있다는 것입니다. 내용 뒤에 떠 다니는 다트가 몇 개 있습니다. 아래 스크린 샷 중 하나를 클릭하여 사이트를 방문하여 실제로 확인하십시오.
이 사이트는 실제로 매우 작고 단순하므로 각 페이지를 살펴보고 미학이 사용자 경험에 어떤 영향을 미치는지 분석 할 것입니다.
집
나는 사이트의 미학에 들어간 작업에 분명히 감사합니다. 주변 설정이 매우 아름답습니다. 그러나 복잡한 배경을 만드는 데 따른 문제점은 결국 그 위에 내용을 배치해야한다는 점이며 이는 매우 어려운 작업 일 수 있습니다.
백그라운드에서 크고 희미한 단어는 홈페이지에서 텍스트의 가독성을 줄입니다. 주요 단락은 결코 읽을 수 없지만 텍스트 영역에서는 디자인이 매우 바쁘기 때문에 사용자가 평소보다 조금 더 열심히 일해야합니다.
또한, 호버 색상 및 강조점으로 사용되는 빨간색은 배경에서 손실되는 경향이 있습니다. 이것은 다색 배경과 잘 대비되는 색을 찾기가 쉽지 않기 때문에 이해할 수 있습니다. 그러나 여전히 시각적 불협화음을 피하려고합니다.
이러한 모든 문제에 대해 가장 쉬운 해결책은, 오늘 논의 할 대부분의 문제는 모든 콘텐츠 뒤에 약간 투명한 검은 색 배경을 두는 것입니다. 이를 통해 컨텐츠를 더욱 견고하게 만들 수 있으며 디자이너가 현재 배경을 유지할 수 있습니다.
이 페이지에 일종의 헤더 그래픽을 추가 할 수도 있습니다. 나는“정보”페이지의 사진이 눈에 띄는 방식을 정말로 좋아했으며 여기에서 아이디어를 복제 할 수 있다고 생각합니다.
약
여기서 우리는 꽤 매력적이지만 위에서 언급 한 것과 동일한 문제로 고통받는 다른 페이지를 볼 수 있습니다. 그래도 직장에서 흥미로운 레이아웃을 좋아합니다. 탐색은 고정 된 상태로 유지되고 다른 콘텐츠는 스크롤되고 페이지는 명확하게 분리되고 멋지게 배열 된 열로 분할됩니다.
정보 페이지는 소개, 이력서 및 "내가하는 일"의 세 가지 하위 페이지로 나뉩니다. 이를 통해 디자이너는 기본 탐색을 매우 단순하게 유지하면서 상당히 많은 내용에 적합 할 수 있습니다.
공장
“워크”페이지는 썸네일과 텍스트를 멋지게 배열하여 아래 표시된 것과 같은 전용 프로젝트 페이지로 이어집니다. 축소판에는 멋진 테두리 처리 기능이있어 배경에서 눈에 잘 띄고 왼쪽 상단의 인용 부호는 크고 읽을 수있을만큼 굵게 표시됩니다.
큰 따옴표의 올바른 정렬은 조금 어색합니다. 페이지의 모든 것은 왼쪽 정렬이 강력하며 의도적으로 이와 같은 규칙을 위반하는 것이 효과적이지만 여기서는 효과가 없다고 생각합니다. 단락의 일반적인 형태는 불규칙하므로 올바른 정렬로 읽기가 매우 어렵습니다.
접촉
사이트의 마지막 페이지는 "연락처"페이지입니다. 여기에는 몇 단락의 텍스트와 간단하지만 세련된 연락처 양식이 포함되어 있습니다. 여기에서 가장 먼저 눈에 띄는 점은 페이지 상단의 인용 부호가 약간 느꼈다는 것입니다. “The”의“T”와“miles”의“m”이 하드 라인을 형성하도록 따옴표와 독립적으로 왼쪽 정렬을 시도 할 수 있습니다. 이렇게하면 왼쪽 정렬이 현재보다 약간 더 강하게 느껴집니다.
또한 양식의 필드는 너무 투명하여 거의 보이지 않습니다. 다시 말하지만, 이것은 멋지지만 유용성이 나빠집니다. 페이지의 미학은 하나의 주요 목표, 즉 매력적인 방식으로 컨텐츠를 강조하는 것입니다. 디자인은 스타일 이름으로 사용하지 말고 사용성을 높이는 데 도움이됩니다.
필드를 클릭하여 입력을 시작하면 불투명도가 증가하고 훨씬 더 눈에 띄게됩니다. 이 불투명도를 기본 상태로 설정하고 선택하면 더 높이는 것이 좋습니다.
네 차례 야!
이제 내 의견을 읽었으며 디자이너에게 추가 조언을 제공하여 의견을 제시하고 도움을주었습니다. 디자인에 대해 좋은 점과 더 강하다고 생각되는 점을 알려주십시오. 항상 그렇듯이 사이트의 디자이너를 존중하고 가혹한 모욕이없는 명확한 건설적인 조언을 제공하십시오.
