Типографический подход к разработке сайта
1
Типографический подход к разработке сайта
Типографический подход к разработке сайта
2
Процесс
Типографический подход к разработке сайта
3
Нужен сайт
Типографический подход к разработке сайта
4
1. Скетч Делаем карту сайта. Расставляем элементы на страницах.
Типографический подход к разработке сайта
5
1. Скетч 2. Дизайн Возникает проблема. Какой он должен быть? Нам нужно принимать решения, но опереться не на что.
Типографический подход к разработке сайта
6
Брендинг
Типографический подход к разработке сайта
7
Брендинг Наладить коммуникацию. Создать образ/персонаж, с которым будет общаться ваш пользователь.
Типографический подход к разработке сайта
8
Сайт — одна из частей брендинга Не всегда самая большая.
Типографический подход к разработке сайта
9
Если брендинга нет, его все равно нужно делать
Типографический подход к разработке сайта
10
1. Исследование 2. Скетч 3. Дизайн http://www.invisionapp.com/
https://marvelapp.com/
Типографический подход к разработке сайта
11
Пользователь приходит на сайт за контентом а не за дизайном. /функцией,
Типографический подход к разработке сайта
12
Сайт состоит из текста Это не совсем так.
Типографический подход к разработке сайта
13
1. 2. 3. 4.
Исследование Скетч Типографика Дизайн
Типографический подход к разработке сайта
14
95% веб-дизайна составляет типографика Oliver Reichenstein 2006г. https://ia.net/know-how/the-web-is-all-about-typography-period
Типографический подход к разработке сайта
15
Типографика?
Типографический подход к разработке сайта
16
Типогра́фика (от греч. τύπος — отпечаток + γράφω — пишу) — искусство оформления печатного текста[1]. Типографический процесс включает выбор регистра алфавита[en], гарнитуры, комплекта[en] и кегля шрифта, выключки и длины строк[en], межбуквенных, межсловных[en] и междустрочных пробелов, а также взаимного расположения текста и иллюстраций на запечатываемом материале. Задачей типографики, наиболее творческого этапа оформления текста, является определение параметров для последующих процессов набора, вёрстки и допечатной подготовки.
Типографический подход к разработке сайта
17
Типографика — система организующая текст с помощью четкой иерархии.
Типографический подход к разработке сайта
18
Типографический подход к разработке сайта
19
Типографический подход к разработке сайта
20
Относитесь к тексту как к интерфейсу
Типографический подход к разработке сайта
21
Сделать типографику
и не облажаться
Типографический подход к разработке сайта
22
1. Выберите рабочую лошадку а) Эмоция б) Тест на адекватность экрану в) Тест на кириллицу
}
Одновременно
2. Подберите пару к основному шрифту 3. Заставьте их работать а) Контраст б) Длина строки
Типографический подход к разработке сайта
23
Рабочая лошадка
Эмоции
Типографический подход к разработке сайта
24
Известный шрифт Какой у него характер?
Типографический подход к разработке сайта
25
Известный шрифт Какой у него характер? Строгий Деловой Не молодой
Типографический подход к разработке сайта
26
Times New Roman Строгий Деловой Не молодой
Типографический подход к разработке сайта
27
Читать текст, набранный Times New Roman— диалог с этим человеком.
Типографический подход к разработке сайта
28
Итог: составьте портрет персонажа, с которым будет общаться пользователь
Типографический подход к разработке сайта
29
Рабочая лошадка
Отображение на экране
Типографический подход к разработке сайта
30
Каллиграфия
Выская печать
Экран
?
Типографический подход к разработке сайта
31
Кривые безье
Типографический подход к разработке сайта
32
1em Субпиксельный рендеринг.
Типографический подход к разработке сайта
33
1em LCD экран.
Типографический подход к разработке сайта
34
1em LCD экран мобильного телефона.
Типографический подход к разработке сайта
35
О чем говорят эти картинки?
Типографический подход к разработке сайта
36
Экран — поверхность с низким разрешением!
Типографический подход к разработке сайта
37
Как шрифтовой дизайнер решает эту проблему? Он делает шрифт крупнее.
Типографический подход к разработке сайта
38
Hhp Hhp Verdana 240pt
Garamound 240pt
Мэтью Картер 1996г.
Клод Гарамон 1495г.
em
Типографический подход к разработке сайта
39
Верхний выносной элемент
Базовая линия
Нижний выносной элемент
Mph Полуапрош
Типографический подход к разработке сайта
40
Разница em квадрата
Типографический подход к разработке сайта
41
Чем больше высота строчной буквы — тем больше пикселей приходится на букву
Типографический подход к разработке сайта
42
Итог: нужно тестировать в браузере
Типографический подход к разработке сайта
43
Рабочая лошадка
Кириллица
Типографический подход к разработке сайта
44
Какие буквы правильные и почему?
Жб Жб
Типографический подход к разработке сайта
45
http://leksandra.livejournal.com/114663.html
БДабвджклмфя
Типографический подход к разработке сайта
46
Подбор пары к основному шрифту
Типографический подход к разработке сайта
47
А нужна ли мне пара?
Типографический подход к разработке сайта
48
1. Должен подходить по настроению. 2. Не должен быть слишком похожим.
Типографический подход к разработке сайта
49
Типографический подход к разработке сайта
50
Trivia Grotesk Какой у него характер?
Типографический подход к разработке сайта
51
Trivia Grotesk Крепкий Мягкий Собранный Серьёзный но не слишком
Типографический подход к разработке сайта
52
Типографический подход к разработке сайта
53
Заставляем шрифты работать
Типографический подход к разработке сайта
54
Заставляем шрифты работать
Контраст размера
Типографический подход к разработке сайта
55
Typescale.com
Типографический подход к разработке сайта
56
1.618
Золотое сечение
Типографический подход к разработке сайта
57
Заставляем шрифты работать
Ширина строки
Типографический подход к разработке сайта
58
50-65
1.4em — 1.6em
Типографический подход к разработке сайта
59
32-38
1.3em — 1.5em
Типографический подход к разработке сайта
60
Итоги
Типографический подход к разработке сайта
61
Если нет брендинга, его придется делать Шрифт и типографика сильно влияют на тон содержания Характеристики шрифта для экрана Сочитание шрифтов Контраст
Типографический подход к разработке сайта
62
Спасибо!