Дизайн

Чек-аут

В интерфейсах интернет-магазинов это экран, который пользователь видит перед тем, как перейти на страницу оплаты.

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

Можно найти много чек-листов о том, как оформлять чек-ауты. Я же здесь озвучу самое главное:

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

— Здесь уже не нужно основное меню навигации, ведь в нём есть ссылки, по которым пользователь может кликнуть и уйти со страницы куда-то ещё. Поэтому шапку можно смело убирать;
— Подвал тоже;
— Не стоит просить заполнить больше данных, чем нужно для оформления сделки. Если есть какие-то необязательные поля, то они, скорее всего, навредят;
— Кнопка с призывом к действию должна быть только одна и с ней ничего не должно визуально конкурировать.

Я бы предположил, что это всё и так очевидно, однако сам начал убирать шапки с подвалами со страниц чек-аутов года два-три назад. А ведь, казалось бы, опытный специалист.

Вообще подобные страницы уже давно спроектированы и оттестированы в любом крупном маркетплейсе и как две капли воды похожи друг на друга.

Фантастический уикенд с 18 по 21 апреля прошёл на конференции «Дизайн‑выходные»! Этот проект, организованный российским дизайн‑сообществом, приносит нам полезные знания, новые знакомства и удивительные впечатления уже 13 лет подряд.

На этот раз мы собрались в Нижнем Новгороде, послушали лекции, приняли участие в дискуссиях и мастер‑классах. Целых 9 залов, 150+ спикеров и 190+ часов активностей — это отличная возможность погрузиться в каждую нишу индустрии. И хотя мы не успели посетить все мероприятия, каждый из нас остался в восторге от атмосферы встречи и обмена опытом.

Большое спасибо организаторам и спикерам этого события! Их труд и преданность делу позволили нам получить удовольствие и открыть для себя что‑то новое. А чтобы вы могли продолжить вдохновляться и изучать дизайн — смотрите материалы, которыми поделились спикеры и организаторы:

• Дизайн-выходные: официальный сайт, канал в Telegram, чатик в Telegram

• Программа и материалы в Figma

• Видео «Главный зал»: 2 день, 3 день

• Видео «Зал Дизайн‑центричность»: 1 день, 2 день

• Фотографии: 1 день, 2 день, 3 день, фотографии от Dprofile

• Презентации спикеров

• Материалы от спикеров, которые не смогли приехать/выступить

• Любительская съёмка

Почему я не делаю публичных разборов

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

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

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

Ещё причина. Я стараюсь не лезть в чужие монастыри со своими уставами. И стараюсь не давать советов там, где у меня их не спрашивали. Стараюсь — и не всегда у меня это получается. Так зачем же мне ещё больше усугублять своё положение какими-то «разносами»?

Есть исключение. Когда я недоволен чем-то в качестве реального клиента, то вполне могу поделиться опытом публично. Но и тут осторожничаю. Мол, вот вам мои претензии и недовольства, но я-то, конечно, понимаю, что, возможно, я вовсе и не ваша целевая аудитория. А ещё, возможно, я не знаю каких-то технических ограничений, которые привели к таким убогим интерфейсам, и ругаюсь зря.

О школе Баухаус в цитатах дизайнеров

Наш арт-директор Федор Ноздрин и еще семь дизайнеров из известных студий рассказали порталу DSGNRS, как художественная школа Баухаус повлияла на них и на всё дизайн-сообщество. Делимся некоторыми цитатами из материала.

Федор Ноздрин, AGIMA:

«Ле Корбюзье — величайший архитектор-модернист. Он никогда не был среди преподавателей Баухауса, но его работы оказали огромное влияние на основателей и учеников школы. Еще он повлиял на стиль советской застройки: железобетонные панели, плоские крыши, отсутствующий декор — всё это отголоски его архитектурных догм».

Эмиль Исхаков, ONY:

«Баухаус объединил архитектурное, скульптурное и художественное мышление в мультидисциплинарной философии. Мы расширили это мультидисциплинарным подходом, включив типографику, CGI, генеративный, саунд- и диджитал-дизайн. Таким образом, мы являемся в некотором роде продолжателями Баухауса, создавая новые опыты для брендов через эксперименты с разнообразными медиумами и пробуя новые выразительные средства».

Павел Конюков, Nimax Brands:

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

Полную версию статьи читайте тут. И приходите в Телеграм-канал нашей дизайн-команды. Там много классных находок из мира дизайна.

Figma анонсировала конференцию Config 2024. Мероприятие пройдёт в Сан-Франциско 26 и 27 июля. В этом году мероприятие будет в гибридном формате. За два дня на сцене выступят более 75 спикеров на 50 сессиях. Компания ожидает принять более 8 тыс. участников.

Сейчас билет на очное посещение можно приобрести за 350 долларов, но скоро цену увеличат до 700 долларов. Виртуальное участие бесплатное. Все сессии можно будет посмотреть в прямом эфире.

В Figma появилась возможность совершить путешествие по эпохам Интернета с помощью тематических курсоров. Функцию добавили в честь Международного дня Интернет, который ежегодно отмечают 4 апреля.

Всего доступно четыре набора курсоров:

• 8-bit. Пиксельные курсоры, вдохновлённые эпохой Windows 2000.

• Y2K. Дизайн этого набора навеян началом двухтысячных.

• Aero. При создании курсоров дизайнеры использовали интерфейс Windows Vista и Windows 7. Набор охватывает период с 2007 по 2009 год.

Skeuomorphic. Релиз первого iPhone вызвал рост популярности скевоморфизма, а эти курсоры вернут пользователя во время, когда элементы интерфейса повторяли объекты реального мира.

На YouTube-канале DesignCode опубликовали бесплатный курс по созданию 3D-моделей для iOS и visionOS в Spline. В двухчасовом ролике обсуждают следующие темы:

• Базовые формы;

• Материалы, свет и эффекты;

• Камера, анимации и состояния;

• Кнопки и компоненты;

• Пошаговая анимация;

• Создание 3D-иконки для iOS-приложения;

• Создание 3D-иконки для visionOS-приложения;

• Создание 3D-сцены;

• Анимация частиц;

• Экспорт моделей в SwiftUI-проекты.

Nike представила кроссовки Air Force 1 в дизайне 404 Error («Ошибка 404»).

Производитель изменил форму кроссовок, нанёс на стельки строки с символами 0 и 1, а также добавил на язычок цифры 404 поверх названия модели.

Сбоку на обуви написано: «404 Error, the requested Upper was not found» («Ошибка 404, запрошенный верхний элемент не найден», что умело интегрирует веб-жаргон в физический дизайн, воплощая в себе суть этого эксклюзивного решения цифровой эпохи).

Кроссовки ожидаются в продаже летом 2024 года по цене от $150.

Вот вам сенсационная новость! Figma решила развлечь нас совершенно непредсказуемым обновлением. Я вот даже задумываюсь, как я мог жить до этого момента, когда узнал об этой фантастической новинке. Так в чем же подвох? Теперь в Figma можно менять свой курсор! Да‑да, вы не ослышались. Если вам вдруг важно, как ваш курсор выглядит, то теперь вы можете наслаждаться этой функцией. Просто взгляните справа сверху возле вашей аватарки и погрузитесь в мир безграничных возможностей курсора!

Figma решила провести неделю веселья, начиная с 4 апреля, объявив это «404 — нашим ежегодным Апрельским Днем Веселья». Приглашают окунуться в эпоху цифрового дизайна от времен DOS и Y2K до эпохи скевоморфизма и Windows Vista.

Главные принципы инклюзивного дизайна 

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

Чтобы соответствовать высокому уровню доступности по WCAG, необходимо придерживаться 4 принципов.

1. Воспринимаемость

• Всегда должна быть текстовая альтернатива нетекстовому контенту.

• Капча должна быть представлена в нескольких формах.

• Нельзя пренебрегать контрастностью.

2. Понятность

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

3. Управляемость

Люди должны иметь возможность взаимодействовать с интерфейсом и управлять контентом всеми доступными способами. В том числе и с клавиатуры, ведь многие люди с нарушениями моторики не пользуются компьютерной мышью. Все функциональные элементы страницы должны быть доступны по умолчанию, например кнопки слайдера. Экранный фокус, с помощью которого человек перемещается, должен корректно работать и быть виден.

4. Надежность

Интерфейс должен оставаться доступным при изменении версий продукта или операционной системы.

Больше примеров доступных и недоступных интерфейсов найдете в нашей статье. А за вдохновением приглашаем в тг-канал нашей дизайн-команды. 

На Хабре не хватало тёмной темы. Мы помогли это исправить.

Быстрее перейти на тёмную сторону поможет технический квест от Хабра и Yandex Cloud:

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

Приходите решать задачи и открывать тёмную тему Хабра → https://dark.habr.io/

А здесь уже можно прочитать пост Хабра о том, как создавалась эта тема.

Вышла версия iOS 17.5 beta 1 с номером сборки 21F5048f. Она доступна зарегистрированным разработчикам. В ЕС iOS 17.5 поддерживает установку приложений непосредственно с веб-сайтов. 

Однако разработчикам придётся принять новые условия App Store. Они будут платить сбор в размере 0,5 евро за каждую первую установку, если их число превысит 1 млн за последние 12 месяцев.

Кроме того, любое PWA должно соответствовать рекомендациям Apple. Их можно устанавливать только с домена веб-сайта, который разработчик зарегистрировал в App Store Connect. Apple также предоставит разработчикам ряд API-интерфейсов для интеграции с системными функциями.

iOS 17.5 beta 1 также включает в себя несколько небольших изменений дизайна. Apple обновила дизайн значка «Цель чтения» на верхней панели навигации, а в приложении «Настройки» появился новый символ для меню «Доступ с помощью паролей для веб-браузеров» в разделе «Конфиденциальность и безопасность». Виджет «Подкасты» получил динамический цвет.

Наконец, iOS 17.5 включает в себя систему защиты от отслеживания с помощью таких аксессуаров, как AirTags. iOS будет идентифицировать аксессуары для отслеживания, даже если они не сертифицированы Apple или Find My.

Марк Гурман из Bloomberg сообщил, что с выходом iOS 18 Apple предоставит пользователям iPhone больше настроек главного экрана.

Так, у них появится контроль над расположением значков приложений, хотя сами иконки, скорее всего, останутся привязанными к невидимой сетке, чтобы обеспечить единообразие. При этом можно будет регулировать отступы между значками, выстраивать их в линии и столбцы. Пока эти действия доступны только через приложения Shortcuts и Widgetsmith.

Пользователи iPhone уже могут настраивать экран блокировки после выпуска iOS 16. Согласно источникам, в новой версии ОС появятся дополнительные параметры настройки главного экрана, и это будет его крупнейшее обновление за несколько лет.

Apple представит iOS 18 на своей ежегодной конференции разработчиков WWDC в июне. ОС будет включать новые функции генеративного искусственного интеллекта для Siri и иных приложений, поддержку RCS в приложении «Сообщения», изменения дизайна и многое другое.

Figma представила функцию «Мультиредактирование» (multi‑edit).

Теперь можно измененять один из выделенных объектов, и изменения автоматически применятся ко всем остальным выбранным элементам.

Несколько новшеств:

• Быстрый автоматический выбор повторяющихся объектов в разных фреймах. Либо выбор слоев аналогичных выбранному объекту с помощью зажатого Shift.

• Каждый объект независимо масштабируется относительно своего центра, а не группой, как раньше.

• Массовое изменение цвета, размера, поворота и других свойств.

• Редактирование текста одновременно в нескольких фреймах и изменение свойств шрифта.

• Автоматическое создание нескольких auto layout для разных групп выделенных объектов.

• Массовое перемещение объектов в разных auto layout, неважно, горизонтальные они или вертикальные.

• Массовое внесение объектов в несколько фреймов.

• Выравнивание объекта относительно ключевого в разных фреймах.

• Изменение механики вставки с сохранением позиции объекта: из одного фрейма в несколько, несколько объектов из разных фреймов в один, несколько объектов из разных фреймов в множество фреймов путем чередования.

• Создание компонента из ключевого объекта и автоматическая замена других выделенных объектов инстансами.

• Одновременное редактирование вариантов компонента, например добавление иконок, текста и т. п.

Для ознакомления с этими новшествами Figma подготовила обучающий файл и видео. Что вы думаете об этих изменениях — пишите в комментариях.

Для Figma вышел плагин Trace, с помощью которого можно сконвертировать дизайн в live-прототип приложения на SwifUI. Есть возможность просматривать код вёрстки, изменять его, видеть как это влияет на поведение приложения и переносить изменения в IDE. Для всего этого плагин подгружает полноценный симулятор iOS. Для преобразования дизайна в код SwiftUI используется нейросеть.

Изначально Trace появился в качестве сервиса для генерации экранов приложений по текстовому запросу с поддержкой только SwiftUI.

Приложения для часов Apple Watch. Ну или других часов.

Почему их так мало? Как спортивный калькулятор калорий многие используют. Или сообщения читают (а ответить крайне сложно и неудобно. особенно на совещаниях).
Неужели вот такой формат маленького экрана так ограничивает фантазию и никто не может придумать приличного варианта использования? Некие новые полезные функции или функции старые, но полезные и удобные именно в часах?
Ведь часов уже много поколений, а приложений для них буквально минимум.
Конечно по сравнению со смартфонами?
Или экран настолько ограничивает, что вариантов использования действительно мало?
Платить на кассе в странах где это работает? И читать сообщения?
У меня много знакомых с такими часами, но я не вижу, чтобы они пользовались кроме часов чем-то еще.
А ведь если мало приложений, то это большие перспективы? Рынок открыт и свободен. На смартфонах не пробиться со своим приложением. А тут открытый рынок. И никого на нем нет.
На Хабре последнее упоминание о часах apple в 2020

Три основных принципа работы с иконками

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

Принцип 1. Визуальная связанность

Все иконки должны иметь общий визуальный стиль. Определите общие элементы: например, форму, толщину линий и пропорции. Уделите внимание цветовой схеме и уровню детализации.

У форм может быть несколько атрибутов, и каждый из них влияет на конечный вид иконки. Примеры атрибутов форм:

• скругления углов;

• диагональные элементы;

• симметричность;

• замкнутые/незамкнутые контуры;

• наслоение элементов;

• принципы заливки элементов.

Еще здесь мы оцениваем, как много визуального пространства занимает иконка и как много в ней негативного пространства. Так мы отделяем формы друг от друга и группируем их между собой.

Принцип 2. Разборчивость иконки

Иконка должна быть читаема в любых размерах. Вот наглядный пример:

Принцип 3. Понятный и простой образ

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

Все правила работы с иконками собрали в этой статье. А еще мы иногда показываем примеры классных иконок в телеграм-канале нашей дизайн-команды. Приходите :)

Каким был генеративный дизайн в СССР

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

У нас же генеративный дизайн начали развивать еще в 20 веке. Называлось это кибернетическим искусством. Один из интересных его примеров — ASCII-арт. Это изображения, созданные с использованием символов, цифр, букв или знаков. Мы и сейчас применяем что-то наподобие в переписках — ¯\_(ツ)_/¯. Но в советские годы изображения были, конечно, сложнее.

Генеративное искусство развивалось в визуальной сфере, музыке и поэзии. С помощью ЭВМ в специализированных институтах могли создавать мелодии или разрабатывать аккомпанементы, писать стихи и создавать скульптуры. Правда, занимались им в основном отдельные энтузиасты. Поэтому к моменту распада СССР отечественное кибернетическое искусство начало забываться.

Больше про историю генеративного дизайна рассказываем в отдельной статье, а классные примеры — в телеграм-канале.

Когда‑нибудь задумывались, как в Figma добавить «Эффект Дросте» или просто создать промежуточные состояния между двумя фигурами? Решение — на помощь приходит плагин «Blend». Просто нарисуйте два объекта, укажите количество промежуточных состояний, и плагин моментально их сделает (у меня ушло 15 секунд на 6 изображений). Можно играть с заливкой, обводкой, цветами и толщиной. Единственное условие — у обоих объектов должно быть одинаковое количество точек, иначе плагин начинает капризничать.

Честно говоря, я провел с этим плагином весь вечер, пытаясь выкрутить из него все варианты и придумать, что еще можно сотворить. А вы что думаете об этой штуке? Поделитесь своими мыслями в комментариях!

Плагин «Insert Big Image» для Figma — это решение, которое позволяет вставлять гигантские изображения в макеты, не ограничиваясь разрешением 4096 px, которое так любит Figma.

Как это работает:
Просто бросьте одно или несколько изображений в плагин, и он, как настоящий волшебник, разрежет их на кусочки размером менее 4096×4096 и соберет в группу. При желании, можете удалить любой кусочек. И да, даже с картинкой 16 000×16 000 он справляется, не боясь трудностей.

Когда это пригодится:
Каждый решит сам, как использовать этот плагин. Лично я часто сочетаю его с расширением для Chrome «GoFullPage». Оно самостоятельно скроллит и делает скриншоты сайта, склеивая их в одно длинное изображение. А «Insert Big Image» переносит его в Figma без потери разрешения. Почти как магия, но даже лучше!