Уроки Веб и приложения Даниил Волосатов 26 июля 2019

Создаём 10 элементов дизайна для сайта

Сложность урока: Легкий

В этом экспресс-курсе Даниил Волосатов покажет вам технику создания десяти наиболее популярных элементов для дизайна сайта.. 

Описание экспресс-курса

Что такое веб-дизайн?

Веб-дизайн — это разновидность дизайна, в задачи которой входит проектирование и создание пользовательских веб-интерфейсов для сайтов или веб-приложений. Веб-дизайнеры: создают логическую структуру веб-страниц; продумывают наиболее удобные решения подачи информации для пользователей и конечно оформляют всё визуально с помощью графических редакторов.
Эта отрасль дизайна сейчас в тренде и наиболее популярна в плане заработка на коммерческих заказах. Изучайте её!

Разделение и акценты

В этом экспресс-курсе автор уделяет много внимания выделению первичной информации и объясняет, почему и как важно разделять информацию как текстовую, так и графическую. Зная эти приёмы, вы научитесь расставлять акценты на важной информации и уводить в тень вторичные элементы интерфейса.

Выравнивание

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

Копирование элементов

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

Урок 1Сетка

В этом уроке вы научитесь создавать колоночную сетку с помощью которой можно правильно расставлять элементы веб-дизайна. Этот приём является основой и первоначальным действием перед созданием веб-дизайна страниц и элементов.

Основные моменты из урока:

  • Как включить видимость направляющих;
  • Какие инструменты использовать для создания колонок;
  • Как автоматизировать процесс выравнивания колонок;
  • Правильные настройки для создания веб-документа;
  • Построение сетки из направляющих.

Попробуйте освоить методы и техники создания веб-дизайна от Даниила Волосатова и вполне вероятно что эта тема вас целиком захватит, так как она очень актуальна в данное время, прибыльна в коммерческом смысле, да и в целом очень интересна.

Скачать архив с материалами

Урок 2Сортировка

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

Что изучим в уроке:

  • Используем колонки для выбора размера элемента;
  • Как спрятать направляющие;
  • Как оптимизировать работу со шрифтами;
  • Удобный способ точного выравнивания элементов;
  • Как уменьшать дополнительные элементы, сохраняя пропорции;
  • Организация слоёв для удобства работы;
  • Как автоматически выравнивать элементы относительно друг друга;
  • Как расставить акценты на блоках;
  • Массово добавляем цвет элементам.

Скачать архив с материалами к уроку

Урок 3Онлайн-чат

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

Из урока вы узнаете:

  • Почему важно правильно выбирать количество колонок для дизайна;
  • Как визуально разделять блоки;
  • Как ограничить написание текста по форме;
  • Трансформируем размеры элементов;
  • Как наложить фото на векторную фигуру;
  • Как правильно расставлять акценты.

Скачать архив с материалами

Урок 4Статистика

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

Основные моменты урока:

  • Как делить дизайн на блоки;
  • Как увеличить монтажную область;
  • Работаем с настройками шрифтов;
  • Используем обтравочную маску;
  • Как оптимизировать выравнивание;
  • Как сделать элементы слайдера;
  • Добавляем легко и быстро цвета.

Урок 5Дополнительное меню

В этом уроке мы создадим стильное дополнительное меню и впервые сделаем интерактивные элементы. Тоже поработаем со шрифтами, иконками и конечно с векторными инструментами и возможностями трансформации.

Что изучим:

  • Как убрать лишние направляющие;
  • Выравниваем элементы;
  • Зачем визуально разделять блоки информации;
  • Создание шаблона элемента дизайна;
  • Варианты удаления слоя.

Скачать архив с материалами

Урок 6Плейлист

В этом уроке мы с вами перерисуем всплывающее окно с плейлистом из соцсети Вконтакте. Разберём, как делятся элементы дизайна на блоки. Также вы узнаете, почему и как важно делать визуальные разделения, чтобы не усложнять дизайн. Ещё вы узнаете работу с шаблонами и смарт-объектами для удобства и скорости разработки при создании веб-дизайна.

В ходе урока изучим:

  • Как выделять важность текстовой информации;
  • Создание кнопки;
  • Как визуально разделить блоки;
  • Используем шаблон для создания однотипных элементов;
  • Удобство применения смарт-объектов.

Скачать архив с материалами

Урок 7График

В данном уроке мы создадим ещё один популярный элемент для сайтов со статистикой и аналитикой. Это будет визуальный график с точками повышения и падения значений. Опираясь на структуру, мы создадим блок с сортировкой, блок с суммами и днями, и конечно саму кривую графика.

Основные моменты урока:

  • Как сделать шаблон кнопки, используя стили слоя;
  • Быстрое выравнивание и копирование элементов;
  • Как создать векторную кривую графика;
  • Добавляем визуальные эффекты элементам дизайна.

Урок 8Поиск

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

Важные моменты из урока:

  • Почему важно и как визуально разделять информацию;
  • Простой приём разделения блоков;
  • Добавляем визуальные эффекты посредством стилей слоя.

Скачать архив с материалами

Урок 9Фотогалерея

В этом уроке мы создадим простую фотогалерею  Сделаем основной блок с фоном, дополнительный блок с выбором конкретной фотографии, а также небольшой элемент с аватаром автора галереи и информацией с призывом к действию.

Из урока вы узнаете:

  • Почему важно соблюдать размещение по сетке;
  • Как удобно помещать фотографии, используя обтравочную маску;
  • Простой способ сделать текст читаемым;
  • Как сделать интерактивную кнопку.

Скачать архив с материалами

Урок 10Форма заказа для интернет-магазина

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

Форма визуально будет делиться на две части: в левой будет слайдер с фотографиями для отображения разных ракурсов товара, а с правой стороны расположится вся нужная техническая информация о товаре и кнопка заказа.

Этот урок научит вас таким моментам:

  • Работа с колоночной сеткой и направляющими для выбора размера формы;
  • Использование векторных фигур для создания блоков и элементов;
  • Как эффективно работать с текстовыми слоями;
  • Важность выравнивания информации для её лёгкого восприятия;
  • Как графически расставлять акценты на выделенных деталях;
  • Работа с быстрыми направляющими;
  • Способы как быстрого так и точного отделения объектов от фона;
  • Применение и редактирование градиентов с помощью стилей слоя.

Скачать архив с материалами к уроку

Урок 11Форма входа в аккаунт

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

Скачать архив с материалами

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

Источник: creativo.one

1 004 0
Печать Жалоба

Комментарии 0

Спасибо за урок!

Наталья Хопта, Спасибо что заметили ошибку. Повторял за автором урока.

Доступные способы оплаты Что делают? - НаходяТся (пишется без мягкого знака)

Maxwel20109, Спасибо, что без обид!

а что со звуком и с качеством картинке в этом уроке? почему ничего не слышно и не видно?

LiyKa, Проверил. Слышно и видно. Попробуйте другой браузер. Или отключите блокировщик рекламы.

Спасибо за урок!

Спасибо за урок!

Спасибо за урок!

Спасибо за урок!

Понравилось исполнение!

Новые работы пользователей

По заданным фильтрам работы не найдены

Попробуйте изменить критерий поиска или сбросить фильтры


Смотреть все работы

Предыдущая Следующая
Добавлена {{work.date}}
Не удалось загрузить работу. Возможно она была удалена.
GIF {{work.bite}} Мб Загрузить
Редактировать Удалить
18+
Работа имеет содержимое для 18+ лет
{{work.views}} {{work.comments}}
Жалоба

Комментарии {{work.childs.length || 0}}

Видео к работе
Популярные работы автора:
Работа получила награды:
Курсы автора:
Онлайн-курс

Жалоба

Опишите суть жалобы, при необходимости добавьте ссылки на скриншоты

Спасибо! Ваше обращение ушло на рассмотрение.

Название работы

Описание работы (необязательно)

Комментарий

Ваша миниатюра:

Название:
{{name}}
Описание:

Исходник:

{{source.name}} {{source.name}}

Тэги:
#{{tag.label}}

Есть ли у вас исходник к работе?

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

Пример исходника

Выберете тэги работы:

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

Не более десяти тэгов на одну работу

Комментарии к работе будут отключены, на их месте будет выведена реклама.

После добавления работы:


Запланировать публикацию

Отменить планирование
Запланировать

Используя данный сайт, вы даёте согласие на использование файлов cookie, данных об IP-адрес, помогающих нам сделать его удобнее для вас. Подробнее