Цифровые профессии отличаются не только строгими алгоритмами, но и возможностью экспериментировать: с композицией, цветом, шрифтом. Именно этим веб-дизайн интересен для детей, которым свойственная креативность, склонность фантазировать и создавать собственные проекты. Разберем урок по одной из важных характеристик сайта – адаптивности на примере платформы Figma и расскажем, чем она может быть полезна ребенку в будущем и сейчас. Также расскажем, почему необходимо делать сайт «гибким».
Урок по адаптивному дизайну в Figma
Современный человек пользуется огромным количеством различных устройств: компьютерами и ноутбуками, планшетами и телефонами. Разработчики сайтов следят за тем, чтобы ресурсы были комфортными независимо от того, с какого устройства пользователь зашел на него. Адаптивный дизайн сайта решает именно эту задачу.
Перед тем, как перейти на платформу Figma давайте подробно рассмотрим, что такое адаптивный дизайн на примере сайта наше школы.
Если вы зайдете на наш сайт, он будет отличаться по внешнему виду в зависимости от устройства.
Я открыла его на компьютере
А чтобы посмотреть, как он будет выглядеть у других пользователей, необходимо нажать на правую кнопку мыши и выбрать пункт «исследовать элемент». Откроется панель разработчика, в которой мы можем посмотреть, как отображается сайт на разных устройствах или даже выбрать конкретную модель из списка устройств. При нажатии на него, страница будет выглядеть так, как если бы ее открыл владелец устройства.
Или можно выбрать пункт responsive – отзывчивый вариант открытия страниц. В этом варианте ширину страницы можно растягивать самому с помощью мышки. В процессе растягивания мы можем заметить определенные точки, достигая которые дизайн как бы перестраивается на другой шаблон.
Веб-дизайнеры создают отдельные шаблоны для каждого вида устройств: если экран достигает определенного размера, специалисты перестраивают стили внутри сайта. Пользователь в итоге видит на своем устройстве красивый сайт
Например чем уже страница, тем меньше и шрифт. Надписи и картинки располагаются друг за другом или кнопки прячутся в бургер-меню (3 полоски вверху справа).
Именно тогда, когда сайт меняется таким образом под адаптивное устройство, он и является адаптивным, т.е. адаптируется под разные устройства.
Давайте создадим новый файл, в котором и начнем разрабатывать адаптив, создавая различный фрейм.
Разработка любого дизайна начинается с разработки какого-то одного дизайна. Дизайнеры предпочитают сначала разрабатывать дизайны для компьютеров, другие предпочитают начинать с телефонов. Но так или иначе разрабатываются несколько вариантов для каждого устройства. Дизайнеру как минимум необходимо разрабатывать 3 варианта сайта, чтобы он хорошо выглядел на ПК, планшете и смартфоне.
Для планшетов раньше всегда разрабатывали макет шириной 220 пикселей. А в настоящее время экраны стали несколько шире и в большей степени дизайнеры перешли на ширину в 360 пикселей. Именно такой фрейм я и создам
Дальне необходимо создать версию для планшетов. Обычно этот брейкпоинт начинается 768 пикселей. Фреймы я буду называть в соответствии с их шириной.
Следующий брейкпоинт для компьютера начинается с 1024 пикселей.
Это минимальная база, которую необходимо сверстать, чтобы большинству пользователей было удобно пользоваться вашим сайтом.
Однако если бюджет проекта и время позволяют разрабатываются еще несколько вариантов дизайна. Чаще всего добавляют еще одну версию для телефонов, а именно 480 пикселей, и для горизонтального расположения смартфонов. А также отрисовывают еще один широкий фрейм для больших экранов экранов. Он начинается с 1600 пикселей, высота каждого фрейма зависит от наполнения сайта и не зависит от устройства.
Подводя итог: адаптационный дизайн – это методология разработки которая позволяет создавать сайты, которые будут корректно отображаться на экранах разных устройств. Дизайн такого сайта не привязан к размеру экрана, а гибко реагирует на изменение размера окна.
В школе программирования и робототехники Pixel можно записаться на курс веб-дизайна для детей на Figma. Figma — это онлайн-платформа для создания дизайнов, своеобразный цифровой холст, на котором можно воплощать визуальные идеи: от презентации до сайта. Дети учатся разрабатывать такие ресурсы (лендинги, корпоративные сайты, интернет-магазины), на которые пользователю полезно заходить.
Адаптивный дизайн и поисковые системы
Чтобы человек нашел нужный товар, услугу, информацию и захотел ее приобрести, впечатления о сайте должны быть соответствующими.
Поисковые системы отдают предпочтение адаптивным сайтам, на которых аудитории удобно совершать покупки и получать информацию. «Гибкий» дизайн необходим, чтобы сайт не только соответствующе отображался на персональном компьютере, планшете, смартфоне, но и был на высоких позициях в выдаче поисковых систем.
Поисковики любят адаптивные сайты по нескольким причинам:
- Удобство пользователя равно конкурентоспособность сайта. Если сайт имеет адаптивный дизайн, пользователь не теряет время на масштабирование страницы. Это обеспечивает ему комфорт, а сайту снижает показатель отказов.
- Рост мобильного трафика. Неадаптивный сайт теряет аудиторию, потому что большинству людей удобнее искать информацию в интернете с мобильных устройств.
- Удобство равно покупка. Комфорт при просмотре нужного товара или услуги повышает вероятность покупки и того, что покупатель вернется сам и порекомендует другим.
Адаптивный сайт – это своеобразный стандарт качества современного компании, который помогает быть современным и конкурентоспособным.
Адаптивность сайта и пользовательский опыт
Корпоративный сайт – это не только про конкуренцию. Сайт часто называют лицом компании, потому что именно по нему у человека создается впечатление о продукте и компании, которая его представляет. Грамотно созданный сайт показывает, насколько посетители ценны для компании.
Все впечатления человека при общении с сайтом: от первого клика, когда пользователь перешел на сайт, и до момента, когда получил нужный результат: информацию, покупку, называют пользовательским опытом, или User Experience, UX.
Качественный UX помогает оценить сайт с невидимых сторон: насколько логично построена структура и тексты разделов, насколько быстро можно найти нужную информацию.
Основные показатели UX, которые говорят о том, что пользователю на сайте комфортно:
- насколько просто можно решить свою задачу,
- насколько приятно находиться на сайте и просматривать его,
- нашел ли пользователь то, что искал, оправдал ли продукт его ожидания.
Если пользователь решил свой вопрос, получил грамотную консультацию от приветливых сотрудников и остался доволен товаром или услугой, то он скорее всего вернется на сайт сам и порекомендует его знакомым.
Какой должна быть мобильная версия сайта
Сегодня все больше людей смотрят нужную информацию с мобильных устройств. Экран стационарного устройства больше экрана самого большого смартфона. Поэтому существует десктопная версия веб-сайта, которая включает:
- Меню, которое разворачивается при нажатии, вместо обычного меню.
- Иконки вместо описаний словами. Они должны быть визуально понятны пользователю, у которого скорее всего мало времени, чтобы изучить сайт, но нужна определенная информация.
- 1-2 поля в форме заказа вместо многочисленных. Обычно это имя и контакты.
На десктопной версии предпочтителен крупный шрифт для комфортного чтения и крупные кнопки, чтобы попасть на нужную при нажатии. Проработанный UX с лаконичным дизайном и понятной навигацией дополнят высокая скорость загрузки и дружелюбный интерфейс.
Польза веб-дизайна на Figma для школьников
Изучая веб-дизайн на платформе уже в школе, ребенок сможет:
- Получить навыки будущей профессии. Если ребенок собирается стать web-дизайнером, графическим или продуктовым дизайнером, UX-разработчиков, то изучая Figma он научиться работать с цветом и изображениями, а также разовьет насмотренность в оформлении сайтов и визуальных задачах (понятная структура, шрифта, выбор картинок). Современные компании ценят сотрудников, которые придумывают идеи и умеют их красиво и стильно представить.
- Опередить сверстников т.к. помогает в школьной программе. В школе дети с начальной школы работают над проектами и очень полезно уметь визуализировать свои идеи: создавать презентации с уникальными слайдами, диаграммами, инфографикой.
Навыки веб-дизайна на Figma пригодятся как на уроках, так и внеклассной работе: например, при оформлении группы класса или школы в социальных сетях, при создании школьного журнала.
Если ребенок увлекается рисованием, то в Figma можно создавать иллюстрации на любые темы, постеры, открытки.
Собрали для вас список других уроков по Figma для детей, которые помогут начать осваивать этот инструмент:
1. Как установить Figma на компьютер
2. Интерфейс Figma
3. Создание прототипов
4. Работа с цветом в Figma
5. Работа с типографикой в Figma
Вопросы и ответы
В каком возрасте начинать учиться на курсах веб-дизайна для школьников?
Обычно интерес к дизайну сайтов у детей появляется к среднему школьному возрасту. Курсы чаще всего состоят из нескольких модулей, чтобы ребенок последовательно изучал возможности платформы и учился создавать прототипы сайтов. В программу также входит исследование пользовательского опыта. Это дает возможность двигаться в сторону UX-дизайна, чтобы разрабатывать сайты, на которых пользователю комфортно находиться и хочется вернуться.
Веб-разработке детям лучше учиться в группе или индивидуально?
Обычно школы предлагают оба формата. Выбирать лучше, прислушиваясь к ребенку. Кому-то комфортно работать самому, а кому-то для вдохновения и мотивации нужна именно командная работа.
Вам может быть интересно
Веб-дизайн для детей: ресурсы для обучения и курсы