Microsoft로부터 배우기 : 피해야 할 10 가지 디자인 함정
오늘 우리는 웹 디자인 관행과 소프트웨어에서 가장 큰 단일 이름의 트렌드를 조사하여 우리 자신의 작업에서 피해야 할 실수에 대해 배울 수 있는지 알아 봅니다.
아래 제안에 동의하거나 동의하지 않으려면 언제든지 의견을 말하십시오. 전문 디자이너로서 귀하의 통찰력은 소중하며 귀하의 생각을 기대합니다.
디자인 리소스 살펴보기
가끔 란트
rants로 가득 찬 기사를 싫어하는 모든 사람에게, 이 게시물은 때때로 조금 가혹하다고 사과합니다. 나는 보통 나쁜 디자인을 비판하는 것보다 좋은 디자인을 칭찬하는 것을 선호하지만 David Appleyard와 나는 Microsoft의 디자인 트렌드에 대한 글을 게시하기로 결정했을 때 지저분한, 추악하고, 또는 바람직하지 않은 것들에 대해 더 많이 배우는 것처럼 보였습니다. 그들은 대안보다 그렇습니다.
주석에서 당신을 차단하기 위해, 나는 아래 분석에서 Apple에 대해 언급하거나 언급하지 않을 것입니다. 이것은 최소한 PC 대 Mac 논쟁이 아니라 웹 디자인 및 개발에서 실제로 열악한 관행이라고 생각하는 것을 살펴보십시오. 모든 공정성에서 Microsoft는 매우 성공적인 회사이며 이러한 문제로 인해 실패하지는 않습니다. 실제로 아래에서 지적한 것처럼 Microsoft는 실제로 특정 사이트의 팀에 뛰어난 디자이너가있는 것처럼 보이며 전반적으로 더 높은 수준의 품질 관리를 구현할 것을 제안합니다.
이를 염두에두고 Microsoft가 설계 및 개발 방식이 부족한 것으로 보이는 몇 가지 장소와이 지식을 활용할 수있는 방법을 분석해 보겠습니다.
# 1 특정 플러그인 필수 사항
최근 애플과 어도비 사이에서 긁힌 사실을 알게되면 폐쇄 된 타사 플러그인에 전적으로 의존하는 사이트를 만들면 결국 심각한 역효과를 초래할 수 있습니다. Microsoft는 자체 사이트 네트워크가 Silverlight에서 점점 더 우세 해짐에 따라이 같은 실수를 반복하고있는 것 같습니다.
이 기사를 준비하는 Microsoft의 다양한 사이트를 탐색하면서 Silverlight를 설치하지 않았으므로 웹 페이지를 보는 방식으로 웹 페이지를 경험할 수 없다는 내용의 창이 계속해서 괴롭힘을당했습니다. 내 질문은“이 경로를 왜 가는가? 특히 우리가 더 많은 유비쿼터스 기술로 수행 할 수있는 간단한 슬라이드 쇼 및 애니메이션에 대해 이야기 할 때 특히 그렇습니다. 물론 Microsoft는 Silverlight를 소유하고 있기 때문에 투자를 백업하는 것이 좋은 사업 적 의미가 있지만, 이것이 바로 곤두박질을하는 것이 최선의 선택임을 의미하지는 않습니다.
Silverlight의 열렬한 팬이든 아니든 상관없이이 조언 또는 이와 유사한 기술을 바탕으로 사이트의 기능을 기반으로하는 것에 대해주의를 기울여야합니다. Flash를 사용하여 사이트를 개발하는 것이 좋은지 아닌지에 대한 논쟁이 계속해서 뜨거워지면서 Silverlight와 같은 두 번째 라인 시스템은 더욱 도박이되었습니다. 가능하면 방문자의 추가 작업이나 설치가 필요하지 않은 크로스 브라우저, 표준 호환 코드 및 도구를 고수하십시오.
# 2 당신의 결의를보십시오
이것은 딱딱한 디자인처럼 보이기 때문에 Microsoft에 대한 가장 큰 불만 중 하나입니다. 사용 편의성을 높이고 사진을 깨끗하고 선명하게 유지하기 위해 파일 크기를 줄이려면 걸어야 할 선이있을 것입니다.하지만 Microsoft가 말 그대로 다른 것보다보기 흉하고 울퉁불퉁 한 JPG를 표시하는 경향이 있다고 생각합니다. 지난 몇 년 동안 본 전문 사이트입니다.
전화 접속 인터넷 사용자의 수가 점점 감소함에 따라 수용 가능한 이미지 크기가 계속 증가하고 있습니다. 이것은 결코 모든 것을 합리적으로 작게 만들기 위해 특별한주의를 기울이지 않아야 함을 의미하지만, 디자인의 무게가 너무 커서 무게가 사이트의 겉보기 품질을 크게 떨어 뜨릴 때 이미지가 스스로 파괴됩니다!
이미지를 사용하여 사이트를 더보기 좋게 만들지 만 결과적으로 미적 매력을 줄이면 순수한 아이러니를 느끼게됩니다. 가능하면 처리 된 이미지를 다른 모니터에서 미리보고 왜곡 및 아티팩트가 허용 가능한 정도에주의를 기울이십시오.
# 3 정리 된 혼란
때로는 명백한 디자인 규칙을 모두 따를 수 있지만 여전히 시각적으로 하위 수준 인 것으로 보일 수 있습니다. Microsoft 사이트 탐색 열 기반 조직에 대한 시도에도 불구하고 혼란스러워 보이는 아래 영역과 같은 수많은 영역을 발견했습니다.
그래서 무엇이 문제입니까? 간단히 말해서, 비교적 작은 공간에서 톤이 진행되고 있습니다. 그들이 아이콘을 통해 내용을 정리하고 시각적 가독성을 향상 시키려고 노력했지만 최종 결과는 여전히 균형이 맞지 않습니다.
여기에서 무슨 일이 일어나고 있는지 자세히 살펴보면 서로 다른 네 사람이 디자인 한 네 개의 정보 열처럼 느껴집니다. 왼쪽은 오른쪽에 비해 이미지가 너무 무거워 보이며 텍스트 색상이 약간 산발적이며 내용이 어색하게 엇갈 리며 열에는 호흡 공간이 부족하여 독립적 인 영역처럼 보일 수 있습니다.
여기서의 교훈은 페이지의 단일 영역에 이질적인 정보가 너무 많이 포함되도록주의하는 것입니다. 상황에 따라 많은 양의 콘텐츠가 필요할 때가 많지만 조직은 아래의 아름다운 예 (비 Microsoft 사이트)에서 볼 수 있듯이 일관되고 매력적인 방식으로 처리되어야합니다.
# 4 불일치
Microsoft.com에서 시작하여 gargarantuan 탐색 드롭 다운 메뉴를 열고 방문 할 사이트 영역을 선택하십시오. 어떤 링크를 클릭하든 결과 페이지는 홈페이지와 상당히 다르고 동일한 드롭 다운에서 사용 가능한 대부분의 다른 링크와 다릅니다.
Microsoft 사이트를 탐색하는 것은 룰렛을 돌리는 것과 같습니다. 실제로 어디로 착륙할지 다음 페이지에서 무엇을 기대해야하는지 전혀 모릅니다. 일부 페이지는 배경이 흐릿하고 다른 페이지는 부드러운 그라데이션 또는 폭발하는 원을 사용합니다. 대부분의 페이지는 파란색을 선호하지만 반드시 동일한 파란색은 아니지만 파란색 추세를 완전히 무시하는 페이지가 많이 있습니다.
요점은 사이트에 두 페이지가 있든 이백 개가 있든 일관성은 필수입니다. 몇 초 안에 사이트가 작동하고 보이는 방식에 익숙해지면서 사용자가 더 편안하게 느끼도록합니다. 몇 페이지마다 크게 다른 것을 제공하면 탐색이 더 혼란스럽고 덜 효율적입니다.
이 외에도 강력하고 일관된 브랜드를 만드는 것은 고객이보다 개인적인 방식으로 회사와 관련 될 수 있도록 도와주는 훌륭한 비즈니스라는 아이디어가 있습니다. 물론 마이크로 소프트는 홈페이지에서 유래 한 다양한 브랜드와 마이크로 사이트를 저글링하고 있지만 핵심 Microsoft.com 페이지로 간주 될 수있는 이미지 중에서도 이미지 테마와 탐색 방법은 매우 다양해 보입니다.
# 5 클립 아트 중심 디자인
이 제안은 클립 아트와 Microsoft Office가 항상 서로 얽히게 된 방식으로 볼 때 약간 터무니없는 것입니다. 그러나 아이콘 디자인은 1995 년 이래로 먼 길을 왔으며 이제는 사용하는 이미지에서 특정 스타일을 포기할 때입니다.
다양한 Microsoft 페이지에서 가져온 위의 예술 사례는 특히 "초보자 개발자"로고가 너무 심하게 울부 짖습니다. 나는 부메랑이 식물을 공격하는 이유 또는 마법의 호버링 컴퓨터 모니터가 공격을 돕는 지 또는 장면을 피하고 있는지 전혀 모른다. 내가 아는 것은 여기서 시각적 의사 소통은 말할 수없는 혼란이라는 것입니다.
이것이 우리와 같은 CSS 갤러리가 존재하는 주요 이유 중 하나입니다. 따라서 다른 사람의 디자인을 훔칠 수는 없지만 개발중인 10 년 동안 디자인 상태를 엿볼 수 있습니다.이 갤러리를 탐색하는 것은 쇼핑몰에서 인기있는 의류 매장을 방문하여 그녀는 Sunny and Cher 쇼의 누군가처럼 옷을 입을 필요가 없습니다.
항상 자신의 시작을 통해 경계를 허물고 현재의 deisgn 트렌드를 넘어서십시오. 세계의 다른 지역으로 이동하는 동안 몇 년 동안 완고하게 정체 상태를 유지하는 데주의하십시오.
# 6 잘못 정렬 된 오버플로 텍스트
Microsoft 사이트에서 놓치기 어려운 또 다른 추세는 명백한 경계를 넘겨 끊임없이 끊어진 텍스트 열입니다.
이것은 수정하기가 쉽고 실제로 약간의 노력과주의가 필요합니다. 주요 브라우저에서 레이아웃이 깨지지 않도록 Adobe의 브라우저 랩과 같은 무료 도구를 활용하십시오.
CSS 레이아웃은 브라우저 간 일관성에있어 까다로운 문제이지만, 이와 같은 작은 실수는 실제로 사이트 품질을 저하시키고 해결하는 데 시간이 걸리는 문제의 가치가 있습니다.
# 7 불쌍한 정렬
때로는 주어진 페이지에서 어떤 디자인이 지적해야 할지를 결정해야하는 어려움이있었습니다. 예를 들어, 아래 페이지에서 원래 클릭했을 때 더 커지지 않는 작은 스크린 샷을 사용하는 것을 고려했지만 페이지를 많이 볼수록 진행 상황에 대해 더 혼란스러워했습니다. 배치.
기본 디자인 이론에 익숙하다면 견실하고 일관된 정렬을 구현하는 법을 배우는 것이 좋은 페이지 레이아웃의 핵심이라는 것을 알고 있습니다. 위의 사이트에서 발생하는 왼쪽, 중앙 및 오른쪽 시각적 정렬의 이상한 혼합은 상단 근처의 어색한 빈 공간과 관련하여 제시되는 정보의 시각적으로 이상한 흐름을 만듭니다.
또한 위의 페이지를 방문하면 내용 전체가 중앙에있는 것처럼 보이지만 실제로 중간에있는 스트립에 의해 던져 져서 페이지가 중앙의 오른쪽에있는 것처럼 보입니다.
# 8 광고 혼란
이와 같은 무료 디자인 블로그는 많은 광고를 제공해야합니다. 이는 단순히 수익을 창출하고 콘텐츠를 계속 제공하는 방법입니다. 그러나 전문적인 비즈니스 사이트를 운영하는 경우 광고를 통해 메시지와 전문성을 떨어 뜨리려면 신중하게 고려해야합니다.
Microsoft.com의 페이지에는 현재 페이지의 미학을 진정으로 보여주는 다양한 광고가 있습니다. 때때로 이러한 광고는 다른 Microsoft 페이지, 다른 회사 또는 파트너를 직접 가리 킵니다. 트래픽을 사이트의 다른 부분으로 보내는 개념에는 아무런 문제가 없지만이를 달성하는 방법은 큰 차이를 만들 수 있습니다.
대부분의 웹 사용자가 배운 것을 무시하고 무시하고 배운 것이 있다면 배너 광고입니다. 이 유형의 광고가 적절한 타겟팅 및 디자인에서 작동하지 않거나 Microsoft 사용자가이를 클릭하지 않았다고 말하는 것은 아니지만 더 좋은 방법이 없는지 궁금합니다.
Microsoft가 자신의 휴대폰 및 기타 프로젝트로 트래픽을 보내려는 경우 쉬운 방법은 전체 사이트에 롤링되는 복잡하고 비표준 (디자인에 적합한) 광고 시스템을 설정하는 것입니다. 그러나 실제 사이트의 일부로이 콘텐츠를 통합하면 더 많은 사용자가 메시지를 기록하고 배너 광고를 피하는 것에 대한 내재화 된 규칙을 위반하지 않아도되므로 클릭률이 훨씬 높아집니다.
또한 이러한 통합으로 인해 설계가 별도의 팀이 아닌 단일 단위로 작성되므로 설계의 일관성이 높아집니다. 다시 말하지만, 이것은 Microsoft의 접근 방식의 비용 효율성을 이해할 수있는 시나리오이지만, 그들의 리드를 따르지 않도록주의하고 싶습니다. 이상하게도, 귀하가 디자인하는 사이트는 Microsoft 사이트의 대규모 네트워크와 경쟁하지 않으므로 견고하고 통합 된 디자인에 적합 할 것이므로 초과 광고의 시각적 혼란을 피할 수 있습니다.
분명히, 광고가있을 것으로 예상되기 때문에 이것이 전혀 적용되지 않는 많은 사이트 장르가 있습니다. 귀하의 사이트가 귀하의 제품이나 서비스 판매에 전념해야하는지 또는 추가 수입과 광고 방해가 필요한지 고려해야합니다.
# 9 호흡 실 부족
인쇄 디자인에서 디자이너는 모든 영역을 "실시간 영역"으로 설정합니다. 일반적으로 페이지 잘라 내기 또는 가장자리 혼잡을 피하기 위해 콘텐츠를 안전하게 배치 할 수있는 영역을 정의하는 페이지 다듬기에서 직사각형으로 삽입됩니다. 대부분의 웹 디자이너는 브라우저 측면에 너무 많은 콘텐츠를 넣지 않기를 원하기 때문에 직관적으로이 작업을 수행합니다.
그러나 위의 스크린 샷에서 볼 수 있듯이 이러한 의견에 재고를 넣지 않은 Microsoft 페이지가 몇 개 있습니다. 대신 페이지가 가로 패딩이나 여백 (적어도 내가 확인한 브라우저에서)으로 페이지가 시작되는 즉시 내용이 시작됩니다.
탐색 패널은 페이지 측면에 내장되어 있다고 생각하지 않으며 차단되는 것처럼 느낍니다 (다시 말하면 IE가 없기 때문에 그렇게 할 수 있습니다). 여기서 배우는 것은 간단합니다. 항상 브라우저 창의 가장자리를 의식하십시오. 명백한 시각적 출혈 효과에 대한 규칙을 위반하지 않는 한, 사용자가 컨텐츠를 사용하려고 할 때 혼잡하지 않도록 컨텐츠, 특히 대화식 부분 및 링크를 안전한 여백 내에 배치하십시오.
위의 스크린 샷을 자세히 보면 모든 주요 브라우저에서 텍스트가 제대로 흐를 지 여부를 고려하지 않는 Microsoft 디자이너의 더 많은 예를 볼 수 있습니다. 많은 웹 디자이너들이 하루 종일 Microsoft의 Internet Explorer에 특별한 편의를 제공하기 위해 노력하고 있기 때문에 이것은 Microsoft에게 매우 재미있는 추세입니다.
# 10 인재 활용 실패
Microsoft의 웹 디자이너에 대한 위의 부정적인 의견이 많이 있지만 실제로는 실제로 놀라운 사이트와 페이지가 몇 개 있다는 사실에 놀랐습니다.
위의 예제는 Microsoft가 레이아웃, 색상 선택, 그래픽 및 브라우저 간 호환성으로 실제로 공원에서 떨어 뜨렸다 고 생각하는 많은 장소 중 두 개입니다. 이것이 저에게 알려주는 것은이 회사의 방대한 큐비클 가운데 어딘가에 회사를 디자인 부진에서 완전히 벗어날 수있는 재능있는 인재가 있다는 것입니다.
이러한 디자이너는 누구든 협력하여 서로 협력하고 문자 그대로 모든 Microsoft 웹 디자이너가 따라야하는 일관된 표준을 설정할 수있는 위치로 승진해야합니다. 연결이 끊긴 끊김없는 미로 대신에 그들은 모두 같은 가족에 속하는 아름다운 사이트로 구성된 강력한 브랜드 네트워크를 만들 수있었습니다.
내가 당신에게 제시하는 마지막 제안은 자신의 회사에서 이러한 유형의 뛰어난 개인을 찾아 그들에게 목소리를주는 것입니다. 팀의 다른 구성원들 사이에서 인재 부족에 대해 애도를 표하기보다는 가장 강력한 디자이너와 개발자를 선정하여 특정 브랜드와 관련된 모든 시각적 커뮤니케이션에 영향을 줄 수있는 위치를 지정하십시오.
작업하는 모든 고유 브랜드에 대해 모든 디자이너 및 개발자에게 배포되는 명확하고 일관된 엄격한 브랜드 지침을 작성하여 효율적이고 효과적으로이를 수행 할 수 있습니다.
결산 생각
요약하자면, Microsoft는 상당히 재능있는 웹 디자이너를 보유하고 있지만, 신입 디자이너와 개발자가 첫 해에 기대할 수있는 표준을 충족하지 못하는 방대한 양의 컨텐츠로 인해 이들 개인의 작업이 거의 완전히 어두워집니다. .
다행스럽게도 Microsoft와 같은 회사를 교육 보조 도구로 사용하여 실제로 잘못된 방법이 있음을 명확하게 설명 할 수 있습니다. 혼자서 일하는 프리랜서 또는 소규모 디자인 회사이기 때문에 생산 품질에있어 거대 기업과 디자인 회사를 완전히 능가 할 수 없다고 상상하지 마십시오.
대기업의 책상에 앉아있는 것보다 전 세계 홈 오피스에서 우수한 디자이너의 사례를 찾는 것이 더 쉽다는 것을 알게되었습니다. 수백 명의 디자이너의 품질을 조정하고 제어 할 필요가 없다는 점에서 편안함을 느끼십시오. 소량의 개인용 드라이브와 함께 소량의 리소스를 사용하여 웹에서 최상의 사이트를 만들어 아름답게 기능적인 디자인을 만듭니다.
