웹 디자인 비평 # 25 : Highwire
25 번째 디자인 비평에 오신 것을 환영합니다! 매주 새로운 웹 사이트를보고 디자인을 분석합니다. 우리는 잘 수행 된 영역과 일부 작업을 수행 할 수있는 영역을 모두 지적 할 것입니다. 마지막으로, 의견을 제시하고 의견을 제공하도록 요청하여 마무리하겠습니다. 이 페이지의 하단에있는 여론 조사에 투표하거나 생각에 의견을 남기십시오!
오늘날의 사이트는 개인화 된 온라인 상점 플랫폼 인 Highwire.com입니다.
향후 Design Critique에 웹 사이트를 제출하려면 몇 분이면됩니다. 귀사의 설계를 평가하는 데 24 달러의 비용이 청구됩니다. 컨설턴트가 귀하의 사이트를 살펴 보는 데 드는 비용보다 훨씬 저렴합니다! 자세한 내용은 여기를 참조하십시오.
하이 와이어 소개
“자신의 전자 상거래 상점을 만드는 것이 결코 쉽고 저렴하지 않았습니다. 지금 무료 평가판에 가입하고 단 몇 분만에 매장을 구축하십시오!”
다음은 홈페이지의 스크린 샷입니다.
전체적인 인상
내가 나쁜 디자인에 대해 찢어 졌다는 소식을 들으려고 오늘 들렀다면 실망 할 것입니다. 나는 이것이 디자인 비평을 위해 아직 제출 된 최고의 웹 사이트 디자인 일 수 있다고 생각합니다.
Highwire는 단순히 멋진 사이트이며 잘 수행되어 부정적인 도구보다 긍정적 인 교육 도구로 사용해야합니다. 이 디자인을 분석하여 배울 수있는 톤이 많으므로 계속 읽으십시오. 걱정하지 마십시오. 그 과정에서 개선을 제안 할 몇 가지 작은 것들이 있습니다.
색상 팔레트
이 사이트에서 가장 대담한 표현은 색상입니다. 이미지의 품질은 우수하지만 페이지를로드하자마자 실제로주의를 끄는 색상입니다. 여기에 사용되는 기본 색상은 녹색, 빨간색, 파란색, 회색 및 약간 주황색 인 금형을 정확하게 깨뜨리지는 않지만 매우 매력적인 방식으로 혼합됩니다.
그들은 실제로 페이지에서 바로 떨어지는 각 색상의 매우 밝은 그늘을 선택했습니다. 방사형과 선형 그라디언트의 혼합은 색상을 훨씬 더 생생하고 살아있는 것처럼 보이게하면서 미묘한 질감을 제안합니다.
레이아웃 및 정렬
이 사이트의 레이아웃은 견고하며 실제로 공백과 시각적 가중치 분포를 적절히 사용합니다. 아래의 수정 된 이미지에서 모든 것이 멋지고 단단하도록 세로선이 얼마나 강한 지 확인하십시오.
또한 디자이너는 왼쪽 정렬을 선택하고이를 고수했습니다. 모든 텍스트는 왼쪽으로 정렬되며 축소판 아래의 단추조차도이 추세를 따릅니다. 설계 전반에 걸쳐 임의의 단위로 정렬을 전환하지 않으면 설계가 훨씬 응집력 있고 일관성있게 보입니다.
코드의 다른 섹션 임에도 불구하고 머리글과 바닥 글은 동일한 그라디언트를 사용하므로 내용이 위에 떠있는 연속적인 배경의 느낌을 얻습니다. 이것은 단지 body 태그를 스타일링 한 것처럼 보이지만 실제로는 강력한 머리글과 바닥 글을 유지하는 의미 론적 이점이 있습니다.
그림자와 반사
반사, 그라디언트 및 부드러운 그림자는 최근 단색으로, 종종 페더가 아닌 딱딱한 그림자로 바뀌 었습니다. 우리가 구타 당하고 악용 된 웹 2.0의 모습을 남기고 다음 희생자로 넘어 가기 시작함에 따라, 누군가가 원래 스타일대로 스타일을 끌어내는 것을 보는 것이 좋습니다.
여기의 그림자와 반사는 매우 미묘하며 사실적이고 단순하게 아름답게 보이도록 조심스럽게 구성되었습니다. 요소에 시각적 인 감각을 더하려면, 엉성한 메이크업 코트와는 달리 페이지에 정교함과 빛을 더해주는 무언가를 얻을 때까지 시간을내어 조정하고 실험 해 볼 가치가 있습니다.
버스트 : 진화
주요 마케팅 회사를 설계 할 때 배우는 것 중 하나는 마케팅 담당자가 버스트를 좋아한다는 것입니다. 디자인을 위반하여 고객의 시선을 사로 잡는 크고 뾰족한 것. 마케팅 부서와 실제로 많은 디자이너가 자신의 길을 가졌다면 모든 것이 다음과 같이 보일 것입니다.
디자인 관점에서 볼 때 이것은 진부하고, 추악하고, 지나친, 구식이며, 상상할 수있는 다른 모든 부정적인 형용사입니다. 경험상 일반적으로 절대 항성 물질을 두지 마십시오.
이 디자이너는 다행스럽게도이 규칙을 이해했으며 아래에 나와있는 훨씬 더 현대적이고 매력적인 솔루션을 고안했습니다. 이 3D 리본은 새로운 기능을 설명하는 막대를 둘러 쌉니다. 관심을 끌 정도로 디자인을 크게 위반하지만 전체 페이지의 모양을 싸게 할 수는 없습니다.
제안 된 개선
내가 여러 번 이미 말했듯이 이것은 훌륭한 디자인으로 잘못된 것을 찾기가 어렵습니다. 그러나 개선을 고려할 몇 가지 사항이 있습니다.
우선이 사이트는 사용자 정의 인쇄술에 Cufon을 사용합니다. 나는 마지막 비평에서 이것에 대해 불평했고 Cufon이 사용되는 곳 어디에서나 같은 주장을 계속할 것입니다. @ font-face는 더 나은 솔루션, 기간입니다. @ font-face 텍스트는 완전히 선택할 수 있지만 Cufon은 선택할 수 없습니다. @ font-face는 순수 CSS를 사용하며 Cufon은 JavaScript가 활성화되어야합니다. 내가 마지막으로 지적했듯이 Cufon 웹 사이트가 @ font-face를 대신 사용할 것을 제안하면 수건에 던져서 탑승 할 때가 된 것을 알 수 있습니다.
나를 괴롭히는 또 다른 것은 상단의 Facebook 막대입니다. 아래에서 한 것처럼이 막대의 텍스트 가운데에 선을 그리면 Facebook 로고가 중심을 벗어난 것을 알 수 있습니다. 이것이 의도적이거나 사고인지 확실하지 않습니다. 중앙에 가깝습니다.
다른 페이지
사이트의 다른 페이지를 간략하게 살펴보면 마감하겠습니다. 보시다시피, 그것들은 똑같이 매력적이고 모두 잘 설계되었습니다. 나는 특히 가격표를 좋아한다!
네 차례 야!
이제 내 의견을 읽었으며 디자이너에게 추가 조언을 제공하여 의견을 제시하고 도움을주었습니다. 디자인에 대해 좋은 점과 더 강하다고 생각되는 점을 알려주십시오. 항상 그렇듯이 사이트의 디자이너를 존중하고 가혹한 모욕이없는 명확한 건설적인 조언을 제공하십시오.
