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

Photoshop для веб-дизайнеров. Понятия и принципы юзабилити — UI и UX

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

Длительнсть курса   2,5 месяца

Стоимость курса 3800грн. Возможна оплата в 2 этапа по 1900грн

Программа Курса Веб дизайн 

48 учебных чаcов

Часть 1 

Курс  HTML,CSS  Курс вёрстки сайтов

  24 учебных чаcа

Тема 1. Основные понятия в веб-разработке

  • Что такое сайт
  • Что представляет собой веб-страница
  • Виды сайтов
  • Процесс разработки сайта
  • Что такое гипертекст, теги и атрибуты
  • Подготовка рабочего места
  • Простой пример HTML странички
  • Пример сложной веб-страницы
  • Горячие клавиши для перемещения по документам

Тема 2. Основы языка разметки документов HTML

  • Структура HTML документа
  • Основные теги оформления текста
  • Спецсимволы
  • Комментарии в HTML
  • Гиперссылки
  • Типы изображений для web
  • Загрузка изображений на страницу
  • Списки
  • Формы и их элементы

Тема 3. Основы языка оформления стилей документа CSS

  • Что такое CSS
  • Синтаксис CSS
  • Способы объявления CSS
  • Селекторы (id, class, tag)
  • Селекторы атрибутов
  • Основные свойства стилей
  • Вложенность, наследование и группирование свойств
  • Приоритеты применения стилей
  • Псевдоклассы и псевдоэлементы

Тема 4. Таблицы и табличная верстка

  • Создание таблиц
  • Объединение ячеек
  • Вложенные таблицы
  • Стилевое оформление таблиц
  • Верстка макета сайта при помощи таблиц

Тема 5. Работа с макетом дизайна в формате PSD. Мастер-класс

  • Основные функции Photoshop
  • Выделение основных частей макета
  • Нарезка макета
  • Верстка макета сайта при помощи таблиц
  • Вставка частей макета в табличную вёрстку
  • Создание спрайтов

Тема 6. Верстка слоями (блочная верстка)

  • Основные теги для верстки (div и span)
  • Отступы элементов (margin и padding)
  • Обтекаемые элементы
  • Позиционирование блоков
  • Адаптивная верстка

Тема 7. Верстка слоями (блочная верстка)

  • Создание основной разметки сайта
  • Применение overflow и clear в реальной вёрстке
  • Заполнение разметки частями нарезанного макета
  • Приёмы позиционирования элементов

Тема 8. Стандарты web и вспомогательные инструменты

  • Проблема «кроссбраузерности»
  • Стандарты HTML/CSS
  • Стандарт HTML5 и CSS3
  • Грамотная, универсальная верстка
  • Проверка кода на валидность

Тема 9. CSS анимация, эффекты

  • Эффекты анимации при наведении
  • Анимации дочерних элементов
  • Эффекты изображения

Часть 2

Photoshop для веб-дизайнеров. Понятия и принципы юзабилити — UI и UX

Тема 1

Подготовка иллюстраций для WEB. Требования к иллюстрациям в Internet. Обзор форматов иллюстраций JPEG, GIF.  Способы уменьшения объема файла. Использование коллекций изображений (clipart) векторных графических редакторов. Подготовка изображений, имеющих прозрачные области. Представление текстовой информации.

Тема 2

Создание графического макета будущего сайта. Подготовка графических элементов. Создание кнопок. Имитация различных состояний кнопки. Создание фоновых иллюстраций. Техника создания бесшовных узоров . «Нарезка» изображений на фрагменты в программе . Оптимизация фрагментов изображений.

Тема 3

Photoshop для веб-дизайнеров. Основные палитры и инструменты. Векторная и растровая графика. Кривые Безье. Инструменты Rectangle, Arrow, Oval, Eraser. Раздел Colors. Заливка объектов. Инструмент Pencil, Snap to Objects, инструмент Paint Bucket. Палитры Color Mixer и Color Swatches. Инструмент Eyedropper. Сохранение результата как flash-файла и рисунка.Основные принципы создания фотогалереи. Save for web – подготовка изображений для фотогалереи. Фотогалерея на основе фотошаблона Photo Slideshow.

Тема 5 Что такое UI/UX

История, основные понятия

Профессия UI/UX-дизайнера

Процесс разработки сайта

 Тема 6 Состав и структура дизайн процессов. 

Типы проектов

Разновидности сайтов

Гайдлайны

Тема 7 Интерфейс, визуальное оформление

Основы композиции, эстетика

Инфографика и пиктограммы

Стиль и цветовое оформление

Виды сайтов

Функциональные стили

Веб-колористика и Веб-типографика

Электронные шрифты в веб-дизайне

Адаптация и оформление текстов

Работа с контентом

Подбор контента. Авторское право

Тема 8 Проектирование сайта

Идея, задачи

Целевая аудитория, портрет потребителя

Сценарии взаимодействия

Информационная архитектура

Проектирование сайта

Техническое задание и бриф

Тема 9 Композиция и визуальная иерархия

Психология восприятия в веб-дизайне

Визуальная иерархия страницы

Модульная сетка в веб-дизайне

 Тема 9 Эргономика и юзабилити 

Интерфейс

Эргономика и юзабилити

Взаимодействие человек-компьютер

Проектирование и дизайн интерфейса

Культура ведения макетов

Подготовка к верстке и экспорт

Style Guide проекта

Форматы файлов

 Тема 10 Навигационная структура сайта

Навигация

Элементы навигационных систем

О