Мета й завдання курсу:
У запропонованому курсі для вивчення передбачено такі основні розділи:
Переваги курсу:
Для кого призначений:
– для слухачів, які хочуть осягнути основи веб-дизайну, навчитися розрізняти стилі й функціональну різницю між сучасними сайтами, працювати з кольором і шрифтами, а головне – створювати нескладні прототипи й макети сайту з «нуля» в графічному редакторі.
– курс розрахований, як на новачків у сфері новітніх технологій, що хочуть навчитися розробляти дизайн сайтів, так і на професійних дизайнерів, які вирішили розширити свої знання й опанувати цікаву й перспективну сферу комп’ютерної графіки.
Після закінчення курсу ви зможете:
– розробляти дизайн посадкових сторінок (landing page);
– типової сторінки блогу і різних веб-елементів.
Також цей курс логічне продовження курсу «HTML/CSS. Основи верстання сайтів». Початкові навички роботи в редакторах Adobe Photoshop і Adobe Illustrator вітаються.
На підставі одержаних знань слухачі будуть вміти:
Програма курсу «Основи веб-дизайну»
|
№
|
Теми |
Заняття (зміст, підтеми) |
Кількість годин |
| 1 | Вступ у web design | ЧАСТИНА I
Теоретичне заняття № 1. Дизайн як напрям в графічному дизайні. Завдання, що вирішуються веб-дизайнером. Ланцюг: макет сайту – верстка сайту – програмування сайту. Веб-сайт як додаток. Етапи розробки веб-сайту. Функціональні стилі у веб-дизайні. Сучасні тренди у веб-дизайні.
Практичне заняття № 1. Практичний розгляд і аналіз сайтів різного типу і стилів. Порівняння стилів, функціональних особливостей сайтів і сфери їх застосування.
Домашнє завдання. Підібрати самостійно мінімум по два приклади різного виду сайтів із мережі Інтернет. Проаналізувати типові ознаки кожного стилю.
|
2 |
| 2 | Типографіка і колористика у веб-дизайні | Теоретичне заняття № 2.
Вивчення особливостей підходу до типографіки у процесі розробки дизайну веб-сторінок. Обмеження в типографіці для веб-сторінок. Стандартні шрифти ОС. Нестандартні шрифти: як налаштувати й оптимізувати. Акцидентність. Художньо-образні особливості формоутворення акцидентного шрифту. Символіка графічного знаку, образність та емоційна дія шрифту. Ієрархія заголовків. Адаптація до швидкого перегляду сторінок. Контраст фону і кольору шрифту. Колористика у веб-дизайні. Особливості кольору на сайтах. Обмежена палітра. Психологія кольору (коротко).
Практичне заняття № 2. Робота з онлайн сервісами з налаштуванню шрифту й підбору кольорів. Розгляд колірних таблиць і особливостей поєднання кольорів. Аналіз психологічних особливостей і впливу кольору на людину.
Домашнє завдання. Підібрати в мережі приклади сайтів різного функціоналу, наприклад, сайту в американському бізнес-стилі і в промо-стилі. Підготувати короткий письмовий аналіз цих сайтів. |
4 |
| 3 | Композиція і візуальна ієрархія на веб-сторінках | Теоретичне заняття № 3.
Коротко про психологію сприйняття. Необхідність візуальної ієрархії на сайті. Поняття модульної сітки. Модульні сітки в графічних пакетах і у верстанні. Frameworks – сіткові структури (огляд). Прототипи сайту та ескізи. Початкові поняття про різні способи верстання й responsive (адаптивний дизайн).
Практичне заняття № 3. Практичний розгляд різних елементів сайту в їх ієрархії і положенні один відносно одного. “Правильні” і “неправильні” сайти – аналіз і порівняння. Робота із зразком модульної сітки. Створення ескіза головної сторінки сайту-візитки.
Домашнє завдання. Створити ескіз («від руки») головної сторінки інтернет-магазину торгової компанії на вибір слухача. |
4 |
| 4 | Ергономіка сайтів. Інформаційна архітектура сайтів. Навігація | Теоретичне заняття № 4.
Початкові поняття про ергономіку (юзабіліті) сайтів і інформаційну архітектуру. Визначення інтерфейсу. Взаємодія людина – комп’ютер. Особливості взаємодії. Поняття про ІА (інформаційну архітектуру) сайту. Необхідність розробки структури сайту при створенні професійного веб-проєкту, який здійснює продажі. Коротко про систему навігації на сайті. Області навігації і види меню. Рекомендації щодо розробки навігаційних елементів. Головна сторінка і її особливості.
Практичне заняття № 4. Практичний розгляд різних елементів сайту, обговорення їх функціонального призначення. Аналіз (на прикладах) помилок у проєктуванні і реалізації інтерфейсів.
Домашнє завдання. Самостійно знайти в мережі приклади сайтів ііз «поганим юзабіліті». Приготувати обговорення помилок, аналіз і шляхи виправлення. Знайти приклади ресурсів із трьома і більше сферами навігації. Проаналізувати їх особливості і цілі. |
4 |
| 5 | Графіка у веб-дизайні | Теоретичне заняття № 5.
Особливості веб-графіки. Формати, стискування, зменшення швидкості завантаження сторінок. Джерела зображень для сайтів. Фотостоки, безкоштовні ресурси. Рекомендації з пошуку необхідної для сайту графіки. Підбір за кольором. Рекомендації щодо вибору колірної гами сайту. Обмеження з використання кількості кольорів і графіки загалом.
Практичне заняття № 5. Практичний розгляд сайтів із переважно графічним контентом. Сайти-галереї. Пошук зображень для макету сайту на задану тематику. Підбір колірної гамми для цього макету.
Домашнє завдання. Підібрати 5-6 зображень для майбутнього корпоративного сайту (компанія – продавець автомобілів) – логотип, малюнок для фону, декілька фото для слайдера і фотографії співробітників у визначених розмірах. |
2 |
| 6 | Підсумкове зайняття. Робота за брифом (шаблоном для підготовки технічного завдання) | Теоретичне заняття № 6.
Поняття брифу і технічного завдання. Особливості роботи із замовником. Позначення ідеї, цільова аудторія, збір інформації та аналіз сайтів компаній конкурентів. Створення й детальне опрацювання структури сайту. Підготовка «варфрейму» (прототипу) сайту. Поняття про посадкові сторінки та аналіз їх особливостей.
Практичне заняття № 6. Практичний аналіз брифу від реального замовника. Проходження основних етапів прототипування сайту. Рішення завдань у сфері відповідальності веб-дизайнера.
Домашнє завдання. Доопрацювання домашнього завдання із зайняття № 3. Промальовування детального прототипу сайту інтернет-магазину з елементами навігації і «кошиком». Підготувати ескіз головної сторінки та сторінки з візитівкою товару. |
2 |
| 7 | Знайомство з растровою графікою. Інтерфейс програми Adobe Photoshop | ЧАСТИНА II.
Теоретичне заняття № 7. Створення макету сайту за допомогою програми Adobe Photoshop. Знайомство з програмою Adobe Photoshop. Палітри, навігація, інструментарій. Особливості растрової графіки. Формати документів, створення, відкриття, збереження. Розмір документа в пікселях. Управління розміром. Полотно. Робота з полотном. Лінійки, сітки як як допоміжний інструмент веб-дизайнера під час роботи з модульними сітками. Основні кольори. Робота з колірними зразками.
Практичне заняття № 7. Практична робота з полотном. Налаштування інтерфейсу програми «під себе». Збереження зразків кольору. Робота з бібліотеками кольорів.
Домашнє завдання. Встановити на домашньому ПК програму Adobe Photoshop. Створити документ розміром 1024х1000 пікселів. Створити допоміжні інструменти, що допомагають у створенні майбутнього макету сайту за заданими координатами. Зберегти власний колір як фон для сайту. |
2 |
| 8 | Способи виділення в Adobe Photoshop. Шари | Теоретичне заняття № 8.
Основні інструменти виділення. Група «Ласо». Інструмент «Чарівна паличка». Виділення простих об’єктів у програмі Adobe Photoshop. Модифікація виділення. Трансформація виділеної області. Швидка маска як спосіб створення складної форми виділення. Концепція шарів. Макет сайту як багатошарова і складна побудова. Прозорість і режими накладення. Угрупування шарів, зв’язування, злиття. Стилі шарів (огляд). Створення власного стилю й модифікація відомого.
Практичне заняття № 8. Створення перших колажів із різних ділянок виділення. Практична робота із створення області навігації на сайті – низка кнопок меню.
Домашнє завдання. Створити форму для реєстрації на сайті. Використати растрову підкладку під форму. Створити поля для логіна і пароля і кнопку входу. |
4 |
| 9 | Робота з текстом. Експорт | Теоретичне заняття № 9.
Основні поняття в типографіці. Особливості роботи з текстом у растровому редакторі. Палітра налаштування тексту й шрифтових властивостей. Модуль Safe for Web. 3 формати растрових зображень для веб-сторінок.
Практичне заняття № 9. Практична робота із створення блоку з текстом для макету й стилізованих заголовків. Оптимізація растрових зображень.
Домашнє завдання. Зробити макет рекламного банера з використанням растрової підкладки і текстового заголовка. Додати контактні дані. Підготувати картинки у 3-х форматах для веб-сторінки. |
2 |
| 10 | Теоретичне заняття № 10.
Векторні фігури в програмі Photoshop як основа для макету сайту. Шари-форми і їх особливості. Створення веб-елементів. Маски. Відсічні маски. Використання і редагування обтравочних масок у програмі Illustrator.
Практичне заняття № 10. Практична робота зі створення блоку-контенту для сайту з використанням стилю-шару. Додавання текстового блоку й обтравочної маски для растрового зображення.
Домашнє завдання. Створити макет «шапки» сайту з векторним логотипом за допомогою стандартних фігур із мережі Інтернет. Прикрасити шапку сайту стилізованим текстовим заголовком. |
2 | |
| 11 | Ретуш і корекція | Теоретичне заняття № 11.
Поняття про ретуш і корекцію. Інструменти ретуші в програмі Photoshop. Клонуючий штамп. Коригувальні і заливальні шари і їх роль у створенні макету сайту. Поняття про текстури в програмі Photoshop.
Практичне заняття № 11. Практична робота зі створення власної текстури в програмі. Робота з клонуючим штампом. Створення заливальних шарів для фону сайту. Використання коригувальних шарів для стилізації макету.
Домашнє завдання. Відретушувати надане зображення. На запропонованих зображеннях провести корекцію кольору, замінити колір на протилежний і змінити колірний баланс. |
2 |
| 12 | Верстання макету посадкової сторінки | Теоретичне заняття № 12.
Особливості дизайну landing page. Послідовність верстання. Створення елементів веб-сторінки: шапка, контент, сайдбар, футер.
Практичне заняття № 12. Практична робота з верстання макету посадкової сторінки для комерційного сайту в режимі майстер-клас. Опрацювання деталей.
Домашнє завдання. Завершити верстання макету, додати стилі шарів, додати контактні дані у футере. |
4 |
| 13 | Векторна графіка. Інтерфейс програми Adobe Illustrator | ЧАСТИНА IIІ.
Теоретичне заняття № 13. Створення векторних елементів в програмі Adobe Illustrator. Особливості й призначення векторної графіки. Знайомство з програмою Adobe Illustrator. Векторні формати. Створення, збереження файлів. Створення простих об’єктів (примітиви, лінії). Налаштування інструментів. Виділення, переміщення об’єктів, угрупування, копіювання і дублювання, вирівнювання і розподіл, базова трансформація об’єктів. Трансформації: масштаб, поворот, дзеркальне відображення, скіс, деформація об’єктів.
Практичне заняття № 13. Практична робота зі створення векторної ілюстрації – створення логотипу компанії з простих фігур.
Домашнє завдання. Встановити на домашньому ПК програму Adobe Illustrator. Створити документ заданого розміру в моделі RGB. Створити нескладну векторну ілюстрацію – персонаж для майбутнього рекламного веб-банера. |
2 |
| 14 | Заливки й обведення в програмі Adobe Illustrator | Теоретичне заняття № 14.
Заливка векторного об’єкту. Види заливок. Налаштування бібліотек, створення власних зразків кольору. Градієнти. Види градієнтів. Створення й налаштування градієнта. Візерункові заливки. Збереження власної текстури і модифікація існуючої. Обведення. Види обведень. Налаштування і збереження зразка обведення. Палітра Оформлення. Створення багатошарової заливки та обведення. Стилі в програмі Adobe Illustrator. Створення, збереження, використання. Прозорість.
Практичне заняття № 14. Створення векторної іконки для сайту або мобільного застосування. Використання готових стилів і завантаження стилів із мережі.
Домашнє завдання. Створити векторного значка кошику і кнопку входу в особистий кабінет користувача для інтернет-магазину. Створити й зберегти свій стиль для цього елементу, використовуючи градієнтну і суцільну заливку, а також багатошарове обведення. |
2 |
| 15 | Робота з текстом. Символи в програмі Adobe Illustrator | Теоретичне заняття № 15.
Текст у програмі Adobe Illustrator. Інструмент «текст». Заголовний і блоковий текст. Текст у контурі і по контуру. Налаштування блоків тексту, робота з фреймами, вставка зображень з обтіканням. Повторення понять “гарнітура шрифту”, “інтерліньяж”, “трекінг” тощо. Символи в AI. Символ як веб-елемент. Палітра символів. Створення і модифікація символу. Експорт. Трохи про формат SVG.
Практичне заняття № 15. Створення векторної кнопки як елементу макету сайту, що повторюється. Збереження її у форматі символу з використанням тексту. Зміна масиву через редагування головного зразка.
Домашнє завдання. Створити набір векторних елементів сайту (на вибір) у двох різних стилях дизайну. Бажано використати стиль flat і web 2.0. Зберегти в бібліотеці стиль елементу, перетворити його на символ, експортувати у формат SVG. |
2 |
| 16 | Екзамен | Підсумкова екзаменаційна робота. Складання практичної частини іспиту полягає в уявленні й захисті макету сайту-візитки, створеного слухачем упродовж навчання. Можливий варіант макету корпоративного сайту, інтернет-магазину або блогу за бажанням слухача. Під час іспиту необхідно відповісти на низку запитань про особливості цього макету, його основні елементи та його «юзабіліті». | 2 |
| 17 | Робота в графічному редакторі FIGMA | ЧАСТИНА IV.
Теоретичне заняття № 16. Знайомство з графічним редактором Figma Інтерфейс, особливості роботи в онлайн-режимі, навігація, інструментарій. Створення макету сайту (лэндинг, сайт-візитка, сайт-портфоліо) засобами програми. Редагування і переналаштування готового шаблону сайту. Прототипи, презентація сайту. |
10 |
Додаткова інформація:
Час заздалегідь узгоджується з менеджером навчального центру. На занятті рекомендується мати зошит для ведення конспекту та електронний носій (флешку) для записів електронних завдань і практичних посібників.
Список роздаткового матеріалу:
Під час навчання слухачам видаються додаткові матеріали в електронному вигляді: у PDF форматі, а також відеозаняття на вивчені теми для кращого засвоєння матеріалу й подальшого його закріплення. Також слухачеві рекомендується вести власний конспект (електронний або паперовий) під час прослуховування теоретичного лекційного матеріалу. Практичні посібники для роботи на заняттях і дома видаються викладачем безпосередньо перед заняттям в електронному вигляді. Вітається робота з власними файлами слухача, які він використовує на заняттях.
Підтримка випускників викладачем:
Після закінчення курсу викладач залишається на зв’язку зі слухачем. Ви у будь-який час можете отримати допомогу у своїй роботі і кваліфіковану відповідь на будь-яке питання, розширити свої знання та удосконалити навички за допомогою індивідуальної консультації або додаткового заняття з викладачем.
Записатися на курс