Создание макетов (англ. wireframes), т. е., вообще говоря, схем построения веб-сайтов и приложений, это шаг, который очень часто упускается из виду, особенно на небольших объектах, либо тогда, когда мы не имеем на это слишком много времени. Такой подход, хотя иногда он может фактически сэкономить несколько часов, также может жестоко отомстить — как в то время, когда мы тратим на дизайн, по внешнему виду и, что еще более важно, его функциональность.
Контент-анализ и потребности клиентов
Независимо от того, планируем ли мы создать или нет, первым шагом в создании нового веб-сайта должен быть анализ его будущего контента. Основываясь на брифинге, то есть руководящих принципах, которые мы получили от клиента, мы должны создать список необходимых ему элементов и отсортировать их по релевантности. Наиболее важные элементы должны быть на главной странице и быть выделены, менее важные могут быть найдены на подстраницах или в менее видимых частях — например, в нижнем колонтитуле.
Этот шаг приносит много потенциальных преимуществ, но с точки зрения графического дизайна следует в первую очередь сосредоточиться на сосредоточении внимания на функциональной ценности конкретного раздела, а не на его потенциальном появлении. Это позволяет элементу страницы приземляться в заголовке только тогда, когда он должен быть там, а не потому, что он выглядит красиво и может быть просто украшен.
Часть анализа контента и потребностей должна также включать обзор конкурирующих веб-сайтов, вдохновляющие проекты и ознакомление с популярными шаблонами дизайна. Благодаря этому мы не ограничиваемся только тем, что нужно клиенту (и на самом деле думает, что ему нужно), и мы готовим лучший продукт, мы предложим проверенные решения.
Эскиз схемы
Следующим шагом в работе над проектом веб-сайта должен стать его эскиз. Эскиз — ключевое слово, потому что независимо от того, какое приложение мы используем для самого дизайна, все должно начинаться на странице. Какая это будет открытка и то, что мы используем для написания не важно, важна свобода, которую дает нам это решение. При разработке в приложении мы наложили целую кучу ограничений — от размера шрифтов до фигур и сетки. С карандашом или ручкой таких проблем нет — мы можем вникать в наше воображение. По той же причине я избегаю первой фазы планирования страниц в приложениях, я также отказываюсь использовать тетрадь в клетку. Если белой бумаги недостаточно, вы всегда можете купить тетрадь в горошек, блокнот с сеткой и сеткой или просто напечатать удобный образец на обычном листе A4. Если вы больше не можете расставаться с сеткой — выберите те тетради, которые имеют только тонкое обозначение.
Такая концептуальная схема должна ограничиваться только основными разделами страницы — местом, где находится заголовок, каким меню мы планируем, где находятся конкретные поля и как они распределяются. Не имеет ни малейшего смысла, чтобы на эскиз, нарисованный карандашом наносить окончательные тексты, потому что в мире у нас очень мало шансов сопоставить случай, поэтому может показаться, что нам нужен совершенно другой текст, чем есть на самом деле.
Нет смысла делать дополнительные эскизы. Конечно, если вы рисуете прямые линии и идеально округлые коробки, это здорово. Однако помните, что это диаграмма, которая должна использоваться в первую очередь для вас, и если она не выглядит так, как показано ниже, вы просто не бросаете ее в Dribbble.
Гораздо чаще основная схема новой страницы будет напоминать рисунки 6-летнего, чем видение здания, созданного архитектором, и нет ничего плохого в этом.
Но достаточно ли эскиза? К сожалению, нет. Все ручные эскизные силы также являются слабыми местами одновременно. Свобода, которую дает нам карандаш, должна быть позже связана с ограничениями, наложенными на нас веб-браузерами и графическими программами.
Каркасы в приложении
Еще одним важным шагом в разработке веб-сайта является продвижение нашего видения в цифровой мир. Мы можем сделать это разными способами, потому что есть множество приложений, которые помогут нам — вы найдете их в одной из наших статей. Я уже давно использую Adobe XD. Почему? Отчасти потому, что я уже заплатил за подписку Creative Cloud, было бы целесообразно использовать как можно больше приложений. И действительно, он отлично работает для такого рода задач. Статья о макете в Adobe XD, безусловно, появится в Grafmagu, но сегодня мы будем иметь дело с генералом.
На мгновение я упомянул, что при эскизе мы можем пропустить публикацию текстов — пришло время для этого прямо сейчас. Весь смысл создания таких схем основан на том, что мы можем создать каркас, который пропорционально отражает страницу в ее конечном измерении. Это позволяет нам проверять размеры шрифта, логотипы, длины заголовков и количество символов в абзаце. Эти значения могут быть легко изменены и согласованы с клиентом, потому что, работая над простыми элементами — это не требует много времени и не утомляют. Конечно, мы совершенно никогда не сравниваем эти ценности, но это дает нам хороший обзор и позволяет нам устанавливать детали с клиентом, особенно когда это не особенно «информативно».
Ширина проекта макета может быть задана произвольно, однако это во многом зависит от специфики проекта, который вы планируете. Если веб-сайт занимает всю ширину экрана — выберите среду, такую как 1440 × 900, но если все закрывается в заданной сетке — скажем 960 пикселей, нам нужно всего 1200 пикселей, потому что вы увидите, какие элементы страницы вышли из него, и которые ограничены.
Представьте себе шаблон, который будет основан на сетке, состоящей из 12 колонок шириной 50 пикселей на 40 пикселей друг от друга. Всего будет 1040 px, поэтому ширина проекта может быть установлена равной 1360 px.
Время так двигает мой неосторожный эскиз на более доступном для будущего клиента. Каждый из ранее созданных разделов превратился в соответствующие поля, содержащие контент, похожий по длине с тем, что мы планируем включить на сайт. Тексты lorem ipsum можно, конечно, разнообразить, а если такие у вас есть – заменить их даже на те, которые в конечном итоге будут представлены на сайте
Вы можете представить начальный макет главной страницы, где наиболее важные элементы, такие как логотипы, меню или список записей, отображаются в простой форме, причем каждый заголовок, субтитры, автор, фотография, дата и количество комментариев. Все (с большой дублирующейся функцией в XD) повторялось правильное количество раз по горизонтали и по вертикали.
Что следует учитывать при создании макетов?
Прежде всего — вы не создаете их не только для клиента, но и для себя. Поэтому рекомендуется как можно точнее описать важные элементы и, в частности, их содержание. Если в любом разделе страницы есть кнопка, которую читается, или другой элемент, например, дата — он должен появиться на каркасе (цифровая версия). Его присутствие или отсутствие является ясным сигналом как для дизайнера, так и для клиента. Это поможет избежать недоразумений и ненужных исправлений на более поздних этапах создания.
Ну, пока хорошо работать с клиентом при тонкой настройке цифрового каркаса, я далек от того, чтобы показать, что кто-то набросал. Этот эскиз должен быть просто обзором и помочь нам в упорядочении наших мыслей. Если вы встречаете живого клиента, вы можете создать такие эскизы вместе, а затем, после дальнейшего анализа, перенести их на свой компьютер.
Держите баланс между схематичным и привлекательным внешним видом. Не поймите меня неправильно — каркасы не могут быть уродливыми, но если они выглядят слишком хорошо, они включают в себя цвета, декорации или тени — клиент может подумать, что это окончательная версия страницы и начать применять визуальные исправления, а не фокусироваться на контенте и дизайне. С другой стороны, если мы используем забавный шрифт или ручной рисунок, мы теряем самую важную функцию таких шаблонов, как правильные пропорции и предварительные просмотры. Поэтому разумнее ограничивать себя линиями и черно-белым фоном.
Никаких дополнительных цветов и конкретных элементов, еще одна важная особенность. Добавление определенных цветов, выбор изображений или значков занимает много времени, что на этом этапе не должно быть потрачено впустую. Особенно, что во время финального дизайна может измениться предполагаемый стиль дизайна и все, что нам придется искать снова. Макетирование с готовыми элементами будет работать только в том случае, если мы создадим наши собственные элементы (например, значки, фотографии, иллюстрации) в окончательном дизайне, и в этом случае настройка потребностей на этапе проекта улучшит нашу работу.
Если ваш клиент имеет мало общего с Интернетом, и вы чувствуете, что отображение таких схем может принести больше проблем, чем преимуществ — иногда лучше отпустить. Тот факт, что вы не будете обсуждать их с ними, не означает, что вы не можете создать их для себя. Размышление о проекте таким образом, которое заставляет макеты, в большинстве случаев, позитивно влиять на их удобство и внешний вид.
На этапе планирования вы знаете, какие элементы будут содержать фотографии или темные фоны, а какие — нет. Позднее вы избежите проблем с тем, что дизайн слишком темный или слишком яркий.
В этой статье рассматривается процесс подготовки проекта веб-сайта в целом и, конечно же, не исчерпывается этой темой. И каковы ваши приемы? Вы делаете макеты?