Курсы Дизайна

Общая информация Схема обучения Работы слушателей Отзывы слушателей Расписание и стоимость

Условия обучения

Компьютерные классы Преподаватели Документы об обучении Дистанционное обучение

Другие курсы

Курсы 3ds Max Курсы AutoCAD Курсы Maya Другие направления

Обратная связь

+7(812)703-02-02 Контакты Задать вопрос Форум
Печать

Веб-дизайн. Создание макетов сайтов

Продолжительность обучения: 40 ак.ч. очно
График обучения: 5 дней по 8 ак.ч. или 10 дней по 4 ак.ч.

Начало занятий:

    25.06.2018, 1000

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

Аннотация

Современная веб-разработка получает все больше технических возможностей для реализации идей, однако, без качественного и продуманного дизайна, невозможно создание хорошего и конкурентоспособного продукта. И на плечи веб-дизайнера ложится достаточно сложная, но в то же время и интересная задача: выдать в разработку одновременно красивый и грамотно сделанный макет. Этому и посвящен наш курс.

В нем мы уделяем особое внимание созданию полноценного UX, и low-fidelity-прототипированию, ведь именно от правильно продуманного «скелета» зависит поведение пользователя на сайте и, соответственно, конверсия. Мы рассмотрим как стандартные пользовательские истории, так и уникальные истории из рабочей практики преподавателя.

Также мы посвятим много времени работе в разных программных продуктам, создавая как статичные прототипы, так и анимированные и даже полностью готовые к размещению в сети проекты.

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

Документы об окончании обучения

  • Сертификат учебного центра
    Сертификат учебного центра
  • Удостоверение повышении квалификации (выдается лицам имеющим высшее или среднее профессиональное образование)
    Удостоверение повышении квалификации (выдается лицам имеющим высшее или среднее профессиональное образование)

Преподаватели

Расписание

Начало курса Окончание курса Даты занятий Время занятий Номер аудитории Преподаватель
25.06.2018 29.06.2018 По будним дням 1000-1720
5 дней по 8 ак.ч. в день
Аудитория №227 Медведев Андрей Владимирович Записаться на курс

Стоимость

Дата Физ. лица, руб. Юр. лица, руб.
Без скидки Cкидка 10%* Cкидка 15%** Без скидки Cкидка 10% Cкидка 15%
Цена c 16.10.2017 16000 14400 19500 17550

*Скидка 10%:
- для ранее обучавшихся;
- при одновременном оформлении и оплате 2-х краткосрочных курсов на одного слушателя.
**Скидка 15% при одновременном оформлении и оплате 3-х краткосрочных курсов на одного слушателя.
Студентам ВУЗов Санкт-Петербурга любой формы обучения скидка до 25%.
Примечание.
Скидки не предоставляется на курсы с дистанционной формой обучения.
Скидки не предоставляется на комплексные и модульные программы обучения.
Внимательно ознакомьтесь со всеми условиями акций в разделе «Акции и скидки».

Требования к начальному уровню знаний

Курс ориентирован на слушателей имеющих уверенные навыки работы в MS Windows, обладающих базовыми знаниями об архитектуре компьютера и периферийных устройствах.

Курсы, обеспечивающие достаточный начальный уровень знаний:

Предварительное тестирование

Тест №ВКТ-121 Операционная система MS Windows

  • Работа с файловой системой.
  • Работа с внешними устройствами.
  • Операции с файлами.
  • «Горячие клавиши» операций с файлами.
  • Понятие файла, папки (имя, расширение, тип, размер).
  • Основы работы в программе MS Word.
  • Ввод и редактирование текста.
  • Работа с основными элементами MS Windows.
  • Открытие и сохранение документов.
  • Буфер Обмена.
  • Копирование и перемещение данных через Буфер Обмена.
  • Ярлыки: определение, виды, способы создания, операции.
  • Панель задач: назначение.

Программа курса

Занятие 1. Начало работы с Adobe Сreative Cloud

  • Преимущества использования Adobe Creative Cloud
    Облачное хранение данных, обновления, расширенные возможности.
  • Подготовка растровой графики в Adobe Photoshop CC
    Настройка рабочего пространства. Горячие клавиши.
    Изменение размеров растровых изображений.
    Алгоритмы интерполяции.
    Масштабирование с учетом содержимого.
    Инструменты обрезки.
  • Маскирование
    Способы сокрытия пикселей слоя.
    Виды масок и варианты их использования.
  • Корректирующие слои
    Применение команд цветовой и тоновой коррекции.
    Способы ограничения действия корректирующих слоёв.
    Аналоги применения цветовой коррекции в CSS3.

Практические работы:
«Подготовка изображений для сайта».
«Цветовые дизайн-решения».

Занятие 2. Работа со служебными наборами в Adobe Photoshop CC

  • Логика работы со служебными файлами
    Способы профессионального использования служебных наборов и предустановок.
    Сохранение, импорт/экспорт настроек.
  • Работа со слой-формами и образцами цвета
    Расширенные возможности форм.
    Использование градиентов, образцов цвета для веб-макетов.
    Импорт данных о цвете. Палитра Kuler.
  • Работа со шрифтами
    Установка настроек шрифта для веб. Веб-типографика.
    Решение проблем использования нестандартных шрифтов.
    Создание пользовательских стилей текста.
    Иконочные шрифты.
    Конвертирование шрифтов
  • Применение слоевых эффектов. Стили
    Использование режимов смешивания.
    Настройка Blending Options.
    Пользовательские стили. 
    Ограничения применения слоевых эффектов в CSS3.
  • Создание паттернов
    Алгоритмы создания бесшовных паттернов.

Практические работы:
«Анатомия слоевого эффекта».
«Цветовые дизайн-решения».
«Создание паттернов».
«Элементы веб-интерфейса».

Занятие 3. Введение в HTML

  • Использование текстового редактора Adobe Dreamweaver CC  для создания гипертекстовых документов.
  • Встраивание HTML тегов. Основные структурные теги, метаинформация, заголовок документа.
  • Форматирование и разметка документа.
  • Создание гипертекстовых ссылок.
  • Встраивание изображений.
  • Создание списков: упорядоченные, неупорядоченные, списки определений.

Практические работы:
«Верстка примитивного сайта на HTML5».

Занятие 4. Введение в CSS

  • Оформление структурных элементов.
  • Свойства текста, выравнивание.
  • Свойства ссылок.

Практические работы:
«Применение стилей CSS к сайту».

Занятие 5. Структура сайта, изучение аналогов и создание wire-фреймов в Adobe Photoshop CC и Adobe Illustrator CC 

  • Построение схемы сайта
  • Элементы страницы
    Стандартные элементы страниц
    Виджеты
  • Изучение аналогов
    Зарисовка прототипов аналогов
    Определение преимуществ и недостатков интерфейсов аналогов
  • Шаблоны проектирования
    Правила юзабилити.
    Проектирование макетов под различные размеры устройств.
    Алгоритмы построения гибких модульных сеток.
    Шаблоны 960 Grid, Boilerplate и Twitter Bootstrap.
  • Создание прототипа сайта
    Стандартные блоки сайта
    Элементы с состояниями

Практические работы:
«Исследование и зарисовка аналогов».
«Гибкие сетки».

Занятие 6. Создание прототипа макета сайта в Adobe Photoshop CC

  •  «Умные объекты»
    Профессиональное использование Smart Objects.
    Применение «умных» трансформаций.
    Профессиональное использование фильтров.
  • Организация слоев
    Режимы блокировки. Фильтрация слоев.
    Создание групп слоев. 
    Организация вариантов дизайн-решений. Палитра Layer Comps.

Практические работы:
«Гибкие сетки».
«Внедрение умных объектов».
«Создание макета веб-сайта».

Занятие 7. Создание анимированного прототипа мобильного интерфейса в Adobe After effects.

  • Подготовка графики в Photoshop
    Возможности и ограничения копирования CSS со слоев.
    Экспорт информации о шрифте.
    Дополнительные средства генерации стилей для Adobe Photoshop CC.
  • Подготовка графики для анимации
    Нарезка макета. Slices.
    Оптимизация графики. Форматы оптимизации.
    Критерии выбора формата оптимизации.
    Генерация содержимого по названию слоя.
    Подготовка изображений для дисплеев Retina.
  • Создание анимированного прототипа меню
    Средствами Adobe after effects.
  • Тестирование адаптивности
    Настройка адаптивного прототипа.

Занятие 8. Создание интерактивных прототипов (Adobe XD, Axure, Sketch)

  • Adobe XD
    Интерфейс графического редактора.  
    Возможности программы. Создание анимированного прототипа страницы.
  • Axure
    Интерфейс графического редактора.
    Возможности программы. Создание анимированного прототипа страницы.
  • Дополнительные возможности CSS Трансформация элементов страницы. Анимация средствами CSS. CSS фильтры и blending.

Занятие 9. Использование SVG

  • Cinemagraph
    Требования к контенту. Подготовка видео. Создание "Живой фотографии" средствами Adobe Photoshop CC.
  • Использование векторной графики
    Формат SVG. Подготовка и оптимизация файла.
    Способы подключения. Анимация SVG. Создание масок прозрачности и отсечения.

Занятие 10. Экзамен