Учене от Microsoft: 10 дизайнерски клопки, които трябва да се избягват
Днес ще разгледаме практиките и тенденциите в уеб дизайна на най-голямото име в софтуера, за да видим дали можем да научим нещо за някои грешки, които да избягваме в собствената си работа.
Не се колебайте да се съгласите или не сте съгласни с предложенията по-долу. Като професионални дизайнери вашето разбиране е ценно и с нетърпение очаквам вашите мисли.
Разгледайте дизайнерските ресурси
Случайният Rant
На всички, които мразят статии, пълни с тиражи, се извинявам, че този пост е малко суров на моменти. Обикновено предпочитам да възхвалявам добрия дизайн, отколкото да критикувам лошото, но когато Дейвид Appleyard и аз решихме да направим публикация за дизайнерските тенденции на Microsoft, просто изглеждаше много повече, за да научите за обърканите, грозните и / или несъобразните неща, които те правят, отколкото алтернативата.
За да ви отрежа в коментарите, в анализа по-долу няма да споменавам или да правя нито едно сравнение с Apple. Това не е най-малкото аргумент PC срещу Mac, а по-скоро поглед върху това, което смятаме за наистина лоши практики в уеб дизайна и разработката. Честно казано, Microsoft е изключително успешна компания и не изисква неуспех поради някой от тези проблеми. Всъщност, както посочваме по-долу, Microsoft наистина изглежда има звездни дизайнери в екипа за определени сайтове, ние просто предлагаме да се въведе по-високо ниво на контрол на качеството навсякъде.
Имайки това предвид, нека анализираме няколко места, за които изглежда, че Microsoft изостава в своите дизайнерски и разработващи практики и как можете да се възползвате от тези знания.
# 1 Пазете се от мандата на определени приставки
Ако сме научили нещо от скорошните драскания между Apple и Adobe, това е, че създаването на сайтове, изцяло зависими от затворени плъгини на трети страни, в крайна сметка може да доведе до сериозна обратна реакция. Майкрософт изглежда повтаря същата грешка, тъй като собствената му мрежа от сайтове става все по-обезпокояваща за Silverlight.
Докато разглеждах различни сайтове на Microsoft, подготвящи се за тази статия, постоянно ме тормозеха прозорците, които ме информираха, че не съм инсталирал Silverlight и следователно не мога да изживея уеб страницата така, както е предназначена да бъде гледана. Въпросът ми е „защо да отида по този маршрут?“ Особено когато говорим за прости слайдшоу и анимации, които могат да се правят с по-повсеместни технологии. Разрешено е, че Microsoft притежава Silverlight, така че има добър бизнес смисъл за тях да подкрепят инвестициите си, но това не означава, че това е най-добрият избор за вас да скачате на лентата си.
Независимо дали сте голям почитател на Silverlight или не, моят съвет е да бъдете изключително предпазливи относно това, че функционалността на вашия сайт се основава на тази или на която и да е подобна технология. Тъй като дебатът за това дали има смисъл да се разработват сайтове с Flash продължава да се загрява, вторите по ред системи като Silverlight стават още по-залагания. Където е възможно, придържайте се към кръстосан браузър, съвместим със стандартите код и инструменти, които не изискват допълнителна работа или инсталации от вашите посетители.
# 2 Гледайте вашата резолюция
Това е едно от най-големите ми оплаквания към Microsoft, просто защото той изглежда като помия дизайн. Несъмнено има добра линия, която трябва да ходи между запазването на размера на файла ви, за да увеличите използваемостта и да запазите снимките си чисти и чисти, но не мога да помогна, но усещам, че Microsoft изглежда по-податлив на показване на грозни, назъбени JPG файлове, отколкото буквално на всеки друг професионален сайт, който съм виждал през последните няколко години.
Непрекъснато намаляващото количество потребители на комутируемите интернет продължава да натиска приемливи размери на изображенията нагоре и нагоре. Това в никакъв случай не означава, че не трябва да полагате специални грижи, за да направите всичко толкова малко, колкото е разумно, но в момента, в който започне да тежи толкова силно върху дизайна, че драстично намалява видимото качество на сайта, изображенията стават самоунищожаващи се!
Живеете на чиста ирония, ако използвате изображения, за да направите сайта си да изглежда по-добре, но в крайна сметка да намалите естетическата си привлекателност в процеса. Когато е възможно, визуализирайте обработените си изображения на различни монитори и обърнете голямо внимание на това колко изкривяване и артефактиране смятате за приемливи.
# 3 Организирана струпване
Понякога можете да следвате всички очевидни правила за дизайн и все пак да се окажете с нещо, което визуално изглежда подразбиращо. Разглеждайки сайтовете на Microsoft попаднах на безброй области като тази по-долу, която изглеждаше претрупана, въпреки опитите им за организация, базирана на колони.
Та какъв е проблема? Най-просто казано, тук в сравнително малко пространство става тон. Дори мислеха, че определено са се опитали да подредят съдържанието и да подобрят визуалната четимост чрез икони, крайният резултат все още е доста балансиран.
Ако погледнете отблизо какво се случва тук, изглежда че има четири колони с информация, създадени от четирима различни хора, които са били натъпкани заедно. Лявата страна изглежда наистина тежка с изображения в сравнение с дясната, цветът на текста е малко спорадичен, съдържанието е неудобно подредено и колоните нямат достатъчно място за дишане, за да изглеждат като независимите области, които са.
Урокът тук е да внимавате да опаковате една област от вашата страница твърде пълна с различна информация. Несъмнено има много случаи, когато ситуацията ще изисква много съдържание, но организацията трябва да се работи последователно и привлекателно, както се вижда от красивите примери по-долу (от сайтове, които не са на Microsoft).
# 4 Несъответствие
От Microsoft.com отворете падащите менюта на навигационната навигация и изберете област на сайта, която да посетите. Без значение коя връзка щракнете, получената страница ще изглежда доста по-различна от началната страница и все още различна от повечето други връзки, налични в същото падащо меню.
Изследването на сайта на Microsoft е като завъртане на колело за рулетка. На практика нямате идея къде ще кацнете и какво да очаквате от следващата страница. Някои страници се отличават с необикновени фонове, докато други използват меки градиенти или дори експлодиращи кръгове. Изглежда повечето страници предпочитат синьото, но не е задължително същото синьо, а има и много страници, които напълно игнорират синята тенденция.
Въпросът е дали вашият сайт има две страници или двеста, последователността е задължителна. Това кара потребителите да се чувстват по-комфортно, когато могат да се запознаят с начина, по който работи сайт и изглежда в рамките на няколко секунди. Предоставянето им на нещо драстично различно на всеки няколко страници прави разглеждането по-объркващо и не толкова ефективно.
в допълнение към това има идеята, че създаването на силна, последователна марка е просто добър бизнес, тъй като помага на клиентите да се свържат с вашата компания по по-личен начин. Наистина, Microsoft жонглира с много различни марки и микросайтове, които произхождат от началната страница, но дори и сред онези, които биха могли да се считат за основните страници на Microsoft.com, темите за изображенията и навигационните методи изглеждат драстично разнообразни.
# 5 Дизайн, концентриран в клипарт
Това предложение очевидно е малко абсурдно, тъй като клип артът и Microsoft Office винаги са били неумолимо преплетени. Въпреки това дизайнът на иконите е изминал дълъг път от 1995 г. и е време да се откажете от този специфичен стил в изображенията, които използвате.
Примерите за изкуство по-горе, изтръгнати от различни страници на Microsoft, просто ме карат да се размишлявам, особено онова ужасно лого на начинаещ разработчик. Нямам идея защо бумерангът атакува растение или дали вълшебният висящ компютърен монитор помага при атаката или бяга от мястото. Знам само, че визуалната комуникация тук е неразгадаема каша.
Това е една от основните причини CSS галерии като нашата собствена съществуват. Не можете да откраднете дизайна на други хора, но така можете да видите представа за състоянието на дизайна през десетилетието, в което се развивате. Разглеждането през тези галерии е като посещение на популярни магазини за дрехи в търговския център, за да покажете на лудата си леля, че не е нужно да се облича като някой от шоуто Съни и Шер.
Винаги се чувствайте свободни да нарушавате границите и да се придвижвате отвъд настоящите дегниг тенденции, като започнете своя собствена. Просто бъдете предпазливи да останете упорито застояли години наред, докато останалият свят се движи напред.
# 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 като инструктивни помагала, за да илюстрираме ясно, че всъщност има погрешен начин да правим нещата. Никога не си представяйте това само защото сте самотен фрийлансър или малка дизайнерска фирма, която не можете да превъзходите напълно мегакорпорациите и дизайнерските фирми, що се отнася до качеството на работата, която произвеждате.
Открих, че често е по-лесно да се намерят примери за качествени дизайнери в домашните офиси по целия свят, отколкото да седиш на бюрата на големи фирми. Уверете се, че не е нужно да координирате и контролирате качеството на стотици дизайнери. Направете всичко възможно да създадете някои от най-добрите сайтове в мрежата с малкото количество ресурси, които притежавате, в съчетание с масово количество личен диск, за да създадете красиво функционални дизайни.
