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

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

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

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

Продолжительность: 4:46

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

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

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

Начать работать в Figma достаточно просто: всё, что нужно — это скачать подходящую версию с сайта для Windows или MacOS. После установки программы система предложит зарегистрироваться и завести аккаунт. Можно начинать работу.

Курсы веб-дизайна для подростков: изучаем интерфейс Figma

Продолжительность: 6:16

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

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

Все файлы автоматически сохраняются в папку Essence и размещаются на серверах программы. Drafts – это черновики, то есть те файлы, над которыми мы работаем в данный момент. Если удалить файл из черников, они попадают в папку Deleted. Это аналог корзины на компьютере.

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

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

Любые фреймы, группы или объекты, которые вы добавляете на холст, будут отображаться на панели слоев. Внутри панели компонентов у вас будет легкий доступ ко всем вашим компонентам. Компоненты — это повторно используемые элементы дизайна: например, кнопки. Холст — здесь представлены ваши проекты. Это основная рабочая область. В правой части экрана находится панель свойств, которая позволяет вам просматривать и настраивать свойства любого элемента, который вы в данный момент выбрали.

Фигма для детей: добавляем шрифт

Продолжительность: 6:43

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

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

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

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

Веб-дизайн для детей и работа с формами и объектами в Figma

Продолжительность: 8:29

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

Создаем новый файл в графическом редакторе Figma. В верхней панели инструментов можно выбрать нужный тип фигуры. В видео показан пример на прямоугольнике, но можете отдать предпочтение тому, что больше нравится. Прямоугольник – самая распространенная фигура в графическом дизайне. Размеры можно задать как вручную, двигая за край фигуры, так и с помощью панели дизайна, задавая определенную ширину, высоту и отступы. Чтобы ширина и высота фигуры изменялись пропорционально, необходимо зажать клавишу Shift. Это свойство действует на абсолютно все фигуры Figma. Без «шифта» размеры фигуры изменяются, следуя за указателем мышки. У фигуры можно делать скругления как пропорционально по всем углам, так и по отдельно взятым. Для работы с окружностями используется инструмент ellipse. Если мы будем редактировать его размер с помощью мышки, то у нас получится ellipse. Если же нам необходимо работать с ellipse как с шаром, тогда необходимо зажать клавишу shift. Вручную или с помощью панели «дизайн» мы можем редактировать части окружности. 

Figma для детей: как работать с изображениями и иконками

Продолжительность: 5:23

Изображение – это визуальное представление чего-либо на информационном носителе. Для работы с ними первым делом необходимо вставить изображение в проект Figma. Существует несколько способов сделать это. Для первого способа нужно выбрать инструмент «Вставить» в верхнем меню и выбрать «Image» – «Изображение». Затем нужно выбрать файл изображения на компьютере и нажать «Open» – «Открыть». Таким образом изображение добавится в проект. Также можно открыть картинку, используя сочетание клавиш shift-ctrl-k в открытой рабочей области. В появившемся окне найдите нужное изображение и нажмите кнопку «Открыть». Для третьего способа добавления изображения в проводнике откройте папку с картинкой, зажмите ее левой кнопкой мыши и перетащите в рабочую область.  Иногда задумка дизайна требует вставить изображение в какую-нибудь форму. В видео показано, как вписать фотографию в звезду.

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

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

Web-дизайн для детей и подростков: создание прототипа в Figma

Продолжительность: 8:19

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

Чтобы начать работу над прототипом, первым шагом нужно создать новый файл через кнопку «Design File», расположенную в верхней части интерфейса. Дальнейшая настройка осуществляется через вкладку «Prototype» на боковой панели. Когда все страницы дизайна интерфейса будут готовы, можно запустить прототип через кнопку «Play» в верхнем правом углу. Создать дизайн каждой отдельной страницы интерфейса сайта можно с помощью инструмента «Frame», доступного в верхнем меню.

Работа с цветом в Figma

Продолжительность: 5:22

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

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

Работа с типографикой в Figma

Продолжительность: 7:27

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

Модульная сетка – это свойство фрейма, поэтому для ее использования первым делом необходимо добавить в наш проект новый фрейм. Всего в Figma 3 вида сеток:

• Модульная сетка Grid – это инструмент для создания и настройки сеточной структуры в дизайне. Дизайнеры любят этот инструмент за удобную фишку: при помощи стрелок объект перемещается ровно на один пиксель.  А если зажимать клавишу Shift при перемещении стрелками, то объект будет передвигаться сразу на 10 пикселей. При необходимости размер клеток сетки можно регулировать с помощью свойства Size. Также у любой модульной сетки можно изменить ее цвет и прозрачность: например, если она сливается с цветами на макете. По умолчанию цвет сетки бледно-красный, а прозрачность стоит на 10%.

• Колонки, разделяющие макет вертикально. Этот тип сетки представляет собой один из наиболее популярных способов организации в дизайне. Он позволяет разделить холст на равные или пропорциональные столбцы, что упрощает выравнивание элементов и создание сбалансированной композиции. По умолчанию макет разделяется на 5 колонок, но для дизайна часто используют 12-ти колоночную модульную сетку, так как она позволяет делить макет на равные части.

Адаптивный дизайн в Figma для разных устройств

Продолжительность: 5:48

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

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

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

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

Изучить основы Figma для детей при помощи бесплатных уроков — вполне реальная задача. Главное – это желание обучаться интересному направлению, стремление освоить новое. Это отнюдь не только профессия для «айтишников»: веб-дизайн для подростков намного шире и доступен даже начинающим.

Если вы — профессиональный веб-дизайнер и фанат Фигмы, какой бы вы совет дали подросткам, которые только начинают осваивать эту программу? Делитесь в комментариях!