Создаём 10 элементов дизайна для сайта
Создаём 10 элементов дизайна для сайта
В этом экспресс-курсе Даниил Волосатов покажет вам технику создания десяти наиболее популярных элементов для дизайна сайта..Сложность урока: Легкий
В этом экспресс-курсе Даниил Волосатов покажет вам технику создания десяти наиболее популярных элементов для дизайна сайта..
Описание экспресс-курса
Что такое веб-дизайн?
Веб-дизайн — это разновидность дизайна, в задачи которой входит проектирование и создание пользовательских веб-интерфейсов для сайтов или веб-приложений. Веб-дизайнеры: создают логическую структуру веб-страниц; продумывают наиболее удобные решения подачи информации для пользователей и конечно оформляют всё визуально с помощью графических редакторов.
Эта отрасль дизайна сейчас в тренде и наиболее популярна в плане заработка на коммерческих заказах. Изучайте её!
Разделение и акценты
В этом экспресс-курсе автор уделяет много внимания выделению первичной информации и объясняет, почему и как важно разделять информацию как текстовую, так и графическую. Зная эти приёмы, вы научитесь расставлять акценты на важной информации и уводить в тень вторичные элементы интерфейса.
Выравнивание
Этот способ расстановки элементов на веб-страницах или в приложениях в разы уменьшит ваши труды по расположению текстов и графики в документе. Вы научитесь пользоваться направляющими и их подсказками, выстраивать все веб-элементы ровно и гармонично, что позволит грамотно проектировать весь интерфейс. Освойте этот простой, но такой необходимый приём!
Копирование элементов
Вы узнаете приёмы массового копирования элементов, создание и использование однотипных шаблонов, что значительно ускорит процесс построения веб-дизайна и сократит затрачиваемое время на него.
Урок 1Сетка
В этом уроке вы научитесь создавать колоночную сетку с помощью которой можно правильно расставлять элементы веб-дизайна. Этот приём является основой и первоначальным действием перед созданием веб-дизайна страниц и элементов.
Основные моменты из урока:
- Как включить видимость направляющих;
- Какие инструменты использовать для создания колонок;
- Как автоматизировать процесс выравнивания колонок;
- Правильные настройки для создания веб-документа;
- Построение сетки из направляющих.
Попробуйте освоить методы и техники создания веб-дизайна от Даниила Волосатова и вполне вероятно что эта тема вас целиком захватит, так как она очень актуальна в данное время, прибыльна в коммерческом смысле, да и в целом очень интересна.
Урок 2Сортировка
В этом уроке мы сделаем сортировку, наполненную разными блоками. Будем работать со шрифтами, векторными инструментами и дополнительными иконками. Также вы узнаете отличный приём создания веб-дизайна и его структуры, который поможет вам не отвлекаться на вторичные моменты.
Что изучим в уроке:
- Используем колонки для выбора размера элемента;
- Как спрятать направляющие;
- Как оптимизировать работу со шрифтами;
- Удобный способ точного выравнивания элементов;
- Как уменьшать дополнительные элементы, сохраняя пропорции;
- Организация слоёв для удобства работы;
- Как автоматически выравнивать элементы относительно друг друга;
- Как расставить акценты на блоках;
- Массово добавляем цвет элементам.
Скачать архив с материалами к уроку
Урок 3Онлайн-чат
В этом уроке мы с вами создадим небольшой онлайн-чат. Также как и в прошлом уроке будем использовать шрифты, иконки и векторные инструменты и ещё научимся упрощать свою работу, создавая шаблоны веб-элементов и использовать их многократно.
Из урока вы узнаете:
- Почему важно правильно выбирать количество колонок для дизайна;
- Как визуально разделять блоки;
- Как ограничить написание текста по форме;
- Трансформируем размеры элементов;
- Как наложить фото на векторную фигуру;
- Как правильно расставлять акценты.
Урок 4Статистика
В данном уроке мы сделаем интересный веб-блок с отображением статистики. В процессе научимся работать как с простыми элементами, которые создаются с помощью векторных инструментов, так и со сложными, для создания которых понадобятся дополнительные приёмы.
Основные моменты урока:
- Как делить дизайн на блоки;
- Как увеличить монтажную область;
- Работаем с настройками шрифтов;
- Используем обтравочную маску;
- Как оптимизировать выравнивание;
- Как сделать элементы слайдера;
- Добавляем легко и быстро цвета.
Урок 5Дополнительное меню
В этом уроке мы создадим стильное дополнительное меню и впервые сделаем интерактивные элементы. Тоже поработаем со шрифтами, иконками и конечно с векторными инструментами и возможностями трансформации.
Что изучим:
- Как убрать лишние направляющие;
- Выравниваем элементы;
- Зачем визуально разделять блоки информации;
- Создание шаблона элемента дизайна;
- Варианты удаления слоя.
Урок 6Плейлист
В этом уроке мы с вами перерисуем всплывающее окно с плейлистом из соцсети Вконтакте. Разберём, как делятся элементы дизайна на блоки. Также вы узнаете, почему и как важно делать визуальные разделения, чтобы не усложнять дизайн. Ещё вы узнаете работу с шаблонами и смарт-объектами для удобства и скорости разработки при создании веб-дизайна.
В ходе урока изучим:
- Как выделять важность текстовой информации;
- Создание кнопки;
- Как визуально разделить блоки;
- Используем шаблон для создания однотипных элементов;
- Удобство применения смарт-объектов.
Урок 7График
В данном уроке мы создадим ещё один популярный элемент для сайтов со статистикой и аналитикой. Это будет визуальный график с точками повышения и падения значений. Опираясь на структуру, мы создадим блок с сортировкой, блок с суммами и днями, и конечно саму кривую графика.
Основные моменты урока:
- Как сделать шаблон кнопки, используя стили слоя;
- Быстрое выравнивание и копирование элементов;
- Как создать векторную кривую графика;
- Добавляем визуальные эффекты элементам дизайна.
Урок 8Поиск
В этом уроке мы сделаем всплывающую форму поиска, в которой будут блоки для введения поискового слова, связью с техподдержкой и выводом самых популярных поисковых запросов.
Всё также будем использовать шрифты, векторные инструменты и дополнительные элементы дизайна в виде графики.
Важные моменты из урока:
- Почему важно и как визуально разделять информацию;
- Простой приём разделения блоков;
- Добавляем визуальные эффекты посредством стилей слоя.
Урок 9Фотогалерея
В этом уроке мы создадим простую фотогалерею Сделаем основной блок с фоном, дополнительный блок с выбором конкретной фотографии, а также небольшой элемент с аватаром автора галереи и информацией с призывом к действию.
Из урока вы узнаете:
- Почему важно соблюдать размещение по сетке;
- Как удобно помещать фотографии, используя обтравочную маску;
- Простой способ сделать текст читаемым;
- Как сделать интерактивную кнопку.
Урок 10Форма заказа для интернет-магазина
В этом уроке Даниил Волосатов, эксперт в области коммерческого веб дизайна покажет вам, как создать всплывающую форму с заказом товара для интернет-магазина.
Форма визуально будет делиться на две части: в левой будет слайдер с фотографиями для отображения разных ракурсов товара, а с правой стороны расположится вся нужная техническая информация о товаре и кнопка заказа.
Этот урок научит вас таким моментам:
- Работа с колоночной сеткой и направляющими для выбора размера формы;
- Использование векторных фигур для создания блоков и элементов;
- Как эффективно работать с текстовыми слоями;
- Важность выравнивания информации для её лёгкого восприятия;
- Как графически расставлять акценты на выделенных деталях;
- Работа с быстрыми направляющими;
- Способы как быстрого так и точного отделения объектов от фона;
- Применение и редактирование градиентов с помощью стилей слоя.
Скачать архив с материалами к уроку
Урок 11Форма входа в аккаунт
В заключительном уроке этого экспресс-курса мы сделаем красивую форму входа на сайт. Это будет отдельная страница и сама форма будет по всей ширине макета.
Поздравляем вас с завершением изучения курса по созданию самых популярных веб-элементов для дизайна сайтов и приложений. Не забывайте и в дальнейшем много практиковаться, чтобы качество ваших результатов стремительно росло. Развивайтесь!
До встречи!
Источник: creativo.one
Комментарии 0
Спасибо за урок!
Наталья Хопта, Спасибо что заметили ошибку. Повторял за автором урока.
Доступные способы оплаты Что делают? - НаходяТся (пишется без мягкого знака)
Maxwel20109, Спасибо, что без обид!
а что со звуком и с качеством картинке в этом уроке? почему ничего не слышно и не видно?
LiyKa, Проверил. Слышно и видно. Попробуйте другой браузер. Или отключите блокировщик рекламы.
Спасибо за урок!
Спасибо за урок!
Спасибо за урок!
Классная работа!
Спасибо за урок!
Понравилось исполнение!
Спасибо за урок!
Очень хорошо!