웹 디자인 비평 # 45 : 최적화 된 케이블 회사

/2017-10-12 07:31:19/
Neven
/비평/

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

오늘의 사이트는 Optimized Cable Company의 홈인 Optimization-World.com입니다.

디자인 리소스 살펴보기

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

최적화 된 케이블 회사 정보

Optimized Cable Company에서 판매 된 모든 케이블은 평생 보증됩니다. 케이블이 고장난 경우 번거롭지 않은 교체를 위해 당사로 반송하십시오. 우리는 매우 공정한 가격으로 고품질 케이블을 제공하는 것을 자랑스럽게 생각합니다. 백화점에서 케이블 비용을 과도하게 지불하지 마십시오. 우리에게서 주문하고 우리의 자유로운 선박 스페셜을 이용하십시오. 우리는 당신을 니켈-앤-다이 밍하지 않습니다. 당신이 보는 가격은 당신이 지불하는 가격입니다.

홈페이지 섹션은 다음과 같습니다.

초기 인상

그러나 여기에는 효과적인 아이디어가 있지만 10 년 전쯤에 상당히 일반적 이었었던 것을 디자인과 매우 유사하게 반영합니다. 웹 디자인 트렌드는 웹 사이트를 디자인 할 때주의를 기울여야하는 것입니다. 따라서 다른 사람들의 아이디어를 찢을 수는 없지만 최종 제품이 현대적이고 관련성이 있다고 느낄 수 있습니다.

디자이너로서 우리가 프로젝트에 접근하는 방식에 갇히는 것은 너무 쉽습니다. 이것의 부정적인 영향은 우리가 똑같이 유지하면서 세상이 변한다는 것입니다. 구식 인 웹 사이트를 갖는 것은 온라인 판매에있어 특히 위험합니다. 판매 감소와 직접 관련 될 수 있기 때문입니다. 방문객들은 들러서 사이트가 돈을 보내기에 안전한 장소인지에 대해 갑자기 확신하지 못합니다. 신용 카드 정보를 보호 할 합법적 인 회사입니까? 아니면 사이트 보안이 오래 되었습니까? 이 경우 사이트가 더 안전하다고 느끼기 때문에 제품의 비용과 품질에 관계없이 Best Buy로 넘어갈 수 있습니다.

물론 현대적인 디자인과 오래된 디자인을 구별하는 것을 정확하게 지적하기는 어렵 기 때문에 오늘날 우리는 어떤 측면이 그 기간에 대한 인상에 직접적인 영향을 미치는지 확인할 수 있는지 살펴볼 것입니다.

헤더

여기서 가장 주목해야 할 것은 로고입니다. 초기 웹 2.0 시대와 같은 느낌을주는 매우 광택이 나는 요소입니다. 제대로 수행하면 광택이 여전히 많은 웹 디자인에서 작동 할 수 있지만 여기서는이 특정 요소가 적절하지 않다는 느낌이 듭니다. 빈티지 자동차 광고의 것과 비슷한 느낌을주는 로고의 텍스트를 포함하여 페이지의 다른 모양과 느낌과 거의 일치하지 않습니다 (더 많은 기간 혼란).

다음으로 노란색 그라디언트로 넘어갑니다. 이 색상은 실제로 나머지 사이트의 구성표를 위반합니다. 마케팅 담당자는 눈에 띄기 때문에 디자인 측면에서 보면 모든 것이 잘못되었다고 생각합니다. 보완 색상은 충돌없이 눈에 띄고주의를 환기시킬 수 있습니다. 또한 사이트의 나머지 부분을 고려하지 않아도 노란색 그라디언트는 현재 추세를 반영하지 않는 또 다른 것입니다.

의미하는 바를 확인하려면 위 사이트의 배송 배너를 스테이플 웹 사이트의 동일한 요소와 비교해 보겠습니다.

우리는 이것으로부터 많은 것을 배울 수 있습니다. 첫째, 레이아웃이 훨씬 넓고 넓으며 모든 것이 너무 꽉 채워지지 않습니다. 중심 정렬이 상대적으로 약한 반면, 왼쪽 정렬이 강하게 나타납니다. 여기의 키는 미묘합니다. 얇은 선으로 생성 된 그라디언트와 텍스처가 있으며, 둘 다 Optimized 웹 사이트에서 볼 수 있습니다. 그러나 스테이플 사이트에서는 이러한 요소가 훨씬 정복되었습니다. 주의를 기울이지 않으면 그라디언트와 선 모두 놓치기 쉽습니다.

색상과 질감

사이트를 아래로 내려 갈수록 색상과 질감이 일정 기간 동안 큰 역할을한다고 생각할 수 있습니다. 아래의 스크린 샷에서 단일 픽셀 검은 선이 경계를 이루는 딱딱한 모서리를 강력하게 사용하는 것과 함께 이것을 볼 수 있습니다. 이것은 Plone이라는 CMS에서 클라이언트에 대해 한 일을 생각 나게하는 boxy 느낌을 만듭니다.

다시, 이것을 주요 경쟁 업체 사이트의 유사한 영역에서 볼 수있는 일부 치료법과 비교해 봅시다. 아래 스크린 샷은 Radio Shack 홈페이지의 사이드 바를 보여줍니다. 이 회사는 현대 비즈니스 관행의 완벽한 그림은 아니지만 사이트를 신선하고 관련성있게 보이도록 노력하고 있습니다.

사진 및 텍스트

페이지의 그래픽 요소와 함께 이미지 처리를 구성하는 방법도 확인해야합니다. 아래 사진에는 실제로 텍스트를 배치 할 수있는 단색의 좋은 영역이 없으므로 텍스트에 눈에 띄는 고스트 섀도우 처리가 적용되었습니다.

텍스트가 제대로 작동하지 않는 사진이있는 경우가 있습니다. 단순히 작동하지 않을 때 두 가지를 함께 연결하려고 시도하는 대신 대체 경로를 고려하십시오. 우리는 매력적이고 읽기 쉬운 방식으로 텍스트와 사진을 결합하는 방법에 대한 멋진 비법을 공유하는 사진으로 디자인에 관한 전체 기사를 보유하고 있습니다.

텍스트 및 로고

이 페이지의 마지막 부분은 아래 이미지에 나와 있습니다. 여기에 우리는 로고의 전체 가글을 가지고 있으며, 그중 일부는 틀림없이 필요하지만 모두 로고가 있어야한다고 확신하지는 않습니다. BBB의 인증은 좋지만 사이트에서 미국 우편 서비스를 사용하고 있다는 사실을 정말로 알아야합니까? 온라인으로 제품을 구매하면 어떻게 든 나에게 배송 될 것이며 대부분 미국 우편 서비스를 통해 "일반 우편물"을 의미합니다.

또한 신용 카드 로고가 지불 페이지로 이동 될 수 있습니다. 온라인 구매를하기에 편한 대부분의 소비자는 주요 신용 카드를 사용한다고 가정합니다.

마지막으로, 다음에 나오는 것은 거대한 균일 한 텍스트 블록입니다. 헤더, 아이콘, 차별화 된 텍스트 처리 (링크 제외) 또는이를 분리하고 더 읽기 쉽게 만드는 다른 방법이 없습니다. 한 눈에 나는이 텍스트 덩어리가 무엇인지 모르기 때문에 그것을 읽는 데 몇 분이 걸리는 이유는 무엇입니까?

웹 디자인에서는 방문자가 이와 같은 순수한 텍스트 덩어리를 다루는 것을 기대할 수 없습니다. 백 명의 방문자 중 한 명은 실제로 첫 번째 단락을 거칠 수 있지만 낙관적입니다. 그것은 당신이 웹 페이지에 많은 텍스트를 가질 수 없다는 것을 의미합니까? 절대적으로하지. 관련 정보를 신속하게 찾아 볼 수있는 의미 있고 관리하기 쉬운 덩어리로 나누는 법을 배워야합니다.

MailChimp의 디자이너는 이것에 대해 훌륭하고이 주제를 논의 할 때 항상 그들의 작품을 참조합니다. 최근 사이트 재 설계 도구에는 텍스트로 가득한 기능 페이지가 있지만 처리 방법을 확인하십시오.