Internet-технологии

Расписание и стоимость

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

Проведение занятий Преподаватели Учебные материалы Документы об окончании Отзывы слушателей

Другие курсы направления

Основы Интернет-технологий Системы управления контентом (CMS) Веб-маркетинг Веб-дизайн Веб-программирование

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

+7 (812) 703-02-02 Форум
Печать

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

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

Курс пока не поставлен в расписание. Оставить заявку

Аннотация

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

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

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

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

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

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

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

Расписание

Курс пока не поставлен в расписание. Оставить заявку на курс

Стоимость

Дата Физ. лица, руб. Юр. лица, руб.
Без скидки 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. Экзамен