Если вы занимаетесь дизайном и версткой, эта статья для вас! Ниже вы найдете секреты и подсказки по созданию веб-дизайна непосредственно в браузере. Также автор статьи поделится собственным опытом и подскажет несколько полезных онлайн-инструментов.

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

Это не так сложно, как вы думаете

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

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

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

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

У вас должен быть план

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

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

Перед началом проектирования удобно иметь готовой главную информацию: карту сайта, содержание, элементы «call to action» и архитектуру сайта. В таком случае у вас будет четкая стратегия создания дизайна, а все материалы будут собраны. 

Начните с эскиза

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

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

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

Стили

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

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

Дизайн

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

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

Совершенствование

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

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

Сохраняйте и используйте вновь шаблоны

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

Библиотека популярных шаблонов UI — тоже отличный способ быстро создать прототип, и это делает проектирование в браузере более эффективным. Автор статьи использует сервис Sublime Text для кода. И еще одна вещь, которая вам поможет — заготовленные фрагменты кода, которые вы можете создать самостоятельно. Это могут быть несколько вариаций навигации, списки, боковые панели и другие общие элементы, которые можно добавить в списки сниппетов и размещать одним простым действием. Вы также можете завести аккаунты на Codepen и JSFiddle, чтобы хранить шаблоны. Дэн Сидерхолм создал отличную тему WordPress для хранения шаблонов, которая называется Pears. Он использует посты, чтобы делиться кодом, который вы можете  редактировать в реальном времени. 

Итог

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

Автор статьи Daniel Kling

Перевод — Дежурка

Смотрите также:

• Как сделать верстальщика счастливым? 13 cоветов веб-дизайнеру
• Основы веб-типографики
• Как создавать адаптивные и легкие UI в Adobe Illustrator