STOLZ о графическом дизайне

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

То есть сначала надо понять куда мы идём, с кем мы идём и какова цель нашего похода. И как мы будем выглядит в этом походе. (Штольц Ю.К.)

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

Имея пару страниц, примерно 5 страниц с описанием цели, «ЦА», цвета, контентом, стилями мы можем приступить к реализации и визуальной части, то есть «UI».

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

Под совокупностью средств и методов интерфейса пользователя подразумеваются: Средства. вывода информации из устройства к пользователю. (Википедия)

Веб дизайн и визуальная часть

Как правило, сайт должен обладать цветовой темой, 3 или 5 цветов. Так же я предпочитаю иметь готовый логотип или «фавикон».

Favicon (сокр. от англ. FAVorite ICON — «значок для избранного») — значок веб-сайта или веб-страницы. Отображается браузером во вкладке перед названием страницы. (Википедия)

Будущий веб проект в данный момент обязан быть собран по требованиям, которые предъявляются к макету. Эти требования формируют кодеры, программисты или «фронтэнд» разработчики.

Фронтэнд (англ. frontend) — клиентская сторона пользовательского интерфейса к программно-аппаратной части сервиса. (Википедия)

Если быть проще, то «Bootstrap» и 12 колоночная система вёрстки упростит это взаимодействие. Дизайнер должен хотя бы прочитать об этом, прежде чем запускать «Figma» или «Adobe XD».

Bootstrap (также известен как Twitter Bootstrap) — свободный набор инструментов для создания сайтов и веб-приложений. Включает в себя HTML- и CSS-шаблоны оформления для типографики, веб-форм, кнопок, меток, блоков навигации и прочих компонентов веб-интерфейса, включая JavaScript-расширения. (Википедия)

Adobe Experience Design (Adobe XD) — программа для разработки интерфейсов от Adobe Systems. Поддерживает векторную графику и веб-вёрстку, и создаёт небольшие активные прототипы. (Википедия)

В данный момент, в «Адоби» проще входить новичкам, понимание интуитивное. Но и «Фигма» не столько сложна, сколько более обременяющая с настройками. Имея цвет, логотип, колонки и шрифт, можно начать творить шедевр…

Хотя понимание резиновой вёрстки дизайна…