Типографика *

В Яндекс.Деньгах мы сделали БЭМ-платформу основным инструментом дизайнеров для построения интерфейсов, дополнив ее всем необходимым арсеналом для масштабирования.

Глубока ли кроличья нора?



Сколько минут вам потребуется, чтобы понять в чем фишка?

Фрэнсис Бэкон в 1620 году разделил источники человеческих ошибок, стоящих на пути познания, на четыре группы, которые он назвал «призраками» или «идолами» (лат. idola).

• «Призраки рода» проистекают из самой человеческой природы, они не зависят ни от культуры, ни от индивидуальности человека. «Ум человека уподобляется неровному зеркалу, которое, примешивая к природе вещей свою природу, отражает вещи в искривлённом и обезображенном виде».
• «Призраки пещеры» — это индивидуальные ошибки восприятия, как врождённые, так и приобретённые. «Ведь у каждого, помимо ошибок, свойственных роду человеческому, есть своя особая пещера, которая ослабляет и искажает свет природы».
• «Призраки площади (рынка)» — следствие общественной природы человека, — общения и использования в общении языка. «Люди объединяются речью. Слова же устанавливаются сообразно разумению толпы. Поэтому плохое и нелепое установление слов удивительным образом осаждает разум».
• «Призраки театра» — это усваиваемые человеком от других людей ложные представления об устройстве действительности. «При этом мы разумеем здесь не только общие философские учения, но и многочисленные начала и аксиомы наук, которые получили силу вследствие предания, веры и беззаботности». [Wikipedia]

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

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

Приветствую Вас коллеги! В этой статье я бы хотел поделиться опытом создания дизайн-систем. Начитавшись разных умных книжек и насмотревшись полезных видео по этому вопросу, я решил применить знания на практике. После нескольких попыток я выделил для себя важные моменты. Которые опишу в данной статье. Мне очень интересно узнать, как решается вопрос дизайн систем у других практиков, поэтому жду море комментариев.

1. Arimo

Дизайнер: Стив Мэттэсон – увлеченный дизайнер из штата Колорадо. Более 25 лет Мэттэсон разрабатывает шрифты, самыми крупными проектами стали дизайны для Android, Citrix, Microsoft, Nextel и Xbox.



Типы: Regular, Regular Italic, Bold, Bold Italic
Лицензия: Apache License, Version 2.0
Скачать шрифт

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

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

1. Brow Tambow: улучшаем геометрию

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


У знака неправильная геометрия — выравниваем ее и исправляем недочеты со светом и тенями. Также, поправляем баланс знак/шрифт — в первоначальном варианте знак был слишком крупным. Наш совет — при таком активном и интересном знаке, подбирать более спокойные и простые шрифты, чтобы элементы не спорили друг с другом.

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

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

1. Open Sans

Предлагаем вашему вниманию очередную публикацию про редизайн Хабрахабра и Гиктаймс. Наверняка уже кто-то подумал про себя: «Хм, они там как плитку в Москве что ль перекладывают — уже третья или четвёртая публикация про редизайн, а сайт каким был, таким и остался?!» и будет частично прав: сложно «поменять плитку» сразу на всём сайте, поэтому мы решили делать это небольшими итерациями. Чтобы вы успели привыкнуть, а мы — вовремя отреагировать на ваш фидбек.



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

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

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

Стоп Обман: отделяем элементы

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

Проблемы с версткой

Задача верстки — правильно расставить акценты на визитке. В случае с плохой версткой, получатель не поймет, куда смотреть и что читать в первую очередь.

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

Вчера я слушал подкаст и обратил внимание, как кто-то задавал вопрос и по ходу дела сказал: «Старый фанат, впервые звоню». По какой-то причине это заставило меня подумать о Medium. Я читаю тут статьи давным-давно, но никогда не вставлял свои два цента. Сегодня тот день, когда это изменится.

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

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

Итак, готовы? Всё начинается с…

Перевод «Я люблю ИП»

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

Если вы не верите, что можете научиться дизайну, просто вспомните слова легендарного Дэвида Грола (барабанщик в группе Nirvana, гитарист и вокалист FooFighters, прим. ред.) об изучении новых вещей:

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

А теперь, помня эти слова, вы готовы к нашему крэш-курсу? Пристегните ремни, мы начинаем в произвольном порядке.

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

В девяностые, когда стали доступны первые компьютеры, каждый мог стать дизайнером и сделать вывеску для своего ларька.
К нам в рубрику #logomachine_help присылают самые разные логотипы, но от многих по-прежнему веет тем самым любительским дизайном из 90-х. Мы собрали самые распространенные проблемы в 5 худших приемов, которых лучше избегать, если ты не возишь щебень на самосвале.

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


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

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

Часто сталкиваюсь с заказчиками, которые открывают свой бизнес либо проводят ребрендинг и хотят начать с разработки логотипа. Пожелания их всегда разные — кому-то нравится простой текстовый логотип с названием компании либо аббревиатурой, кто-то видит логотип сложным и витиеватым (в средневековом стиле, с глубоким смыслом и идеей), кто-то желает включить в логотип рисунок своего восьмилетнего сына.

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

14 апреля в Екатеринбурге пройдет конференция DUMP. Программный директор секции «Дизайн» Дарья Прокуда рассказала, что интересного будет в секции и зачем на нее идти. Ей слово.



Всем привет!

Меня зовут Дарья Прокуда, я работаю арт-директором в JetStyle и второй год являюсь программным директором секции «Дизайн» на DUMP.

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

Это перевод статьи дизайнера-программиста Джона Голда, занимающегося системами дизайна в Airbnb, а ранее — сотрудника проекта Grid, который, как и uKit AI, делает раннюю попытку применить нейросети и машинное обучение в дизайне и редизайне веб-элементов.



Дизайн – это почти бесконечный процесс выстраивания всевозможных гипотез с дальнейшей попыткой собрать детали воедино.

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