Как создать макет сайта?

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

Зарисовка на листе

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

Эскиз также является хорошим введением в представление внешнего вида и функциональности приложения команде. Это может стать основой для мозгового штурма.

Каркас — основа проекта

Второй этап – подготовка каркаса, то есть скелета проекта. Важно делать эту работу полностью в цифровом формате и с тех пор работать только на компьютере. Для создания скелета можно использовать Adobe XD, но есть и специальные приложения для создания быстрых мокапов.

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

Макет

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

Прототип

Это своего рода рабочее приложение, но без дополнительных функций («незашифрованное»). Это версия, используемая для презентации и тестирования. Благодаря этому можно убедиться, правильно ли решена данная проблема. Вместо этого клиент видит, как работает приложение и как в нем перемещаться. Недостатком, однако, является то, что подготовка кликабельного прототипа занимает много времени.

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

captcha