마이크로소프트 로부터 얻은 교훈: 10 웹 디자인 함정을 피하기 위해

오늘, 우리는 웹 디자인 사례를 분석할 것 이다 그리고 만약 우리가 우리 자신의 실수를 피하기 위해 뭔가 배울 수 있는지에 큰 소프트웨어 회사의 추세 작동.

동의 또는 동의 내 의견, 제안을 아래에 의견을 주시기. 전문 디자이너로 서 관점은 중요 하 고 귀하의 의견을 다하겠습니다.

만약 당신이 문서는 바보-따기 잔소리 가득 싫어 미안 해요. 난 보통 나쁜 디자인을 비판 하는 것 보다 좋은 디자인을 칭찬 하지만 데이비드 Appleyard와 나는 마이크로소프트 디자인 동향 분석 기사를 작성 하기로 결정 했습니다, 그것은 우리 이란 것 들의 지저분한, 못생긴, 또는 실패 하는 것으로 보인다.

비판을 피하기 위해, 내가 다음과 같은 분석에서 애플을 언급 하지 않습니다 하거나 혼자 애플을 비교 합니다. 이것은 PC가 맥, 이상 논란이 되지 않기 때문에 하지만 우리는 단지 설계 및 연습에서 부족 정말 우리가 생각 하는 웹 사이트의 개발에 보고 싶어 서. Microsoft는 매우 성공 하는 회사 이며, 몇 가지 문제에 의해 모호해 지지 않습니다. 사실, 나중에서 설명 했 듯이 Microsoft는 몇 가지 아주 좋은 디자이너 사이트 팀, 그리고 우리는 그냥 높고 더 포괄적인 품질 관리 해야 제안.

이러한 이유로, 분석 하자 일부의 설계 및 개발이이 지식 으로부터 혜택을 받을 수 있는 마이크로 소프트의 부족

는

애플과 어도비 사이 최근 마찰 우리는 웹 사이트를 만드는 완전히 닫힌된-타사 플러그인에 의존 수 있습니다 결국 이어질 몇 가지 심각한 결과 깨닫게 했다. Microsoft는 웹 사이트는 Silverlight에 점점 더 의존 하는 실수를 반복 될 것으로 보인다.

나는 정보 팝업 창이 자주 괴는이 기사를 준비, 그것은이 페이지를 탐색 하는 원래 방법 시스템 Silverlight를 설치 하지 않는 알림 마이크로소프트 사이트 탐색. 내 질문은, "왜이 경로 걸릴?" "특히 몇 가지 간단한 슬라이드 효과 위해 사용할 수 있는 기술을 어디에 나 있다," 고 말했다. 틀림 없이, 이것은 마이크로소프트의 Silverlight, 그것은, 그것을 지 원하는 좋은 비즈니스 감각 하지만 합류 하는 것이 최선의 선택은 아닙니다.

여부 또는 아니라 Silverlight의 팬이 시 군요, 내 조언은 귀하의 사이트의 기능 모든 Silverlight 또는 유사 기술에 의존 하는 경우 매우 주의 것입니다. 플래시 개발 사이트를 사용 하 여 계속 여부를 통해 논쟁이 열, 더 많은 도박 되 고 Silverlight 같은 두 번째 계층 시스템을 계속 하고있다. 만약에 가능 하다 면, 크로스-브라우저, 규격 코드 및 도구에 충실-추가 작업이 나 설치에 대 한 귀하의 방문자를 묻지 마세요.

이것은 마이크로소프트에 내 가장 큰 불만 때문에 부주의 디자인 처럼 보이는입니다. 그것은 파일의 크기를 최소화 하 고, 그림을 유지 하는 좁은 방법 하지만 내가 도울 수 없어요 하지만 마이크로소프트 전문 사이트 보다 못생긴, 들쭉날쭉한 jpg를 표시 하는 데 더 의향이 보인다 생각 의심의 여지가 있다.

전화 접속 인터넷 사용자의 수는 감소 하 고, 그리고 허용 이미지 크기 큰 되고있다. 그러나이 작은 수 있도록 그림 크기의 필요한 작은 크기에 관심을 지불 더 이상 수 없습니다 하지만 지금 여기, 디자인의 무게 된다 무거운, 너무 작은 해상도 사이트 품질의 모양을 크게 줄어, 그림 되 자 멸을 의미 하지 않는다!

그것은 아이러니 그 당신이 좋아 했을 그림을 사용 하 여 귀하의 사이트를 보고 더 나은, 하지만 과정에서 그것은 궁극적으로 아름다움의 감각을 감소 것입니다. 만약에 가능 하다 면, 당신이 다른 모니터, 얼마나 왜곡에 주의에 상대 사진을 미리 보기 얼마나 많은 유물을 받아들일 수 있다.

무질서

평소 디자인 규칙을 따라 가끔 그리고 결국, 뭔가 시각적으로 가난한. 조직 기반 배열을 사용 하려고 많은이 하나 등이 페이지를 건너 왔어요 마이크로 소프트의 웹 사이트에서 찾고, 그것은 더러 워 보인다.

그래서 어디에 문제는? 간단히 말해서, 여기에 상대적으로 작은 공간에 물건을 많이 있다. 비록 그들은 확실히 콘텐츠 레이아웃을 만들고 또한 아이콘을 통해 시각적 가독성을 향상 하려고 하는, 최종 결과 여전히 꽤 균형.

만약 당신이 자세히 본다면,이 페이지의 4 열 단지 그들을 함께 당기고 4 다른 사람에 의해 디자인 될 것을 찾을 수 있습니다. 왼쪽 그림은 정말 오른쪽에 상대적으로 무거운, 텍스트 색은 간헐적으로, 콘텐츠는 서투른 조금 비틀 거리 며, 열 빈 호흡 공간이 부족, 그것은 그들의 레이아웃 독립을 볼 수 어렵습니다.

교훈은 여기 열 정보에서 귀하의 페이지를 포장 하는 것입니다, 그리고 주의 콘텐츠 정보는 너무 복잡 하다. 많은 경우 더 많은 콘텐츠 필요 하 하지만 일관 된 고 매력적인 방식으로, (비-Microsoft 웹 사이트)에서 아름 다운 예제 같은 구성 해야는 의심의 여지가 있다.

다른 장소를 방문 하는 사이트를 선택 거 대 한 탐색 풀 다운 메뉴 오픈 Microsoft.com에서 출발, 아무리 페이지를 클릭할 링크, 홈페이지 보다 매우 다른, 같은 드롭 다운 메뉴에 페이지에서 메뉴는 너무 큰 차이 발견할 것 이다.

마이크로 소프트의 웹 사이트를 탐색 하는 것은 회전 룰렛 처럼입니다. 거의 어디가 고 당신이 찾고 있는 다음 페이지를 추측할 수 있다. 페이지의 일부는 swooshy (우아한 스타일 곡선) 배경, 반면에 다른 그라데이션 배경 또는 심지어 분기 고리. 대부분의 웹 페이지는 파란색, 하지만 같은 파란색 하지 하는 경향이 것 그리고 완전히 파란색 추세를 무시 하는 일부 페이지 있다.

문제는 일관성은 필요한 사이트는 2 페이지 또는 200 페이지. 사용자는 제한 된 양의 시간 동작 및 웹 사이트의 인터페이스에 익숙한 될 때 더 편안 하 게 느낄 것 이다. 몇 페이지 마다에 완전히 다른 뭔가 제공 할 수 있습니다 혼란 검색 및 사용자 경험 매우 비효율적.

또한, 고객이 더 독립적인 방법으로 당신의 회사와 연결할 수 있기 때문에 좋은 사업입니다 강력 하 고 통합 브랜드를 만드는. 물론, 마이크로소프트는 모두 홈페이지, 심지어 Microsoft.com 코어 페이지에서 확장 된 다른 브랜드의 수, 이미지 스타일과 탐색 방법을 크게 다른 것 같다.

분명 조금 말도 안 되는 Microsoft Office의 클립 아트의 피할 수 없는 존재를 봐. 하지만 아이콘 디자인 1995 년 이후 먼 길을 왔다 그리고 당신이 그림에서 볼 특정 스타일을 포기 하는 시간 이다.

Microsoft에서 위의 예제 웹 페이지 만들 날 름, 특히 추악한 "초급 개발자" 로고 느낌. 내가 무슨 백 포스 라벨입니다 왜 마법의 식물을 공격, 공격을 돕거나 현장에서 달아 나는 디스플레이 가져가? 내가 아는 비주얼 커뮤니케이션 여기 엉망입니다.

그 이유는 자신 처럼 세상에 존재 하는 CSS 갤러리. 다른 사람의 디자인을 훔칠 수 있는 그리 하지만 지난 10 년간 개발 하는 디자인의 발전을 엿볼 수 있습니다. 이러한 CSS 갤러리, 쇼핑몰 패션 스토어 미친 모 그녀 그녀가 맑은 것은 마치 옷 필요 하지 않습니다 표시와 쉐어의 쇼 처럼.

기억 하 항상 자유롭고 자체에서 인기 있는 디자인을 넘어 국경. 세상은 변하고, 너무 완고 하 고 보수적인 주의.

또 다른 트렌드 마이크로 소프트의 웹 사이트에서 간과 될 수 없는 텍스트는 지속적으로 나눠지지 경계 명확 하 게 밖으로 흘리 고입니다.

그것은 매우 쉽게 문제를 해결, 그리고 그것은 그냥 작은 노력과 관심 걸립니다. 그냥 레이아웃 주류 브라우저에서 손상 되지 있는지 확인 어도비 브라우저 연구소 같은 무료 도구를 활용 해야 합니다.

크로스-브라우저 일관성에 관해서, 부인할 수 없는 CSS 레이아웃 까다로운 짐승 처럼 하지만 그 작은 실수 그래서 그것은 그것을 해결 하기 위해 당신의 시간 가치가 귀하의 사이트의 품질을 만들 수 있습니다.

#7 부족

때로는 특정된 페이지는 나에 게와 디자인의 결함을 지적 하 나에 게는 도전 이다. 대 한 예를 들어, 다음 페이지, 내가 원래 밸러스트 클릭 하지 좀 더 큰, 하지만 더 이상 나 보고 페이지를 사용 하 여이 작은 창의 찾을 싶 었 어 요, 나는이 페이지 레이아웃의 의도 대해 혼란 스럽다.

당신이 잘 알고 있다면 기본적인 디자인 이론, 알다시피, 일관 라인을 구현 학습 우수 웹 레이아웃의 열쇠입니다. 위의 이미지에 표시 된, 왼쪽, 중간, 그리고 사이트의 오른쪽의 시각적 정렬 이상 하 게 혼합, 상단에 어 색 한 빈 연결, 콘텐츠 정보에 대 한 기괴 한 영상 스트림을 제공 합니다.

또한, 위의 페이지를 탐색 하는 경우 전체 콘텐츠 페이지, 센터 하려는 것 같다 하지만 페이지 오른쪽에 맞춰지고 것 중간 밴드에 걸쳐 십자가를 표시 됩니다.

다음 그림 무료 디자인 블로그는 우리에 게 콘텐츠 서비스의 지속적인된 제공을 지 원하는 수익 방법은 광고의 많은 일을 처럼. 하지만 전문 비즈니스 사이트를 실행 하 고 콘텐츠 메시지를 광고 전문, 당신은 신중 하 게 생각해 야.

Microsoft.com의 페이지는 실제로 웹 페이지의 아름다움을 줄이기 위해 광고 가득 합니다. 때로는 이러한 광고는 다른 회사 또는 파트너에 게 때때로 다른 Microsoft 페이지에 직접 이동 합니다. 다른 하위 사이트에 귀하의 사이트를 탐색의 개념은 이해할 수 있다, 하지만 그것을 달성 하는 방법에 큰 차이가 있다.

대부분 네티즌은 지금 인식, 무시, 또는 심지어 배너 광고를 싫어하는 배워야 한다는 사실이입니다. 이것은 디자인과 적절 한 대상에 광고의이 유형은 또한 아무 효과가, 그것을 다루는 더 나은 방법 이다 이다 마이크로소프트 사용자가 전혀 클릭 하지 마십시오, 기분이 정말 의심 스러운 말을 하지 말을 하지?

당신이 볼 수 있듯이, Microsoft 웹 사이트 사용자가 자신의 휴대 전화 및 기타 항목을 탐색 하는 경우, 간단한 방법은 지저분한, 설정 하는 사이트 전반에 걸쳐 비표준 (지적 설계) 광고 시스템. 그러나, 그것은 광고의 콘텐츠를 사이트에 통합 보인다 사용자의 관심, 거기는 매우 좋은 클릭을 통해 있을 것입니다.

또한,이 통합 더 통합 하 고 조화로 운 디자인을 만들 것입니다. 때문에 그들은 열을 분할 하는 대신 단위를 선호 합니다. 그건 그렇고,이 마이크로 소프트의 "효율 비용" 접근의 나의 이해 될 수 있습니다 하지만 난 그들이 당신을 오해 말라고 경고 하 고 싶습니다. 대부분의 경우, 사이트를 디자인 하는 되지 않습니다 Microsoft, 같은 기가 비트 네트워크 그래서 그것은 더 단단한 디자인을 너무 많은 광고로 인 한 시각적 혼란 방지 적합.

물론, 광고에 적합 하지 않은 웹사이트의 많은 유형이 있다. 당신은 제품 또는 서비스, 사이트 판매 여부 또는 추가 수익 및 광고 성희롱 필요 여부에 대해 생각해 야 합니다.

#9 부족

인쇄 디자인에는 디자이너 "관심 지역" 각 페이지에 정렬, 일반적인 관행은 페이지의 가장자리에 사각형 영역을 추가, 장소 콘텐츠의 안전 범위 정의 페이지를 피하기 위해 너무 힘을 짜 내 또는 페이지 가장자리는 혼잡 이다. 대부분의 웹 디자이너 이렇게 직관적으로, 그리고 그것은 분명 콘텐츠를 브라우저 측에 집어넣은 그래서 너무 느슨한 수 고 싶지 않아.

그러나, 쇼 위의 스크린샷으로 마이크로소프트의 웹 페이지의 일부 하지 않는 것이 보기 가치. 그와 반대로, 페이지의 콘텐츠는 항상 레이블이나에서 시작 또는 가장자리 (적어도 브라우저에서 사용).

왼쪽에 탐색이이 페이지에 내장 되지 않습니다 및 느낌 그것 잘립니다 (예, 그것은 아마도 사실은 IE 없어). 이 예의 수업은: 항상 브라우저 윈도우의 가장자리에 유의. 당신이 몇 가지 명백한 시각 효과 대 한 규칙을 어 기 하지 않는 한. 그래서 그들은 그것을 사용 하 여 사용자가 혼잡 느끼지 않는다 가장자리 안전 지역에서 상호 작용 및 연결, 특히 귀하의 콘텐츠를 유지.

만약 당신이 위의 screenshot에서, 주류 브라우저에 이러한 페이지의 텍스트 블록 제대로 떠 있는지 고려 하는 실패는 마이크로소프트의 디자이너의 몇 가지 예제를 볼 수 있습니다. 이것은 마이크로소프트, IE 브라우저에 대 한 특별 한 적응을 하루 종일 많은 웹 디자이너에 대 한 흥미로운 트렌드 하지만 마이크로소프트와 같은 큰 회사는 분명히 너무 무관심 하지, 그들의 자신의 검사를 다른 시스템에 하지 않을 수 있습니다.

는

마이크로 소프트의 웹 디자인에 대해 많은 부정적인 의견에도 불구 하 고 그들은 또한 많은 웹 사이트와 웹 페이지를 매력적으로 보이 데가 유쾌 하 게 놀랐습니다.

사이트의 많은 마이크로소프트는 레이아웃, 색상 선택, 크로스 브라우저 호환성에 대해 생각 정말 날, 위의 두 가지 예입니다. 당신이 볼 수 있듯이, 몇 가지 재능 있는 사람들이 있다 어딘가에 경기 침체에서 마이크로소프트를 도울 수 있는 마이크로 소프트의 큰 염색 탱크에서.

그렇게 그들은 시너지 효과 만들 수 있으며 각 Microsoft 웹 디자이너 같은 표준을 준수 하 게 상관 그들은, 이러한 디자이너 오른쪽 위치로 승격 한다. 그들은 명확 하 게 미로 같은 위치에서 동일한 사업에 속하는 예쁜 사이트를 많이 구축 하 여 강력한 네트워크 브랜드를 구축할 수 있습니다.

마지막 건 내가 제안 했다, 재능의 당신의 자신의 종류를 찾아서 그들에 게 그 팀, 슬 퍼 하는 것 보다는 격려의 목소리가 강한 디자이너와 개발자가 그들이 어디 특정 브랜드를 각 모서리의 비주얼 커뮤니케이션 영향을 미칠 수 오른쪽 위치를 임명.

이 효과적으로, 일관성, 명확 하 고 엄격한 브랜딩 전략을 설정 하 고 각 디자이너 및 개발자를 다른 브랜딩 전략을 보냅니다.

는

즉, 마이크로소프트는 다양 한 매우 재능 있는 웹 디자이너, 비록이 사람의 작품은 거의 불량 내용과 이러한 표준의 많은 수에 의해 압도, 우리 경우에 디자이너와 개발자에 대 한 작업의만 년을 기대할 수 있는 느낌.

다행히도, 우리가 사용할 수 있습니다 Microsoft 교훈으로 분명히 하 작품의 이러한 방법은 틀리다. 작업 제품의 품질에 관해서, 단지 고독한 프리랜서 또는 작은 디자인 회사, 그리고 대기업을 이길 수 없고 디자인 회사 비관적 되지.

난 쉽게 세계에 가정에서 작동 하 고 앞에 앉아 큰 회사 보다 더 나은 디자이너를 발견 한 디자이너를 찾을 수는 것을 발견 했습니다. 당신은 조정 하 고 수백명의 디자이너의 작품의 품질을 제어할 필요가 없습니다 사실은 즐길 수 있다. 자신의 무한 한 창의력과 동기를 일부 아름 답 고 강력한 디자인을 만들고 최고의 사이트 중 일부는 웹에 결합 해야 하는 자원의 작은 금액을 사용 하려고 합니다.

출처: Designshack

컴파일: Mazingtech