Товар больше не доступны в связи с прекращение сотрудничества с автором. Выберите подходящий курс из похожих.
Автор: Даниил Волосатов
Веб-дизайн - это не просто востребованная профессия… В первую очередь, это стиль жизни. Профессия веб-дизайнера позволяет зарабатывать из любой точки планеты, путешествовать, расти и постоянно развиваться, ставить цели и добиваться новых высот. Если Вас привлекает возможность вести небольшой, но доходный интернет-бизнес из любой точки планеты и жить насыщенной, интересной жизнью - фриланс в сфере веб-дизайна вполне может Вам подойти. Поскольку именно профессия веб-дизайнера способна Ваши мечты о красивой свободной жизни воплотить в жизнь. Но есть одно "но"! Это не кнопка "Бабло", тут нужно работать! Но я могу пообещать Вам то, что уже очень скоро Вы сможете создавать первоклассные макеты сайтов, которые будут востребованными на рынке. Причем сможете делать это быстро и не затрачивая много времени и усилий. А чем больше качественных дизайнов сайтов Вы делаете, тем выше Ваш ежемесячный уровень дохода. Это аксиома.
Часть 1. Введение в веб-дизайн. Инструменты, техники, вдохновение
В первой части курса Вы узнаете об инструментах Фотошопа, техниках веб-дизайна и о том, как найти вдохновение. Перед тем как приступить к практической части, нужно знать базовые принципы веб-дизайна. В данном разделе собрана вся суть того, что должен знать начинающий дизайнер, и ничего лишнего.
Часть 1. Урок 1. Введение
Это ознакомительный урок, в котором я бы хотел дать напутствие по изучению данного курса.
Часть 1. Урок 2. Дизайн сайта по шагам. Поэтапный разбор.
Создание дизайна сайта можно разбить на 6 частей. В этом уроке мы разберем каждую из них. После изучения данного урока, придерживаясь этих правил, Вам гораздо легче будет даваться создание дизайна сайта.
Часть 1. Урок 3. Цвета в веб-дизайне
В уроке Вы узнаете, какие цвета использовать для фона и разных элементов сайта, чтобы вызвать те или иные ощущения, и как правильно сочетать цвета в веб-дизайне. Вы поймете, что такое резонанс. Узнаете значения цветов: красный, оранжевый, желтый, зеленый, синий, фиолетовый, черный и белый. Также узнаете о самом простом способе, как подобрать цвета для сайта. Кроме этого, Вы узнаете о методах «Двойная комплементарная система» и «Аналоги».
Часть 1. Урок 4. Типографика в веб-дизайне
Типографика в веб-дизайне — это очень важная часть создания дизайна. Это умение подобрать шрифтовую пару для сайта.
Часть 1. Урок 5. Как повысить качество работы
В данном уроке мы разберем одну методологию повышения качества Ваших работ, что и сделаем на одном из примеров. Вы узнаете, что такое копилка веб-дизайнера, где искать вдохновение, и как его использовать в своих работах.
Часть 1. Урок 6. Photoshop для веб-дизайнера. Настройка необходимых инструментов
Перед тем, как перейти к практической части курса, Вам необходимо настроить Photoshop так, чтобы он не отличался от того, что показан в курсе.
Часть 2. Сервисы для веб-дизайнера
Во второй части курса мы разберем с Вами несколько очень полезных сервисов для веб-дизайнера. Рассмотрим, для чего они нужны, и как их использовать в работе.
Часть 2. Урок 1. Мировое сообщество графических дизайнеров #1
В данном уроке мы рассмотрим одно мировое сообщество дизайнеров, где собраны работы со всего мира, которыми Вы можете вдохновляться и использовать в своем творчестве. В этом сообществе Вы также сможете делиться своими работами, используя его как портфолио. Тысячи людей будут видеть Ваши творения.
Часть 2. Урок 2. Мировое сообщество графических дизайнеров #2
В этом уроке мы затронем еще одно мировое сообщество дизайнеров. Его плюс в том, что оно русскоязычное. Здесь больше различных видов работ и больше дизайнеров. Данный сайт Вы также можете использовать для создания своего портфолио. Сайт совершенно бесплатный и не требует никаких вложений, кроме Вашего времени.
Часть 2. Урок 3. Сервис иконок
Скевоморфизм устарел, и на смену ему пришел flat дизайн. Поэтому стало проще находить иконки для сайта и адаптировать их под свои нужды. В данном уроке мы разберем с Вами один очень удобный сервис по поиску flat иконок.
Часть 2. Урок 4. Бесплатный сайт с качественными фотографиями
Когда нужно подобрать фото для незначительного блока на сайте использовать платные фотостоки дорого и невыгодно. В данном уроке мы рассмотрим один замечательный сервис с качественными и бесплатными фотографиями, которые Вы можете использовать в своей работе. Сайт не требует никаких вложений или регистраций. Пользоваться им очень легко и просто.
Часть 2. Урок 5. Фотостоки
Не всегда мы можем найти качественные фотографии на определенную тему. Использовать «Гугл картинки» — плохая затея, которая загубит всю работу. Поэтому существуют фотостоки. На них Вы можете найти фотографию практически на любую интересующую Вас тему.
Часть 3. Практика. Основные элементы сайта
В третьей части курса мы с Вами создадим 10 наиболее часто используемых элементов сайта. Это кнопки, вертикальное меню, горизонтальное меню, навигация по сайту, вход, регистрация, блок с акцией, всплывающие окно с товаром, всплывающие форма подписки и онлайн-чат. Все элементы между собой никак не связаны и сделаны в разных стилях, поэтому Вам будет интересен каждый урок.
Часть 3. Урок 1. Кнопки
В этом уроке мы разберем виды кнопок.
Часть 3. Урок 2. Вертикальное меню
В данном уроке мы нарисуем вертикальное меню двух видов, скрытое и развернутое.
Часть 3. Урок 3. Горизонтальное меню
В этом уроке мы нарисуем горизонтальное меню.
Часть 3. Урок 4. Навигация по сайту
В данном уроке мы с Вами создадим многофункциональный дизайн навигации с удобным использованием.
Часть 3. Урок 5. Вход
В данном уроке показано, как создавать стильную всплывающую форму входа.
Часть 3. Урок 6. Регистрация
В этом уроке мы нарисуем очень красивую и большую всплывающую форму регистрации.
Часть 3. Урок 7. Блок акция
Мы сделаем интересный дизайн в форме билетика.
Часть 3. Урок 8. Всплывающее окно с товаром
В данном уроке мы создадим всплывающую форму с предпросмотром товара.
Часть 3. Урок 9. Вплывающее окно формы подписки
В данном уроке мы снова затронем темы всплывающих окон, а точнее, окно с формой подписки.
Часть 3. Урок 10. Онлайн чат
Мы с Вами создадим красивый и удобный дизайн онлайн чата.
Часть 4. Практика. Рисуем лендинг пейдж
В данном разделе курса мы приступим к созданию реального полноценного дизайна сайта. Сейчас очень популярны и востребованы лендинги. На одном из примеров мы с Вами сделаем дизайн, состоящий из 3 экранов. Мы создадим не совсем обычный лендинг, а поэкранный.
Часть 4. Урок 1. Введение. Базовая разметка
В данном уроке разберем дизайн сайта и сделаем базовую разметку. Вы научитесь делать базовую разметку для поэкранного дизайна.
Часть 4. Урок 2. Меню. Футер
В этом уроке мы с Вами сделаем дизайн горизонтального меню и добавим футер. Вы создадите еще одну красивую кнопку. Научитесь находить иконки и адаптировать их под общий дизайн.
Часть 4. Урок 3. Первый экран. Часть 1
Пройдя этот урок, Вы научитесь работать с расстановкой текста в лендингах, размером заголовков и основного текста.
Часть 4. Урок 4. Первый экран. Часть 2
Здесь Вы научитесь адаптировать картинки из интернета под Ваш дизайн.
Часть 4. Урок 5. Второй экран
Часть 4. Урок 6. Третий экран
Аналогично второму экрану, третий по дизайну не особо будет отличаться. Зато мы закрепим все полученные знания и навыки работы с различными инструментами.
Часть 5. Практика. Рисуем блог
В пятой части курса мы с Вами сделаем еще один вид сайта - блог. Мы создадим очень много разных элементов, научимся адаптировать под дизайн готовые psd. Мы будем создавать дизайн, опираясь на ТЗ (техническое задание).
Часть 5. Урок 1. Базовая разметка
В данном уроке поговорим о дизайне блогов, о том, как они создаются, и произведем базовую разметку. Добавим линейки и базовые блоки. Я покажу Вам собственное видение разметки блога.
Часть 5. Урок 2. Меню
Мы начинаем делать основной дизайн, и первым на очереди у нас будет горизонтальное меню. Вы создадите форму поиска для блога.
Часть 5. Урок 3. Шапка
В данном уроке мы с Вами создадим шапку для блога.
Часть 5. Урок 4. Контент. Часть 1
Здесь мы изначально сделаем блоки со статьями.
Часть 5. Урок 5. Контент. Часть 2
В этом уроке мы добавим несколько статей, сделаем блок с видео и встречей.
Часть 5. Урок 6. Навигация
Мы не будем с нуля рисовать навигацию, а просто возьмем ее из предыдущего раздела и переделаем под стиль блога. Вы научитесь быстро переделывать один дизайн под другой, используя очень малое количество инструментов.
Часть 5. Урок 7. Правый блок. Часть 1
Здесь мы нарисуем категории, популярные новости и форму рассылки.
Часть 5. Урок 8. Правый блок. Часть 2
Вы научитесь использовать одни блоки и быстро переделывать их под другие. Сможете делать блоки с фоновыми изображениями, так чтобы текст хорошо читался. Для примера мы подберем качественные фотографии, которые хорошо впишутся в дизайн.
Часть 5. Урок 9. Футер
Финальный элемент этой части — футер.
Часть 5. Урок 10. Интерактивные элементы
Завершающий урок в данной части курса посвящен интерактивным элементам. Также мы подберем цвета для данного дизайна и добавим их ко всем необходимым элементам в макете.
Часть 6. Практика. Рисуем сайт с онлайн просмотром кино
В шестом разделе курса мы совместим привычный нам вид сайта с лендингом. В итоге мы получим очень красивый и удобный в использовании сайт.
Часть 6. Урок 1. Введение. Верхнее мен
Для начала мы с Вами разберем сам дизайна сайта и каждый элемент, который нам предстоит сделать.
Часть 6. Урок 2. Первый экран. Вариант 1
В данном уроке сделаем дизайн первого экрана, на нем будет много информации, кнопка и фоновое изображение.
Часть 6. Урок 3. Первый экран. Вариант 2
Вы поработаете с многими стилями слоя.
Часть 6. Урок 4. Блок сериалы
В этом уроке мы нарисуем блок с сериалами. В нем будет 4 блока.
Часть 6. Урок 5. Кино. Часть 1
В первой части мы добавим заголовок, вкладки меню и первую карточку с фильмом.
Часть 6. Урок 6. Кино. Часть 2
Во второй части мы поменяем обложки, изменим информацию о кино и добавим фоновое изображение.
Часть 6. Урок 7. Подборки
Предпоследний блок у нас будет подборкой актеров.
Часть 6. Урок 8. Футер
Нам осталось сделать блок с футером.
Часть 6. Урок 9. Интерактивные элементы
В заключительном уроке данной части курса мы сделаем интерактивные элементы.