Оди
36.4K subscribers
24.7K photos
1.11K videos
143 files
5.24K links
Журнал о дизайне и для дизайнеров. Вдохновение, обучение, инструменты.

Чат канала: @awdeechat

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

По рекламе: @kgreenmedia

Автор проекта: @kirillgreen
Download Telegram
10 великих шрифтов

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

Каждый из них обладает богатой историей, и, бесспорно, значительно повлиял на развитие мировой графической культуры. Многие из этих шрифтов использовали в исторически значимых документах или изданиях. Например, Caslon в Конституции США, а Gill Sans — в названиях вывесок лондонского метрополитена

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

В статье мы рассмотрим 10 великих шрифтов:
— Garamond (Гарамон)
— Caslon (Кэзлон)
— Baskerville (Баскервиль)
— Didot (Дидо)
— Bodoni (Бодони)
— Futura (Футура)
— Gill Sans (Гилл Санс)
— Times New Roman (Таймс Нью Роман)
— Univers (Юниверс)
— Helvetica (Гельветика)

🙂️️️️️️ awdee.ru/10-great-fonts

#awd_retro #awd_typo #awd_article
Please open Telegram to view this post
VIEW IN TELEGRAM
🙂 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
🙂 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
🙂️ Книжный дизайн русского авангарда

Егор Цеманек написал статью о том, как оформляли книги в 1910-20 гг. Это был период авангарда в книжном дизайне, когда художники и графики смело экспериментировали с вёрсткой, типографикой, материалами, иллюстрациями и формой книг

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

А ещё автор показал примеры разворотов нескольких детских книг, которые иллюстрировали лучшие графики того времени

awdee.ru/book-design-of-the-russian-avant-garde

#awd_article #awd_retro
Please open Telegram to view this post
VIEW IN TELEGRAM
Шпаргалка по законам и принципам дизайна интерфейсов

Коротко и простыми словами опишем известные эвристики / законы / принципы, которые нужно знать и применять при разработке дизайна интерфейсов

1. Эффект эстетики в юзабилити: Эстетически приятный дизайн воспринимается как более удобный, маскируя мелкие проблемы юзабилити.

2. Порог Доэрти: Система должна давать обратную связь в течение 400 миллисекунд для повышения продуктивности и удержания внимания пользователей.

3. Закон Фиттса: Время достижения цели прямо пропорционально расстоянию до неё и обратно пропорционально её размеру. Важные элементы должны быть крупными и легкодоступными.

4. Закон Хика: Время принятия решения растет с увеличением количества и сложности вариантов. Упрощайте выбор, разбивая сложные задачи на этапы.

5. Закон Якоба: Пользователи предпочитают, чтобы сайт работал так же, как другие знакомые им сайты. Используйте общепринятые дизайн-паттерны.

6. Закон общего пространства: Элементы в общей области с четкой границей воспринимаются как группа. Используйте границы для визуального группирования.

7. Закон прегнантности: Люди интерпретируют сложные образы как простейшие формы. Стремитесь к простоте и порядку в дизайне.

8. Закон близости: Объекты, расположенные рядом, воспринимаются как группа. Группируйте связанные элементы.

9. Закон подобия: Схожие элементы воспринимаются как целостная группа. Обеспечьте единообразие стиля для связанных элементов.

10. Закон визуальной связности: Визуально связанные элементы воспринимаются как единое целое. Используйте цвета, линии, рамки для группировки.

11. Закон Миллера: Человек может одновременно держать в памяти 7±2 элемента. Группируйте информацию в блоки по 5-9 элементов.

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

13. Принцип Парето: 80% последствий обусловлены 20% причин. Сосредоточьтесь на функциях, приносящих наибольшую пользу большинству пользователей.

14. Закон Паркинсона: Работа занимает всё отведенное на неё время. Устанавливайте реалистичные сроки для задач.

15. Закон Постеля: Будьте либеральны в том, что принимаете, и консервативны в том, что отправляете. Проявляйте гибкость к действиям пользователей.

16. Эффект серийной позиции: Лучше запоминаются первый и последний элементы в серии. Располагайте ключевые элементы в начале и конце списков.

17. Закон Теслера: В любой системе есть сложность, которую нельзя уменьшить. Стремитесь упростить систему для пользователей, даже если это усложнит разработку.

18. Эффект фон Ресторфф: Отличающийся объект запоминается лучше остальных. Выделяйте важную информацию или ключевые действия.

19. Эффект Зейгарник: Незавершенные задачи запоминаются лучше завершенных. Используйте индикаторы прогресса для сложных задач.

Полную версию с объяснениями и примерами читайте тут: awdee.ru/laws-of-ux

#awd_article #awd_ux
🙂 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
Как выглядит хороший макет

Михаил Озорнин в ответ на заметки Романа Шамина про дизайнеров и фронтов опубликовал часть гайдов своей команды про «хорошо переданный макет». Эти гайды более детально и с примерами описывают, как передавать макеты, как их делать удобными для разработчиков, чтобы они не ошибались и тратили на реализацию меньше времени

mikeozornin.ru/blog/all/what-is-a-good-handoff

#awd_article
🙂 История развития дизайна цветовых кругов, таблиц и диаграмм с 1686 по 1914 год

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

awdee.ru/istoriya-razvitiya-dizajna-tsvetovyh-krugov-tablits-i-diagramm-s-1686-goda-po-nashi-dni

#awd_article #awd_color
Please open Telegram to view this post
VIEW IN TELEGRAM