Оди
35.2K subscribers
26.9K photos
1.29K videos
144 files
5.68K links
Журнал о дизайне и для дизайнеров. Вдохновение, обучение, инструменты.

Сайт с полным архивом: https://awdee.ru

По рекламе: @kgreenmedia
В реестре: vk.cc/cKf8V5

Автор проекта: @kirillgreen
Download Telegram
handheld.design — прикольная курируемая галерея с приятными и красивыми концептами мобильного дизайна

#awd_ui #awd_gallery
🔥22
🙂 11 оттенков размытия

Продуктовый дизайнер Иван Емелюшкин написал статью о том, как дизайнеру передавать элементы с размытием разработчику, чтобы на выходе получить предсказуемый результат

В статье автор:
— Рассказал, как сделать размытие на Android
— Перечислил все 11 размытий на iOS с указанием особенностей каждого
— Затронул тему стилей текста и заливок для иконок на iOS
— Объяснил, как правильно передавать информацию о размытии разработчику

В конце статьи вы найдёте шаблон со всеми размытиями в Figma, чтобы быстро применять их в своих дизайн-проектах

awdee.ru/11-ways-of-blurring

#awd_article #awd_web #awd_ui #awd_figma
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7❤‍🔥6
🙂 10 проблем попапов и как их решить

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

awdee.ru/10-problems-of-popups

#awd_ui #awd_ux #awd_article
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5💩1
🙂 10 проблем попапов и как их решить

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

awdee.ru/10-problems-of-popups

#awd_ui #awd_ux #awd_article
Please open Telegram to view this post
VIEW IN TELEGRAM
👍11🔥2
Дизайн-токены: что это такое, зачем они нужны и какие токены бывают?

Вот наглядный и понятно иллюстрированный материал, который отвечает на эти вопросы: thedesignsystem.guide/what-are-design-tokens

#awd_article #awd_ui
🔥9
Сложный интерфейс: Рисуем состояния экрана без помощи системного аналитика

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

awdee.ru/bekend-for-designers

#awd_article #awd_ui
👾5👍3
🙂 11 оттенков размытия

Продуктовый дизайнер Иван Емелюшкин написал статью о том, как дизайнеру передавать элементы с размытием разработчику, чтобы на выходе получить предсказуемый результат

В статье автор:
— Рассказал, как сделать размытие на Android
— Перечислил все 11 размытий на iOS с указанием особенностей каждого
— Затронул тему стилей текста и заливок для иконок на iOS
— Объяснил, как правильно передавать информацию о размытии разработчику

В конце статьи вы найдёте шаблон со всеми размытиями в Figma, чтобы быстро применять их в своих дизайн-проектах

awdee.ru/11-ways-of-blurring

#awd_article #awd_web #awd_ui #awd_figma
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥5👍1
Интерфейс Ableton Live

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

#awd_ui
🔥35🤯6
Концепт приложения Mielophon — музыкального плеера, который подбирает музыку под настроение на основании биометрических данных пользователя

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

Название приложения — мелофон — это отсылка к устройству из книг Кира Булычёва, которое читает мысли людей

Концепт разработали в студии SASHA, арт-дирекшен и дизайн Владимира Аюева

#awd_ui via t.me/ayuev/4817
🔥12🤔2🥱2🌚2
«Бенчмарки» — коллекция скриншотов и UX-паттернов удачных российских приложений. Сейчас в коллекции наборы скриншотов 54 приложений

benchmarkee.ru

#awd_ui #awd_ux
🔥9👀4
This media is not supported in your browser
VIEW IN TELEGRAM
Очень нравится сайт и приложение Hourly — этакий гимн швейцарской вёрстке, где всё оформлено минимумом выразительных средств

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

hourly-app.com

#awd_web #awd_ui
🔥16👎1
This media is not supported in your browser
VIEW IN TELEGRAM
Refero 4.0 — огромная библиотека с примерами сайтов и приложений, отдельными элементами интерфейсов и UX-паттернами

Доступно более 100 тысяч примеров веб-страниц и экранов iOS-приложений. Все референсы разбиты по категориям. Есть поиск, в котором можно искать примеры даже по шрифтам

В закладки всем, кто занимается интерфейсами

Доступна бесплатная ограниченная версия. Цена платных тарифов — от 8 $ за месяц

https://refero.design

#awd_ui #awd_collection #awd_tool
🔥53
Frame of preference — лонгрид о том, как менялся интерфейс Mac c 1984 по 2004 год

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

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

aresluna.org/frame-of-preference

#awd_article #awd_ui #awd_retro
🔥17
Фёдор Миронов рассказал о новых гайдлайнах iOS 26 и о том, как под них нужно адаптировать приложения. В статье — примеры использования эффекта Liquid Glass, изменения в таббаре, навигации и строке поиска

🙂 Адаптируем приложение под Liquid Glass — внедряем «стеклянные» гайдлайны iOS 26

#awd_article #awd_ui
Please open Telegram to view this post
VIEW IN TELEGRAM
👍10🍾2🤓2
This media is not supported in your browser
VIEW IN TELEGRAM
60fps — библиотека анимаций и визуальных эффектов из мобильных приложений

Есть поиск по коллекции — правда, чтобы им воспользоваться, нужно заплатить 50 $

60fps.design

#awd_ui
👀6🤨3🤡2👻1
myCeli — дизайн приложения, которое помогает выйти из автоматизма

Студенческий проект Анны Шпак, Марии Шевчун и Виктории Ямщиковой, сделанный под руководством Олега Пащенко. Необычный трекер хороших привычек, который мимикрирует под живой организм

Приложение помогает пользователю подходить к рутинным действиям более осознанно. Оно изучает привычки человека и мягко направляет к их изменению. Чутко отслеживает любые действия и постепенно «растёт»: на экране появляется сад из причудливых микроорганизмов — метафора личного роста

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

#awd_ui #awd_ru via deziiign.com/project/3990677a8d0c47ee9725fad01c3e1284
👾14❤‍🔥9😎5🙏3👍1
Вика Лисицына рассказала, как создавать дизайн для людей с разными ментальными расстройствами

Вика дала советы по проектированию интерфейса для пользователей с тревожным расстройством, СДВГ, депрессией, расстройством аутистического спектра и ПТСР. Она на примерах показала, какие дизайнерские решения помогут таким людям взаимодействовать с вашим продуктом

🙂 Нужно ли учитывать ментальные особенности, делая инклюзивный дизайн

#awd_article #awd_ui #awd_ux
Please open Telegram to view this post
VIEW IN TELEGRAM
🙏6💘6👍4💊2
Bauhaus Clock — дизайн часов для экрана блокировки на Mac

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

Скринсейвер включается на экране при бездействии и стоит 19 $

bauhausclock.com

#awd_ui
🔥15😎7
Media is too big
VIEW IN TELEGRAM
Оригинальная платформа для хранения мудбордов SOOT WORLD

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

Чтобы протестировать платформу, нужно записаться в лист ожидания: play.soot.com/sootworld

#awd_ui
👎6👍3🌚1