Застосування концепції Mobile-First під час проєктування інтерфейсів у середовищі Figma
Ключові слова:
UI/UX дизайн, Mobile-First, Figma, прототипування, мобільні інтерфейси, вебдодаток, Auto LayoutАнотація
У статті висвітлено концепцію Mobile-First і її вплив на сучасне проєктування користувацьких інтерфейсів (UI) та користувацького досвіду (UX). В умовах зростаючої популярності мобільного вебтрафіка підхід «від мобільного до десктопу» закріпився як індустріальний стандарт, що спонукає дизайнерів опановувати нові методології та інструменти. Особлива увага приділена середовищу Figma – провідній платформі для створення адаптивних макетів. Детально розглянуто функціональні можливості Figma, як-от Auto Layout, системи компонентів, варіанти (Variants), а також застосування 8-піксельної сітки. На основі реального кейсу розробки інтерфейсу розважального вебдодатка «Зодіакальний бандерогусь» демонструється весь процес проєктування – від створення низькодеталізованих вайрфреймів (low-fidelity) до розробки високодеталізованих макетів (highfidelity) та налаштування інтерактивного прототипу. Результати дослідження підтверджують, що поєднання концепції Mobile-First із сучасним функціоналом Figma дає змогу вести розробку цифрових продуктів із високою продуктивністю. Такі рішення характеризуються ергономічністю, масштабованістю та відповідають найвищим стандартам якості.
Посилання
Wroblewski L. Mobile First. New York: A Book Apart, 2011. 123 p.
Marcotte E. Responsive Web Design. New York: A Book Apart, 2011. 143 p.
Hoober S. How Do Users Really Hold Mobile Devices? UXmatters. 2013. URL: https://www.uxmatters.com/ mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php
Алєксєєва С. В. Цифровий дизайн та інструменти прототипування інтерфейсів. Освіта в умовах розвитку креативних індустрій. Київ: ІІТЗН НАПН України, 2022. С. 15–28.
Figma Help Center: Explore auto layout. Figma Inc. 2024. URL: https://help.figma.com/hc/enus/articles/360040451373-Guide-to-auto-layout
Береза А. М. Основи створення інформаційних систем: навчальний посібник. Київ: КНЕУ, 2015. 140 с.
Принцип Mobile First для розробки дизайну сайтів. Business Site. 2023. URL: https://www.site2b.ua/webblog/mobile-first-website-design.html 8. Duckett J. HTML & CSS: Design and Build Websites. Indianapolis: Wiley, 2011. 512 p.
