Посетитель сайта ремонтной мастерской хочет узнать стоимость, выбрать подходящую услугу и оставить заявку. Веб-дизайнер продумывает, как человек пройдёт этот путь на компьютере и телефоне. Здесь пригодятся композиция и типографика, но к ним добавляются навигация, состояния элементов и поведение страницы.
Начните с задачи посетителя и содержания страницы
Для первой самостоятельной пробы выберите одну услугу условной мастерской. Запишите, что человеку нужно знать до обращения: какие неисправности устраняют, как определяют стоимость, куда привезти устройство и когда ждать ответ. Для каждого вопроса подготовьте конкретный фрагмент содержания. Неизвестные условия отметьте для согласования с владельцем.
Затем расположите сведения в последовательности выбора. Заголовок помогает понять услугу, описание уточняет условия, а форма предлагает следующий шаг. Эскиз можно начать с текста и простых прямоугольников. Если смысл страницы теряется без фотографии и декоративного фона, стоит ещё раз проверить названия разделов и порядок информации.
Чем веб-задача отличается от графического оформления
Фирменные цвета и иллюстрации помогают узнавать компанию. На сайте посетитель также открывает меню, выбирает услугу и исправляет данные в форме. Для этих действий нужно определить поведение интерфейса. После нажатия на кнопку должно быть понятно, что произошло и что можно сделать дальше.
Попробуйте отдельно набросать плакат мастерской и страницу записи. У плаката будут свои задачи композиции. У страницы появятся переходы и разные состояния. Если вам ближе работа с изображениями и визуальными материалами, посмотрите статью о графическом дизайне. При выборе веб-дизайна полезно проверить интерес именно к устройству страниц и взаимодействию человека с ними.
Продумайте состояния формы и навигации
В учебном макете покажите форму до заполнения, сообщение об ошибке и подтверждение отправки. Например, если посетитель не указал способ связи, пояснение должно назвать проблему и помочь её исправить. Заранее решите, что человек увидит во время ожидания ответа и как вернётся к редактированию.
Около поля сохраните понятную подпись. Подписи помогают определить назначение элементов формы, в том числе при использовании средств вспомогательного доступа. Это стоит учитывать уже в макете: предусмотреть место для подписи, инструкции и сообщения. Так разработчику не придётся придумывать расположение текста ошибки после передачи дизайна.
Проверьте страницу на узком экране
На компьютере сведения об услуге могут стоять рядом с формой, на телефоне их удобнее прочитать последовательно. Посмотрите, в каком порядке они окажутся. Уточните, остаются ли видимыми стоимость и способ обращения, помещается ли длинное название услуги, удобно ли открыть меню.
Адаптивный дизайн предполагает изменение компоновки с учётом устройства и потребностей пользователя. Для своей пробы проверьте несколько промежуточных ширин, увеличенный текст и длинные значения. Не ограничивайтесь двумя красивыми снимками экрана. При реальном изменении размеров должны сохраняться смысл, порядок чтения и доступ к действиям. Все такие проверки можно записать рядом с макетом как требования к реализации.
Зачем дизайнеру понимать основы HTML и CSS
HTML описывает структуру содержимого, CSS управляет его оформлением. Знакомство с ними помогает точнее обсуждать заголовки, ссылки, сетку и поведение блоков. Логичные заголовки и обозначенные области облегчают навигацию по странице. В дизайне полезно сохранять эту иерархию, а не выбирать уровень заголовка только по размеру шрифта.
Попробуйте собрать простой экран своей мастерской и сравнить его с макетом в браузере. Обратите внимание на переносы строк и изменение высоты блоков. Даже небольшая проба показывает, где изображение страницы недостаточно описывает её поведение. Разделение обязанностей между дизайнером и разработчиком при этом зависит от проекта и договорённостей команды.
Что изучают на программе Web-дизайна
Профессиональная переподготовка «Web-дизайн и компьютерная графика», 520 академических часов, охватывает основы веб-дизайна и графики, цвет и композицию. Отдельный раздел посвящён Photoshop и Illustrator. В программе также есть веб-технологии и основы HTML/CSS, анимация и мультимедиа, UX/UI-дизайн, проектирование и разработка портфолио.
По учебному плану можно увидеть сочетание визуальных и технических тем. До поступления уточните, как выполняют и проверяют работы, какие версии программ используют и что потребуется установить самостоятельно. Названия разделов не определяют число готовых проектов или формат консультаций. Условия приёма и документ по окончании обучения также стоит согласовать до оформления.
Соберите результат, который можно передать в работу
Для самостоятельного проекта подготовьте основной экран, мобильную компоновку и состояния формы. Добавьте короткие пояснения: что происходит при нажатии, где появляется ошибка и какие части содержания может менять владелец. Проверьте макет с реалистичными заголовками и описаниями вместо одинаковых коротких заглушек.
Попросите другого человека найти стоимость услуги и объяснить, как отправить обращение. Запишите затруднения и доработайте конкретные места. В портфолио покажите исходную задачу, принятые решения и изменения после проверки. Такой рассказ позволит предметно обсудить работу. Он также поможет выбрать обучение: вы уже будете знать, каких знаний не хватило при переходе от эскиза к понятной странице.