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