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

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

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

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

Автор проекта: @kirillgreen
Download Telegram
Типографская раскладка Бирмана

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

Что такое типографская раскладка Бирмана. Она включает много полезных символов, которые не поддерживает обычная раскладка. Например, правильные кавычки («»), тире (—), знак евро (€), фунта (£), умножения (×), минус (−), знак зарегистрированной торговой марки (®), копирайта (©), параграфа (§), градуса (°), стрелочки (←→↑↓), неразрывный пробел и другие

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

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

Как вводить символы. На плакате типографской раскладки символы, которые расположены на клавише снизу, вводят с зажатым Alt. Символы, которые расположены на клавише сверху, вводят с Alt+Shift

Комбинирующиеся символы. На плакате типографской раскладки комбинирующиеся символы находятся на плашках. Они позволяют печатать диакритические знаки, которые есть во французском, немецком, испанском, белорусском и других языках. Например, писать на французском символы «é», «è», «î», «ç», не переключаясь на французскую раскладку

Как вводить комбинирующиеся символы. Их вводят с Alt+Shift, и после появления символа нажимают букву, которая в результате образует символ с диакритическим знаком

Раскладка бесплатная. Доступна для Windows и macOS. В остальных системах её можно включить в настройках клавиатуры в пункте «Включить дополнительные типографские символы»

Скачать: ilyabirman.ru/typography-layout

40-минутная видеоинструкция Илья Бирмана о том, как пользоваться типографской раскладкой: ilyabirman.ru/meanwhile/all/typography-layout-video

Плакат типографской раскладки, который помогает запомнить расположение символов: ilyabirman.ru/typography-layout/poster

#awd_tool
Стартовало ежегодное исследование: какие дизайн-команды в отечественных продуктовых компаниях самые сильные

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

Пожалуйста, примите участие: bit.ly/dsgnteam-2023

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

Результаты за прошлые годы:
dmpatterns.com/teams-2021
dmpatterns.com/teams-2020
dmpatterns.com/teams-2019
dmpatterns.com/teams-2018
🙂️ Как сократить объём текста в интерфейсе без потери смысла

Перевод статьи Тейлора Дайкса из Nielsen Norman Group о том, как укорачивать и улучшать интерфейсные тексты

Автор рекомендует следующие действия:
— Уберите словесный мусор
— Уберите лишние слова
— Избавьтесь от избыточности
— Обращайте внимание на зависимые предложения
— Обращайте внимание на содержание
— Ищите лишнюю информацию
— Переставляйте слова

Для лучшего понимания он приводит примеры UX-текстов с разбором ошибок

awdee.ru/rewriting-digital-content-for-brevity

#awd_article #awd_ux
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
Сайт ежегодной конференции для разработчиков GitHub Universe

Удобная система карточек хорошо структурирует контент. А разнообразие градиентных 3D-иллюстраций визуально воплощает множество интересных событий, которые обещает GitHub Universe своим гостям

Больше скриншотов: awdee.ru/github-universe-annual-developer-conference-website

githubuniverse.com

#awd_web #awd_site
Цифровой архив американского центра графического дизайна и типографики Letterform

Основатель архива — коллекционер Роб Сондерс. На протяжении 40 лет он собирал предметы, связанные с типографикой, каллиграфией и графическим дизайном. В 2015 году в Сан-Франциско Сондерс открыл центр Letterform для посетителей, где представил более 100 000 печатных артефактов

Представители центра оцифровали и опубликовали коллекцию на сайте. Чего только нет в этом архиве — и граффити, и панковские афиши из семидесятых-восьмидесятых, и раритетные брендбуки мировых компаний, и флаеры, и зины, и книги о шрифтах, и многое другое

Онлайн-архив содержит удобный поиск и рубрикатор по авторам, студиям, направлениям в дизайне, декадам

Отличное место для исследования визуальной культуры прошлого и поиска новых идей

Больше картинок: awdee.ru/digital-archive-of-letterform-an-american-center-for-graphic-design-and-typography

oa.letterformarchive.org

#awd_retro #awd_print #awd_collection
Новая айдентика Максима Ильяхова

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

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

Тот случай, когда нейросети заменили иллюстратора :–)

Стиль разработали дизайнеры Бюро

Больше картинок и видео: awdee.ru/maxim-ilyakhovs-new-identity

#awd_identity via bureau.ru/projects/maximilyahov-identity
🙂️ Тренд: сайты с эффектом свечения в стиле Linear

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

В статье мы собрали шесть примеров таких сайтов: awdee.ru/trend-sites-with-glow-effect-in-linear-style

👨‍🎨 А если вы захотите реализовать похожий эффект в своём проекте, вот ссылка на пошаговый Figma-туториал по созданию таких светящихся градиентов: figma.com/community/file/1197134505417110601

Если вы встречали примеры такого тренда, присылайте в комментарии

#awd_web #awd_site #awd_trend
Please open Telegram to view this post
VIEW IN TELEGRAM
10 принципов Артёма Горбунова

Саммари выступления основателя Бюро Артёма Горбунова в Яндексе. В лекции он рассказал о принципах, которые помогают ему жить, работать и управлять

Коротко перескажем эти принципы:
1. Прямо сейчас. Если перед вами стоит сложная задача и вы не знаете, как к ней подступиться, задайте себе вопрос: Что мне мешает достичь цели прямо сейчас? При таком подходе вы начинаете думать о главной проблеме, которая мешает добиться результата
2. Не авось. Если сделать что-то на авось, есть два варианта развития событий. Старший товарищ заметит вашу ошибку и наругает вас. Или, что ещё хуже, вы сделаете проект, запустите его, он начнёт работать и что-то в нём пойдёт не так. Поэтому не полагайтесь на авось
3. Я виноват. Когда что-то идёт не так, хочется обвинять других. Но в этом случае вы перекладываете ответственность на обстоятельства. Если вы признаёте вину, то можете влиять на происходящее
4. Не ной. Нытьё дискредитирует вас в глазах окружающих, и они будут считать, что на вас нельзя положиться
5. Не бери деньги у мудаков. Деньги всегда связаны с доверием и создают ожидания. Поэтому не берите деньги у клиентов, которым вы не доверяете
6. Учись
7. Не ссы. Меняйте профессию, открывайте собственный бизнес и заводите детей даже тогда, когда кажется, что уже слишком поздно
8. Путешествуй
9. Помни. Человеческая память ограничена, поэтому чтобы сохранить воспоминания, используйте подручные приспособления. Например, ведите записи, сохраняйте важную переписку, переносите данные из старого компьютера на новый
10. Мечтай. Делите свои мечты с другими людьми: путешествуйте с ними, делайте совместные проекты. Тогда ваша мечта станет мечтой тех, с кем вы ею поделились

📼️️️️️️Лекция полностью: youtube.com/watch?v=ZMeWeU1Y6PI&t=2s

#awd_lecture #awd_summary
Please open Telegram to view this post
VIEW IN TELEGRAM
Новая айдентика итальянской сети ресторанов Erbert

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

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

Больше картинок: awdee.ru/new-identity-of-the-italian-restaurant-chain-erbert

#awd_identity via behance.net/gallery/180599673/Erbert-Identity
Kyugo — дизайн приложения для тайм-менеджмента

В приложении автор представил день не в виде скучных таблиц, а в формате кругового циферблата

Мы спросили у дизайнера приложения Тома Гарси, как ему пришла в голову такая идея

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

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

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

app.kyugo.app

Больше картинок: awdee.ru/kyugo-time-management-app-design

#awd_ui #awd_mobile
🙂️️️️️️ Шрифт в кинематографе

Александр Васин — графический дизайнер, преподаватель, основатель фестиваля типографики Typomania

В 25-минутной лекции автор разбирает особенности использования шрифтов на примере множества совершенно разных фильмов

Так в заставках кинокартин про Чарли Чаплина есть прямая отсылка к книжной типографике, для которой были характерны центральная выключка, антиквы и плотная вёрстка

В титрах фильмов 20-х годов дизайнеры использовали твёрдые, жирные гротески (Броненосец Потёмкин), палочные шрифты и странные антиква (Проститутка). В начале 30-х на титульных заставках размещали наивные рисованные гротески (Чапаев). Во второй половине 30-х дизайнеры перешли на антиквы и прописные буквы (Весёлые ребята)

В заставках советских фильмов, как правило, применяли центральную выключку, сочетание контрастных шрифтов и размашистые росчерки

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

Если обратить внимание на заставки фильмов Квентина Тарантино, то там преобладают оранжево-жёлто-красные заголовки с иллюзией объёма и стилизация под комиксы

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

📼️️️️️️ Лекция полностью: youtu.be/AF2PZgUVqoY?si=etVYfOPG77TEJZMP

#awd_typo #awd_summary #awd_lecture
Please open Telegram to view this post
VIEW IN TELEGRAM
👨‍🎨 5 новых бесплатных Figma-плагинов #2

Мы собрали и проверили ещё 5 полезных плагинов. Чтобы вы быстрее разобрались, как они работают, мы записали короткие скринкасты

— Split Image Effect — делит изображения на полосы, ромбы, квадраты, прямоугольники
— Random Gradients — генерирует рандомные красочные градиентные фоны
— ToolTips — быстро создаёт кастомизируемые тултипы. Всё, что нужно — написать текст тултипа, задать его направление, а потом настроить размер, цвет надписи и цвет фона
— Fake it — генерирует фейковые данные для заполнения макетов. Содержит более 200 типов данных: имён, названий, телефонных номеров, номеров банковских карт и многого другого. Данные создаёт на более, чем 60 языках, включая русский
— Hugeicons Pro — библиотека из 6500+ бесплатных линейных SVG-иконок

awdee.ru/5-new-free-figma-plugins-2

#awd_figma #awd_tool
Please open Telegram to view this post
VIEW IN TELEGRAM
Media is too big
VIEW IN TELEGRAM
Динамическая айдентика технологического стартапа smlXL

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

Ступенчатый размер букв в логотипе воплощает идею роста, которая лежит в основе стартапа

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

Больше видео и картинок: awdee.ru/dynamic-identity-of-the-technology-startup-smlxl

#awd_identity via bpando.org/2023/10/12/generative-branding-tech-start-up-smlxl-by-dia
🙂️️️️️️ Как учиться быстрее и эффективнее

Саммари лекции Дмитрия Карпова, руководителя Школы креативного мышления Клубов Мышления Института 2035. В видео он рассказывает, как подготовить себя к тому, чтобы в короткие сроки получить нужные знания и сразу же начать их применять

Коротко расскажем ключевые тезисы:
— Эффективность обучения зависит от измеримости результата. То есть сначала вы делаете что-то на одном уровне, а потом начинаете делать на другом. Здесь важно определить критерии и методы измерения

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

— Описание картины мира усилит мотивацию к обучению. Записывайте, как в процессе обучения она будет меняться, а именно, ваш социальный статус, отношение людей, материальное состояние

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

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

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

📼️️️️️️ youtube.com/watch?v=Bn6ldhiQeBE

#awd_edu #awd_lecture #awd_career #awd_summary
Please open Telegram to view this post
VIEW IN TELEGRAM
Туториалы по созданию цветовых эффектов в Adobe Illustrator

Мы собрали видеоуроки, из которых вы узнаете, как сделать эффектные градиентные и светящиеся иллюстрации

Темы:
Цветная спиральная иконка
Градиентные сферы
Глитч-эффект
Стеклянный 3D-текст
Светящаяся бабочка из линий
Градиентный 3D-виток

awdee.ru/tutorials-on-creating-color-effects-in-adobe-illustrator

#awd_edu #awd_ai
#цитата_дня

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

Джон Эдсон, «Уроки дизайна от Apple»
🙂 Проектируем фильтрацию листинга товаров в приложении

Станислав Хрусталёв написал новую статью о лучших практиках и ошибках в дизайне фильтров

На примерах российских приложений автор разобрал следующие аспекты:
— Размещение кнопки фильтров
— Внешний вид кнопки
— Появление экрана с фильтрами
— Интерфейс выбора фильтров
— Пояснения к фильтрам
— Слайдеры
— Фильтры выбора из списка
— Полный список значений по фильтру
— Фильтры выбора цвета
— Бинарные фильтры
— Применение фильтров
— Активные фильтры в листинге
— Активные фильтры на экране фильтров
— Сброс фильтров
— Закрытие экрана фильтров
— Прочие интересные фичи

awdee.ru/designing-product-listing-filtering-in-the-application

#awd_article #awd_ux #awd_cx
Please open Telegram to view this post
VIEW IN TELEGRAM
🙂️ Секретная формула скруглённых углов Apple

Перевод статьи Аруна Венкатесана о том, почему почти у всех продуктов Apple скруглённые углы и от чего зависит степень их скругления. Автор вспомнил теорию Наото Фукасавы, согласно которой чем ближе объект находится к человеку, тем более округлые формы у него должны быть

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

Маленькие объекты, которые находятся ближе к нашему телу, например, Apple Watch, чехол для AirPods, Apple Pencil — довольно округлые. А углы настольных компьютеров скруглены лишь слегка

awdee.ru/the-secret-formula-for-apples-rounded-corners

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