Резолюциите в уеб дизайна

От доста време насам има нещо, което тормози уебдизайнерите по цял свят и то е постоянно нарастващия брой резолюции, респективно големината на самия сайт. Сигурен съм, че и най-добрите “драскачи” в сферата са изпадали в ситуация, в която се чудят с какво да запълнят даден блок от дизайна или какво да махнат, така че да изглежда по-добре. Понякога това води до много градивни промени. На всеки е ясно, че самият мисловен процес си е нож с две остриета, защото, както може да ви хрумне решение на проблема, така може да ви хрумне и нова идея, която искате да реализирате и заради която да смените дори цялата концепция. Ето защо никой не е застрахован от прекия слбъсък с този проблем.

Искам в тази статия да поговоря за това как да се справим с резолюциите, но както сами ще видите в корените лежат много други неща, които се изискват и трябва да се вземат под внимание от самото начало. Също така подчертавам, че статията не е предназначена само и единствено за уебдизайнери. Не претендирам и за някаква логическа последователност на стъпките, тъй като винаги има изключения, но като цяло ще се опитам да следвам нишката.

Hire me!Защо по дяволите ми трябва уебсайт?

Това е адски клиширан въпрос и е доста настрани от темата, но все пак от него се започва, а и забелязвам, че напоследък доста хора го пренебрегват. С две думи защо си правя сайт, трябва ли ми изобщо? Естествено аз ще разгледам случая, в който след доста безсънни нощи сте си отговорили положително на този въпрос. Решили сте, че искате да си направите мега-улра-гига суперски сайт, но като типичен български предприемач решавате да отделите по-малко бюджет, за да има все пак някой лев и за 6.3 AMG. Звъните няколко телефона, разглеждате дузина сайтове и вече имате любима фирма, като Mag Studio, например. От тук нататък поемат хората с опит в сферата!

Към каква аудитория сте се прицелили?

Първото нещо, за което трябва да се помисли е групата от потребители, към които ще е насочен сайтът. Естествено, че колкото повече хора влизат, толкова по-добре, но всъщност това ще бъдат само цифри на хартия. Вероятно малък процент от тези хора ще се застоят повече от минута и още по-малък процент ще използват сайта за това, което е създаден. Жестоката реалност, но какво да се прави.

В днешно време в домашни условия виждаме все по-големи и по-големи монитори, дори телевизори, в офисите пък пестят от бюджет и обикновено купуват по-стари и малки екрани, отделно имаме мобилни телефони, нотбуци, нетбуци и всякакви други “книжни” устройства, терминали и пр. Малко вероятно е сайтът, който ще правите да изглежда добре на всички изброени устройства и точно за това трябва да поставите едните пред другите. Т.е. ако сте ориентиран към бизнес клиенти е по-вероятно сайтът да се отваря от хора с лаптоп, което веднага ги слага пред останалите. Ако пък сайтът е за онлайн флаш игри, то е почти сигурно, че  на него ще попадне някой отегчен офис работник, а не домашен потребител. Но има и друг тип аудитория – възрастова. Например рибарски сайт би бил пълна трагедия, ако очаквате в него да влизат деца. Те не обичат да четат. Те се впечатляват лесно, обичат да им е шарено и кликат на забранени места. За тях Vbox7 или Impulse биха били по-подходящи. В сайт за бебешки стоки ще влизат предимно майки и татковци между 25 и 40 например. Ако все още се питате какво общо има възрастта, то веднага ви давам пример – рекламата. Всеки сайт с амбиции би рекламирал и ако има по-ясна представа каква аудитория гони, то ще знае и къде да рекламира. Така ако искам да рекламирам презервативи няма да го правя в рибарския сайт, а във Vbox7, защото там е таргет групата ми. Бебешките стоки? Ами бих пуснал реклама в Bg-Mamma, Tialoto.bg, Rozali.com и т.н., а не в Zamunda, където има огромен трафик, но предимно от младежи. Примерите са доста повърхностни, но са колкото да схванете идеята.  Както виждате тези приоретизации са важни за уточнение, тъй като от тях зависи и всичко в следващите стъпки или иначе казано – размерът на екрана, резолюцията, браузърът, дизайнът като цяло и др.

Колко ми е голям… екранът?

Тук нещата са горе-долу ясни – както казах по-горе, домашните потребители ползват по-големи монитори от типа на най-масовите 22″ или 24″, а някои от тях имат телевизори за тази цел. Бизнес персоните имат лаптоп на рамо или iPhone в джоба. Ако ви се падне нещо различно от този тип устройства или производните им, значи сте достатъчно напреднал и няма нужда да четете това.

Потребителски браузър – ами сега?

Ще питате какво общо има браузърът? Ами всъщност играе голяма роля! Ако аудиторията, в която се целим е по-широка, то браузърите през които се посещава сайта, също ще са доста разнообразни. Ако обаче се върнем на примера с уебсайта за флаш игри, то там е  много вероятно вече познатият офис работник да го посети и то на поостарял браузър, тъй като в офисите не се обновяват често. Остарелите браузъри от своя страна могат сериозно да порежат визията на сайта и така ако сте си играли дни или седмици да създадете някоя глезотия, то шанса да бъде тя изобщо видяна намалява. Дори по-лошото – страницата може да изглежда ужасно. Погледнете го от финасова гледна точка – инвестирали сте пари, които отиват на вятъра. Разбира се за всичко има решение, но тук изниква следващият въпрос – заслужава ли си парите и времето? Т.е. ако се опитате да вкарате CSS3 благинки под Internet Explorer 6 ще отнеме време, но ако този браузър се ползва от 2% от потребителите ви, то тогава не си заслужава. В такъв случай е по-добре просто да се опитате да извлечете максимума, който ви е позволен.

Разбира се браузърите в днешно време нямат кой знае какви проблеми що се отнася до масовата употреба, но повярвайте има малки мрачни стаички, обладани от тъмна магия, в които се чува само ехото на кликащия миш бутон. Тази метафора всъщност представлява всички поостарели машини из цял свят, които индивидуално остават в сянка, но обединявайки се правят един доста голям процент интернет потребление. Вярвате или не все още има места където се ползва Windows 95, IE 5 и подобни музейни експонати. Може би мислите, че говоря прекалено глобално, но никой не знае откъде ще му дойде.

Layout

Тъй като е рано още да се хвърляте на дизайн, ред е на лейаута. Първо обмислете какво точно ще има на уебсайта – дали ще са просто статични страници с текст, дали ще има галерия, магазин, прозорче с Twitter съобщения, новини и изобщо неща от този тип. След като си нахвърляте всичко ще имате ясната представа кое колко място ще заема и съотвено какъв тип лейаут да използвате – фиксиран или “течен” с всичките му там производни. Фиксираният лейаут е с твърда ширина и независимо на какъв екран се отваря, тя си остава същата. Website Layout“Течният” от своя страна се разтяга спрямо големината на екрана. Какви са плюсовете и минусите на всеки от тях? Фиксираният е много по-лесен за направа и за поддръжка. Освен това изглежда сравнително прилично на малки и големи резолюции. Най-използван е и ще знаете, че това, което сте сложили на едно място – ще си седи винаги там… което е успокояващо, както и да го погледнем. Основният минус е, че  при фиксирания лейаут с малка ширина нещата изглеждат добре до един момент, но колкото повече нараства площа на екрана, респективно резолюцията, има опасност да получим едно мааалко сайтче с гигански празни пространства отстрани. А представете си, че тези пространства не са бели, ами черни… или оранжеви? “Течният” или флуиден дизайн пък има един голям плюс – user-frendly. Т.е. той се определя спрямо резолюцията и размера на екрана и ако е направен добре, няма проблеми с визуализацията под различни устройства, но веднага идват и минусите. Адски трудемко е да се направи качествен дизайн, тъй като трябва да се покрият безкрайно много ситуации и да се предвидят купища неща. Като други минуси могат да се изтъкнат проблемите със статичните изображения, видео и т.н. Освен това при малко съдържание и голям екран резултатите са плачевни – огромни празни пространства, тъй като сайтът е разтегнат от край до край, а съдържанието ни представлява 2 много дълги реда. На последно място, но не и по важност – самият дизайн при флуидния тип лейаут обикновено използва по-семпли форми, тъй като се разтяга в най-различни посоки и работата със сложни изображения доста често е невъзможна.

Палитра

Тук разбира се най-важното е в каква категория се вписва уебсайтът. Например за бизнес сайтове се предпочитат по-светлите, стилни и не толкова крещящи гами, за дизайна пък е съвсем обратното – всеки иска да покаже каква шарения може да направи. При сайтовете за деца преобладават семплите форми, придружени от колоритни картинки и разннобразни цветове. В добрите сайтове с магазини също предпочитат по-светлите и неутрални тонове, тъй като обикновено всички продукти се снимат на бял фон и контрастът става по-малък и потребителя запазва вниманието си върху най-важното – продуктите. Разнообразието е пълно и тук важи правилото, че правила няма. Все пак обаче ние говорим за резолюции и нека погледнем от този ъгъл. Ако сайтът ви пасва перфектно на дадения екран едва ли ще имате някакви проблеми. Ако обаче ползвате фиксиран лейаут, а екранът ви е голям, то трябва да помислите за фона на сайта, защото той ще заема най-голяма площ. Винаги се препоръчва нещо неутрално, от което не боли глава при продължително гледане. Друг проблем на големите резолюции е, че обикновено в тях има и доста повече видимо съдържание на екран и трябва да се внимава с контрастните елементи, защото ако на по-ниска резолюция виждате 3 помпозни циганско-зелени заглавия в едната колона, то на по-висока те ще са 9 например и това ще доведе до нежелано отвличане на вниманието (освен ако не е търсен ефект). При малките резолюции също трябва да се внимава, тъй като съдържанието изпълва екрана и ако иначе приятното синьо меню стои добре на висока резолюция, то на ниска всъщност може да заема една трета от екрана и да преизвиква епилепсия.

Дизайн

Ами това е следващата и последна стъпка, която обобщава всичко казано по-горе. Ако сте преминали през всички етапи, то много въпросителни ще са отпаднали и дизайнът ще е наполовина готов.

Със сигурност пропускам доста неща, някои нарочно, някои не, но мисля, че този тип статии не трябва да представляват безкрайни обяснения с примери. Един вид не можеш да кажеш това се прави така, а това – иначе. Уебдизайна е изкуство и като всяко друго, то има правила, които обаче не са глобални и строго определени. Стъпките по-горе само очертават рамката за преодоляването на един от многото проблеми в това изкуство.

Коментари (3)

  1. Отговор November 18, 2009 / 22:16 jorok: Резолюциите в уеб дизайна – edno23.com

    […] в уеб дизайна http://joro.me/design/web-design-resolutions/ в Любими преди 29 секунди edno23.com Начало контакти […]

  2. Отговор November 19, 2009 / 13:57 Pavel Ivanov

    звучи все едно всеки ден се сблъскваш с подобни неща 😛
    страно защо ми е доста познато това 🙂 дано някой ден IE6 умре тотално 🙂 и всички производители на браузери и операционни системи си стиснат ръцете 🙂 и животът на такива като нас стане с една идея по-лесен 🙂
    браво Жоре 🙂 продължавай все така 🙂

  3. Отговор November 20, 2009 / 13:51 Leonidcho

    Проф. Роки стайкс ъгейн

Contact
captcha