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

Дизайн

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

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

Apple Pencil Pro будут продаваться в персонализированных упаковках с художественным оформлением. Дизайнеры компании подготовили пять иллюстраций со словом «Pro». При заказе онлайн не будет возможности выбрать оформление коробки, поэтому коллекционерам придётся покупать устройства в магазине.

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

Apple добавила рамки новых iPad в библиотеку шаблонов для Sketch. Разработчики и дизайнеры могут использовать их для оформления скриншотов и мокапов. Рамки доступны в файле All Product Bezels.

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

Nike выпустила для Тима Кука специальную версию кроссовок Air Max, дизайн которых сделали на новом iPad.

В Nike пояснили, что это уникальная модель Nike Air Max 1 ’86s, разработанная специально к презентации Apple. Примечательно, что на язычке обуви от руки написано Made on iPad.

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

7 мая 2024 года Apple провела презентацию, полностью посвящённую обновлению линейки iPad.

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

Apple подготовила свой сайт к предстоящему «специальному мероприятию» под названием Let loose, которое состоится 7 мая и сопровождается рисунком Apple Pencil, что позволяет предположить, что в центре внимания будет обновлённые iPad Air, iPad Pro и аксессуары для планшетов, включая Magic Keyboard и стилус Apple Pencil с новым жестом сжатия с тактильной обратной связью.

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

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

Apple пополнила свою библиотеку макетов для Figma. Дизайнерам стали доступны следующие шаблоны:

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

Чек-аут

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник

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

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

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

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

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

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

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

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

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

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

Теги:
Рейтинг0
Комментарии0

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

25 – 26 апреля
IT-конференция Merge Tatarstan 2025
Казань
20 – 22 июня
Летняя айти-тусовка Summer Merge
Ульяновская область

Вот вам сенсационная новость! 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

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

Работа

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