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

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

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

Длительнсть курса   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

Gif-анимация и баннеры. Что такое GIF-анимация. Способы создания и параметры анимации. Способы уменьшения объема файла.

Тема 4

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

Тема 5

Основные принципы создания логотипов. Анимированный логотип. Прорисовка логотипа. Эффекты с векторной графикой. Эффекты движения. Покадровая анимация. Создание Flash-меню. Вложение в кнопку символов. Дублирование символов. Выравнивание объектов. Понятие ActionScript.

Тема 6

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

Тема 7

Презентационный ролик. Основные принципы создания презентации. Презентация на основе Flash Slide Presentation.

Часть 3 

 Отладка сайта. Защита сайта. Выкладка. Домены. Хостинг

Тема 1

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

Тема 2

Проверка работоспособности сайта на локальном компьютере с использованием программы Apache Denwer. Критерии выбора доменного имени и хостинга. FTP-сервера. Регистрация на сервере бесплатного хостинга и размещение сайта в Internet. Проработка и добавление meta-тэгов.

Зачетное задание: разработка личного сайта и его размещение в Internet.

ПОДГОТОВКА своего  ПОРТФОЛИО