+7 (812) 703-02-02 info@hse.spbstu.ru

Семестр 2. Дизайн интерфейсов

C 7 класса | 12 занятий | Очно или онлайн

Длительность курса: 78 ак. часов (12 занятий по 4 ак. часа + 30 часов домашней работы)

О чём курс

Интернет стал необходимой частью жизни любого человека. Сайты учат, развлекают, информируют, помогают делать покупки. С одними сайтами «общаться» интересно и легко. Другие сайты требуют от посетителей дополнительных усилий как поиску, так и по восприятию контента. Задача веб-дизайнера – создать удобный и понятный графический интерфейс («внешний вид») сайта. Как и в любой другой области дизайна, при разработке веб-интерфейса необходимы знания и навыки применения принципов композиции, цветовой гармонии. При разработке веб-интерфейса дополнительно надо учитывать возможности технологий по размещению информации на веб-странице.

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

Чему научим

В результате обучения учащиеся получат знания и навыки в следующих областях:

  • Основные законы композиции в применении к интерактивной среде.
  • Цветовые модели, применение цвета на веб-странице.
  • Основы проектирования пользовательских интерфейсов (UI).
  • Организация взаимодействия пользователя с сайтом (UX).
  • Современные стили и принципы веб-дизайна.
  • Разработка логической структуры сайта и системы навигации.
  • Создание макета сайта адаптируемого дизайна (для разных типов устройс.тв)
  • Подготовка служебной и иллюстративной графики для веб-страниц.
  • Разработка гида по стилю.
  • Создание анимированных баннеров.

Занятие 1

Формирование концепции сайта. Графический интерфейс пользователя

  • Понятие графического интерфейса веб-сайта.
  • Профессии в области дизайна сайтов.
  • Формирование концепции сайта (бриф) .

Обзор интерфейса программы Adobe Photoshop

  • Основные инструменты.
  • Слои.

Занятие 2

Цвет, композиция в веб-дизайне. Форматы веб-графики

  • Цветовые модели. Основные характеристики цвета.
  • Принципы, законы, средства композиции.
  • Форматы веб-графики.

Занятие 3

Типографика. Иконографика

  • Основные характеристики шрифта.
  • Инструменты для работы с текстом в Adobe Photoshop.
  • Дизайн иконок для веб-страницы.

Занятие 4

Визуализация информации – инфографика

  • Алгоритм создания инфографики.
  • Паттерны инфографики.

Занятие 5

UX-дизайн – проектирование взаимодействия

  • Основы UX-дизайна.
  • Основные виды прототипов веб-интерфейсов.
  • Навигация веб-ресурса.

Занятие 6

Модульные сетки

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

Занятие 7

Адаптируемый дизайн

  • Понятие адаптируемого дизайна, основные составляющие.
  • Модульные сетки адаптивного дизайна.
  • Навигация мобильных сайтов.

Занятие 8

UI-дизайн. Гид по стилю

  • Основы UX-дизайна.
  • Стили в веб-дизайне.
  • Состав и применение популярных дизайн-систем.

Занятие 9

Дизайн и Интернет-маркетинг

  • Баннеры: форматы, основные параметры.
  • Основные элементы интерфейса интернет-магазина.

Занятие 10

Веб-формы. Галереи изображений

  • Веб-формы: основные типы полей.
  • Галерея изображений.
  • Эффекты для изображений в интерактивной галерее.

Занятие 11

Нарезка графического макета сайта

  • Подготовка макета веб-страницы к нарезке.
  • Служебная и иллюстративная графика.

Занятие 12

Работа над курсовым проектом

Стоимость

19 400 ₽

Есть скидки от 10% до 20%. Узнать подробнее...

Как поступить

Для тех, кто ещё не учится в АИШ:

  • Вступительное тестирование

Для уже обучающихся в АИШ:

  • Азы HTML и CSS или Основы веб-дизайна
Тест № ВКТ-556 Основы HTML и CSS (для АИШ)

Необходимые знания и навыки для успешного прохождения тестирования:

  • Понятие тега
  • Понятие селектора
  • Адрес ресурса
  • Знание основных тегов HTML:
    • разметка теста
    • списки
    • таблицы
    • структурные элементы (шапка, навигация, основное содержимое, доп. содержимое, подвал, раздел, статья)
    • формы и элементы форм
    • изображения
  • Понятие CSS-свойства и его значения
  • Знание основных CSS-свойств:
    • гарнитура шрифта
    • размер текста
    • высота строки
    • размеры блока
    • отступы и поля
    • обтекание
    • цвет текста
    • фон элемента
    • тени
    • гибкая раскладка (flexbox)
    • сетка (grid)
    • медиа-запросы
    • границы
    • единицы измерения
    • позиционирование элементов
    • анимация перехода
  • Многоколоночная верстка
  • Адаптивная верстка

В результате прохождения тестирования необходимо набрать не менее 60 баллов.

Длительность: 45 минут. Количество попыток: 2.

Как записаться на занятия

О дате начала набора будет объявлено дополнительно.

Академия информатики для школьников в цифрах

18 лет

успешной работы
в Политехническом университете Петра Великого

16

направлений обучения

83

учебные программы

3 500

школьников
проходят обучение
ежегодно

4

учебные площадки

36

компьютерных классов