ВЕБ-ДИIЗАЙН: UX/UI – Академия IMT Запорожье

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

Курс Web-дизайн

Старт групи

10 травня

Тривалість

3 місяці

Кількість занять

24 по 3 години

Вартість

2800 грн/міс.

Час занять

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

Повна вартість

8400 грн

або

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

Що таке курс «Web-дизайну» від IMT Академії?

  • Дизайнерський інструментарій, що допоможе вирішувати сучасні завдання;
  • Інформація про всі нові тенденції у сфері WEB-дизайну;
  • Викладач-практик, який вміє не лише добре доносити матеріал, а й знає, як застосувати знання у реальному житті;
  • Практикуми, де ви зможете відпрацьовувати навички у веб-дизайні;
  • Домашня робота над дизайном власного сайту – закріплення отриманих знань та відшліфування навичок.

Ми гарантуємо, що ви не нудьгуватимете на заняттях, зазубрюючи нові знання. Адже ми вважаємо, що практика – найкращий спосіб освоїти будь-який матеріал! Тільки актуальні інструменти, тільки сучасні прийоми, тільки те, що стане вам у нагоді в подальшій роботі, ми вклали в наш курс!

Чого ви навчитеся на курсі веб-дизайну?

  • Базовим основам Web-дизайну, навіть якщо ви новачок;
  • роботу з редактором PhotoShop;
  • побудови векторної графіки та роботи з нею;
  • як створити дизайн сайту, причому на практиці.

кому корисний курс

Startups

Стартапам

Business

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

ChangeProf

Тим, хто хоче змінити професію

Переваги курсу

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

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

На курсі веб-дизайну в ІМТ ви освоюєте глибоку базу, необхідну вивчення веб-технологій у майбутньому. Регулярне відвідування занять та систематичне виконання домашніх завдань гарантує результативність навчання веб-дизайну в Академії 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-дизайн

    Старт групи

    10 травня

    Тривалість

    3 місяці

    Кількість занять

    24 по 3 години

    Вартість

    2800 грн/міс.

    Час занять

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

    Повна вартість

    8400 грн

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