Бесплатный онлайн-курс веб дизайна для школьников: основы Figma

Приблизительное время чтения: 15 минут

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

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

Основы веб дизайна для школьников

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

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

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

Устанавливаем Figma для работы

Первое, что нужно сделать — перейти на официальный сайт figma.com и скачать приложение в разделе «Проект» — «Загрузки». Выбирайте нужный тип устройства и операционную систему. Если вы на сайте впервые и у вас нет аккаунта, то создать его можно через кнопку «Get started for free». Для входа потребуются данные Google Аккаунт.

В работе на этом курсе веб дизайна для подростков мы будем пользоваться функцией Figma по созданию макетов. Выбираем бесплатную версию и после загрузки уже можем начинать работать в браузере. Если на вашем компьютере осталось мало памяти или он чужой, то можно работать только с браузера. Если памяти достаточно, установите приложение на компьютер. Для этого нажимаем на логотип Figma в верхнем левом углу и выбираем пункт Get Desktop App: приложение скачается автоматически. Далее запускаем файл Setup Figma и заходим в приложение. Через кнопку Login with Browser заходим в свой аккаунт, который подключили в браузере. После этого можно начинать работу в программе.

Интерфейс figma для детей

На главном экране слева находится вкладка для работы с аккаунтом. При нажатии на имя, которое вводилось при регистрации, раскроются поля для редактирования. Здесь можно сменить аватарку, выбрать темную или светлую тему, сменить имя, пароль и т.д.

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

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

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

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

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

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

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

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

Веб дизайн обучение для школьников: тексты и шрифты в Фигма

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

Категории шрифтов

Основные типы шрифтов можно разделить на следующие категории:

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

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

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

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

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

Где можно скачать шрифты

Шрифты можно найти на различных веб-ресурсах. Они скачиваются архивом и затем устанавливаются на компьютер в папку со всеми шрифтами.

Работать с текстом Figma очень просто и интуитивно понятно через инструмент T на панели инструментов.  Выберите его и нажмите на холсте там, где нужно разместить текст. Это создаст текстовый блок. Можно изменять шрифт, размер, выравнивание и другие атрибуты текста в панели свойств вверху экрана или в секции «Типографика» в правой боковой панели. Если нужно форматировать отдельную часть текста, выделите ее и используйте панель свойств для изменения.

К тексту можно применять эффекты тени, обводки. Они находятся на панели свойств. Figma поддерживает работу с переменными текстами: вы можете создать и использовать их  для облегчения стандартизации и обновления текстовых элементов на проекте. Если вам нужно вставить готовый текст в блок, используйте функцию «Вставить текст».

Курсы веб дизайна с нуля для школьников: работаем с формами

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

Создаем файл

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

Размеры прямоугольника

Загадим нашему прямоугольнику такие размеры, чтобы он был ровно в 4 раза меньше нашего фрейма и расположим так, чтобы он визуально занимал 4 разные области с помощью отступов по оси x и по оси y, чтобы визуально разграничить фрейм. Изменим заливку каждой фигуры, изменив цвет в параметре fill.

Радиус углов

Помимо размера мы также можем изменять радиус углов прямоугольника. Закругление настраивается как для всех углов одинаковое, так и для каждого угла по отдельности. Настройте радиус трех углов на 160 градусов, а нижний левый на 0, чтобы у него не было скруглений. Залейте фигуру красным цветом и установите границу синего цвета шириной в 50. Границу можно устанавливать как для всех сторон одинаково, так и для каждой стороны отдельно.

Создаем линию

Чтобы создать линию, необходимо на панели инструментов выбрать инструмент line и вывести линию необходимой длины, настроить ее ширину и цвет. Скопируйте линию несколько раз и расположите на одинаковом расстоянии друг от друга по всей области. Добавьте новую фигуру —стрелку, через инструмент на панели сверху. У стрелки можно выбрать форму ее наконечника. Данное свойство также присутствует и у линий.

Часто в дизайнах можно встретить не идеально ровные объекты, а деформированные, с искаженными углами, направлениями и линиями. Для создания такого эффекта есть инструмент Edit Object.

Окружность

Для работы с окружностями перейдем на новую область и воспользуемся инструментом Ellipse. Если мы будем редактировать его размер с помощью мышки, то у нас получится эллипс. Если же нам необходима работа с эллипсом как с шаром, тогда необходимо зажать клавишу shift.

Вручную или с помощью панели дизайн мы можем редактировать части окружности. Создадим фигуру незамкнутого кольца и с помощью панели edit object отредактируем ее, чтобы получилась интересная фигура. Помимо искажений направлений, как мы это делали со стрелочкой, мы можем редактировать контуры каждой фигуры, изменяя её углы. Если нам не хватает точек для редактирования, с помощью инструмента Pen мы можем настраивать необходимые точки в местах предполагаемых изгибов.

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

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

Запишитесь на бесплатный урок по веб-дизайну для школьников от 12 лет

Курс веб дизайна для подростков: работа с изображениями и иконками

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

Существует несколько вставить картинку в редактор: инструментом «Вставить» в верхнем меню, сочетанием клавиш shift+ctrl+k в открытой рабочей области и перетаскиванием файла через проводник. Также изображения можно добавлять сразу из интернета, не скачивая их на компьютер.  

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

Формат содержит специальную разметку, где указываются параметры заливки, обводка, размер, точки на плоскости и так далее. Любые SVG изображения можно открыть не только в режиме его просмотра, но и в любом текстовом редакторе. Добавить векторное изображение можно аналогичными способами выше, которые применяются для изображений.

У иконки можно изменить размер, цвет или форму. Цвет меняется инструментом Fill — заливка. Нужный цвет вы подберете на панели инструментов слева. Попробуйте добавить контур, изменить его толщину, поменять форму иконки через Edit Object в меню инструментов сверху.

Создание прототипа в фигме для детей

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

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

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

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

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

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

Изучаем модульные сетки: web дизайн для детей

Модульная сетка — это система вертикальных и горизонтальных линий, которые используются для выравнивания и организации контента на макете.

В Figma можно использовать два основных типа модульных сеток:

·        Колонки —самая распространенная и гибкая сетка в Figma. Она состоит из вертикальных столбцов, которые могут быть настроены по ширине, количеству и отступу между ними. Можно использовать сетку колонок для разработки макетов любых устройств. Колонки помогают выравнивать и располагать элементы на странице.

·        GRID. Этот тип сетки более универсален и позволяет создавать более сложные макеты с точным расположением элементов. Можно настроить отступы между линиями и создать сетку с разными размерами клеток. Такая сетка полезнее для более сложных дизайнов, где нужно учитывать точные размеры и позиционирование элементов будущего интерфейса.

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

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

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

Попробуйте создать новый фрейм параметрами для десктопа с установленной стандартной шириной и произвольной длиной. Затем добавьте к нему сетку в панели «Свойства», нажав на плюсик «Layout Grids». По умолчанию добавится гридовая сетка.

Изучение адаптивной верстки на курсе веб дизайна для детей

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

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

Для мобильного приложения ширина макета будет 360 пикселей. Версия для планшетов начинается с 768 пикселей, для компьютеров с 1024 пикселей. Это минимальная база, которую необходимо сверстать, чтобы большинству пользователей было бы удобно пользоваться вашим сайтом. Количество дизайнов можно увеличивать: в коммерческих заказах это зависит от бюджета, заложенного на данный пункт.

Бесплатный онлайн-курс веб дизайна для школьников: экспортируем проект

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

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

При экспорте пользователь может настроить некоторые параметры, например, размер файла. По умолчанию стоит 1х, то есть экспорт в соотношении 1 к 1. У этого свойства есть несколько самых популярных вариантов, например, в 2 раза больше, в 4 раза или наоборот меньше. Также есть возможность сохранить шириной 512. Если же стандартных базовых вариантов недостаточно и нужен какой-то конкретный размер, то необходимо его прописать в окне с обозначением W или H (ширина и высота). По умолчанию имя нового файла будет соответствовать названию объекта слоев. Если вам необходимо экспортировать несколько форматов, можно нажать на плюсик и настроить каждый экспорт отдельно и затем выгрузить сразу несколько вариантов.

На выбор в редакторе есть четыре варианта формата: png, jpeg, svg, pdf. То есть то в каком формате вы хотите получить итоговое изображение. Также при переносе есть настройки игнорирования перекрывающих слоев. Если убрать галочку, то экспортируется абсолютно все, что входит в рамку выделенного объекта. Даже если это не выделено. Если галочка стоит, то экспортируется только выделенный объект.

Когда вы разрабатываете дизайн, вам может пригодиться возможность совместной работы. Для этого есть голубая кнопка Share — поделиться. Нажав на нее, появляется окошко, в котором можно скопировать ссылку на проект.

Веб-дизайн для подростков онлайн курса «Пиксель»

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

Ссылка на курс: https://pixel.study/webdesign 

Система обучения строится на модулях. Это значит, что первые уроки веб дизайна для детей включают в себя основы работы в Figma. В течение 12 уроков дети подробно знакомятся с интерфейсом редактора и учатся делать простые композиции. 

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

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

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

Ссылка на курс: https://pixel.study/webdesign 

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

Опубликовано: 18 октября 2024 235