Веб-дизайн. Визуальное оформление и вёрстка сайтов

Станьте профессионалом веб-дизайна!

Веб-дизайнер – специалист, от которого зависит «лицо» сайта и восприятие его пользователями. Ведь встречают, как известно, «по одёжке»!

Поэтому на веб-дизайнере лежит большая ответственность как перед заказчиком, так и перед будущими пользователями веб-сайта. Он должен уметь абсолютно точно ответить на вопрос: как должен выглядеть сайт? Поэтому на курсе мы разбираем различные варианты оформления сайтов, ищем достоинства и недостатки, смотрим пути улучшения. «Дизайн должен быть оправдан» - таков девиз нашего курса.

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

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

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

Программа курса

Модуль 1. Введение в профессию

• Задачи веб-дизайнера, его место и роль в создании веб-сайта

• Особенности работы в команде и фрилансе

• Постановка задачи для веб-дизайнера

• Современные направления в дизайне, принцип "mobile first" и другие

• Анализ аудитории сайта

• Основные принципы восприятия информации на веб-сайте пользователями

• Анализ конкурентов, способы анализа и сбора информации

• Описание информационной архитектуры сайта

• Структура страницы сайта, типы сайтов

• Создание прототипов страниц сайта. Стандартные элементы сайта, способы прототипирования

Модуль 2. Визуальное оформление веб-сайта

• Стили дизайна: тенденции развития

• Виды макетов: фиксированный, резиновый, адаптивный, отзывчивый

• Сетки дизайна

• Современные принципы дизайна: Google Material Design и другие

• Использование текстовой и графической информации, вопросы легального использования. Полезные ресурсы

• Цветовое и стилевое решение

• Вопросы типографики, выбор шрифтов

• Создание макета страницы в Adobe PhotoShop (или другой графической программе), приемы работы с разметкой макета и векторной графикой. Способы повышения эффективности работы

• Использование иконок, пиктограмм, фонов

• Создание разных версий страницы с учетом требований адаптивного дизайна

• Защита своего дизайна: аргументы и факты

Модуль 3. Верстка макета в HTML и CSS

• Кодирование макета

• Способы кодирования типовых элементов макета

• Представление растровой и векторной информации. Выбор типов файлов и разрешений. Особенности представления векторной графики, использование формата SVG, полезные ресурсы и программы

• Использование CSS-спрайтов для оптимизации загрузки страницы

• Создание мобильной версии

Модуль 4. Как сделать ещё лучше!

• Использование CSS-эффектов для "оживления" страницы

• Видео на сайте: варианты и особенности применения

• Анимации и микровзаимодействия (microinteraction) на сайте, способы их создания и применения

• Применение скриптов (javascript)

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

• Рекомендации, как не остаться в стороне от прогресса, новые технологии и новые перспективы

Аудиторная нагрузка в классе с преподавателем: 32 ак. ч. 

По окончании обучения на курсе проводится итоговая аттестация. Аттестация проводится в виде теста на последнем занятии или на основании оценок практических работ, выполняемых во время обучения на курсе.