6. Рисуем макет сайта в Adobe XD

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

Начнём с небольшого обзора инструментов Adobe XD.

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

Основные сочетания, которыми я пользуюсь:

Ctrl + C (Cmd +C) — копировать
Ctrl + V (Cmd + V) — вставить
Ctrl + A (Cmd + A) — выделить всё
Ctrl + D (Cmd + D) — снять выделение
Ctrl + Z (Cmd + Z) — отменить последнее действий (если нажать несколько раз, отменится несколько действий
Ctrl + G (Cmd + G) — сгруппировать выделенные объекты

Чтобы выделить несколько объектов поочерёдно, зажмите Ctrl (Cmd) и щёлкайте по нужным оъектам. Таким же способом можно выделить несколько слоёв в пенели слоёв. Также в панели слоёв, чтобы выделить сразу несколько слоёв, можно нажать на первый слой, зажать Shift и нажать на последний слой. Выделятся все слои от первого до последнего. Я использую эти способы в видео, но не везде это комментирую, поэтому решил дополнительно написать для начинающих освоение программ :)

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

для Adobe XD
для Photoshop
для Illustrator

Нарисуем шапку и подвал нашей страницы, добавим иконки социальных сетей.

В следующем видео я покажу процесс рисования макета главной страницы.

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

При вёрстке, даже в Zero Block внесение изменений менее удобно и требует больше действий. Плюс, не очень удобно смотреть на общую картинку.

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

Что у меня получилось в результате

Ваше домашнее задание по этому уроку, как вы уже наверняка догадались — нарисовать макет страницы в Adobe XD (или другом удобном для вас приложении) и прислать в чат.

Не забудьте отметить меня и поставить тег #домашка