Тренд: «поплывшие/заплывшие» шрифты
Мы заметили несколько примеров «заплывших» литер. Речь о стилизации под аналоговый эффект, когда кажется, что на металлическую букву попало слишком много чернил и при отпечатке они немного расплылись по поверхности
Этот тренд — противоположность моде на ловушки для чернил в шрифтах, который был популярен в 2022 году
🙂️️️️️️ Примеры: awdee.ru/trend-floated-blotched-fonts
#awd_web #awd_site #awd_ui #awd_trend
Мы заметили несколько примеров «заплывших» литер. Речь о стилизации под аналоговый эффект, когда кажется, что на металлическую букву попало слишком много чернил и при отпечатке они немного расплылись по поверхности
Этот тренд — противоположность моде на ловушки для чернил в шрифтах, который был популярен в 2022 году
#awd_web #awd_site #awd_ui #awd_trend
Please open Telegram to view this post
VIEW IN TELEGRAM
Оди. О дизайне
Тренд: «поплывшие/заплывшие» шрифты — Оди. О дизайне
Мы заметили несколько примеров «заплывших» литер. Речь о стилизации под аналоговый эффект, когда кажется, что на металлическую букву попало слишком много чернил и при отпечатке они немного расплылись по поверхности. Этот тренд — противоположность моде на…
Как оформить иконку приложения и его скриншоты в сторе
Фёдор Миронов, дизайнер интерфейсов студии CleverPumpkin, написал статью о дизайне иконки приложения и его скриншотов в App Store и Google Play
В первой части автор объяснил, почему иконка — это не всегда логотип. Он рассказал обо всех нюансах её проектирования и исследованиях, которые помогают проверить, хорошо ли она работает
Во второй — почему скриншоты приложения так полезны при коммуникации с пользователем. Он поделился деталями архитектуры и оформления скриншотов, а также перечислил ключевые ограничения сторов в отношении их дизайна
🙂 awdee.ru/how-to-design-the-application-icon-and-screenshots-of-the-application-in-the-store
#awd_article #awd_ui #awd_mobile
Фёдор Миронов, дизайнер интерфейсов студии CleverPumpkin, написал статью о дизайне иконки приложения и его скриншотов в App Store и Google Play
В первой части автор объяснил, почему иконка — это не всегда логотип. Он рассказал обо всех нюансах её проектирования и исследованиях, которые помогают проверить, хорошо ли она работает
Во второй — почему скриншоты приложения так полезны при коммуникации с пользователем. Он поделился деталями архитектуры и оформления скриншотов, а также перечислил ключевые ограничения сторов в отношении их дизайна
#awd_article #awd_ui #awd_mobile
Please open Telegram to view this post
VIEW IN TELEGRAM
Оди. О дизайне
Как оформить иконку приложения и его скриншоты в сторе — Оди. О дизайне
Как оформить иконку и скриншоты на странице, чтобы повысить конверсию приложения в сторе.
Как избежать типичных ошибок в дизайне кнопок
Перевод статьи Адхама Даннавея, в которой он сначала разбирает 9 распространённых ошибок при проектировании кнопок, а затем показывает пример группы кнопок, которые отвечают требованиям доступности и удобства использования. В заключение автор даёт 6 советов, которые помогут создать правильную визуальную иерархию кнопок, сделать их контрастными, удобными для попадания по ним и расположить их на достаточном расстоянии друг от друга
🙂 awdee.ru/button-design-tips-to-avoid-common-mistakes
#awd_article #awd_ui
Перевод статьи Адхама Даннавея, в которой он сначала разбирает 9 распространённых ошибок при проектировании кнопок, а затем показывает пример группы кнопок, которые отвечают требованиям доступности и удобства использования. В заключение автор даёт 6 советов, которые помогут создать правильную визуальную иерархию кнопок, сделать их контрастными, удобными для попадания по ним и расположить их на достаточном расстоянии друг от друга
#awd_article #awd_ui
Please open Telegram to view this post
VIEW IN TELEGRAM
Оди. О дизайне
Как избежать типичных ошибок в дизайне кнопок — Оди. О дизайне
Перевод статьи Адхама Даннавея, в которой он сначала разбирает 9 распространённых ошибок при проектировании кнопок, а затем показывает пример группы кнопок, которые отвечают требованиям доступности и удобства использования. Автор также даёт 6 советов, которые…
Шпаргалка по доступным областям нажатия
Перевод статьи Виталия Фридмана о размерах интерактивных элементов в мобильных интерфейсах
В статье автор рассказал:
— Об общепринятых рекомендациях в отношении областей нажатия. Они должны быть не менее 44×44 px, а в случаях кликабельных элементов в тексте — не менее 27×27 px
— О том, что кликабельные элементы по краям экрана должны быть больше по размеру, чем элементы, расположенные в центре
— О случаях, когда в нижней навигации количество пунктов меню превышает 5. Здесь стоит создать нижний оверлей, который будет скользить вверх/вниз вдоль основного экрана, а не стараться втиснуть все пункты в нижнюю панель навигации
— Об альтернативе всплывающим при наведении иконкам в строке сложных таблиц в виде кнопки «Действия» («Actions»)
— О помощнике, который необходим пользователю для выполнения сложных действий в интерфейсе
— О случаях, когда покупатель хочет выбрать цвет в интернет-магазине, а колорпикер слишком маленький. Тогда уместно добавить дополнительное касание, которое увеличит колорпикер, чтобы человек точно попал по цвету, который ему нравится
— О том, что всегда следует делать всю ширину или высоту элемента кликабельной, а также добавлять в область нажатия достаточные по размеру внутренние отступы
Эти практические приёмы помогут дизайнерам интерфейсов избежать «кликов ярости» со стороны пользователей
🙂️️️️ awdee.ru/accessible-target-sizes-cheatsheet
#awd_article #awd_ui
Перевод статьи Виталия Фридмана о размерах интерактивных элементов в мобильных интерфейсах
В статье автор рассказал:
— Об общепринятых рекомендациях в отношении областей нажатия. Они должны быть не менее 44×44 px, а в случаях кликабельных элементов в тексте — не менее 27×27 px
— О том, что кликабельные элементы по краям экрана должны быть больше по размеру, чем элементы, расположенные в центре
— О случаях, когда в нижней навигации количество пунктов меню превышает 5. Здесь стоит создать нижний оверлей, который будет скользить вверх/вниз вдоль основного экрана, а не стараться втиснуть все пункты в нижнюю панель навигации
— Об альтернативе всплывающим при наведении иконкам в строке сложных таблиц в виде кнопки «Действия» («Actions»)
— О помощнике, который необходим пользователю для выполнения сложных действий в интерфейсе
— О случаях, когда покупатель хочет выбрать цвет в интернет-магазине, а колорпикер слишком маленький. Тогда уместно добавить дополнительное касание, которое увеличит колорпикер, чтобы человек точно попал по цвету, который ему нравится
— О том, что всегда следует делать всю ширину или высоту элемента кликабельной, а также добавлять в область нажатия достаточные по размеру внутренние отступы
Эти практические приёмы помогут дизайнерам интерфейсов избежать «кликов ярости» со стороны пользователей
#awd_article #awd_ui
Please open Telegram to view this post
VIEW IN TELEGRAM
Оди. О дизайне
Шпаргалка по доступным областям нажатия — Оди. О дизайне
Перевод статьи Виталия Фридмана о размерах интерактивных элементов в мобильных интерфейсах Далее текст от лица автора Практические советы о том, как предотвратить «клики ярости» с помощью доступных областей нажатия для иконок, ссылок и кнопок в десктопных…
Саммари: Мастер-класс Ильи Бирмана «Взгляд новичка» в интерфейсе
В ролике автор раскрывает суть принципа «Каждый экран имеет смысл», который сопровождает примерами хороших и плохих интерфейсов
Когда дизайнер проектирует интерфейс, он, подобно сценаристу, создаёт цепочку шагов и состояний, через которые проходит пользователь, решая свою задачу. При этом дизайнер представляет, что весь этот путь человек держит у себя в голове. Но в отличие от сценария в кино, дизайнер не может быть уверен в том, что пользователь пройдёт все задуманные им состояния подряд, не отвлекаясь. Люди могут переключаться на другие дела, нажимать не туда, куда нужно, открывать разные вкладки, забывая, что они делали на предыдущей. Нельзя полагаться на то, что глядя на конкретный экран, человек помнит всё, что он видел до этого — весь контекст: что он делал, что он хотел, что он видел
По этой причине важно, чтобы каждый экран содержал достаточно информации и человек без какого-либо контекста мог понять, что ему нужно делать. Потому что если пользователь отвлёкся, а потом через какое-то время вернулся к экрану, то интерфейс без контекста становится проблемой: человек не понимает, где он находится, что сейчас происходит и что делать дальше
Любой экран интерфейса или его самостоятельная область (диалоговое окно, форма, панель) должны быть понятны для пользователя, даже если это экран «на одну секундочку». Это и есть принцип «каждый экран имеет смысл»
ilyabirman.ru/meanwhile/all/newcomers-view-masterclass
#awd_edu #awd_ui
В ролике автор раскрывает суть принципа «Каждый экран имеет смысл», который сопровождает примерами хороших и плохих интерфейсов
Когда дизайнер проектирует интерфейс, он, подобно сценаристу, создаёт цепочку шагов и состояний, через которые проходит пользователь, решая свою задачу. При этом дизайнер представляет, что весь этот путь человек держит у себя в голове. Но в отличие от сценария в кино, дизайнер не может быть уверен в том, что пользователь пройдёт все задуманные им состояния подряд, не отвлекаясь. Люди могут переключаться на другие дела, нажимать не туда, куда нужно, открывать разные вкладки, забывая, что они делали на предыдущей. Нельзя полагаться на то, что глядя на конкретный экран, человек помнит всё, что он видел до этого — весь контекст: что он делал, что он хотел, что он видел
По этой причине важно, чтобы каждый экран содержал достаточно информации и человек без какого-либо контекста мог понять, что ему нужно делать. Потому что если пользователь отвлёкся, а потом через какое-то время вернулся к экрану, то интерфейс без контекста становится проблемой: человек не понимает, где он находится, что сейчас происходит и что делать дальше
Любой экран интерфейса или его самостоятельная область (диалоговое окно, форма, панель) должны быть понятны для пользователя, даже если это экран «на одну секундочку». Это и есть принцип «каждый экран имеет смысл»
ilyabirman.ru/meanwhile/all/newcomers-view-masterclass
#awd_edu #awd_ui
Советские пункты управления
Больше фотографий тут: awdee.ru/sovetskie-punkty-upravleniya
#awd_retro #awd_ui via designyoutrust.com/2018/01/vintage-beauty-soviet-control-rooms
Больше фотографий тут: awdee.ru/sovetskie-punkty-upravleniya
#awd_retro #awd_ui via designyoutrust.com/2018/01/vintage-beauty-soviet-control-rooms
Design Spells — пополняемая коллекция впечатляющих интерфейсных решений
В подборку попадают только необычные UI-элементы и приёмы, которые производят вау-эффект. Есть разбивка по разделам: кнопки, страницы 404, динамические острова, анимации, микровзаимодействия и многое другое
designspells.com
#awd_collection #awd_ui
В подборку попадают только необычные UI-элементы и приёмы, которые производят вау-эффект. Есть разбивка по разделам: кнопки, страницы 404, динамические острова, анимации, микровзаимодействия и многое другое
designspells.com
#awd_collection #awd_ui
This media is not supported in your browser
VIEW IN TELEGRAM
Дизайн пяти виртуальных карт немецкого интернет-банка N26
Виртуальные карты — классное пространство для кастомизации и творчества. А в этом кейсе дизайнеры не просто красоту навели, но и дали возможность клиентам выбрать дизайн карты под её основное назначение. Например, для оплаты билетов и отелей можно выбрать дизайн с чемоданом, а для покупок одежды — с поло
Дизайн разработала Este Studio из Валенсии
Больше картинок: awdee.ru/design-of-five-virtual-cards-of-the-german-internet-bank-n26
#awd_ui via behance.net/gallery/197910285/N26-Virtual-Cards
Виртуальные карты — классное пространство для кастомизации и творчества. А в этом кейсе дизайнеры не просто красоту навели, но и дали возможность клиентам выбрать дизайн карты под её основное назначение. Например, для оплаты билетов и отелей можно выбрать дизайн с чемоданом, а для покупок одежды — с поло
Дизайн разработала Este Studio из Валенсии
Больше картинок: awdee.ru/design-of-five-virtual-cards-of-the-german-internet-bank-n26
#awd_ui via behance.net/gallery/197910285/N26-Virtual-Cards
Коллекция годных примеров интерактивной анимации элементов сайта
На сайте Web Interactions Gallery собраны хорошие примеры реализации переходов между страницами, индикаторов загрузки, появления секций и меню сайта. Сейчас в коллекции порядка 120 примеров, они разбиты на типы и сопровождаются коротким видео
webinteractions.gallery
#awd_web #awd_site #awd_collection #awd_ui
На сайте Web Interactions Gallery собраны хорошие примеры реализации переходов между страницами, индикаторов загрузки, появления секций и меню сайта. Сейчас в коллекции порядка 120 примеров, они разбиты на типы и сопровождаются коротким видео
webinteractions.gallery
#awd_web #awd_site #awd_collection #awd_ui
🇬🇧 Плотность интерфейса
Мэтью Стрём написал статью о результатах собственных исследований интерфейсов на предмет плотности
В дизайне необходимо стремиться представлять самые важные данные с наименьшими затратами времени, пространства и пикселей
В статье автор рассказывает о том, что плотность интерфейса включает визуальные и временны́е аспекты
Визуальная плотность определяется количеством информации в пространстве интерфейса: чем её больше — тем плотнее интерфейс
Временная плотность определяется скоростью загрузки интерфейса и количеством действий, которые пользователь может выполнить за определённый промежуток времени
При проектировании дизайнеру следует учитывать несколько аспектов:
1. Принципы гештальта, которые описывают то, как люди воспринимают визуальную информацию
2. Целевую аудиторию: опытный трейдер легко разберётся со сложной таблицей котировок, а второклассник — нет
3. Количество места, которое занимают элементы. Если элемент не передает суть данных напрямую или не является данными сам по себе, то его необходимо убрать
Некоторые разделы статьи автор писал на основе информации из книги Эдварда Тафти «Визуальное представление больших объемов информации»
Читайте статью на английском: matthewstrom.com/writing/ui-density
#awd_article #awd_ui
Мэтью Стрём написал статью о результатах собственных исследований интерфейсов на предмет плотности
В дизайне необходимо стремиться представлять самые важные данные с наименьшими затратами времени, пространства и пикселей
В статье автор рассказывает о том, что плотность интерфейса включает визуальные и временны́е аспекты
Визуальная плотность определяется количеством информации в пространстве интерфейса: чем её больше — тем плотнее интерфейс
Временная плотность определяется скоростью загрузки интерфейса и количеством действий, которые пользователь может выполнить за определённый промежуток времени
При проектировании дизайнеру следует учитывать несколько аспектов:
1. Принципы гештальта, которые описывают то, как люди воспринимают визуальную информацию
2. Целевую аудиторию: опытный трейдер легко разберётся со сложной таблицей котировок, а второклассник — нет
3. Количество места, которое занимают элементы. Если элемент не передает суть данных напрямую или не является данными сам по себе, то его необходимо убрать
Некоторые разделы статьи автор писал на основе информации из книги Эдварда Тафти «Визуальное представление больших объемов информации»
Читайте статью на английском: matthewstrom.com/writing/ui-density
#awd_article #awd_ui