Типография и разработка сайта

Page 1

Типографический подход к разработке сайта

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

Спасибо!


Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.