Не только красота и функциональность. Интерфейсы и любовь к Икее

Айдар Шакиров
Дизайн-кабак
5 min readJul 28, 2020

Почти во всех книгах по промдизайну есть следующая мысль. Очень легко придумать качественный премиальный продукт, который будет продаваться по 1000$ за штуку. Гораздо сложнее создать массовый. Так, чтобы он приносил удовольствие от использования и выглядел соответственно эпохе. А стоил 20–50$ за ту же штуку. Тут уже никуда без изобретательности и большой работы дизайнера.

Для меня эталон массового продукта — Икея. Во всем виден их упор на промышленный дизайн. Они выпускают достаточно качественные, недорогие и функциональные предметы мебели. Которые удачно впишутся в любой современный, и не очень современный интерьер (Бабушкин ремонт обставленный из Икеи — это уже богемная квартира для тусовок).

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

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

В веб-интерфейсах

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

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

Какое-то время я продолжал плеваться и не понимал, как это так вообще. А когда попробовал и получилось — кайфанул. Выигрывают все члены команды.

Разработчикам. Понятная логика — элемент выглядит вот так и ведет себя так. Скорость — работы в полтора раза меньше работы.

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

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

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

Личный опыт

Хорошо. Авторизация в корзине магазина. И на мобильных и на десктопе одинаковые сценарий, одинаковые контролы и даже анимации. В разработке не будет двойной работы для фронтендов. Если что-то решим доработать по дизайну — для дизайнеров тоже.

Форма авторизации настолько удачно вписалось в колонку, что удалось сохранить и общие размеры шрифтов

Плохо. Доработать только мобильную корзину. Мои первые попытки взяться за корзину года 3 назад. Вроде казалось что на компе все более менее, проработать хотелось только мобильный сценарий. Идея не очень хорошая — в итоге получилось бы два совершенно разных сценария и способов навигации по нему для разных устройств. Если возникнут идеи новых фичей — развивать пришлось бы обы версии.

Хорошо. Плеер в мобильной библиотеке.
Один плеер с полностью одинаковым поведением. При переходе к десктопу понадобилась только небольшая перекомпоновка.

Общее почти всё. Залипающая кнопка начала прослушивания уважительно относится к мобильному сценарию
На десктопе кнопки перехода между главами не особо полезны — всё оглавление помещается в 1–2 экрана

Плохо. Подход к поиску в магазине
«Начал за здравие, закончил за упокой». Начало то неплохое было, а потом на десктопе появился совершенно новый экран, про который мобилка ничего не слышала.

Хорошо. Аркада в стиле супрематизма
Мне нравится, что получилсь. Удалось и использовать общие компоненты, и с уважением отнестись к особенностям платформ. Тут главную роль сыграл дедлайн — придумать и запустить сразу 2 игры было ну никак).

Модальные окно с призами удачно нашло себе место на экране компьютера
Форма на 100% общая для обеих платформ. И это замечательно!

Думаю, многие, кто прочитают и так отлично всё это знают. Для меня в своё время это стало открытием!

Если я вас хоть немного развлек — делитесь и клэпайте. Мне будет очень приятно 😊

P.S. Короткие заметки публикую в тг-канале. Пишу про дизайн и не только. Подписывайтесь! — буду рад каждому 🤗🤗🤗
https://t.me/dsgnlv382

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

Нарратор и Тайлер Дёрден, которых мы заслужили

Если ещё не ушли — попробуйте нашу игру леталку. Прикольной она вышла, да ещё и книжек бесплатных заеберете
https://www.mann-ivanov-ferber.ru/igra-samolet/

Курсы со скидкой 55%. Промокод DESIGNPUB.

--

--

Айдар Шакиров
Дизайн-кабак

Дизайнер цифровых продуктов и всего остального там всякого разного. Веду https://t.me/dsgnlv382