Веб-дизайнер з розширеним дизайном інтерфейсу

Курс надає вичерпні знання для професійного створення сучасних веб-сайтів за допомогою HTML, CSS, JavaScript та Ajax. Він також зосереджується на таких темах, як графічний дизайн та UI/UX. Ви також дізнаєтесь про використання штучного інтелекту на робочому місці та поглибите свої знання про Figma, Adobe XD та Axure RP для ефективного створення прототипів.
  • Тип ступеня: Сертифікат "Веб-дизайнер
    Сертифікат "UI Design Advanced"
  • Додаткові кваліфікації: Сертифікат "Веб-дизайн за допомогою HTML/CSS/Dreamweaver"
    Сертифікат "Графічний дизайн в Adobe CC"
    Сертифікат "Основи JavaScript/Ajax"
    Сертифікат "UI/UX дизайн"
  • Підсумковий іспит: Практична робота над проектами з фінальними презентаціями
  • Час занять: Повна зайнятість
    З понеділка по п'ятницю з 8:30 до 15:35 (у святкові дні з 8:30 до 17:10)
  • Мова викладання: Німецька
  • Тривалість: 22 Тижні

Веб-дизайн за допомогою HTML, CSS та Dreamweaver

HTML (приблизно 5 днів)

Базовий фреймворк

Теги для створення тексту (h1-h6, p, br)

Основи CSS

Команди форматування тексту

Створення тегів HTML (наприклад, header, nav)

Інтеграція графіки та підготовка її у Photoshop

Фавікони

Посилання

Внутрішні, зовнішні, телефонні, email-посилання

Списки та таблиці

Форми в HTML

Елементи форм

Інтеграція відео та аудіо елементів

Інтеграція YouTube та Google Maps

Відмінності між XHTML та HTML


Штучний інтелект (ШІ) в робочому процесі

Презентація конкретних технологій ШІ

та можливих застосувань у професійному середовищі


Основи CSS (близько 5 днів)

Основи Dreamweaver

Варіанти інтеграції специфікацій CSS (внутрішній, зовнішній, вбудований стиль)

Оформлення тексту за допомогою CSS

Атрибути CSS для оформлення кордонів та інтервалів (відступ, маргіналізація)

Оформлення фону за допомогою CSS

Плаваючі/чіткі основи

Інтервали між стовпчиками за допомогою float

Кольори за допомогою CSS

Clearfix

Псевдоелементи (::before/::after)

Псевдо-класи (:n-го типу)

Перелік/відображення/посилання псевдокласів

Навігація за допомогою ul/li (горизонтальна/вертикальна)


CSS Flexbox (приблизно 5 днів)

Колонки за допомогою Flex

Вирівнювання елементів за допомогою Flex

Колонки в колонках за допомогою Flex

Використання кастомних шрифтів (@font-face)

Шрифти за допомогою Dreamweaver

Dreamweaver - Дизайнер CSS

Позиція CSS

Позиції: відносні/абсолютні/фіксовані

Можливості дизайну форм за допомогою CSS

Колірні градієнти CSS

CSS - перехід/трансформація


Адаптивний веб-дизайн (близько 6 днів)

Точки зупинки, область перегляду, медіа-запити

Адаптивний дизайн заголовків та header-img

Елементи зображень в HTML

Мобільна навігація з наведенням

Увімкніть наведення при кліці на мобільних телефонах Apple

Подія кліку через CSS (за допомогою чекбоксу)

Адаптивна навігація по кліку

Анімована кнопка бургера

CSS-гармошка (за допомогою перемикачів)

Випадаюче меню для десктопу та мобільних

Різні дизайни

CSS псевдо клас :target

Односторінковий сайт - структура сторінок

Адаптивна навігація з управлінням :target

Переваги односторінкових сайтів


JavaScript (близько 9 днів)

Інтеграція додатків

Початок роботи з JavaScript/jQuery

If-then-else

Змінні

Об'єкт даних

Масив Тип даних

ScrollTop

Для циклу

Математичний об'єкт

Sticky-меню (js/css)

Показати/приховати меню з прокруткою

Використання vh/vw та calc

Обов'язковий відбиток інформації/захист даних

Повідомлення про файли cookie

Font-awesome - бібліотека символів

CSS-фільтр

Змінні CSS

Оптимізація сайту для пошукових систем (SEO)

Об'єктна підгонка - графіка, що заповнює фрейми

CSS анімація

CSS сітка

Grid-шаблони-області

Вступ до фреймворку CSS: Bootstrap


Робота над проектом (близько 10 днів)

Закріплення вивченого матеріалу

Презентація результатів проекту

Графічний дизайн з Adobe CC - крос-медійна робота цифровий/друк/веб

Вступ до Adobe Creative Cloud (приблизно 2 дні)

Програми для робочого столу з першого погляду: Photoshop, Illustrator, InDesign

Мобільні додатки Adobe для графічного дизайну

Бібліотеки Creative Cloud

Тенденції та натхнення у сфері кольорів (наприклад, Adobe Stock, Adobe Color)

Adobe Bridge, Adobe Exchange


Основи (приблизно 1 день)

Мистецтво vs дизайн

Дисципліни дизайну, принципи дизайну

Процес проектування

Дизайнерські закони сприйняття

Візуальний потік та компонування

Взаємозв'язок фігури та землі

Оптичні ілюзії та явища

Ефекти інтерференції, закон Хіка

Перспектива та просторовий ефект


Форма та колір (приблизно 2 дні)

Точка, лінія та поверхня

Композиція та композиційна вага

Формат, пропорції та співвідношення сторін

Теорія кольору та кольорові системи

Властивості, ефект і значення

Кольоровий дизайн (гармонії, контрасти)

Привернення уваги за допомогою форми та кольору

Створення та редагування форм (знаків, піктограм, піктограм, іконок)


Штучний інтелект (ШІ) в робочому процесі

Презентація конкретних технологій ШІ

та можливих застосувань у професійному середовищі


Зображення (близько 3 днів)

Експертиза зображень та якість зображень

Піксельна та векторна графіка

Дослідження, ідеї, мудборд

Привернення уваги та сторітелінг

Людина як мотив

Зображення в корпоративній комунікації

Дизайн та редагування зображень


Типографіка та верстка (близько 5 днів)

Анатомія літер

Історія шрифтів, класифікація шрифтів

Поєднання шрифтів

Читабельна типографіка, детальна типографіка

Робочий процес: верстка

Основні правила хороших макетів

Гарнітура та сітка дизайну

Драматургія, візуальний напрямок і фокус

Реалізація та презентація макетних ідей

Огляд виведення файлів (друкованих, цифрових)


Фірмовий дизайн (близько 2 днів)

Корпоративний дизайн vs. фірмовий стиль

Основні структурні елементи

Розробка логотипу, значків та брендів

Реалізація - слово-образ-бренд

Посібник з корпоративного дизайну (керівництво по стилю)


Робота над проектом (близько 5 днів)

Закріплення вивченого матеріалу

Презентація результатів проекту

Основи Javascript/Ajax

Основи JavaScript (приблизно 7 днів)

Вступ до

Версії сценаріїв ECMA

Інтеграція в HTML-сторінки

Елементи мови: змінні, константи, типізація

Примітивні типи даних: Число, рядок, логічний

Колекційні типи даних: Масиви, об'єкти, арифметичні оператори

Керуючі структури: умовні оператори, цикли, функції

Блок-схема

Локальні сховища: Web-сховище, IndexedDB

Обробка помилок


Штучний інтелект (ШІ) в робочому процесі

Презентація конкретних технологій ШІ

та можливих застосувань у професійному середовищі


Маніпуляції з DOM за допомогою JavaScript (близько 4 днів)

основи

Вибір HTML

Вміст і атрибути

стилізація

Події, об'єкт події, бабблінг

Спостерігач

- Спостерігач перетину

- Спостерігач мутацій

Створення, копіювання, переміщення, видалення DOM-елементів


AJAX (приблизно 1 день)

Вступ до

Як це працює

Передумови

HTTP-запити

Об'єкт XMLHttpRequest

Веб-сервіси

-JSON

-XML


Фреймворки/бібліотеки (приблизно 2 дні)

Створіть власну бібліотеку

jQuery


Робота над проектом (близько 6 днів)

Закріплення вивченого матеріалу

Презентація результатів проекту

UI/UX дизайн

Загальний вступ до теми (приблизно 1 день)

UX, юзабіліті, UI, Керівництво з ментальної моделі, Керівництво з людських факторів Принципи дизайну, орієнтованого на користувача

ISO 9241-210/HCD

Процес проектування зручних інтерактивних систем


БГД: Аналіз - розуміння та визначення контексту використання (приблизно 3 дні)

Персоналії

Карта емпатії

Подорож клієнта

Веб-аналітика

Фокус-групи

Опитувальник


ВГД: Визначення вимог до утилізації (приблизно 1 день)

Модель сценарію

Модель завдань

Контекстні інтерв'ю

Щоденникові дослідження

Спостереження за учасниками


HCD: Створення проектних рішень для виконання вимог використання (приблизно 1 день)

Керівництва та стандарти: 7 принципів діалогу за стандартом ISO 9241-110

10 принципів дизайну користувацького інтерфейсу за Jakob Nielsen

Візуальне сприйняття, закономірності


Дизайнерські рішення HCD: Таксономія, інформаційна архітектура та концепції навігації (близько 3 днів)

Блок-схема

Потік користувачів

Інформаційна архітектура

Мікроінформаційна архітектура

Стратегія конверсії

Концепції навігації

Карта сайту

Сортування карток: планування, підготовка, впровадження та оцінка


Огляд гнучкого управління проектами (приблизно 1 день)

Модель водоспаду проти гнучкого методу

Погляд на гнучке управління за методом Scrum

Епік, історія користувача та завдання

Метод дизайн-спринту


Дизайнерські рішення HCD: Дизайн інтерфейсу користувача (приблизно 1 день)

Керівництво по стилю, UI KIT'и, бібліотека шаблонів і система дизайну

Компоненти/елементи та форми інтерфейсу користувача

Кольори, шрифт і типографіка в інтерфейсі, іконки

Атомарний дизайн

Мобільний дизайн в першу чергу


Дизайнерські рішення HCD: Методи проектування за допомогою Figma та Adobe XD (близько 2 днів)

Figma проти Adobe XD


Figma

Асортимент інструментів Figma

Робочий процес

Компоненти інтерфейсу користувача

Адаптивний дизайн

Скрайби, фреймворки

Інтерактивні прототипи


Adobe XD

Палітра інструментів Adobe XD

Робочий процес

Компоненти інтерфейсу користувача

Адаптивний дизайн

Скрайблери, каркаси

Інтерактивні прототипи


Оцінка відповідності дизайну вимогам користувача - юзабіліті-тестування (приблизно 2 дні)

Огляд методів юзабіліті-тестування Мислення вголос: планування, підготовка, впровадження та оцінка

Опитувальник користувацького досвіду (UEQ)

AttrakDiff

VisAWI - Інвентаризація візуальної естетики веб-сайтів

A/B тестування


Штучний інтелект (ШІ) в робочому процесі

Презентація конкретних технологій ШІ та можливих застосувань у професійному середовищі


Робота над проектом (близько 5 днів)

Закріплення вивченого матеріалу

Презентація результатів проекту

Удосконалений дизайн інтерфейсу

Поглиблене вивчення Figma та Adobe XD (приблизно 2,5 дні)

Повторення: Основні функції прототипування

Просунуті техніки анімації та взаємодії

Складні переходи та мікровзаємодії

Створення прототипів для різних пристроїв (адаптивний дизайн)

Інтеграція користувацького тестування та циклів зворотного зв'язку


Штучний інтелект (ШІ) в робочому процесі

Презентація конкретних технологій ШІ

та можливих застосувань у професійному середовищі


Axure RP (приблизно 3,5 дні)

Базові функції та розширені можливості Axure

Створення динамічних та інтерактивних прототипів

Використання змінних, умовної логіки та динамічних панелей

Моделювання взаємодії між користувачами та інтерфейсом

Передача високоточних прототипів командам розробників


Крос-інструментальні робочі процеси (приблизно 2 дні)

Використання Figma, Adobe XD та Axure у поєднанні

Оптимізуйте передачу дизайну: Від прототипу з низькою точністю до розробки

Співпраця та робота з версіями в різних інструментах


Робота над проектом (приблизно 2 дні)

Закріплення вивченого матеріалу

Презентація результатів проекту



Можливі зміни. Зміст курсу регулярно оновлюється.

Після завершення курсу ви будете знайомі з повним робочим процесом сучасного веб-дизайну і зможете створювати зручні та складні веб-сайти: Ви будете знайомі з основами дизайну, найважливішими навичками роботи з HTML, CSS та Dreamweaver, використанням JavaScript та Ajax, а також створенням привабливих користувацьких інтерфейсів.

Крім того, ви зможете застосовувати передові методи прототипування в Figma і Adobe XD і будете впевнено користуватися Axure RP. Ви зможете створювати інтерактивні та динамічні користувацькі інтерфейси з динамічними панелями, змінними та умовною логікою в Axure, а також виконувати весь робочий процес - від концепції до прототипування та передачі розробникам - і ефективно керувати проектами, інтегруючи ці три інструменти.

Веб-дизайнери, веб-програмісти, графічні дизайнери, медіа-дизайнери, фахівці мистецьких професій або люди, які відповідають за концепцію, дизайн та практичну реалізацію веб-сайтів і хочуть здобути необхідні знання та навички.

Сьогодні майже всі компанії покладаються на привабливу присутність в Інтернеті для представлення себе як компанії. Основними потенційними роботодавцями є графічні, рекламні, веб-, мультимедійні агентства або агентства повного циклу, а також постачальники програмного забезпечення та баз даних. Навички веб-дизайну потрібні майже у всіх секторах. За наявності відповідного досвіду самозайнятість також є цікавою перспективою.

Крім того, поглиблені знання з UI дизайну відкриють широкий спектр кар'єрних можливостей у графічних, веб- та софтверних агентствах. Розуміння сучасних технік прототипування затребуване практично у всіх галузях, що відкриває перед вами чудові перспективи в якості UI-дизайнера або фронтенд-розробника.

Ваш змістовний сертифікат дає детальне уявлення про отриману кваліфікацію та покращує ваші кар'єрні перспективи.

Дидактична концепція

Ваші викладачі мають високу професійну та дидактичну кваліфікацію і навчатимуть вас від першого до останнього дня (без системи самонавчання).

Ви будете навчатися в ефективних малих групах. Курси зазвичай складаються з 6-25 учасників. Загальні заняття доповнюються численними практичними вправами з усіх модулів курсу. Практичний етап є важливою частиною курсу, оскільки саме в цей час ви опрацьовуєте вивчене, набуваєте впевненості та рутинності в його застосуванні. Заключний розділ курсу передбачає виконання проекту, кейс-стаді або підсумковий іспит.

 

Віртуальний клас alfaview®

BildungszentrumЗаняття проходять з використанням сучасної відеотехнології alfaview® - або з комфорту вашого власного будинку, або в нашому приміщенні за адресою . Весь курс може бачити один одного віч-на-віч через alfaview®, спілкуватися один з одним в якості голосу, синхронізованого по губах, і працювати над спільними проектами. Звичайно, ви також можете бачитись і спілкуватись зі своїми тренерами наживо в будь-який час, і протягом усього курсу викладачі навчатимуть вас у режимі реального часу. Уроки не є електронним навчанням, а справжнім живим викладанням віч-на-віч за допомогою відеотехнологій.

 

alfatraining Agentur für Arbeit Навчальні курси субсидуються та сертифікуються відповідно до положення про затвердження AZAV. Bildungsgutschein Aktivierungs- und VermittlungsgutscheinЯкщо ви подаєте заявку на або , всі витрати на курс, як правило, покриває організація, яка його фінансує.
Europäischen Sozialfonds Deutsche Rentenversicherung Фінансування також можливе через (ESF), (DRV) або регіональні програми фінансування. Berufsförderungsdienst Як військовослужбовець строкової служби, ви можете відвідувати курси підвищення кваліфікації через (BFD). Agentur für Arbeit (Qualifizierungschancengesetz) Компанії також можуть підвищити кваліфікацію своїх працівників за допомогою програми фінансування від .

Ми будемо раді проконсультувати вас безкоштовно. 0800 3456-500 Пн - Пт з 8:00 до 17:00
безкоштовно з усіх німецьких мереж.
Зв'яжіться з нами
Ми будемо раді проконсультувати вас безкоштовно. 0800 3456-500 Пн - Пт з 8:00 до 17:00 безкоштовно з усіх німецьких мереж.