вул. Виконкомівська, 24, офіс 22
м. Дніпро, 49044, Україна
389091atlant@gmail.com
Атлант / Комп'ютерні курси / Основи веб-дизайну

Основи веб-дизайну

Старт курсу: 14 серпня
Тривалість курсу: 78 ак години
Формат: онлайн
Формат: міни група
Графік: ВТ/ПТ
Час занять: 10.00 - 12.15
Вартість курсу: 1950 грн/міс
Додатково: можливо індивідуальний формат 52 ак години

 

Мета й завдання курсу:

У запропонованому  курсі для вивчення передбачено такі основні розділи:

  • Знайомство з новітніми технологіями, інструментами, тенденціями у сфері веб-дизайну та правилами їх взаємодії.
  • Вивчення основних різновидів сайтів, їх функціональних стилів;
  • Аналіз особливостей композиції і побудови сайтів, технічних та художніх принципів їх створення.
  • Колористика й типографіка у веб-дизайні, особливості кольору й шрифтів.
  • Основні поняття про інформаційну архітектуру сайтів.
  • Модульні сітки: види та правила побудови. Особливості сіток на веб-сайтах та веб-застосунках.
  • Програма Adobe Photoshop як потужний інструмент для верстання макетів веб-сайтів.
  • Програма Adobe Illustrator – векторна графіка й формати: модний тренд під час розробки дизайну сайту.

 

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

  1. теоретичні основи веб-дизайну,
  2. практичне верстання макету сторінки засобами Adobe Photoshop,
  3. створення інтерактивних векторних елементів сайту за допомогою роботи з програмою Adobe Illustrator.

 

Для кого призначений:

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

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

Після закінчення курсу ви зможете:

– розробляти дизайн посадкових сторінок (landing page);

– типової сторінки блогу і різних веб-елементів.

Також цей курс логічне продовження курсу «HTML/CSS. Основи верстання сайтів». Початкові навички роботи в редакторах Adobe Photoshop і Adobe Illustrator вітаються.

На підставі одержаних знань слухачі будуть вміти:

  • працювати в команді, розуміти свою роль у конкретному проекті;
  • орієнтуватися в курсі новітніх технологій, інструментів, тенденцій у сфері веб-дизайну;
  • знаходити та обробляти великі обсяги інформації, користуватись інформаційними ресурсами й підтримувати їх в актуальному стані;
  • розрізняти, порівнювати й аналізувати сайти різних видів;
  • орієнтуватися
  • працювати з різними шрифтами й колірними рішеннями на веб-сторінці;
  • правильно розміщувати й компонувати основні елементи веб-сторінок;
  • проєктувати зручні й доступні веб-сторінки і інтерфейси;
  • оформлювати веб-сайти за допомогою професійної техніки (прототипування, ескізи);
  • використовувати модульні сітки в дизайні макету;
  • створювати нескладні макети сторінок за допомогою програми Adobe Photoshop;
  • створювати елементи інтерфейсу сайту у векторному пакеті програми Adobe Illustrator;
  • створювати макети різної складності в програмі Figma;
  • презентувати свої роботи замовнику та робити власний сайт-візитку.

 

Програма курсу «Основи веб-дизайну»

 

 

 

Теми

 

Заняття

(зміст, підтеми)

 

Кількість годин

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 форматі, а також відеозаняття на вивчені теми для кращого засвоєння матеріалу й подальшого його закріплення. Також слухачеві рекомендується вести власний конспект (електронний або паперовий) під час прослуховування теоретичного лекційного матеріалу. Практичні посібники для роботи на заняттях і дома видаються викладачем безпосередньо перед заняттям в електронному вигляді. Вітається робота з власними файлами слухача, які він використовує на заняттях.

 

Підтримка випускників викладачем:

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

Записатися на курс