Редизайн в детайли
В тази статия ще покажa как да преработите дизайна на съществуващ сайт за да стане съвместим със световните уеб стандарти(информация предназначена за напреднали дизайнери)
Съдържание:
* Структура/structure
* Подреденост/alignment
* Цветове/colors
* Снимки/images
* Връзки/links
* Форми/forms
* Типография/typography
* Четимост/readability
* Начини на фокусиране
* Дизайн - Javascript
* Финиш на изработката
Ето правилата които спазвам при ре-дизайн на уеб сайтове:
Структура – информация, менюта
Пренапишете кода на уеб сайта си използвайки XHTML/CSS технологични варианти. Повече по темата може да прочетете тук
Избягвате се всякакви таблици – заменете ги с CSS варианти. За разположение на елементите може да използвате следните три вида изгледи:liquid(fluid), jelly или fixed http://blog.html.it/layoutgala/, като прецените тяхната функционалност в зависимост от изискванията на сайта Ви.
Така се осигурява по-добра позиция в търсещите машини и се разделя съдържанието от структурата. За в бъдеще ще обновявате сайта си много по-бързо от преди.
Преработка на основните елементи: Пренапишете менютата като използвате предварително стилизирани: <ul>
или ... XHTML тагове. Примери за готови стилизирани менюта можете да ползвате от http://css.maxdesign.com.au/listamatic/ Същото важи за информацията от горната и долна част на уеб сайта(неговите header и footer части).
Подреденост/alignment
За да си осигурите по-добро подреждане и ориентация поставете мислени линии(grids в photoshop) вървящи хоризонтално и вертикално през елементите на сайта –> може да ги симулирате като поставите в стила на елементите CSS свойството border: 1px solid black или да ползвате следният Web Developer plugin http://chrispederick.com/work/web-developer/. Така ще видите кои части излизат от линиите или са неправилно разположени в съдържащият ги елемент. Опитайте се да водите човешкото око по информацията, като избягвате хаоса от неправилно подредени елементи.
Без да разглеждам понятия като: фокална точка и др. в уеб дизайна е добре да се спазва подредения изглед/layout.
Много добро решение е да се използва 3D design в уеб страниците – умерено, чрез комбиниране на преден, заден фон и прозрачност между тях. застъпване на елементи
За целта може да използвате прозрачността на PNG/GIF файловете, както и CSS visibility и z-index свойствата поддържани от Firefox и Internet Explorer.
прозрачност и припокриване на елементи
Идеално е ако приложите закръглени ъгли в дизайна – като се използват варианти без images http://www.html.it/articoli/niftycube/index.html.
Цветове/colors
Добро описание на свойствата и внушенията които придават цветовете дава Китайската литература. Като начало съчетавайте цветовете като променяте свойствата hue, saturation и value на всеки един цвят във избран от вас графичен редактор. Тук експериментирането също е добро начало, но не забравяйте да спазите основните модели за смесване на цветовете http://www.worqx.com/color/
Също полезно е да пресъздавате цветови гами от природни картини, защото там всичко е натурално. Стремете се да не претрупате ползването на много цветове за придаване на внушения – защото това ще придаде хаос на целия уеб дизайн. Същото важи и за прекалено ярките цветове – избирайте пастелни тонове. Ярки цветове използвайте единствено, ако искате нарочно да покажете чрез тях нещо.
Снимки/images
Спазвайте големина на снимките/images да е възможно най-малка. Задавайте alt тагове за всяка картина, със специфицирани width и height атрибути, за да не трепти изображението при показване. Така ще намалите объркването на госта по време на престоя му в уеб сайта.
Връзки/links
За стилизиране на връзките ползвайте title атрибута *аналог на img alt атрибута. Там опишете съдържанието на връзката - помощ за потребителите предварително да видят какво ще представлява преди да кликнат, това е също полезно при оптимизация за търсещите машини.
визуализиране на връзки
Форми/forms
Укажете Label таговете чрез css свойството cursor:pointer. Така щом потребителя се доближи до label-a осъзнава че:
1. може да го натисне и
2. интуитивно ще бъде прехвърлен за да попълни съответните данни.
С javascript могат да се поставят default текст в полетата, които при клик се изчистват. Внимавайте, да не се претрупате текста във формата.
Също е добре submit бутоните да изпъкват щом потребителя почва да въвежда данни в формата - обяснението е че логично завършека на цялата форма ще е в изпъкналия бутон.
Типография/typography
Използвайте на scallable fonts, започвайте думите си с главна буква в менюта, форми и др. Измествайте второстепенните елементи под главния чрез CSS свойството padding, поставяйте ":" там където очаквате въвеждане на данни от потребителя.
Четимост на информацията/readability
Бяло пространство: за да не се дразнят очите на потребителите оставяйте празно пространство, върху което окото да си почива. Не е задължително това да е белият цвят. Между отделните секции/елементи също оставяйте място - това ще направи текста по-лесно четим.
За улесняване на четливостта на текста може да използвате css свойството line-height.
Показвайте 8-10 максимум думи на ред от изречение, като дължината на самият текст е се спазва да е от 250 до 400 думи. Всичко останало пренасяйте на други страници.
показване на подходящ брой думи в уеб страница
Организирайте текста в параграфи: чрез използването на тагове.
Начини на фокусиране
Изследванията показват, че при използването на един уеб сайт човек движи очите по шаблон F - тоест отгоре надолу като преминава надясно и се връща пак в ляво.
Чрез F шаблона може да се определи на кои елементи да засилите фокуса в уеб сайта.
Фокуса също може да се засили чрез вариации в големина на шрифта, удебелен, наклонен, подчертан.
Друг начин е чрез разместване разположението на даден елемент в един подреден вид.
Известно е че цветовете влияят върху възприятията на човек – като за концентриране на фокуса може да се играете с наситеност и разлика на цветовия тон. При използването на предходният метод се осигурявайте достатъчно контраст между припокриващите се foreground и background цветове.
Javascript
Избягвайте използването на Javascript - освен ако не е наложително. Към наложително определям: елементи за увеличаване на размера на текста, смяна на цветовата гама, или за спестяване на http-requests. Повечето от нещата могат да се направят и без javascript. Ако използвате, Javascript програмирайте така че потребители имащи IE4-IE7, Mozilla, Firefox, Netscape, Safari и други браузъри да могат да виждат скрипта(DOM 1,2,3 съвместимо).
Финиш на изработката
На края прегледайте как изглежда сайта без стилове/css/, javascript на браузъри като Links, Lynx или PDA browser. Това ще ви покаже най-добре т.нар. поток/flow на информацията в сайта, което е много важно, ако държите на логическата последователност в него. Така също ще избегнете и постоянните проверки на сайта, затова как би изглеждал в “очите“ на определен search engine.
При редизайна ползвайте правилото: “Излишното се маха“, аналогично с Линукс услугите – пускат се само тези които са нужни.
В по-късен етап използвайте логовете от уеб сайта за да анализирате поведението на потребителите(къде кликват) - там където нямате посещаемост означава че това е излишен елемент на уеб сайта. От логовете, enter и exit уеб страници също се научава коя е слабата част в уеб сайта ви, която може да поправите. В силните страници на сайта поставете реклама или връзка към ваш продукт или услуга. Създайте си акаунт в analytics.google.com - от там може да разберете предходните параметри. Единствено е нужно да инсталирате малък JavaScript код на сайта си.
Прочети по-късно
оценка
Уеб дизайн