«Живая Типографика»: лучший русскоязычный учебник про вёрстку книг и шрифты теперь бесплатен

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

«Живая типографика» вышла в 2007, но, по моему мнению, до сих пор не потеряла своей актуальности. В предисловии нас встречает хлёсткая фраза:

«Главная проблема типографики в России в том, что её почти что нет.»

За десять лет ситуация улучшилась, но не кардинально: вывески, книги и интерфейсы в своей основной массе всё ещё уродливы, однако последнее время стало появляться много хороших. Уже есть у кого учиться типографике, появились хорошие блоги и дизайн-школы. Если бы все дизайнеры хотя бы раз прочитали эту книгу, у типографики в России точно не было бы никаких проблем.

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

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

Пока у Паратайпа нет телеграм-канала, рекомендую подписаться в Фейсбуке:

fb.com/ParatypeFonts

Александра написала в своём ЖЖ:

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

Я пишу новую версию. Полнее, практичнее и, надеюсь, лучше старой. Но пишу медленно.

leksandra.livejournal.com/120488.html

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

#первые_шаги  #книги  #типографика

Результаты конкурса №2 в Фреймер-чате

В середине декабря я проводил конкурс в @framerchat, но так и не объявил победителя. Исправляюсь.

Задание
Прикольно, когда можно пускать волны из места, по которому кликнули. Это может быть использовано на картах или в играх для оживления интерфейса. Чтобы это реализовать, будем ловить координаты клика. (см. гифку.) Требуется реализовать анимацию расходящихся кругов.

Правила
Я выбираю задачу, в течение недели дизайнеры присылают ссылку на Фреймер Клауд. Тот, кто пришлёт лучшую реализацию, получит возможность проанонсировать что-то по теме дизайна в Скетч-дизайнере.

В конкурсе победил Антон Лапко @anronkai

Он сделал лучшую реализацию, которая позволяет менять количество волн и их цвет.

Работа: framer.cloud/bwYJu
Круто, что в коде есть комментарии.

Слово победителю
«У меня есть небольшая серия из девяти микроанимаций на Дрибле. Публиковал вместе с исходниками. Всё сделано во Флинто. Для начальных экспериментов во Фреймере самое то.»

dribbble.com/anron/projects/543514-Microinteractions

Новые конкурсы буду объявлять в Фреймер-чате.

#Фреймер  #анимация  #конкурс

Вакансия в Москве: Дизайнер интерфейсов в Почта Банке

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

hh.ru/vacancy/24295263

От года опыта, фултайм. Хорошие условия.

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

Пожалуйста, присылай портфолио в виде ссылки. Удели внимание сопроводительному письму о себе.

Контакт
Елена Сысоева @sysoevaev
sysoevaev@pochtabank.ru

#GIF  Как красить иконки через маску, задавая цвет в оверрайде

Этот метод рассказал Пабло Стэнли с канала Sketch Together. Метод вполне годный, может сэкономить уйму времени и сделать библиотеку иконок гораздо компактнее.

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

Есть и минус: если ты экспортируешь SVG для Андроид-разработчиков, придётся подчищать код и следить, чтобы на Android 5 иконку не разорвало. О том, как это делать я расскажу в другой раз.

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

colors / 01 default
colors / 02 blue
colors / 03 magenta

2. Делаем форму иконки
Заключаем форму иконки в символ. Если используешь сетку 8px, артборд символа должен быть кратен восьми: 16x16, 24x24 или 32х32. Это позволит группировать иконки в инспекторе и удобно менять одну  на другую, не меняя сущность символа. Шейп (форма иконки) должен быть по центру артборда.

3. Вставляем символ цвета в иконку с шейпом
Шейп переводим в режим маски (рекомендую для этого Ctrl + M). Квадрат с цветом обрезается по шейпу.

4. Меняем форму и цвет иконки
Вставляем экземпляр символа с шейпом. Самый прикол в том, что можно отдельно менять и форму и цвет. Чтобы поменять форму, нужно поменять символ на другой такого же размера. Цвет можно менять через оверрайд символа.

#первые_шаги  #GIF  #идеология_символов

10. Как решать конфликты горячих клавиш?

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

Способ 1. Через Keys
Плагин Sketch Keys позволяет назначить мешающей команде другую клавишу. Увы, он не видит, какие клавиши вшиты в сторонние плагины.
sketchdesigner.ru/sketchapp/plugins/sketch-keys/

Способ 2. Через редактирование манифеста плагина
Второй, более хардкорный способ: залезть в код плагина и в нужном месте удалить значение горячей клавиши. Если по какой-то причине вариант с Keys не подходит, придётся немного повозиться с кодом.

Я написал инструкцию о том, как это делать:
sketchdesigner.ru/sketchapp/answers/10-hotkey-conflicts/

#для_профи  #горячие_клавиши  #плагины

—
Задать новый вопрос: @sketchchat

Живые фото-иллюстрации: о стоках и шершавости

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

medium.com/sketchdesigner/stock-vs-authentic-e15473906209

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

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

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

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

Эффект звезды
Кроме того, если пользователь видел этого юриста на сайте, а потом общается с ним вживую, возникнет эффект звезды: «о, я её на сайте видел, значит она известная и крутая». И при этом живая. Это ещё больше усиливает доверие.

В посте больше примеров.

#первые_шаги

Sketch Isometric

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

Как использовать
sketchdesigner.ru/sketchapp/plugins/sketch-isometric/

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

#плагины  #для_профи

Magic Mirror (4$ / мес.)

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

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

Как использовать
sketchdesigner.ru/sketchapp/plugins/magic-mirror/

Мэйджик Миррор следует отключать, когда он не нужен, иначе он будет замедлять Скетч.

#плагины  #для_профи

Встреча: Новый FontLab VI из первых рук
Москва, 25 февраля 2018 (воскресенье) 14:00

Вход бесплатный, по регистрации
Зарегистрироваться: paratype.timepad.ru/event/662276/

Адрес: Москва, м. Проспект Мира, Протопоповский пер., 9

Ведущие российские шрифтовые дизайнеры и разработчик Фонтлаба расскажут об новых возможностях редактора.

- Александра Королькова
Арт-директор в Paratype, автор книги «Живая Типографика», которую я выкладывал недавно

- Юрий Гордон
Художник, гендиректор и дизайнер в Letterhead, автор «Книги про буквы от Аа до Яя»

- Юрий Ярмола
Ведущий разработчик FontLab VI, fontlab.com

Предыдущая версия FontLab Studio 5 вышла в конце 2005 года. Новый Фонтлаб был написан с нуля, имеет набор инструментов от улучшения контура в один клик до создания вариативных шрифтов. Существенно меняет процесс создания шрифта. Юрий Гордон и Александра Королькова перешли на новый редактор и внесли существенный вклад в его создание.

Организаторы: Paratype, FontLab и Институт бизнеса и дизайна

Буду там.

Использованы фото:
1. Кскения Плотникова (журнал Шрифт, typejournal.ru)
2. dompetra.ru
3. Диана Парасухина (Журнал Шрифт)

dribbble.com/shots/3680344--Microinteractions-Sidebar-Indicators

В шоте есть ссылка на исходник в Флинто

#тебе_слово №1: Пуш-индикаторы

Один из шотов Антона Лапкó (того, который победил в конкурсе по Фреймеру) показывает это занятное микровзаимодействие.

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

При ховере он увеличивается и превращается в пуш-счётчик с цифрой.

#UI_анимация  #проектирование

Тебе слово:

Улучшает ли это решение пользовательский опыт?
anonymous poll

Нет. Пользователю важно показывать цифру пушей сразу. Это решение скрывает нужный контент. Ховер-анимация вносит жужжание. – 134
👍👍👍👍👍👍👍 40%

ХЗ. На глаз не определить, зависит от ЦА, надо тестировать на пользователях. – 100
👍👍👍👍👍 30%

Да. Пользователю не важен счётчик пушей, достаточно показать, что есть непросмотренное. Пуш-признаки выглядят аккуратнее. – 98
👍👍👍👍👍 30%

👥 332 people voted so far.

Текстовая трансляция со встречи:

https://t.me/joinchat/AAAAAE7i18AayTEgWQ1xzQ