Текст книги "Создание сайтов"

Форма и содержание

Глава 9. Дизайн сайта: рационализм в каждом «вау!»

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

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

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

Когда говорят, что лучший дизайн – тот, что решает ваши задачи, и не имеет значения, насколько он впечатляющ, это наполовину лукавство. На вторую половину. Конечно, отдача от сайта прекрасно доказывает или опровергает уместность стилистического решения, однако вау-эффекта никто не отменял. «Чистенько, но скучно» – такой эпитафии удостоились бы многие сайты, если бы существовала традиция хоронить их, как людей. Веб-проекту нужна изюминка, искра, фишка. То же, что в музыке: у львиной доли поп-песен предсказуемая для европейского уха гармоническая структура, что не мешает композиторам придумывать мелодические ходы, которые вызывают у публики дрожь удовольствия от «предсказуемой неожиданности».

Попробуем выделить важнейшие свойства осмысленного и «плодоносного» веб-дизайна.

• Он «пролонгированно сногсшибателен». Не только сшибает с ног, но и, мигом подхватив опешившего посетителя, сажает его в комфортабельную вагонетку и везет по продуманному маршруту через комнаты вашего сайта. Длительность и постоянство воздействия обеспечиваются стилистическим единством, связанностью и преемственностью элементов на всех уровнях, во всех разделах: его элегантность – в самой концепции визуального ряда, а не в вылизанной главной странице.

Следите за тем, чтобы узловые точки, в которых посетитель вашего сайта будет принимать важные решения, были «легко пеленгуемыми» и чтобы варианты выбора считывались явным образом. Пусть даже не прочитавший на титульной странице ни строчки интуитивно понимает, куда ему нырнуть дальше. Правильно поставленные ссылки, цветовые акценты, хлесткие триггеры – средств проложить тропу видимо-невидимо.

Надо отметить, что дизайн призван не затмевать контент, а делать его максимально доступным.

Обратите внимание

Открывая сайт, пользователь должен видеть самый важный для принятия решений контент без прокрутки экрана – до «линии сгиба», как ее называют эксперты по юзабилити.

• Он функционален. Радует глаз – чудесно. Однако глазу должно быть и за что зацепиться. Иначе анфилада рубрик, разноцветье графики и изыски стиля быстро наскучат визитеру. Все равно что загнать школьный класс в Эрмитаж строго на полтора часа без экскурсовода. Наотрез отказываемся от малейшего намека на чистое украшательство. Либо прямо, либо косвенно любой элемент веб-страницы должен работать на заданные вами цели: в интернет-магазине – подталкивать к покупке, на новостном портале – побуждать к прочтению материалов по теме. Внедрять же на своем сайте арт-объекты ради арт-объектов – прерогатива художников и мистификаторов. Притом концентрированная функциональность не исключает эстетических изысков (рис. 18).

• Он соразмерен времени, месту, бизнесу, целевой аудитории. Дизайн, будучи искусством прикладным, отличается ситуативностью, чувствительностью к контексту. Так, инопланетные сюжеты в духе молодежного онлайн-журнала W-o-s.ru вгонят в ступор большинство заходящих в хабаровский интернет-магазин гидронасосов.

^{Рис. 18. Сервис онлайн-бронирования авиабилетов OneTwoTrip: ничего лишнего и сплошная функциональность – это не всегда уныло}

С одной стороны, базовые принципы разумного веб-дизайна годами сохраняют актуальность, с другой – он крайне изменчив в своих конкретных воплощениях. Чтобы оставаться на волне, веб-дизайнеру приходится регулярно изучать новые тренды (см. блок «Полезно знать»). Девяносто пять человек из ста не сумеют четко сформулировать, чем их оттолкнул опрятный толковый сайт, оформление которого устарело года на три, но невнятная аргументация отказа не отменяет самого факта отказа. В каких-то тематиках диктат отраслевой конъюнктуры жестче (видеохостинги), в каких-то мягче (сайты грузоперевозчиков), но в той или иной форме он присутствует.

Однако помните: исключения возможны, главное – отталкивайтесь от специфики своего бизнеса. Извольте «неправильную» историю успеха. На конец 2012 года у сайта «Ваш репетитор», который связывает частных преподавателей с их потенциальными учениками, конверсия при исчислении в уникальных пользователях в месяц достигала 8–10 % – очень много по меркам ниши. Разумно консервативный с точки зрения дизайна (рис. 19), проект собрал множество колкостей от «просвященных интернетчиков»: «Привет из начала нулевых! Сейчас даже на бесплатных хостингах дизайн моднее». А разгадка проста: создатели площадки ориентировались на лояльную, но технологически инертную, не слишком гибкую в своих предпочтениях аудиторию, каковой особенно много оказалось в регионах, притом что в структурном отношении дизайн был предельно рационален. Радикальный редизайн грозил бы ухудшением целого ряда метрик, затрагивающих интересы бизнеса «Вашего репетитора» в целом.

^{Рис. 19. «Ваш репетитор» имеет чуть старообразный дизайн, однако это не просчет, а фишка: юзабилити у проекта на высоком уровне}

Следить за трендами веб-дизайна надлежит не только тем, кто его рисует, но и всем занятым интернет-бизнесом. Сегодня в мире преобладает одна манера, завтра – другая. Если долго игнорировать эволюцию общепринятого визуального языка, есть риск рано или поздно утратить контакт с целевой аудиторией.

Часто школы веб-дизайна вступают в негласную полемику, доказывая каждая свои преимущества. Скажем, широко распространен так называемый плоский дизайн: двухмерная проекция, действительно «уплощенные» объекты, простые чистые цвета, минимализм, четкие символы с преобладанием типографики. Главным поборником данного направления была и остается компания Google. Параллельно годами процветает радикально противоположная школа, предпочитающая детализацию, имитацию объема, эффекты, свойственные объектам из реального мира (онлайн-ежедневник – так чтобы с фактурой кожи на фоне да с бликами). Долгое время таких принципов в дизайне придерживались в корпорации Apple, однако выпущенная ею во второй половине 2012 года мобильная операционная система iOS 7 оказалась, к изумлению публики, «плоской».

Будем исходить из того, что дизайн вы заказываете отдельно от прочих сайтостроительных работ и абсолютно свободны в выборе исполнителя. Заклинаем вас: если вы не остановили выбор на конструкторах сайтов и не доверили все-все веб-студии, удовлетворившись ее средним прайсом, не скупитесь на дизайн. Вместе с тем соизмеряйте расходы на него с совокупным бюджетом: вам надо будет потратиться и на программирование, и на верстку, и на тестирование, а впоследствии – также на поисковое продвижение, на контекстную рекламу и т. д. Заметим, что в веб-студиях на дизайн уходит 15–60 % бюджета проекта.

Работайте с дизайнером, равно как и с любым фрилансером, исключительно по техническому заданию. Мясо ТЗ нарастает на костях брифа – краткой концепции сайта, которую вы, само собой, живо обсуждаете с дизайнером.

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

Убедитесь, что словосочетание «дизайн сайта» вы и ваш визави трактуете одинаково. Есть ли у вас логотип? А фирменный стиль в целом, и если да, то унаследован ли от его создателя полноценный брендбук или гайдлайн? И то и другое – большущий пласт работ, сверх того, целый проект, и его выполнение нужно обсуждать отдельно.

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

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

Традиционно сама верстка оплачивается отдельно. По умолчанию ею должен заниматься еще один профессионал – верстальщик; его труд в просторечии выразительно называется «натягиванием дизайна на сайт», что близко к истине: он «нарезает» графические макеты и структурирует их под формат HTML. Заранее узнайте, владеет ли дизайнер валидной кроссбраузерной версткой (см. блок «Полезно знать»), его ли это профиль, и если нет, то работает ли он в паре с соответствующим специалистом.

Не хватает денег на эксклюзивный дизайн? Используйте один из тысяч шаблонов, например с самого известного онлайн-склада TemplateMonster.com, и, если потребуется, заплатите за его адаптацию профессионалу средней руки. Цена вопроса – десятки, реже сотни долларов. На первых порах в использовании добротных типовых решений нет ничего зазорного, особенно если у вас типовой бизнес: автомойка, нотариальная контора, ремонтная мастерская и т. д. Единственное, раз уж на текущем этапе вы предпочли готовое оформление, советуем вам честно купить его. Умыкнув шаблон, вы рискуете своей репутацией.

Не взваливайте на дизайнера ответственность за собственные ошибки. Если вы утвердили макет, в котором не предусмотрены места под баннеры, то не вините дизайнера в просчете, когда они вам потребуются. Впрочем, въедливый дизайнер не преминет уточнить спорную, с его точки зрения, директиву и мягко дать полезный совет: лучше сторонитесь исполнителей, которые с одинаковым выражением лица кивают на любое ваше предложение и не склонны к диалогу.

Нежелательно требовать от веб-дизайнера нарушения устоявшегося в Сети этикета, который, кстати, подчас неотделим от «правил безопасности». Оба старайтесь соблюдать элементарные правила приличия:

• при наборе текста использовать стандартные шрифты;

• не скрывать в браузере посетителя адресную строку и не настраивать автоматического изменения размеров его окна;

• использовать технологию Flash только там, где она незаменима (а HTML5 почему-то неприменим);

• не забивать свободное пространство чем попало, лишь бы не пустовало (сайту, в конце концов, нужен «воздух»);

• не выделять слишком много места под рекламные блоки, так как после превышения некоего предела возможны проблемы с индексацией сайта как Google, так и «Яндексом»;

• не использовать для ссылок картинки вместо текста и т. д.

И никогда не забывайте, что по-настоящему классный дизайн обладает тем, что называется soft power – «мягкая сила», и завоевывает сердца посетителей не только реализацией яркой идеи, но и мелочами, которые на деле-то совсем не мелочи: шрифты, градиенты, тени, блики, отступы от границ. В деталях – не только дьявол, но и божья искра.

Мы порекомендовали вам не жалеть денег на дизайн. Логично, что вы спросите: кому не жалеть-то? Часть советов дана в главе 3 «Работа с фрилансерами: freelance, freelove», и мы постараемся обойтись без самоповторов.

При первой же возможности нанимайте лучших профи – затраты окупятся сторицей. Особенно актуальна эта рекомендация, если ваш бизнес напрямую зависит от числа заказов, поступающих через Интернет.

Часы, проведенные в изучении работ одиночек и студий на отраслевых площадках Bestwebdevs.ru и Revisio.ru, не будут потрачены зря: рассматривайте портфолио, читайте отзывы, делайте выводы.

Многие толковые дизайнеры ведут собственные блоги или даже поддерживают целые сайты профессиональной тематики: заметки, написанные в вольном жанре, а также спонтанные иллюстрации «для души» зачастую говорят о специалисте больше, чем выверенное, навощенное и сбрызнутое одеколоном портфолио.

На шрифт и цвет товарищей нет. Кто-то без ума от кибербарокко в исполнении F26 (http://www.f26.ru), а кого-то хлебом не корми – дай глянец а-ля Фригер (http://freeger.com). Мы посоветовали вам нанимать лучших, но искать «самую лучшую студию» или «самого крутого дизайнера» смысла нет: это материя субъективная и эфемерная; условно говоря, на эти лавры претендует «Студия Артемия Лебедева», и многие коллеги склонны уступить ей первенство, однако ее девиз не формулировкой, а сутью своей (см. http://artlebedev.ru) отсекает от нее огромный пласт клиентов из малого и среднего бизнеса. Присматривайте эстетически близких вам творцов из первого и второго «дивизионов» – и выбирайте из топ-30. Или топ-50, или топ-100 – смотря каковы ваши притязания.

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

Еще один рецепт – посмотрите, кто делал ваши любимые сайты. Из числа нишевых. Не порфироносные Vedomosti.ru, а, например, Lifehacker.ru или Postnauka.ru. Если какое-то имя – человека ли, студии ли – попадается вам чаще прочих, приглядитесь: возможно, вам к нему.

При скромном, но обаятельном для фрилансера бюджете можно попытать счастья не только на Fl.ru (в прошлом Free-lance.ru), но и на биржах наподобие GoDesign.ru, где заказчик проводит среди дизайнеров открытый конкурс и выбирает наиболее понравившееся ему решение. Недостаток подобных площадок – непредсказуемость работ с точки зрения качества: огромное количество предложений относится к категориям «унылое дилетантство» и «да сойдет», хотя здесь есть шанс найти талантливого новичка, который за неимением солидного реноме набивает руку, трудясь почти задаром.

Вопрос хороший, но на него придуман контрвопрос получше: «А сколько стоит автомобиль?» Ответ на них один: смотря какие у вас требования, смотря чего вы хотите от приобретения, смотря с чем готовы мириться. В Рунете обретаются тысячи дизайнеров и сотни студий, и значительная их часть, особенно среди региональных, предлагают сварганить дизайн по цене не самого нового смартфона. В среднем лучше готовить себя к тому, что меньше 30–40 тысяч рублей за дизайн сайта уважающий себя профессионал не возьмет, разве только вам нужен сайт-визитка. Большинство средних проектов укладывается в вилку 60–120 тысяч рублей. В случае с самыми именитыми художниками от веб-дизайна верхняя планка поднимается на удвоенную, а то и утроенную высоту.

Также цена зависит от объема сайта (вернее, от того, сколько видов страниц в нем будет использовано), от его типа, от задействованных при его создании технологий и от многих других факторов.

Обратите внимание

Страница ошибки 404 («Страница не найдена») тоже должна быть выполнена в общей стилистике сайта. И таких «мелочей» предостаточно.

Найти прекрасного во всех отношениях веб-дизайнера мало. Создание дизайна – процесс двухсторонний. Сколько изящных решений и талантливых макетов отправилось в мусор лишь потому, что они не понравились клиенту, который либо встал не с той ноги, либо оказался не в состоянии адекватно оценить труд исполнителя. Не было «коннекта». Это только у Чака Норриса и Николая Валуева под USB-кабель идеально подходит абсолютно любой разъем. Если ни тот, ни другой в вашем проекте не задействован, вам остается только приспосабливаться – и осваивать ниву веб-дизайна по меньшей мере в амплуа ценителя, чтобы быть способным отделить зерна от плевел.

Читайте в обязательном порядке биографию Стива Джобса, «Психбольницу в руках пациентов» и «Об интерфейсе. Основы проектирования взаимодействия» Алана Купера, «Веб-дизайн, или Не заставляйте меня думать!» Стива Круга – эти книги введут вас в предметное поле.

Отдельным пунктом следует «Ководство» Артемия Лебедева – своеобразная энциклопедия современного дизайна, которая учит самому главному – отличать смелость мысли от пошлости, владеть понятийным аппаратом и разбираться в «анатомии дизайна».

Дополнит вышеперечисленное веселый и радикальный метод – взглянуть на себя с той стороны баррикад. Почитайте, скажем, поучительные и душераздирающие истории про общение между заказчиками и исполнителями на сайте «Адовые клиенты» (http://clientsfromhell.ru). Если больше половины заметок вызывает у вас недоумение и солидарность с «адовыми клиентами», то укрепляйте в себе чувство прекрасного беспощадно и ускоренными темпами.

«Ководство» Артемия Лебедева: http://www.artlebedev.ru/kovodstvo/

Журнал о веб-дизайне «Дежурка. ру»: http://www.dejurka.ru

«Что такое валидная верстка?»: http://design.trilan.ru/articles/valid-coding.html

Тег «Дизайн» в разделе «Статьи» портала CMS Magazine: http://www.cmsmagazine.ru/library/tags/design/

Рубрика «Советы» на сайте студии Артема Горбунова: http://artgorbunov.ru/bb/soviet/

CreativeBits: http://creativebits.org

Набор вдохновляющих сайтов о веб-дизайне: http://habrahabr.ru/post/158827/

Глава 10. Редизайн: эволюция видов

Сайт живет в Вебе и должен развиваться вместе с Вебом. Подобно любому биологическому виду, если он не реагирует на изменения среды, то теряет конкурентные преимущества и рискует угаснуть. Знаменитая «Библиотека Максима Мошкова» (Lib.ru) с ее вечным «антидизайном» – только черный шрифт, белый фон, синие ссылки, только хардкор – редчайшее исключение. Да и исключение ли? Ведь она была и остается некоммерческим проектом.

Даже если ваш сайт по нынешним меркам – образец для подражания и справляется со всеми возложенными на него задачами, то, «забронзовев», года через три будет выглядеть архаично, а через пять – курьезно.

Есть сигналы, уловив которые вы безоговорочно должны браться за редизайн (половина главы посвящена им). Однако делать его по одному лишь «велению сердца» противопоказано. Это хуже, чем в отсутствие насущной потребности менять ноутбук и смартфон каждые три месяца: от чехарды гаджетов страдает только ваш личный бюджет, а спонтанные, плохо мотивированные манипуляции с сайтом грозят ущербом бизнесу. Разберемся, в каких случаях насколько масштабный редизайн необходим и как его претворять в жизнь.

В простейшем, дословном понимании редизайн – это «переодевание» сайта, трансформация его зрительного ряда. Однако наиболее распространенная трактовка шире, она охватывает следующие процедуры:

• изменение фирменного стиля (логотип и т. д.);

• коррективы цветовой гаммы, верстки, типографики;

• преобразование структуры и навигации, изменение подачи информации;

• модификация контента или полная его замена.

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