Перечитывая в очередной раз блоги дизайнеров, заметил, что стало очень модно писать уроки в стиле:

• Как сделать крутую надпись..
• Как сделать Веб 2.0 логотип..
• Как сделать крутую тень..

Обдумал печальность этой ситуации и решил про это не писать.. В этом уроке так точно.. В этот раз речь пойдет о балансе между usability и дизайном..

Часто дизайнеры в своем стремлении сделать нечто новое и необычное, забывают, что в дальнейшем этим чем-то будут пользоваться люди, которым вооон та менюшка покажется неудобной и сложной, а сочетание цвета фона и текста сделает текст нечитаемым для людей без рентгеновского зрения.. И я считаю это нормальным и не стоит корить за такой поступок дизайнера, ведь прежде всего он человек исскуства (или таким хочет казаться).. Но если дизайнер хочет создавать нечто не только для себя, но и для людей + получать за это деньги, то для начала нужно уяснить одну истину: человек - это не робот, и он видит то что может, а не то что нужно.. Пожалуй начну:

Usability - термин, обозначающий насколько просто человек может разобраться и использовать что-то, созданное другими людьми, для достижения поставленной цели.. Грубо говоря - удобство использования..

Для себя я выделил всего несколько основных правил этого самого “удобства использования“.. В идеале их намного больше, но многие из них достаточно “экзотические“..

Если что-то не является обязательным для решения задачи, то это что-то желательно устранить..

Как-то давно изучая Ководство (да, читал и читаю, и довольно часто там попадаются мысли, которые не раз меня выручали), прочел статью о простоте в дизайне и не только.. С этого и началось мое более углубленное изучение usability.. В итоге я сейчас пришел к выводу, что многие привычные элементы дизайна стоит искоренять.. Да, на начальных этапах это может ввергнуть в шок рядового пользователя, но ведь когда-то кофе, картошка и зубная щетка отвергались людьми.. Один из примеров этой самой оптимизации и есть мой сайт уроков:

1. Список категорий сейчас расширять не планирую, поэтому было принято решение просто вынести его в миню..
2. Так привычный многим список тэгов, последних комментариев, архив записей и блок ссылок были убраны с сайта в следствии определенных рассуждений..
3. СайдБар так-же был убран за ненадобностью..

Некоторые удобные функции так-же были убраны, но это уже скорее моя вина - увлекся.. Но в принципе и без них сайт довольно просто может выполнять свои функции - учебник для тех кто желает учится и стать хоть чуточку, но лучше и профессиональнее..

Если на сайте используется более двух шрифтов - это не есть хорошо..

Достаточно давно прочел статью на GoMedia про шрифты в дизайне.. Хотя статья в основном дизайнерская, но применив советы описанные в ней - пришел к выводу, что ограничения шрифтов до двух влечет за собой достаточно ощутимое облегчение восприятия информации..

Переработал советы и модернизировал их на свой лад, в следствии чего получил такие выводы:

1. Использовать желательно два шрифта..
2. Первый шрифт - дизайнерский (не стандартный)..
3. Второй шрифт - стандартный и удобный для чтения..
4. Если первый шрифт - старинный или в стиле гранж, то для второго лучше использовать шрифт с засечками..
5. Если первый шрифт более новый или в стиле модерн, то для второго лучше использовать шрифт без засечек..

Контраст..

Про правила контраста можно написать целый учебник, но если коротко, то:

1. Текст должен быть легко читаемым и на большом растоянии и на более близком..
2. Если изображение перевести в grayscale (гамму только из серого, белого и черного цветов), то оно должно так-же легко восприниматься, как и в обычной гамме..
3. Если глаза быстро устают при просмотре изображения\дизайна\прочтении текста, то это не есть хорошо, и стоит задуматься о смене цветовой гаммы на более нейтральную или проверенную.. В этом может помочь сайт http://www.colourlovers.com.

Больше свободного пространства..

Многие дизайнеры стараются впихнуть в ограниченное и небольшое пространство все свои идеи и задумки, изредка выходит даже очень не плохо (пример тому многие мировые сайты новостей), но очень часто они только вредят..

Даже в фотографии есть свои правила: если портрет, то человек должен быть строго посредине фото.. И всевозможные высказывания в стиле “асимметрия в моде” тут не пройдут, ведь это классика..

Так и в дизайне: есть правила, которые можно и нужно нарушать, но есть те, которые может позволить себе нарушить только превосходный дизайнер с прекрасным вкусом.. Одно из таких правил - свободное пространство.. Это отступы в 5-10 и более пикселей вокруг изображений в тексте, вокруг самого текста и абзацев, отступы от полей.. Кроме того что так смотрится более презентабельно, так еще и удобнее и приятнее человеку просматривать и выделять более важные для него элементы….

Экспериментируйте..

Часто в бездумных часах проведенных в фотошопе у меня получались странные (на первый взгляд), но достаточно интересные (на мой взгляд) работы.. Так что экспериментируйте и будет Вам счастье и популярность..

Конечно же этот список правил и советов не полный, но даже этого хватит, чтоб избавиться от многих ошибок и проблем в дальнейшем..

З.ы. В планах осветить подробнее некоторые из этих пунктов и добавить в этот список новые..

Не для кого не секрет, что в наше время одним из основных источников трафика (посетителей) для сайта являются поисковики.. Грубо говоря, поисковики - это наборы скриптов, которые производят проверку, ранжирование (просчет позиции сайта в поиске), сканирование и тому подобные операции для предоставления рядовому пользователю наиболее подходящей его запросу выдачи сайтов..

Ух.. Сложно сказал.. Да и сказанное для многих уже не секрет (но это же вступительная статья к теме)..

В сети так-же обитают так называемые Сеошники - люди профессионально занимающиеся раскруткой сайтов.. Для многих это некие волшебные феи, которые за определенную плату делают сайт заказчика посещаемым и выполняющим поставленную перед ним задачу..

Все выглядит довольно просто: заплатил денег - получил результат.. Но УВЫ.. Не всегда так.. Достаточно часто я слышу заявления:

Деньги уплатил, получил всевозможные обещания и 100500 посетителей в сутки, и ТОП над строкой поиска и что тока не обещали, но эффект - БАН сайта или просто вылет за пределы ТОП-1000….

И я уверен - такое происходит не редко.. И думаю заказчику такое крайне неприятно.. В глазах заказчика все сеошники после такого видятся в роли шарлатанов и обманщиков, играющих на доверии и жадности людей.. Хотелось бы попросить таких горе оптимизаторов:

Не знаете - не трогайте!! а опыта набираться лучше на тестовых сайтах, созданных специально под опыты, или совмещая приятное с полезным - делая сайты для продажи ссылок, что в итоге принесет своих убитых енотов в месяц..

За сим свою точку зрения я выразил.. =)

З.ы. Это был третий вступительный пост из трех.. В дальнейшем будут только уроки, уроки и еще раз уроки..

Этот пост будет первым из серии уроков css верстки.. Что удивительно - он был написан вторым, хотя верстку я люблю больше чем дизайн..

Итак, приступим:….

Очень хочется сделать вид мудрого и великого восточного философа, но думаю это будет лишним, да и не такой я вовсе, скорее я обычный НЕфилософ фром СНГ.. =)) Целый день продумывал фразу типа:

Валидная Css верстка похожа на полет птицы: стремительна и легка, но в тоже время идеальна и недоступна осознанию простых смертных!! Она чиста и прозрачна, как поток среди гор.. Одновременно проста и глобальна, как воздух….

Но начав писать понял, что это слишком мудрено и сложно.. Поэтому появилась идея написать проще:

Правильная Css верстка - это Lego, из которого так любят дети собирать волшебные замки, фантастические автомобили и т.д.. И чтоб задумка вышла - приходится задействовать всю фантазию и воображение, что имеется в распоряжении.. Находить детали, которые подходят по размеру и форме.. Состыковывать их и плотно закреплять, чтоб в конце не получить шаткое строение.. Возможно пару раз разбирать и создавать заново, используя иной подход, но в итоге получить ТО, о чем так давно мечтаешь….

Аналогично и верстка!! Сначала нужно сесть и просто подумать.. Представить то, что должно выйти и как лучше этого добиться.. “Спешка нужна лишь при ловле блох и….” - часто говорил мой препод по программированию (он же научил меня смотреть на вещи более глобально.. ДА!! из учебного процесса в универе можно вынести не тока умение списывать и верить в великую ШАРУ!! =)) хотя и это тоже)..

После того, как картинка сформирована и оптимальные пути решения задачи найдены - можно приступать к кодингу.. А там уже дело техники и изредка удачи.. Главное не спешить (кроме случаев срочной работы =_=), и если что-то не выходит, то частенько лучше просто начать все заново.. Много раз, удаляя файл и начиная писать его с нуля, я находил новый и более простые пути решения поставленной задачи, тем самым избегая ошибок.. Поэтому не стоит боятся повторить пройденный путь - это бывает полезно.. =)

На этом позвольте откланяться, надеюсь не заставил Вас скучать, читая эту вводную часть в разделе верстка..

А на последок желаю Вам творческих успехов и чистого кода!! =_= Удачи….