СТРАТЕГІЯ MOBILE FIRST ДИЗАЙНУ

Уявімо, що ви збираєтеся у відпустку. Маєте гарненьку валізу – невеликого розміру, але доволі містку. Та наперед приготували вже таку купу речей, що запхнувши їх до валізи, у бідолахи шви репаються і замки не сходяться. Доводиться поспіхом і з тягарем на серці викидати все, що потрапляє під руку.

Так, мук і сліз буде достатньо. Бо ж як на морі без улюблених штанців на флісику? :)

Тут постає логічне питання: чому ж не можна було збирати речі, відразу враховуючи розмір валізи?

Тепер замінимо валізу на мобільний девайс, а речі на сайт. Поступово переходимо від метафор до Mobile First дизайну.

Про те, що кількість мобільних пошукових запитів перевищила число десктопних у всьому світі, стало відомо ще восени 2015 року. Крім того, Google вже давно пропагує політику mobile-first індексації. Все це послугувало каталізатором для розвитку Mobile First дизайну.

Стратегія Mobile First – що це?

Зараз переважно концепція розробки дизайну виглядає так: спочатку проектуємо для десктопних екранів, а потім ріжемо по живому, щоб все це добро вмістити на мобільних екранах. І починається – геть паралакс, викидаємо декоративну анімацію (тут дизайнер плаче кривавими слізьми, бо в тому ж вся фішка!)

Підхід Mobile First (дослівний переклад — спочатку мобільні) закладає протилежний принцип проектування дизайну. За цією стратегією спершу відбувається розробка дизайну для мобільних пристроїв, а для великих екранів – в другу чергу.

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

Чим відрізняється Mobile First від адаптивного дизайну?

Адаптивний дизайн існуючі елементи масштабує під екран мобільного пристрою. При цьому розмір файлів не зменшується. Таким чином, хоча адаптивний дизайн може підтримувати естетику свого десктопного аналога, великий розмір файлів може стати причиною повільного завантаження даних сайту. 

Хоча більшість дизайнерів все ще залишаються консерваторами і починають проектування не з мобільних пристроїв, але тепер вони враховують можливості та обмеження їх екранів під час розробки дизайну.

Принципи Mobile First

• Осмислення користувацького досвіду відбувається з врахуванням обмеженого простору та розміру файлів;

• Розробка дизайну починається з основоположних елементів з поступовим внесенням додаткових;

• Прогресивне покращення візуальної ієрархії;

• Орієнтація на рух за допомогою пальців, а не мишки;

• Спершу завантажується основна версія, сумісна абсолютно з усіма платформами, а потім додатково завантажуються стилі й функціонал, доступний для конкретного браузера і типу платформи;

• Основне призначення анімації – покращення мікровзаємодії;

• Надлишкові елементи відправляються до кошика. Мінімум нефункціональних “вау”, максимум користі;

Переваги Mobile First

• швидкість завантаження впливає на рейтинг в пошуковій видачі;

• ресурс легкий, користувачі це оцінять, адже мобільний інтернет все ще не дешевий;

• кожен елемент продуманий і функціональний;

• користувач, в першу чергу, отримує контент;

• зручний інтерфейс для навігації;

Сергій Савенець,

Директор та головний дизайнер Nakitel