Рисуем сайт. Совместная работа веб-дизайнера и frontend-разработчика

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

Веб-дизайнер продумывает и рисует подробный макет страниц. Он должен продумать не только красивую картинку, но и учесть особенности продукта, отступы, шрифты, не забыть про юзабилити сайта и цветовую палитру.

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

10 советов для дизайнеров сайтов

Совет 1

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

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

Дробные значения в размере картинок SVG-формата округляются в большую сторону. Например, 18,4 px x 18,4 px при верстке превратится в 19 px x 19 px, что может повлиять на размещение других элементов.

Совет 2

Стандартизируйте однообразные элементы.

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

Выберите 3–4 варианта и используйте их.

Совет 3

Назначьте стили в макете.

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

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

Совет 4

Группируйте повторяющиеся элементы в блоки.

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

Совет 5

Создавайте дизайн для разных видов экранов.

Современный сайт должен быть адаптивен к любому экрану. Однако верстальщик не обязан создавать из десктопной версии веб-ресурса мобильную. Все размеры экранов должны быть предусмотрены на этапе создания дизайн-макета. Как правило, делается 3 варианта: для ПК, планшета и смартфона.

Совет 6

Подготовьте все изображения.

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

Совет 7

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

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

Совет 8

Не используйте нестандартные шрифты.

Некоторые браузеры могут не отображать необычные шрифты и заменят их на другие. Из-за этого пострадает внешний вид всего сайта.

Совет 9

Отражайте в макете все динамичные элементы.

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

Совет 10

Разговаривайте с фронтендером.

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

По материалам reg.ru
Для посетителей нашего сайта скидка 5% на регистрацию домена или услуги хостинга в REG.RU по промокоду 184E-CDDB-206E-DA7B.

• ← Пред. новость
• След. новость →