Веб-дизайн: ключ к успеху [Школа дизайна Skilltor] [Stepik]

Веб-дизайн: ключ к успеху

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

Чему вы научитесь

• Создавать дизайны веб-сайтов
• Создавать дизайны интерфейсов для мобильных приложений
• Анализировать цели и задачи проекта
• Работать с Figma, Photoshop и др.
• Работать с цветом, шрифтами и изображениями
• Проектировать сложные интерфейсы
• Разрабатывать E-commerce-проекты
• Работать с фотографией в веб-среде
• Разрабатывать дизайн под iOS и Android
• Оформлять кейсы для Behance-профиля

В курс входят

• 62 урока
• 17 часов 42 минуты видео
• 11 тестов

О курсе



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

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



Этот курс для самых новичков в веб-дизайне, поэтому мы начнём с базовых принципов и основ работы в Figma, а после создадим 3 полноценных сайта: landing page для мебельной фабрики, многостраничный интернет-магазин одежды и landing page для Porsche 911.



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

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

Разберем основы UI/UX дизайна
На этом курсе мы больше будем работать с UI - user interface, но не забудем и тему UX дизайна, разберемся зачем веб-дизайнеру UX и узнаем какие виды тестирования пользователей бывают.

Для кого этот курс
Этот курс подойдёт начинающим дизайнерам и даже ни разу не открывавшим Figma.

Начальные требования
Компьютер или ноутбук и главное - желание учиться


Программа курса
Введение

1. Вступление и знакомство с профессиейДемо-доступ
2. Ссылка на закрытый чат в Telegram
3. Мы в соцсетяхДемо-доступ
4. Установка Figma и необходимых плагиновДемо-доступ

Основы Figma

1. Создаём первый проект и работаем с размерамиДемо-доступ
2. Знакомимся с горячими клавишами
3. Учимся работать со шрифтами
4. Frame или Group, что выбрать?
5. Работа с Autolayout
6. Pen tool для векторной графики
7. Grid система и направляющие
8. Компоненты и библиотеки
9. Text/color/effects/grid styles
10. Эффекты слоёв и фреймов
11. Экспорт слоёв и фреймов
12. Анимация в Figma

Основы дизайна

1. Создание Mood board проекта
2. Композиция в веб-дизайне
3. Модульные сетки и направляющие
4. Теория цвета и цветовой круг
5. Типографика в веб-дизайне

Создаём первый сайт

1. Учимся разбирать техническое задание
2. Разработка прототипа лендинга
3. Дизайн лендинга
4. Адаптация лендинга под мобильные устройства

UX-дизайн

1. Зачем UX дизайнеру?
2. Виды UX исследований
3. Целевая аудитория
4. Опросы

UX-воркшоп

1. Глубинное интервью, наблюдение и юзабилити-тесты
2. Составляем CJM

Работа с фотографий

1. Подбор фото для проекта
2. Цветокоррекция фото в Figma
3. Обработка фото в Photoshop
4. Коллажирование для 1-ого экрана

Создаём интернет-магазин

1. Принципы UX-дизайна в E-commerce
2. Разбор задачи
3. Проектирование главной страницы
4. Создаём UI KIT
5. Реализация главной страницы
6. Страница каталога
7. Страница товара
8. Корзина и список желаний
9. Оформление заказа
10. Личный кабинет
11. Инфо-страницы и финал

Создаём лендинг для Porsche

1. Разбираем техническое задание
2. Разработка прототипа лендинга
3. Дизайн основного контента лендинга

Адаптивный дизайн

1. Теория отзывчивости и brake points
2. Микровзаимодействия и преобразования
3. Адаптивность для лендинга
4. Адаптивность в E-commerce

Дизайн мобильных приложений

1. Основы дизайна мобильных приложений
2. Гайдланы IOS
3. Гайдланы Andorid
4. Дизайн приложения в Figma

Кейс на Behance

1. Знакомство с Behance
2. Удачные примеры проектов
3. Структура хорошего проекта
4. Публикация проекта

Финал

1. Подводим итоги курса

Скрытая ссылка