Как стать автором
Обновить
116.1

Дизайн

Дизайн спасёт мир

Сначала показывать
Порог рейтинга

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

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

Теги:
Всего голосов 9: ↑9 и ↓0+9
Комментарии0

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Теги:
Всего голосов 11: ↑9 и ↓2+7
Комментарии1

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

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

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

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

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

Теги:
Всего голосов 7: ↑6 и ↓1+5
Комментарии3

Вышла версия 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.

Теги:
Всего голосов 6: ↑6 и ↓0+6
Комментарии0

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

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

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

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

Теги:
Всего голосов 6: ↑6 и ↓0+6
Комментарии0

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Теги:
Всего голосов 14: ↑14 и ↓0+14
Комментарии0

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

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

Теги:
Всего голосов 3: ↑3 и ↓0+3
Комментарии0

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


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

Теги:
Всего голосов 3: ↑3 и ↓0+3
Комментарии2

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Чем меньше иконка, тем меньше деталей и декоративных элементов мы можем себе позволить. Каждый дополнительный элемент добавит время для ее распознавания
Чем меньше иконка, тем меньше деталей и декоративных элементов мы можем себе позволить. Каждый дополнительный элемент добавит время для ее распознавания

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

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

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

Теги:
Всего голосов 12: ↑12 и ↓0+12
Комментарии1

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

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

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

Портрет Ленина на обложке журнала «Кибернетика», выполненный ЭВМ, 1970 год. Этот пример иллюстрирует взаимосвязь между искусством, технологией и инновациями того времени. Картинка отсюда
Портрет Ленина на обложке журнала «Кибернетика», выполненный ЭВМ, 1970 год. Этот пример иллюстрирует взаимосвязь между искусством, технологией и инновациями того времени. Картинка отсюда

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

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

Теги:
Всего голосов 15: ↑13 и ↓2+11
Комментарии1

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

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

Теги:
Всего голосов 8: ↑8 и ↓0+8
Комментарии0

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

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

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

Теги:
Всего голосов 17: ↑17 и ↓0+17
Комментарии0

Роузберри, креативный директор французского дома моды Schiaparelli («Скиапарелли»), представил кутюрный показ бренда 2024 года в Париже.

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

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

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

«Теперь технология, на которой я вырос, настолько устарела, что ее почти так же сложно найти, как некоторые винтажные ткани и украшения», — написал Роузберри в аннотации к выставке.

Теги:
Всего голосов 4: ↑4 и ↓0+4
Комментарии3

Ближайшие события

Препарируем Material Design и находим родовые травмы

Подробнейшая документация, но..

  • Неконсистентный и неуниверсальный дизайн.

  • Сомнительный пользовательский опыт чуть ли не в каждом компоненте.

  • Реализация от Гугла в Вебе безбожно тормозит и глючит.

  • Тяжёлая поддержка разных форм-факторов и инпут-девайсов.

В продолжение темы: Бестолковый дизайн, Mathematics Driven Design.

Мета: Форум Гипер Дев, Канал с новостями, Донаты.

Теги:
Всего голосов 8: ↑3 и ↓5-2
Комментарии3

Плагин «Simpleflow» для Figma упрощает вставку коннекторов (стрелок), соединяющих два объекта. Это особенно полезно при добавлении пояснений к макетам. Идея плагина очень простая: он берет коннекторы из FigJam и вставляет в Figma. Основное преимущество перед аналогичными плагинами заключается в том, что коннекторы не отвязываются, а автоматически перестраиваются вместе с объектом (то, что мы любим в Miro).

Мини‑инструкция:

  1. Запускайте плагин и нажимайте «Copy connector to clipboard».

  2. Выбирайте первый объект, удерживая Shift , затем выбирайте второй объект, к которому будет направлена стрелка.

  3. Нажимайте «Paste here» или используйте Ctrl/cmd+V .

    Чтобы вставить стрелку повторно, не обязательно запускать плагин. Просто нажмите Ctrl/cmd+D, чтобы создать дубликат.

Платная версия также доступна и предоставляет возможность изменять цвет стрелок и добавлять иконки. Лично для меня последнее кажется избыточным, а цвет коннекторов можно регулировать через саму Figma. Бесплатный функционал полностью соответствует моим запросам, предоставляя возможность изменять форму точки начала и конца линии, ее цвет, добавлять текст и перемещать его, изменять форму линии, а главное, перемещать объекты без потери связей.

Теги:
Всего голосов 12: ↑12 и ↓0+12
Комментарии2

Плагин «Shape Builder Tool» для Figma — инструмент, созданный для быстрой работы с объектами. Этот плагин — своего рода альтернатива стандартной функции «Boolean groups» в Figma, но плагин позволяет одновременно работать с несколькими объектами и быстрее добиваться желаемого результата всего в несколько кликов, без необходимости постоянно дублировать слои и запускать функцию.

В его арсенале два уникальных режима:

  1. Режим Добавления (+Add) — добавляет пространство между объектами.

  2. Режим Вычитания (‑Sub) — убирает пространство там, где формы пересекаются.

Результат переносится в векторном виде в Figma всего лишь щелчком по кнопке «Replace Selection» (заменить исходный объект) или «Copy To Canvas» (вставить результат рядом с исходным объектом).

Плагин вышел в конце декабря 2023. Триал версия — 3 дня.

Теги:
Всего голосов 12: ↑12 и ↓0+12
Комментарии0

«Студия Артемия Лебедева» представила на своём сайте проект иконок для операционной системы «Аврора». Дизайнеры студии разработали расширенный набор из трёхсот пиктограмм. На реализацию проекта ушло 34 дня, а в будущем студия планирует добавлять в набор новые иконки. Арт-директором проекта выступил Павел Герасимчук, который ранее руководил разработкой айдентики Мещерского парка, сайта программы «СберСпасибо», атомной электростанции «Аккую», администрации города Королёва и мобильного приложения сети ювелирных магазинов «Санлайт».

Теги:
Всего голосов 7: ↑6 и ↓1+5
Комментарии13

Автор блога Basic Apple Guy подготовил новогодние обои для Mac и iPhone в стиле уродливых свитеров. В узорах используются иконки macOS, силуэты устройств Apple и зимние элементы. Всего доступны две коллекции в разных цветах.

Happy Macintosh

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

Clarus the Dogcow

Кларус (Clarus) — персонаж, разработанный Apple для демонстрации макета страницы во время настройки печати. Собака издаёт звук «Муф», который напоминает лай собаки и мычание коровы. Кларус стал культовым героем, и отдел службы поддержки Apple до сих пор использует его в качестве талисмана. В macOS Ventura обновлённого Кларуса вернули в меню настройки печати. Обои с ним доступны по ссылке.

Теги:
Всего голосов 3: ↑3 и ↓0+3
Комментарии0

В пригороде Далласа расположен центральный офис id Software (г. Ричардсон) и Armadillo Aerospace (г. Мескит). Неудивительно, что и Джон Кармак, сооснователь обеих компаний, живёт (или хотя бы жил) где-то рядом. Местные рассказывают, что до сих пор иногда видят его в Далласе.

Международный аэропорт Даллас/Форт-Уэрт расположен, как следует из названия, между городами Даллас и Форт-Уэрт. В аэропорте установлены сразу несколько объектов искусства, все из которых перечислены на специальной странице на сайте аэропорта.

Один из объектов — инсталляция без названия от художника Тома Орра. Это серия алюминиевых труб, расположенных перед узором из параллельных линий. Когда глаза наблюдателя скользят по этому прямоугольнику 6×12 метров, возникает иллюзия движения.

Однако у Кармака совсем иные ассоциации. Когда он снял и выложил инсталляцию у себя в микроблоге, он снабдил её подписью «похожа на алиасинг компьютерной графики». Как пишет профессионал и ветеран CGI Джон Кармак, эффект ему глубоко неприятен.

Теги:
Всего голосов 12: ↑12 и ↓0+12
Комментарии0

Институт цвета Pantone назвал цветом 2024 года оранжево-розовый оттенок «Персиковый пушок» (13-1023 Peach Fuzz).

Исполнительный директор Pantone Литрис Айсмен отметила, что этот цвет дарит чувство сопричастности и сплоченности, заботы, вдохновляет на переоценку взглядов. По её мнению, благодаря поддержке оттенка Peach Fuzz дизайнеры и клиенты могут найти умиротворение.

В конце 2022 года Институт цвета Pantone объявил цветом 2023 года карминово-красный 18-1750 Viva Magenta. По словам представителей организации, это «смелый, бесстрашный и пульсирующий» цвет.

Каждый год Pantone выбирает цвет, прогнозируя будущие тренды. Цветом 2022 года, по версии института, стал сиреневый оттенок 17-3938 Very Peri, для 2021 года организация выбрала сразу два цвета: жёлтый 13-0647 Illuminating и серый 17-5104 Ultimate Gray.

Теги:
Всего голосов 3: ↑3 и ↓0+3
Комментарии0

Вклад авторов

Работа

Веб дизайнер
32 вакансии