Веб-дизайн для подростков: 9 бесплатных видеоуроков

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

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

Для реализации веб-дизайна необходимо сделать прототип сайта. Воплотить его выйдет в программе Figma — графическом редакторе для конструирования интерфейсов и макетов веб-страниц. Пользоваться «Фигмой» можно соло или в команде. Сервис работает как на Windows, так и на MacOS.

Освоить азы Figma помогут бесплатные онлайн-уроки от школы программирования «Пиксель». Видео по веб-дизайну для детей записаны педагогами школы: информация подается доступным языком, ролики короткие и заинтересуют подростка.

Длина видеоурока: 4:47

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

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

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

Длина видеоурока: 6:17

Урок предназначен для знакомства с функциями среды, кнопками и элементами рабочего пространства. Школьнику предстоит изучить внешний вид редактора. После открытия сервиса пользователь установит или сменит аватарку, выберет тему интерфейса, поменяет пароль или тарифный план. Получится внедрить дополнительный аккаунт или выйти из своего.

Следом располагается строка, которая увеличивает темп поиска файлов, проектов или людей. Созданные файлы автоматически сохраняются в папку и хранятся на серверах.

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

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

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

Студент проанализирует панель свойств, которая позволяет настраивать характеристики элемента, а также получать доступ к настройкам и прототипам текущих файлов.

Длина видеоурока: 6:44

Шрифт играет немалую роль в дизайне и оказывает влияние на восприятие. Он создает настроение, передает смыслы и усиливает дизайнерскую концепцию.

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

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

Автор ролика рассказывает, где найти и установить шрифты для Figma.

Длина видеоурока: 8:30

Посмотрев занятие по web-дизайну для детей, участник узнает, как использовать формы и объекты. Геометрическая форма — элемент дизайна, который применяется для построения композиций. Формы включают в себя такие фигуры, как квадраты, круги, треугольники и прямоугольники.

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

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

Длина видеоурока: 5:23

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

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

Иконки — небольшие изображения, обозначающие приложение или файл, каталог или окно, компонент операционной системы или устройство. Для работы с иконками чаще применяются векторные изображения: они представляют собой математические объекты, описывающие геометрические формы, линии и цвета.

После добавления иконки получится сменить ее размер, цвет, форму. А еще встроить контур и изменить его толщину.

Длина видеоурока: 8:20

Прототип в дизайне — предварительный макет будущего продукта, помогающий понять идеи и концепции проекта. Данное видео как раз посвящено разработке прототипа.

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

Понадобится продумать дизайн страниц интерфейса. Зритель вслед за наставником воспользуется инструментом Frame, выберет подходящий размер экрана, встроит элементы: картинки, кнопки, поля ввода.

Получится смоделировать 3 страницы, внедрить алгоритм переключения, создать ссылки и связи объектов, добавить открытие бокового меню.

Длина видеоурока: 5:23

Цвет участвует в передаче настроения и эмоций. Правильно подобранные цветовые решения повышают качество проекта. В ролике рассматриваются градиенты — плавные переходы между 2 или более цветами.

Рассказывается, какое влияние цветовая температура оказывает на восприятие. Красный и оранжевый создают ощущение энергии, радости, активности. Голубой и зеленый вызывают спокойствие и умиротворение. Необходимо учитывать контрастность и сочетаемость цветов.

Внимание уделено градиенту: прием привносит динамику и движение, или же подчеркивает определенные элементы. Нужно выбрать слой или объект, нажать на иконку градиента. Исследуются виды градиентов: линейный, радиальный, угловой, кристальный.

Демонстрируются примеры использования градиентов: их множественное применение, добавление абстрактных градиентных пятен.

Длина видеоурока: 7:27

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

Необходимо добавить в проект новый фрейм. Можно отрегулировать ширину или длину. Затем нужно встроить сетку: по умолчанию это гридовая сетка, состоящая из клеток по 10 пикселей.

Рассматриваются виды сеток. Фишка грида — перемещение объекта стрелками ровно на пиксель, а при зажатии клавиши Shift — на 10 пикселей.

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

Строчная модульная сетка делит макет горизонтально. Используется редко: люди проще воспринимают контент, разделенный на колонки. К тому же вертикальная сетка легче адаптируется под разрешения экранов и устройств.

К фрейму прикрепляются одновременно несколько модульных сеток, также сетка применяется на разных фреймах.

Длина видеоурока: 5:49

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

Адаптивный дизайн рассматривается на примере сайта IT-школы «Пиксель». Ширина страницы экрана растягивается самостоятельно с помощью мышки. Как только она достигает определенного размера, веб-программист отправляет медиа-запрос, который перестраивает стили внутри сайта. Чем уже ширина, тем меньше шрифт, а картинки и надписи выстраиваются в ряд друг под другом. Кнопки же могут прятаться в бургер-меню.

Дизайнеру необходимо воплотить минимум 3 варианта сайта: для телефонов, планшетов и компьютеров.

Вслед за автором школьник разработает дизайн в Figma для устройств.

***

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

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