Как делали новый дизайн сайта Expression Engine

:

Офицер-пограничник на границе между США и Канадой: «Вы направляетесь по делам или же отдыхать, сэр?»
Я: По делам.
Офицер: Уточните причину, пожалуйста.
Я: Я веб-разработчик и еду на встречу со своим клиентом в штате Орегон для обсуждения проекта.
Пограничник: Как называется компания вашего клиента?
Я: «pMachine».
Пограничник: Вы везете какие-либо сайты с собой?
Я: *недоумевающий взгляд*
Пограничник: В вашей машине есть какие-либо сайты, сэр?
Я: Хмммммм… нет, сайты сейчас на серверах. В машине я ничего не везу.
Пограничник: Тогда как вы хотите показать их вашему клиенту?
Я: Хмм… вообще-то я просто еду на встречу с клиентом для обсуждения сайта, пока я ему ничего не везу.
Пограничник: Хорошо, тогда наслаждайтесь поездкой, сэр.

(30 секунд молчания)

Хизер: В следующий раз скажи, что мы едем на отдых.

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

До этой недели, проведенной на встречах с сотрудниками pMachine, я уже успел поработать с Риком Эллисом над несколькими более маленькими проектами, и у нас сложились очень хорошие деловые отношения. Это открыло мне путь к работе над одним из самых больших проектов за всю мою карьеру, включая дизайн нескольких сайтов для pMachine (сейчас EllisLab), ExpressionEngine, а также редизайн сайтов CodeIgniter и pMachine Hosting (сейчас EngineHosting).

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


Рабочее пространство


В статье для сайта Cameron Moll я уже упоминал, что в моем случае
вдохновляющая рабочая обстановка очень важна для того, чтобы создавать замечательные продукты, и этот проект не был исключением. Вообще, я занимался проектом в трёх разных местах. Начинал в большом кабинете на нижнем этаже, но потом переместился в холл наверху, так как кабинет мы превратили в игровую комнату. Рабочее место в холле было чуть менее, чем полностью невдохновляющим, и время моей работы там совпало со временем, когда я столкнулся с наибольшими трудностями на протяжении всего проекта. Просто совпадение? Не уверен, но когда я переехал в большую спальню, то опять начал набирать обороты.


Разметка


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

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

  • Главное меню, другая навигация, логотип
  • Большой выделяющийся графический баннер
  • Ссылки на скачивание ExpressionEngine и на обзор его возможностей
  • Текст с кратким описанием проекта
  • Новости, записи из блога
  • Блок “Кто использует наш продукт?” (блоггеры, разработчики, владельцы бизнеса, особые пользователи)
  • Подвал

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

Блочная разметка прекрасно вписывается в подход “сеточного дизайна”. Каждому дизайнеру следует изучить и понимать разметку с помощью сетки.
Первое, что я сделал — установил две вертикальные направляющие для обозначения ширины сайта. После этого, я приблизительно набросал серые прямоугольники для блоков с контентом. Вначале это напоминает игру в Тетрис — нужно расположить блоки с контентом, пытаясь найти лучший вариант расположения. Когда я заметил, что дизайн сам собой начал разделяться на пять колонок, я разместил несколько вертикальных направляющих для большей аккуратности. Когда макеты мне понравились, я дал команде EllisLab взглянуть на них.

Ответы, которые я получил, слегка разделились во мнениях, так как в каждом из вариантов были элементы, которые понравились команде. Рику особенно понравилось горизонтальное отображение блока “кто использует наш продукт”. Он был обеспокоен, что вертикальная ориентация может быть воспринята так, будто пользователи перечислены по степени важности. Другие ребята из команды EllisLab считали, что для раздела новостей на рисунке 1А выделено недостаточно места (с чем я совершенно согласен), и что на макете 1В эта информация представлена намного успешнее.

В следующих вариантах разметок я попытался объединить лучшие черты первых двух.

Два новых варианта казались мне довольно интересными, однако команда EllisLab хотела чего-то более простого. На данном этапе мы оказались в тупике, потому что количество информации, которое EllisLab хотели представить, противоречило внешнему виду, которого они хотели достичь. В предыдущих обсуждениях они отметили, что им нравится очень чистый, лаконичный и профессиональный дизайн. Тогда Пол Бердик решил зайти в аккаунт на Crazy Egg, чтобы получить лучшее представление на счёт того, куда кликают посетители сайта. После анализа статистики он обнаружил, что на новости на главной странице почти не нажимают и, пожалуй, их можно оттуда брать. Это открытие позволило нам рассмотреть вариант 1А еще раз, но с некоторыми изменениями.

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

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

Если вы посмотрите на уровень детализации разных версий моих прототипов, то можете заметить, что я уже начал прорабатывать различные варианты дизайна (хоть и в небольших количествах). На протяжении всего процесса я опробовал несколько шрифтов в сочетании с логотипом ExpressionEngine, и, временами, когда я слишком долго зацикливался на прототипе — я заходил на iStockPhoto, и начинал искать там изображения, которые мог бы использовать для проекта. Я рассказываю это потому, что считаю полезным, когда различные фазы проектирования немного накладываются друг на друга. Важно уметь представлять себе, что будет на месте серых блоков. Уровень детализации, который я отображаю на этапе разметки, различается для разных клиентов. Если я чувствую, что клиенту сложно представить конечный вид продукта и принять решение, я добавляю деталей, пока клиенту не станет достаточно комфортно для продолжения работы. И наоборот, если я чувствую, что клиент слишком заостряет внимание на мелочах на ранних этапах, — в блочной разметке я ограничиваюсь серыми блоками, чтобы помочь им сосредоточиться непосредственно на самой разметке.


Проработка дизайна

Типографика


Как я уже говорил, поиски нового шрифта начались ещё во время этапа создания разметки и продолжились на этапе проработки дизайна. Интуитивно я хотел чего-то чистого и простого, вроде шрифтов DIN или Gotham (рис. 2А). Хотя эти шрифты были лучше в сравнении с Charcoal, который использовался в предыдущем дизайне, ни один из них не вызывал ощущение энергии или уникальности, которое я искал. После отказа от этих двух вариантов, как и от всей моей библиотеки шрифтов, я отправился на MyFonts и провел там большую часть рабочего дня (или это были три дня?) в поисках нужного шрифта. Прежде всего я искал шрифт с замечательной “g” в нижнем регистре и красивым курсивным начертанием, так как я хотел, чтобы логотип передавал ощущение энергии и движения. В конце концов я остановился на шрифте Agfa Scene, который вполне удовлетворял обоим моим требованиям.

Теперь, когда я нашел подходящий шрифт, мне казалось, что эмблему тоже можно немного изменить. Первым делом, я хотел попробовать сделать “e” более элегантной. Я остановился на шрифте Century Schoolbook Italic, потому что его форма и толщина идеально подходили к изогнутым стрелкам.

Теперь, когда все остальное было обновлено, стрелки выглядели немного неаккуратно в сравнении с остальными элементами. Я срезал внутренние зубцы у стрелок, скруглил края, и слегка повернул стрелки, чтобы они лучше сочетались с “e” и логотип смотрелся энергичнее.

Так как EllisLab не просили меня изменять логотип, я убедился, что с моими изменениями я не слишком отклонился от исходного логотипа и он был по-прежнему узнаваем для уже существующих пользователей ExpressionEngine. Для того, чтобы сохранить соответствие между логотипом и всем сайтом, я использовал шрифт Scene также и для заголовков верхнего уровня и названий страниц. Я снова обратил свой взгляд к Gotham и решил использовать его для заглавий маленьких блоков, где его опрятность действительно блистает.

Изображения и цвета


Одновременно с тем, как я работал над логотипом, я также думал над тем, какие цвета и изображения следует использовать на главном сайте. К тому времени это была самая сложная часть на протяжении всей работы. Сначала я задумался над понятием “engine”, и потратил много часов в поисках абстрактной фотографии, которую я мог бы использовать в блоке главного баннера и задать с ее помощью общий тон сайта. Мне не очень нравились изображения, которые я нашел, и во время поисков я пришел к выводу, что дизайн должен говорить не о “движке” (engine), а о выразительности (expression). Одно из главных достоинств ExpressionEngine состоит в высоком уровне гибкости возможного дизайна, что позволяет людям выразить себя визуально, а не ограничивать себя тем, что может предоставить обычная CMS.

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

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

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

Всем действительно понравился этот вариант. Всем, кроме меня. Я чувствовал, что повторяющиеся горизонтальные тёмные полосы, протянутые через всю страницу (как результат затемнения фона) слишком разбивают внешний вид страницы, и можно найти лучшее решение. В результате я попробовал объединить две области и с помощью цвета фона разграничить разделы. Это решение всё ещё казалось мне недоработанным, поэтому я решил что попытаюсь еще раз исправить этот момент, прежде чем соглашусь на вариант, который понравился всем.

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

Было ещё много других вариантов и идей, кроме показанных здесь, но те, которые я показал, представляют собой наиболее линейный путь от начала до конца. К моменту завершения проекта у меня было двадцать три файла из Photoshop с незначительно различавшимися вариантами дизайна для одной только главной страницы, и более сотни файлов для всех сайтов EllisLab вместе взятых.

Иконки


Одним из самых важных открытий, сделанных мной во время работы над этим проектом, была пара наборов иконок от IconDrawer. Эти иконки действительно несут дизайн некоторых страниц на своих пиксельных спинах. Возьмём, к примеру, главную страницу. Если бы мне пришлось убрать большие иконки от IconDrawer и заменить их на любимые и часто используемые иконки famfamfam, эти вкладки бы уже так не умоляли, чтобы на них кликнули. Другой пример: страница описания особенностей продукта (одна из моих любимых), которая была бы абсолютно плоской без этих иконок. Лучшие $113, которые я когда-либо тратил.

Выдрачиваем пиксели


Когда я решил, что у выбранного направления в дизайне есть хороший потенциал, я принялся накладывать на дизайн новый слой тонких улучшений и деталей. Словарь в моём Маке определяет “ тонкие” как “ отличия настолько незначительные, что трудно поддаются анализу или описанию”. Это определение хорошо описывает тот баланс, которого я стремился достичь, добавляя больше деталей в дизайн. Цель здесь не в том, чтобы детали притягивали к себе внимание, а в том, чтобы создать какую-то визуальную составляющую, которую очень сложно анализировать или описать — сложно, но отнюдь не невозможно.

Возьмём, к примеру, подвал: если вы сравните подвал одного из ранних вариантов с готовым, вы увидите несколько незначительных изменений, которые были сделаны для придания пикантности. Я сменил иконки, чтобы они гармонировали с остальной частью сайта, добавил мягкий серый градиент вдоль нижнего края, чтобы создать впечатление объёма и слегка изменил кнопки, придал им более “кнопочный” вид. Ни один из этих эффектов не выделяется сам по себе, но их общая совокупность намного лучше, чем сумма частей.

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


Умей выкручиваться


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

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

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

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

Фух.



И это ещё не конец


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

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