Поторопитесь! Заканчивается через 
Язык преподавания в курсе – русский. Вскоре будет доступна украинская версия этого курса.
Видеозаписи лекций без обратной связи и участия преподавателя. Вы получите доступ к материалам сразу после оплаты.
Веб-дизайн сегодня – это не просто внешний вид сайта, но и то, насколько сайтом удобно пользоваться, насколько он понятен целевой аудитории, как быстро посетитель ресурса достигает цели, с которой пришел сюда.
Соответственно, и веб-дизайнер — это не просто тот, кто создает внешний вид сайта. Веб-дизайнер – это тот, кто проектирует и создает понятный и удобный для использования дизайн на основе анализа данных о целевой аудитории.
– Что делает веб-дизайнер
Веб-дизайнер создает макеты любых сайтов: визиток, лендингов, интернет-магазинов, корпоративных ресурсов и так далее. Кроме этого, он может заниматься созданием иконок и других изображений для веб-использования, логотипов и фирменного стиля компании, может создавать рекламные баннеры, шаблоны писем для email-рассылок и так далее.
Рабочий процесс дизайнера выглядит следующим образом.
Изначально дизайнер получает ТЗ (техническое задание на разработку сайта) от заказчика. В ТЗ указано, какой сайт нужно создать: для чего и как планируется его использовать, какую задачу должен решать ресурс, кем будут его основные посетители, с какой целью они будут заходит, какой контент должен быть размещен на сайте. Если какой-либо информации для создания дизайна не хватает, то дизайнер задает вопросы заказчику или самостоятельно проводит необходимое исследование. На данном этапе может быть полезно изучить сайты конкурентов, а также другие ресурсы в данной либо в смежных тематиках.
Далее, после сбора необходимой информации и данных, дизайнер либо от руки на бумаге, либо в специальных программах делает прототипы будущего сайта. Прототипы сайта — схематическое, без дизайна, расположение информации и блоков на сайте. Как правило, делают несколько прототипов и выбирают один, наиболее подходящий.
– Инструменты веб-дизайна
В данной статье не будем подробно останавливаться на всех инструментах под различные платформы, которые существуют для веб-дизайнеров, потому как их очень много. Даже сайты с иконками, различной графикой для сайтов и Google Fonts — тоже, своего рода, инструменты для веб-дизайнера.
Долгое время лидером и чуть ли не единственной массовой программой для создания макетов сайтов был Photoshop. Потом появился Sketch. Кто-то перешел на использование Sketch, кто-то остался на Photoshop. Но сегодня есть еще один очень хороший инструмент для создания дизайна, который хорошо зарекомендовал себя среди других инструментов и заслужил любовь многих дизайнеров — это Figma.
Figma — это новая программа для веб-дизайнеров. С помощью нее можно создавать не только прототипы, но и сами интерфейсы (сайты, приложения, панель управления). Весомым преимуществом данной программы является ее простота. Именно за счет этого Фигма завоевывает сердца специалистов в сфере веб-дизайна.
– Преимущества Figma
Доступность — Figma работает прямо в браузере. Не нужно ничего скачивать, устанавливать. Просто с любой платформы заходите на сайт figma.com, авторизуйтесь и начинайте работать в программе. Есть, конечно, и десктопная версия, но она совсем немного отличается функционалом от веб-версии программы. Пожалуй, самое критичное — это то, что в десктопной версии можно работать без подключения к интернету.
– Удобные инструменты — Photoshop изначально создавался как редактор фотографий, поэтому инструменты именно для рисования в нем — не самые удобные для дизайнеров. В Figma совершенно иной подход: удобный Pen Tool, удобное создание эффектов и т. д.
– Работа со шрифтами — в Photoshop или другой графической программе нельзя использовать для дизайна шрифт, который не установлен в системе. В Figma шрифты подтягиваются из Google Fonts либо автоматически подгружаются в проект.
– Удобный бэкап — все версии и изменения хранятся в Figma. Можно в любой момент откатиться на нужную версию. Больше нет необходимости хранить много версий одного проекта на компьютере.
– Совместная работа — в Figma очень продумано сотрудничество над одним проектом. У каждого есть возможность оставлять комментарии, есть настройка прав для отдельных пользователей. Курсоры всех пользователей проекта окрашиваются разными цветами и подписываются. Работа отслеживается в режиме реального времени.
– Хранение файлов — все файлы Figma хранит в облаке. Поэтому теперь не нужно пересохранять файл в формат .png перед тем, как скинуть на согласование заказчику. Достаточно просто дать ссылку на файл в Figma.
Это основные преимущества Figma. Конечно, список не исчерпывающий. Каждый, кто попробует Figma, найдет что-то полезное и удобное именно для себя.
Так, например, Figma — удобный инструмент и для верстальщиков, которые впоследствии верстают созданный макет. Верстальщик в Figma может сразу удобно измерить отступы или расстояния между элементами, посмотреть все стили для элемента и коды цветов.
Раздел 1. Веб-дизайн
Блок 1. Figma от А до Я
Хронометраж: 1 час 1 минута 18 секунд
Урок 1.
Скачивание программы 01:05
Урок 2.
Обзор интерфейса 04:23
Урок 3.
Frame 02:18
Урок 4.
Move и Scale 02:43
Урок 5.
Инструмент формы 06:30
Урок 6.
Перо и карандаш 01:36
Урок 7.
Инструмент текст 05:00
Урок 8.
Комментарии 01:04
Урок 9.
Экспорт 01:24
Урок 10.
Смарт-выравнивание 03:23
Урок 11.
Маска слоя 02:12
Урок 12.
Share 01:57
Урок 13.
Модульная сетка 01:27
Урок 14.
Режим смешивания 03:33
Урок 15.
Стили для текста 03:31
Урок 16.
Стили для цвета 04:13
Урок 17.
Компоненты 07:47
Урок 18.
Адаптивные элементы 03:58
Урок 19.
Прототипирование 03:14
Раздел 1. Веб-дизайн
Блок 2. Дизайн. Десктоп версия
Хронометраж: 3 часа 25 минут 5 секунд
Урок 1.
Frame и Grid 10:52
Урок 2.
Перенос ТЗ 11:31
Урок 3.
Основные элементы 19:27
Урок 4.
Первый экран 10:30
Урок 5.
Второй экран 13:30
Урок 6.
Третий экран 20:23
Урок 7.
Четвертый экран 11:33
Урок 8.
Пятый экран 13:12
Урок 9.
Шестой экран 13:41
Урок 10.
Добавление цвета 15:27
Урок 11.
Добавление графики 16:16
Урок 12.
Всплывающие меню 15:41
Урок 13.
Подготовка макета для верстки 15:38
Урок 14.
Интерактивные элементы 17:24
Раздел 1. Веб-дизайн
Дизайн. Мобильная версия
Хронометраж: 2 часа 5 минут 30 секунд
Урок 1.
Теория о мобильной версии и бутсрап-сетка 17:04
Урок 2.
Первый экран 17:29
Урок 3.
Второй экран 12:33
Урок 4.
Третий экран 17:47
Урок 5.
Четвертый экран 11:48
Урок 6.
Пятый экран 12:04
Урок 7.
Шестой экран 19:39
Урок 8.
Меню 17:06
Раздел 2. Верстка сайта
Хронометраж: 6 часов
Урок 1.
Подготовка к верстке 12:00
Урок 2.
Разметка фиксированного меню и первого экрана 09:48
Урок 3.
Стилизация фиксированного блока 13:30
Урок 4.
Адаптивность фиксированного блока 17:49
Урок 5.
Стилизация первого экрана 19:40
Урок 6.
Адаптивность первого экрана лендинга 20:52
Урок 7.
Подключение библиотеки Fullpage 13:19
Урок 8.
HTML-разметка для экрана с проектами 12:37
Урок 9.
Стилизация второго экрана 29:01
Урок 10.
Адаптивность второго экрана 23:02
Урок 11.
Разметка экрана Details 03:28
Урок 12.
Стилизация блока Details 09:38
Урок 13.
Адаптивность блока Details 22:29
Урок 14.
HTML-разметка блока List-of-works 05:10
Урок 15.
Стилизация блока List-of-works 09:53
Урок 16.
Адаптивность блока List-of-works 08:08
Урок 17.
HTML-структура экрана с калькулятором 15:40
Урок 18.
CSS-стили для калькулятора 16:23
Урок 19.
Адаптивность калькулятора 23:17
Урок 20.
HTML-разметка для экрана контактов 04:21
Урок 21.
Стилизация контактов 12:46
Урок 22.
Адаптивность контактов 05:14
Урок 23.
Реализация точечной навигации 22:39
Урок 24.
HTML-структура главного меню 05:58
Урок 25.
Полная стилизация главного меню 22:58
Отзывы
Отзывов пока нет.