Об авторе

 

Трэйси Осборн — дизайнер, разработчик и предприниматель из Торонто, Канада. Сайты она начала создавать уже в 12 лет и всегда испытывала тягу к компьютерам, интернету и всем предоставляемым ими возможностям.

Трэйси окончила Калифорнийский государственный Политехнический университет в Сан-Луис-Обиспо, получив степень бакалавра в области искусства и дизайна со специализацией в сфере графического дизайна. После она пять лет проработала дизайнером, освоила программирование и в конечном итоге запустила собственный стартап WeddingLovely.

 

Она регулярно участвует в технологических конференциях, в том числе выступала с основными докладами на O’Reilly’s Fluent Conference 2016, EuroPython 2017 и DjangoCon US 2017.

Благодарности

Эта книга создавалась несколько лет. Благодарю всех, кто слушал мои презентации, давал обратную связь, поддерживал идеи и ­помог воплотить этот проект в жизнь.

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

Отдельно благодарю издательство No Starch Press за то, что рискнули и добавили эту книгу в свою коллекцию. С их помощью «Веб-дизайн для недизайнеров» охватит гораздо большую аудиторию, чем я могла ожидать. Я глубоко признательна им за сотрудничество и все те бесчисленные часы, проведенные в стремлении сделать лучше книгу и ее содержание.

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

Предисловие

Всякий раз, погружаясь в мир Семантической паутины1, я замечал, что существует два фундаментально разных подхода. Один из них основан на утверждении, что абсолютно все во Вселенной должно иметь теоретическое объяснение. Второй же подход не такой жесткий, он позволяет сосредоточиться лишь на самых распространенных явлениях — относящихся к людям, местам, событиям и т.п. Обычно большего и не требуется. Согласно данной теории, лишь около 80 % явлений в этом мире имеют фактическое применение. Попытка же систематизировать оставшиеся 20 % потребует несоизмеримо бóльших усилий.

Мне этот подход всегда нравился. Я считаю, что он применим ко множеству начинаний. Написание кода, рисование, кулинария — во многих областях можно набрать неплохую скорость просто за счет базовых навыков, а затем уже в течение жизни оттачивать мастерство. Но нам необязательно становиться мастерами в каждом деле. Мне, например, вполне хватает удовлетворительного уровня навыков во многих сферах. Это позволяет сделать приоритетными те вещи, которым я действительно готов посвящать свое время.

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

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

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

Скажите новой книге: «Здравствуй, веб-дизайн!»

— Джереми Кит, Автор Resilient Web Design и сооснователь Clearleft

Введение

Это не типичная книга для начинающего дизайнера.

Книги для новичков чаще всего предполагают, что в конечном итоге вы собираетесь стать специалистом. Учебники по программированию исходят из идеи, что вы хотите получить работу программиста или компьютерного инженера, а учебники по ­дизайну — что вы планируете стать полноценным дизайнером.

Но что, если вам нужно изучить дизайн лишь на столько, сколько будет достаточно для продвижения своей «недизайнерской» карьеры?

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

Аналогично тому, как дизайнерам полезно немного уметь программировать, программисты (а также маркетологи, продакт-менеджеры, продажники и т.д.) могут получить пользу от изучения основ дизайна. Даже если вы не специа­лизируетесь в дизайне, вам все равно приходится этим заниматься в той или иной степени — будь то работа над презентациями, создание интерфейсов для программ и проектов или разработка личного веб-сайта. Если вы работаете с дизайнерами, то наличие некоторого опыта в этой области позволит более уверенно строить общение с ними и понимать их работу.

«Веб-дизайн для недизайнеров» не ставит своей целью сделать вас дизайнером — книга позволит вам чувствовать себя более комфортно, когда придется заниматься дизайном.

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

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

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

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

Приступим!

— Трэйси

Глава 1. Если из всех глав выбирать одну, то лучше эту

ЕСЛИ К ВАМ В РУКИ ПОПАЛА ЭТА КНИГА, а время есть только на прочтение одной главы, прочтите именно эту. Почему? Потому что она показывает кратчайший путь для совершенствования своих дизайнерских решений.

Внешний вид — ничто, функционал — всё

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

В качестве примера возьмите Craigslist. В течение многих лет дизайн ­сайта практически не менялся и выглядит весьма устаревшим (рис. 1-1).

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

Без всяких ярких эффектов и отвлекающих баннеров Craigslist ­максимально упрощает как размещение объявлений, так и их поиск.

 

Рис. 1-1. Craigslist по-прежнему лидирует в своем сегменте, даже не имея современного дизайна

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

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

Хорош ли дизайн? Измеряйте

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

• заполняли форму;

• просматривали страницу в среднем не менее 30 секунд;

• подписывались на новости;

• оставляли комментарий.

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

Показывайте свой дизайн — и пусть оценивают!

Если вы еще не уверены в недавно обретенных навыках дизайна, то, возможно, вам не захочется показывать свои работы ­другим. Что, если людям не понравится? Что, если будут критиковать?

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

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

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

Готовые решения по улучшению дизайна

«Но, Трэйси, — можете сказать вы. — Я хочу, чтобы мой ­дизайн не только лучше работал, но и выглядел лучше».

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

Избавляйтесь от беспорядка в дизайне — улучшайте внешний вид

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

Рассмотрим несколько небольших понятных принципов.

Используйте сетку

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

Эту тему мы рассмотрим подробнее в разделе 2.1.

Не используйте много цветов

Дизайн, в котором намешана куча цветов (24 оттенка синего, 5 оттенков красного и т.д.), смотрится перегруженным. Установите определенную палитру и используйте только ее цвета. Это позволит придать сайту более связный и целостный вид.

Эту тему мы рассмотрим подробнее в разделе 2.2.

Ограничьтесь парой шрифтов

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

Мы разберем эту тему более подробно в разделе 2.3.

Упрощайте текст

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

Более подробно эту тему мы рассмотрим в разделе 2.6.

Больше «воздуха»

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

Эту тему мы подробнее рассмотрим в разделе 2.4.

Все сказанное выше можно выразить одним предложением:

Убедитесь, что ваш дизайн работает как надо, и уменьшите беспорядок везде, где это возможно

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

Глава 2. Теория и принципы веб-дизайна

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

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

По ходу углубленного разбора каждого раздела мы будем применять эти принципы на примере небольшого виджета (рис. 2-1).

 

Рис. 2-1. Недоработанный виджет. Нашей задачей будет его улучшить

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

Начнем!

Раздел 2.1. Сетка

ПЕРВЫЙ ПРИНЦИП БУДЕТ ОЧЕНЬ ПРОСТ: выравнивайте ­элементы!

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

«Глупый дизайнер, — говорит разработчик. — Разве такая мелочь имеет значение? Разницы почти не видно».

А соль вот в чем: небольшие отличия в пикселях действительно важны, особенно когда речь идет об элементах страницы. Если два элемента находятся рядом, но не полностью выровнены друг относительно друга, то это может создать едва уловимую взором «шероховатость», а в целом для дизайна — беспорядок (рис. 2-2).

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

На сайте New York Times (рис. 2-3) для организации большого объема информации используется пять основных колонок (на рисунке выделены красным). Пробел между колонками называется средником. Объекты внутри сетки могут охватывать несколько колонок, некоторые из них могут выходить за сетку, но при этом все элементы в большей или меньшей степени к ней «привязаны».

      

 

Рис. 2-2. Эти два скриншота почти од