Курсы Web-дизайна UX/UI | Академия IMT Запорожье

КУРСЫ ВЕБ ДИЗАЙНА В ЗАПОРОЖЬЕ

Web-дизайн: UX/UI

Старт группы

10 мая

Длительность

3 месяца

Кол-во занятий

24 по 3 часа

Стоимость

2800 грн/мес.

Время занятий

Вт/Чт
18:00 – 21:00

Полная стоимость

8400 грн

или

о курсе в общем

Что представляет собой курс «Web-дизайна» от IMT Академии?

  • Дизайнерский инструментарий, который поможет решать современные задачи;
  • Информация обо всех новых веяниях в сфере WEB-дизайна;
  • Преподаватель-практик, который умеет не только хорошо доносить материал, но и знает, как применить знания в реальной жизни;
  • Практикумы, где вы сможете отрабатывать навыки в веб-дизайне;
  • Домашняя работа над дизайном собственного сайта — закрепление полученных знаний и отшлифовка навыков.

Мы гарантируем, что вы не будете скучать на занятиях, зазубривая новые знания. Ведь мы считаем, что практика — лучший способ освоить любой материал! Только актуальные инструменты, только современные приёмы, только то, что пригодится вам в дальнейшей работе, мы вложили в наш курс!

Чему вы научитесь на курсе Web-дизайна?

  • Базовым основам Web-дизайна, даже если вы новичок;
  • работе с редактором PhotoShop;
  • построению векторной графики и работе с ней;
  • как создать дизайн сайта, причем на практике.

кому полезен курс

Startups

Стартапам

Business

Малый и средний бизнес

ChangeProf

Тем, кто хочет сменить профессию

Преимущества курса

Наши преподаватели знают о WEB-дизайне не понаслышке! Ведь они работают в данной сфере более 7 лет. Все занятия подразумевают теорию, подкреплённую практикой, поэтому приготовьтесь делать домашки и самостоятельные работы.

Мы дадим вам весь необходимый базис для дизайна. Вам останется лишь найти достойное применение тому, чему вы научитесь на курсе WEB-ДИЗАЙН от IMT Академии. В основе программы лежат знания и опыт, накапливаемые нашими специалистами с 2009 года. Обучение заключается в постоянной проработке теории на практике.

На курсе веб-дизайна в ИМТ вы осваиваете глубокую базу, необходимую для изучения веб-технологий в будущем. Регулярное посещение занятий и систематическое выполнение домашних заданий гарантирует результативность обучения web-дизайну в Академии IMT.

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


  • Что такое Веб дизайн и графический интерфейс сайта?
  • Общая структура сайта, структура страницы сайта.
  • Теория цвета.
  • Психология восприятия цвета.
  • Цвет в компьютерной графике.
  • Цветовые модели CMYK и RGB.
  • Различия между векторной и растровой графикой.
  • Программы для работы с компьютерной графикой.
  • Современные тренды в веб-дизайне.

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


  • Что такое типографика и для чего нужны модульные сетки.
  • Знакомство с интерфейсом Adobe Photoshop CC 2015.
  • Основные инструменты дизайнера и работа со слоями, горячие клавиши.
  • Как можно настроить Adobe Photoshop CC 2015 под свои потребности.
  • Как в Adobe Photoshop CC 2015 создаются простые документы.
  • Взаимодействие направляющих и линеек.
  • Какие типы и виды шрифтов доступны в программе.
  • Работа со шрифтом: крекинг, трекинг, интерлиньяж, гарнитура.
  • Какой выбрать шрифт для проекта.
  • Как строится модульная сетка и как можно её использовать во время разработки дизайна сайта.

Создаем читаемый текст, рисуем блок сайта в программе Adobe Photoshop.


  • Как в Adobe Photoshop CC 2015 работать с кривыми.
  • Что такое «Кривая Безье».
  • С помощью каких инструментов можно создавать и редактировать кривые Безье.
  • Как в Adobe Photoshop CC 2015 отображаются фигуры и контуры.
  • Кривые Безье в Adobe Photoshop CC 2015.
  • Продолжаем знакомиться с инструментами Adobe Photoshop.

Создаем логотип с помощью инструмента Кривые Безье (контур), рисуем объемные кнопки с помощью инструмента выделения и градиента, создаем соединенное изображения с использованием инструментов выделения и коррекции.


  • Подробнее о взаимодействии с пользовательским интерфейсом (UI/UX).
  • Что представляет собой пользовательский интерфейс.
  • Из каких элементов состоит UI.
  • Как пользователи взаимодействуют с интерфейсом приложения.
  • С помощью каких инструментов можно захватить внимание пользователей и как расставить акценты на некоторых интерфейсных элементах.
  • Продолжаем знакомиться с инструментами Adobe Photoshop.

Создаем векторные кнопки и иконки, рисуем блоки сайта в программе Adobe Photoshop.


  • Создание логотипов, особенности их восприятия.
  • Форма в графическом дизайне.
  • Продолжаем знакомиться с инструментами Adobe Photoshop, работа со слоями — масками.

Создаем набор пользовательского интерфейса (UI Kit), Рисуем баннер с помощью инструмента «маска», создаем векторные логотипы с помощью инструмента «перо», блоки сайта.


  • Изучаем архитектуру сайтов:
    • Какие виды и типы сайтов можно выделить?
    • Какими бывают интерфейсы приложений: основные типы.
    • С помощью каких элементов осуществляется управление сайтом и взаимодействие с ним.
    • Какие функции и задачи выполняет сайт.
    • Как правильно готовить ТЗ, с чего начинать работу над проектом.
    • Тонкости проектирования разных видов веб-сайтов.
    • Структура и особенности построения сайта Лендинга.

Создаем ТЗ для собственного проекта, продумываем основные разделы, анализируем сайты конкурентов, работы других дизайнеров и студий.


  • Создаем адаптивный дизайн сайта в программе Adobe Photoshop, подбор цвета, шрифта, визуального контента на основание ЦА и особенностей данного проекта.
  • Прорисовываем в Adobe Photoshop главную страницу сайта (десктопная версия), используя модульную сетку Bootstrap.


  • Классификация стилей сайтов по структуре, цветовой гамме, по количеству графике, тематике и художественному оформлению.

Дополняем макет сайта в соответствии с выбранным стилем, учимся классифицировать сайты по стилистике, находим примеры.


  • Анимация элементов интерфейса.
  • Анимация процессов и пошаговых операций.
  • Анимация и отображение блоков сайта.

Создаем простую гив-анимацию, гив-баннер, и сложную гив-анимацию блока сайта.


  • Работа с сайтами e-commerce
    • Специфические особенности UI/UX для сайтов e-commerce.
    • Как работать с контентом e-commerce сайтов.
    • Основные страницы e-commerce сайта: разрабатываем правильную структуру.
    • Структура и особенности страницы “карточка товара”.
  • Восприятие человеком визуальных образов.
  • Композиция и пропорция в WEB-дизайне.
  • Управление вниманием пользователя.

Рисуем макет страницы сайта «карточка товара».


  • Основное предназначение программ и их особенности (Adobe Illustrator и Figma).
  • Как в Adobe Illustrator и Figma создавать документы.
  • Что называют монтажными областями и как с ними работать.
  • Набор инструментов в программе Adobe Illustrator и Figma.

Создаем мобильную версию сайта.


  • Базовые принципы работы веб-ресурсов.
  • Необходимые инструменты для работы с сайтами.
  • Программный минимум: какие программы понадобятся в вашей работе.
  • Изучаем теги: что они собой представляют.
  • Что необходимо знать о тегах.
  • Как применяются теги: сводка основных правил.
  • Теговая атрибутика.
  • Разновидности тегов.
  • Теги, которые относятся к верхнему уровню.
  • Как с помощью тегов прописать заголовок сайта.
  • Парные теги.
  • Структура HTML документа.
  • Как строится базовая структура HTML кода.
  • Маст-хев теги: без каких тегов невозможно построение сайта.
  • С помощью каких тегов создаются блоки документа.
  • Какие теги прописывают строки документа.
  • Какие теги используют для формирования списков.
  • Теги, с помощью которых формируются таблицы.
  • Как с помощью тегов прописать фреймы.
  • Как расшифровывается атрибутика тегов.
  • Как задать странице цвет и размер, и как прописать адрес.


  • Работа с абзацами.
  • Выделение заголовков.
  • Как выравнивается текст документа.
  • Размер кегля, курсив, выделение текста жирным шрифтом, подчеркивание фрагментов текста.
  • Написание символов в верхнем и нижнем индексе с помощью тегов.
  • Вставка специальных символов.
  • Вставка ссылок.
  • Как прописываются относительные и абсолютные.
  • Что нужно знать о вложенности тега.
  • Какие атрибуты можно использовать при вставке ссылки в документ.
  • Как с помощью тегов прописать ссылку на e-mail.
  • Что такое якорь, для чего он используется.
  • Работа с изображениями.
  • Какие форматы можно использовать.
  • Как добавить изображение на страницу сайта.
  • Что такое ALT и для чего он нужен.
  • Как можно изменить высоту и ширину изображения.
  • Работа со списками.
  • Какие бывают типы списков, как их создавать.
  • Какие теги используются для маркированного списка.
  • С помощью каких тегов выводится нумерация в списке.
  • Как создается список определений.


  • Какие атрибуты используются при создании таблиц.
  • Какие нюансы необходимо знать при построении таблиц.
  • Как выравнивать таблицы.
  • С помощью каких тегов можно объединить ячейки в таблице.
  • Что такое вложенные таблицы и как с ними работать.
  • Что собой представляет форма, её предназначение.
  • Какие используются методы для отправки данных.
  • Из каких элементов состоит форма.
  • Какую атрибутику можно использовать при работе с формами.
  • Как защитить данные: инструменты создания брони формы.


  • Какие стилистические преимущества можно выделить.
  • Как применяются стили к выбранной странице.
  • Разновидности типов носителей.
  • Основы CSS-синтаксиса.
  • Расшифровка свойств стилей.
  • Что такое селекторы и как их применяют.


  • Селекторы, которые используются для контекста.
  • Селекторы-соседи: что это.
  • Какие селекторы называют дочерними и для чего их используют.
  • Какие из селекторов подходят для атрибутов тега?
  • Что называется универсальным селектором.
  • Элементы с приставкой «псевдо»: -классы и -элементы.
  • Как группируются псевдоэлементы.
  • Как наследуются свойства элементов.
  • Важность правильного каскадирования.
  • Что относится к классам, а что к идентификаторам.


  • Типы;
  • Классы;
  • Как и где применяются.


  • Рассмотрим DIV’ную верстку.
  • Как создается макет.
  • Как придать сайту «резиновости».
  • Что необходимо для адаптивной верстки страницы?
  • Как применяется сетка.
  • Чем отличается табличная верстка от DIV’ной.
  • Как располагаются блоки в DIV’ной верстке.


  • Как проверить валидность данных.
  • Что необходимо для валидации CSS.
  • Как добиться корректности кода.
  • Какой код является эффективным и что необходимо для его написания.
  • Правим ошибки в коде.
  • С помощью каких инструментов и сервисов можно проверить код.
  • Код W3C: базовые требования.
  • В чём смысл валидации?


  • Абсолютное.
  • Relative.
  • Static.
  • Где применяется позиционирование.


  • BXslider.
  • Slickslider.
  • Установка, манипуляции.


  • Как подключать.
  • Как с ней работать.
  • Варианты применения.


  • Знакомство с интерфейсом платформы.
  • Базовые функции CMS.
  • Как создавать страницы на WP.
  • Как создавать записи.
  • В чем принципиальные отличия записей и страниц.
  • Работа с админ-панелью.
  • Как добавлять новых пользователей: роли, учетные записи.
  • Базовый набор основных компонентов и плагинов для работы сайта на WP.
  • Free-шаблоны: где искать, как устанавливать.
  • Чем отличаются бесплатные и платные шаблоны.
  • Какими инструментами можно отредактировать шаблон.
  • Как расширить функционал сайта.
  • Установка SEO модуля: для чего он нужен.

Остались вопросы?

offline

мы в оффлайне

преподаватели

Дарья

Креативная, талантливая и позитивная.

Специализируется на: Adobe PhotoShop.

Начинающий уровень: Adobе Illustrator, PHP‚ HTML5‚ JavaScript.

инструменты

Figma

Интерфейсно-ориентированное програмное обеспечение. Позволяет крайне быстро создать любой макет интерфейса и сделать его интерактивным.

XMind

Как растасовать тысячи мыслей? Использовать технику mindmap и соответствующие инструменты.

Каждый участник курса получает диплом об успешном завершении курса с серийным номером

выпускники работают

  • mercedes
  • 21
  • yuko
  • ztr
  • inform
  • anc
  • mercedes
  • 21
  • yuko
  • ztr
  • inform
  • anc

Мы периодически делаем полезные рассылки о бесплатных курсах и мастерклассах нашей академии

    Я даю свое согласие на обработку персональных данных и соглашаюсь с условиями и политикой конфедициальности

    mail-mockup

    Web-дизайн: UX/UI

    Старт группы

    10 мая

    Длительность

    3 месяца

    Кол-во занятий

    24 по 3 часа

    Стоимость

    2800 грн/мес.

    Время занятий

    Вт/Чт
    18:00 – 21:00

    Полная стоимость

    8400 грн

    Я даю свое согласие на обработку персональных данных и соглашаюсь с условиями и политикой конфедициальности