Figma для подростков: как научиться создавать сайты и приложения

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

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

Веб-дизайнер умеет:

• Создавать макеты главной страницы, других страниц и интерактивных элементов управления сайтами в Figma, Photoshop и других профессиональных программах;
• Управлять юзабилити сайта, то есть изучать мнение пользователей (через системы веб-аналитики) и перестраивать кнопки, слайдеры и меню так, чтобы оставлять у посетителей положительное впечатление. Юзабилити – удобство навигации по веб-ресурсу. Если проходили в 7 классе графические редакторы на информатике, то термин будет знаком;
• Делать адаптивные сайты: ресурс должен одинаково хорошо выглядеть на всех возможных устройствах и в сотнях существующих браузеров: от Google Chrome до коварного Safari, на котором все выводится по-своему;
• Вести переговоры с заказчиком: сайт – командная работа, где требуется уметь найти общий язык с самыми разными участниками общего дела. Если вы думаете записать своих детей в школу графического дизайна, то сегодня это не кабинетная работа, изолированная от жизни, а высококвалифицированный труд в самом ее эпицентре;
• Достигать компромисса между творческой идеей и техническими ограничениями. Если дизайн слишком требователен, и сайт загружается дольше 4 секунд, то он будет холодно встречен и посетителями, и поисковиками.

Кто же входит в число известных веб-дизайнеров? Кем вдохновляться, если начал изучать web дизайн после 9 класса? В топе мировых знаменитостей профессии называют Итана Маркотта, Джеффри Зельдмана и Карен Макгрейн. Маркотт проектировал интерфейсы для New York Magazine и Стэнфордского университета, Зельдман создал и возглавил международную организацию в области стандартов дизайна в веб-проектах. Макгрейн разработала оформление в изданиях New York Times и Condé Nast. Все они пишут книги и ведут активную общественную деятельность.

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

Отдельно подчеркнем, что не стоит путать веб-дизайн с графическим дизайном. Графический дизайн предполагает работу с изображениями и графикой. На таких курсах изучаются Adobe Illustrator, Sketch, Adobe XD и Photoshop (в нем, кстати, можно делать и макеты сайтов). На школьных уроках в 5 классе графические редакторы изучают на примере простых утилит Microsoft.

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

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

Как же проходит изучение веб-дизайна на курсах для школьников?

1. В браузерной или десктопной версии создается дизайн блога или онлайн-сервиса, который задумал ребенок. На курсах подробно объясняют, как это сделать. Можно даже создать прототип, то есть «перелинковать» созданные странички кнопками и ссылками, наполнить их текстами. Получается почти законченный сайт. Прототипирование помогает убедиться реализации проекта.
2. Создается бесплатный сайт на Tilda. Это гораздо интереснее, чем обычные уроки информатики в 5 классе, графическим редакторам уделяют мало внимания! Для этого достаточно зарегистрироваться. После того, как несколько простых шагов выполнено, школьнику, которому не терпится выложить свой проект и посмотреть, как он будет работать, доступен кабинет администратора, в котором можно управлять контентом. Внешнего вида у сайта еще нет.
3. А теперь магия! Получаем в Figma специальный ключ-token проекта. Это делается несколькими кликами. Затем, переходим в админку Tilda. Создаем Zero-блок в админ-панели и находим функцию «импорт». Далее, добавляем в открывшемся окне ключ из Figma. После запуска импорта мы получим готовый сайт. Вот почему именно Figma фигурирует почти во всех учебных программах графический дизайна для детей!

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

Сегодня Figma потеснила Photoshop именно в веб-дизайне. Она намного проще и доступнее.

Во-первых, инструменты в Figma организованы так, чтобы интерфейс для пользователя усложняется по мере роста его профессионализма и способности этими инструментами воспользоваться. Чистый лист впервые открытой программы понятен и не удручает сложностью, так что если вам кажется, что Photoshop для ребенка слишком сложен, то Figma – это как раз то, что нужно. На курсы веб-дизайна по Figma принимают детей с 12 лет, если кто-то предлагает дополнительные занятия по графическим редакторам в 1 классе, то это будет, скорее, подготовка к настоящему изучению дизайна.

Во-вторых, Figma бесплатна. Есть платный контент в виде плагинов, однако без него можно обойтись в работе. У Photoshop бесплатным является лишь короткий пробный период. Ребенку должно быть просто получать доступ к инструменту веб-дизайна, которым он владеет и этим курсы Photoshop для детей не могут похвастаться. Усвоенные навыки сохранятся, только если ими постоянно пользоваться после завершения курсов. Наконец, в третьих, Figma доступна на большем количестве платформ: как ПК-программа, как онлайн-приложение, с которым можно работать. Есть даже версия на Linux, хотя это и не очень актуально для детской аудитории.

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

Значит ли все это, что Figma лучше в веб-дизайне, чем Photoshop? Можно сказать, что для ребенка при освоении графического дизайна в 13 лет она точно лучше в качестве первой осваиваемой технологии. Во «взрослом» мире дизайна знать надо оба инструмента. Photoshop нет альтернативы в работе с фотографиями. В этом вопросе особенно важна обработка векторных изображений, а такого количества фильтров, инструментов и палитр для работы именно с этим типом мультимедиа, в Figma нет и близко.

Из других минусов на фоне Photoshop выделяют:

• Недостаток топографических настроек (шрифты);
• Загрузка файлов снаружи происходит медленнее, чем у приложений-конкурентов.

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

Какие еще уникальные функции есть в Figma?


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

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

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

Стоит отметить такую интересную функцию, как Developer Handoff. Даже если вы не воспользуетесь Tilda, она позволит вам автоматически снять размеры элементов макета и даже скопировать их CSS код, для реализации на сайте. Это существенно сокращает пропасть между готовым макетом и его переводом в верстку (превращением в веб-страницу).

Запуск стартапов становится гораздо демократичнее. У семейства издательских систем Adobe был схожий продукт, с помощью которого можно было одним нажатием получить код нарисованной дизайнером страницы – Adobe Muse – но по не до конца понятным причинам он был снят с поддержки в 2018 году.

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

• Собирать графику и фотографии для проекта;
• Работать с композицией и шрифтами;
• Пользоваться модульными сетками и создавать макеты и прототипы в Figma;
• Помещать на сегментах сетки, из которых состоит любой сайт, различные объекты;
• Добиваться «отзывчивости» сайта, чтобы он одинаково хорошо показывался в разных браузерах и с разным разрешением экрана;
• Работать с цветами и палитрами.

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

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

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

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

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

Какую еще пользу подросток получает благодаря изучению веб-дизайна?