Описание
Программа курса
Веб-дизайн для начинающих
Лекция 1 «Профессия веб-дизайнер. Знакомство с программой AdobePhotoshop»
1.1 Профессия веб-дизайнер
Что такое веб-дизайн
Приемущества работы веб-дизайнера
Заработок веб-дизайнера
Чему вы научитесь после прохождения данного курса
Инструменты веб-дизайнера
1.2 Adobe Photoshop
Интерфейс Photosop – базовый обзор
Панель инструментов
Панель меню
Работа со слоями (выделение слоя, объединение слоев, группы слоев, смарт объект, обтравочная маска, слой-маска)
Горячие клавиши
1.3 Начало работы
Какие бывают сайты, модульные сетки, структура сайта, область контента.
Создание документа и модульной сетки (линейки, grid, направляющие)
Быстрые направляющие
Работа с текстами
Работа с фигурами (примеры фигур, создание фигур)
Трансформирование объектов
Работа с заливкой и инструментом градиент
Лекция 2 «Стили слоя. Работа с изображениями. Цвет и атмосфера сайта»
2.1 Стили слоев
Паттерны
Стили слоя
2.2 Работа с изображениями
Как искать изображения и фото для сайта. Размеры изображений и разрешение
Инструменты для обтравки изображений
Фильтры
Режимы наложения
2.3 Цвет и атмосфера сайта
Выбор цветовой гаммы и составление палитры
Сочетаемость цветов
Создание градиента
Лекция 3 «Шрифты для Web. Шрифтовые пары. Типографика. Графика для сайта»
3.1 Шрифты для Web. Типографика
Выбор шрифтов для Web
Как скачать и установить шрифт
Сочетаемость шрифтов и шрифтовые пары
Какие шрифты не применять вообще
Какие шрифты не применять в меню и в заголовках
Размеры шрифтов для сайта
Оформление текста
Интерлиньяж
Отступы и расстояния
Определить шрифт
Разбор моих удачных и неудачных примеров
3.2 Графика для сайта
Adobe Illusrator — базовый и необходимый обзор
Векторная графика и где ее взять
Как использовать векторную графику в фотошопе
Лекция 4 «UI, GUI, создание UI. Стили сайтов и GUI»
4.1 UI интерфейс пользователя / GUI графический интерфейс пользователя
Что такое UI Kit
Как создать UI в стиле Flat, Material design
Элементы интерфейса сайта (кнопки, ховеры, меню, формы, навигация, пагинация, чебоксы, радиобаттоны, поиск)
4.2 Обзор стилей сайтов и их отличия
Flat
Material design
Объем
Игровой
Стилизованный
Какие делать и какие уже не в тренде и почему
Разбор моих удачных и не удачных примеров
Лекция 5 «Иконки и пиктограммы. Инфографика»
5.1 Иконки и пиктограммы
Где скачать иконки
Формат иконок
Виды и стили иконок
Размеры иконок и пиктограмм
Удачные и неудачные примеры
5.2 Инфографика
Что такое инфографика и где ее взять
Как инфографика используется на сайтах и для чего
Хорошая и плохая инфографика на стоках
Чувство меры в использовании инфографики
Удачные и неудачные примеры
Лекция 6 «Проектирование сайта. Поиск вдохновения. Теснота и ее влияние на макеты»
6.1 Проектирование сайта
Что значит проектирование сайта, этапы, задачи
Прототип сайта
Варианты создания прототипа и сервисы для их создания
Создание прототипа в фотошоп
6.2 Поиск вдохновения
Сайты для дизайнеров – базовый обзор
На что обращать внимание в работах
6.3 Теснота в макетах
Теснота в макетах – что это?
Как теснота влияет на восприятие сайта?
Как избавиться от тесноты
Избавление от тесноты на этапе проектирования
Лекция 7 «Единство стиля. Создание сайта. Виды сайтов»
7.1 Единство стиля
Выбор стиля сайта, работа с ТЗ заказчика
Создаем мудборд. Что это? Как сделать? Как пользоваться?
Создание композиции сайте, если она еще не создана на этапе проектирования
Дизайн-концепция
Создание палитры
UI Kit
Иконки и инфографика и подбор необходимых фото
Чек-лист для создания сайта
7.2 Виды сайтов и их задачи
Корпоративные сайты
Сайт-визитка
Блог-журнал
', ''],
pagination: false
});
$('select[name=\'recurring_id\'], input[name="quantity"]').change(function(){
$.ajax({
url: 'index.php?route=product/product/getRecurringDescription',
type: 'post',
data: $('input[name=\'product_id\'], input[name=\'quantity\'], select[name=\'recurring_id\']'),
dataType: 'json',
beforeSend: function() {
$('#recurring-description').html('');
},
success: function(json) {
$('.alert, .text-danger').remove();
if (json['success']) {
$('#recurring-description').html(json['success']);
}
}
});
});
$('.date').datetimepicker({
pickTime: false
});
$('.datetime').datetimepicker({
pickDate: true,
pickTime: true
});
$('.time').datetimepicker({
pickDate: false
});
$('button[id^=\'button-upload\']').on('click', function() {
var node = this;
$('#form-upload').remove();
$('body').prepend('');
$('#form-upload input[name=\'file\']').trigger('click');
if (typeof timer != 'undefined') {
clearInterval(timer);
}
timer = setInterval(function() {
if ($('#form-upload input[name=\'file\']').val() != '') {
clearInterval(timer);
$.ajax({
url: 'index.php?route=tool/upload',
type: 'post',
dataType: 'json',
data: new FormData($('#form-upload')[0]),
cache: false,
contentType: false,
processData: false,
beforeSend: function() {
$(node).button('loading');
},
complete: function() {
$(node).button('reset');
},
success: function(json) {
$('.text-danger').remove();
if (json['error']) {
$(node).parent().find('input').after('
