Упрощаем оформление сайта с помощью типографики
Вопросы доклада:
Вопрос №1
1. Использование типографики
1. Использование типографики
1. Использование типографики
1. Использование типографики
1. Использование типографики
1. Использование типографики
Вопрос №2
2. Ошибки разработки
2. Ошибки разработки
2. Ошибки разработки
2. Ошибки разработки Проверка типографики на сайте
2. Ошибки разработки
2. Ошибки разработки
2. Ошибки разработки
Вопрос №3
3. Автоматизация типографики
3. Автоматизация типографики
3. Автоматизация типографики
3. Автоматизация типографики Соответствие готового элемента и его кода
3. Автоматизация типографики
3. Автоматизация типографики
Упрощаем оформление сайта с помощью типографики
6.33M

Оформление сайта с помощью типографики

1. Упрощаем оформление сайта с помощью типографики

Юрий Ляшенко
klondike-studio.ru

2. Вопросы доклада:

1. Преимущества использования типографики
2. Что нужно учесть при разработке
3. Автоматизация и универсализация типографики
klondike-studio.ru

3. Вопрос №1

Преимущество использования
типографики

4. 1. Использование типографики

Разработка на заказ
Разработка на готовом решении
ТЗ
Вёрстка
Наполнение
контентом
Проектирование
интерфейса
Программирование
Запуск сайта
Выбор
готового
решения
Наполнение
контентом
Дизайн
Запуск сайта
Тестирование
klondike-studio.ru

5. 1. Использование типографики

Контент (наполнение сайта) – один
из самых важных этапов в
реализации интернет-проекта и
ключевое звено в конверсии
klondike-studio.ru

6.

klondike-studio.ru

7. 1. Использование типографики

Бюджет
Стоимость Количество Конверсия
клика
кликов
в заказы
Заказы
Стоимость
заказа
Обычная страницы
30 000 ₽
300 ₽
100
3%
3
10 000 ₽
Продающая страница
30 000 ₽
300 ₽
100
20%
20
1 500 ₽
klondike-studio.ru

8. 1. Использование типографики

• Каждая страница сайта должна быть оформлена в виде Landing Page
• Landing Page стоит дорого, как правило эти страницы заказывают
отдельно
• С помощью типографики можно автоматизировать создание Landing
Page
klondike-studio.ru

9. 1. Использование типографики

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

10.

klondike-studio.ru

11.

klondike-studio.ru

12.

klondike-studio.ru

13. 1. Использование типографики

Типографика превратит любую страницу в
продающую без участия программиста и
дизайнера!
klondike-studio.ru

14. Вопрос №2

Что нужно учесть
при разработке

15. 2. Ошибки разработки

Как правило, после разработки сайта при наполнении
контента всё начинает разваливаться.
Это также относится к шаблонным решениям.
klondike-studio.ru

16. 2. Ошибки разработки

klondike-studio.ru

17. 2. Ошибки разработки

Это происходит по тому, что при работе никто не
проверил, как отображаются в контетной области
базовые теги, как минимум h1-h6, ul, ol, p, br и др.
klondike-studio.ru

18. 2. Ошибки разработки Проверка типографики на сайте

Нужно вставить
текст,
размеченный
стандартными
тегами в любую
текстовую
область
klondike-studio.ru

19. 2. Ошибки разработки

Для создания адаптивного
дизайна есть «движки» CSS-Фреймворк
klondike-studio.ru

20. 2. Ошибки разработки

Ошибки
мобильно
версии на сайте
1c-bitrix.ru
klondike-studio.ru

21. 2. Ошибки разработки

Суть «правильного» подхода можно
понять на примере одной кнопки.
klondike-studio.ru

22.

Кнопка сделана картинкой (12.2015)
klondike-studio.ru

23.

klondike-studio.ru

24.

klondike-studio.ru

25. Вопрос №3

Автоматизация типографики

26. 3. Автоматизация типографики

Для корпоративных сайтов
типографика жизненно
необходима!
klondike-studio.ru

27. 3. Автоматизация типографики

klondike-studio.ru

28.

klondike-studio.ru

29. 3. Автоматизация типографики

Очень важно
структурировать и собирать
готовые элементы в
специальном разделе сайта
klondike-studio.ru

30.

klondike-studio.ru

31. 3. Автоматизация типографики Соответствие готового элемента и его кода

klondike-studio.ru

32.

klondike-studio.ru

33. 3. Автоматизация типографики

Модуль текстовых вставок
(собственная разработка) —
позволяет вставить готовый
отвёрстанный блок в любое место на
сайте
klondike-studio.ru

34. 3. Автоматизация типографики

klondike-studio.ru

35. Упрощаем оформление сайта с помощью типографики

Юрий Ляшенко
klondike-studio.ru
English     Русский Правила