Web-дизайн Профессиональный курс

 
 

Профессиональные курсы Web-дизайна в Киеве построены таким образом, чтобы научить слушателей современным технологиям дизайна и HTML-верстки с учетом требований стандартов. Во время курса слушатели последовательно проходят все шаги по разработке сайта -  технический дизайн, графический дизайн, HTML- вёрстку, наполнение страниц  контентом, размещение сайта в сети Интернет. 

Какой результат?  - Основной результат обучения веб дизайну - дипломная работа, которая выполняется самостоятельно и представляет собой завершенный веб-сайт с адаптивной версткой на HTML5. В качестве веб-сайта может выступать одностраничный сайт (лендинг). 

Web-

В программе обучения Веб дизайна:

Модуль 1. Основы. Графика для веб-дизайна

Тема. Введение в веб-дизайн. Юзабилити и шаблонные решения

Понятие веб-сайта и его содержимое. Виды сайтов, целевая аудитория. Информационная архитектура сайта. 

Технический и графический дизайн сайта. Юзабилити навигационных, информационных и функциональных блоков сайта. Правила макетирования, вычисления размеров макета дизайна

Примеры информационной архитектуры и технического дизайна. Создание информационной архитектуры на основании конкурентного анализа. Разработка технического дизайна сайта на примере современных сайтов

Тема. Последние тенденции в дизайне сайтов
Основные тренды в веб-дизайне, примеры трендовых сайтов, адаптация существующего дизайна под новые тренды, создание стильного дизайна сайта 
 
Тема. Adobe Photoshop для веб-дизайнера
Интерфейс программы и его настройка, слои, цвет, инструменты текста, инструменты заливки и рисования, инструменты выделения, маски (растровая и векторная), инструменты ретуши и тонирования, цветокоррекция, фильтры

Способы вырезания объектов, коллажирование, цветокоррекция, ретушь, кадрирование, трансформирование и обработка фото, особенности работы с текстом для веб.

Создание графических фрагментов сайта, создание кистей и текстур, создание дизайна сайта по примеру 

Тема. Создание графического дизайна сайта в Adobe Photoshop
Постановка требований, общение с клиентом, создание дизайна сайта 

Тема. Оптимизация графических файлов для веб
Виды графики, цветовые модели, графические форматы, правила оптимизации форматов 

Тема. Взаимодействие клиент-сервер
Браузер, сервер
Адресация, протоколы

Тема. Размещение сайта в Интернет
Выбор и регистрация доменных имён, хостинга. Регистрация и размещение сайта в Интернет на примере бесплатного хостинга
 
Модуль 2. Основы верстки, CSS 
 
Тема. Подготовка макета для верстки
Параметры дизайна макета. Выбор  размеров, шрифтов, цветовой схемы

Тема. Основы языка HTML 
Базовые теги форматирования текста, ссылки, рисунки, списки, таблицы, кодировка документа, специальные символы
Размещение на сайте видео-аудио, блока поделиться в соцсетях
Вставка на сайт иконки-фавикон

Тема. Введение в CSS, основные возможности CSS 
Способы подключения. Селекторы, атрибуты. Каскадность, наследование.
Цвета, фоны, форматирование текста, шрифты (системные, внешние, гугл-шрифты) и их оформление, позиционирование
Вопросы форматирования и оптимизации кода 

Тема. Вопросы кросс-браузерности
Какие браузеры должны быть на компьютере у веб-дизайнера
Совместимость со старыми версиями браузеров, "прогрессивное усовершенствование"
Отладка вёрстки на примерах

Тема. Блочная вёрстка
Верстка шаблона сайта-визитки

Тема. Оптимизация сайта для поисковых систем
Введение в SEO. Обзор тэгов для продвижения сайта

 
Модуль 3. Профессиональная верстка для Web 

Тема. Введение в HTML5
Что такое HTML5. Обзор новых тегов HTML5.
Структура документа. Поддержка новых тегов в устаревших браузерах.

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

Тема. Видео и аудио
Поддержка видео и аудио форматов браузерами. Преимущества и недостатки использования элементов video и audio.Управление воспроизведением.

Тема. Введение в CSS3
Преимущества CSS1, CSS2, CSS3. Новые селекторы CSS3.

Тема. Атрибуты CSS3
Введение в CCS3. Фоны, градиенты, прозрачность, текстовые эффекты, анимация, многоколоночность. Практичекум по работе с CSS3.

Тема. Адаптивная вёрстка
Особенности кроссбраузерной вёрстки. Адаптивные изображения и видео. Медиазапросы
 

 

Тема. Фреймворк «Bootstrap»
Что такое Bootstrap и зачем его использовать. Сеточная система Bootstrap. Обзор CSS. Навигационные системы Bootstrap. Эффекты JavaScript

 

Тема. Выполнение и защита дипломной работы
 
 
 
Примеры визуализаций с применением HTML5 и CSS3
 
  • прокрутка страницы с эффектом видео на html5 
прокрутка страницы с меняющейся картинкой, вследствие чего возникает эффект видео, данный прием позволяет создавать эффект объемной страницы.
 
 
 
  • сайты с эффектом паралакса

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

 
 

© BD8studio 2017. Все права защищены



Заявка на расчет стоимости и сроков работ

Мы свяжемся с Вами и зададим правельные вопросы, для более детального понимания что Вам нужно и чем мы можем помочь.



Безопасность:  Ваши данные защищены от стороннего использования.