Алексей Желудков. Сайт не будет классным, если контент...
TRANSCRIPT
![Page 1: Алексей Желудков. Сайт не будет классным, если контент не оформлять](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55b26a3fbb61eb8d2e8b457e/html5/thumbnails/1.jpg)
Контент
![Page 2: Алексей Желудков. Сайт не будет классным, если контент не оформлять](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55b26a3fbb61eb8d2e8b457e/html5/thumbnails/2.jpg)
Все иллюстрации и фотографии в презентации — собственность правообладателей. Я использовал их в образовательных целях. Это нормально.
![Page 3: Алексей Желудков. Сайт не будет классным, если контент не оформлять](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55b26a3fbb61eb8d2e8b457e/html5/thumbnails/3.jpg)
Фёдорfeodor_sinoptik
![Page 4: Алексей Желудков. Сайт не будет классным, если контент не оформлять](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55b26a3fbb61eb8d2e8b457e/html5/thumbnails/4.jpg)
Текст или фото?
![Page 5: Алексей Желудков. Сайт не будет классным, если контент не оформлять](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55b26a3fbb61eb8d2e8b457e/html5/thumbnails/5.jpg)
![Page 6: Алексей Желудков. Сайт не будет классным, если контент не оформлять](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55b26a3fbb61eb8d2e8b457e/html5/thumbnails/6.jpg)
![Page 7: Алексей Желудков. Сайт не будет классным, если контент не оформлять](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55b26a3fbb61eb8d2e8b457e/html5/thumbnails/7.jpg)
![Page 8: Алексей Желудков. Сайт не будет классным, если контент не оформлять](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55b26a3fbb61eb8d2e8b457e/html5/thumbnails/8.jpg)
![Page 9: Алексей Желудков. Сайт не будет классным, если контент не оформлять](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55b26a3fbb61eb8d2e8b457e/html5/thumbnails/9.jpg)
![Page 10: Алексей Желудков. Сайт не будет классным, если контент не оформлять](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55b26a3fbb61eb8d2e8b457e/html5/thumbnails/10.jpg)
![Page 11: Алексей Желудков. Сайт не будет классным, если контент не оформлять](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55b26a3fbb61eb8d2e8b457e/html5/thumbnails/11.jpg)
![Page 12: Алексей Желудков. Сайт не будет классным, если контент не оформлять](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55b26a3fbb61eb8d2e8b457e/html5/thumbnails/12.jpg)
Текст должен быть как фотография
![Page 13: Алексей Желудков. Сайт не будет классным, если контент не оформлять](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55b26a3fbb61eb8d2e8b457e/html5/thumbnails/13.jpg)
![Page 14: Алексей Желудков. Сайт не будет классным, если контент не оформлять](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55b26a3fbb61eb8d2e8b457e/html5/thumbnails/14.jpg)
Хороший текст— типографика, — стиль, — точность, — грамотность.
![Page 16: Алексей Желудков. Сайт не будет классным, если контент не оформлять](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55b26a3fbb61eb8d2e8b457e/html5/thumbnails/16.jpg)
Реформатор
![Page 17: Алексей Желудков. Сайт не будет классным, если контент не оформлять](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55b26a3fbb61eb8d2e8b457e/html5/thumbnails/17.jpg)
Изображение– сложность создания, – существенные ограничения по формату, – низкий уровень абстракции,+ масштабируемость,+ простота донесения информации.
![Page 18: Алексей Желудков. Сайт не будет классным, если контент не оформлять](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55b26a3fbb61eb8d2e8b457e/html5/thumbnails/18.jpg)
Подготавливайте иллюстрации
Нельзя вставлять картинки по принципу «как есть».
![Page 19: Алексей Желудков. Сайт не будет классным, если контент не оформлять](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55b26a3fbb61eb8d2e8b457e/html5/thumbnails/19.jpg)
Не показывайте ненужные пиксели
Обрезайте фотографию, пока она не закричит.
Тим Харровер
![Page 20: Алексей Желудков. Сайт не будет классным, если контент не оформлять](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55b26a3fbb61eb8d2e8b457e/html5/thumbnails/20.jpg)
![Page 21: Алексей Желудков. Сайт не будет классным, если контент не оформлять](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55b26a3fbb61eb8d2e8b457e/html5/thumbnails/21.jpg)
![Page 22: Алексей Желудков. Сайт не будет классным, если контент не оформлять](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55b26a3fbb61eb8d2e8b457e/html5/thumbnails/22.jpg)
![Page 23: Алексей Желудков. Сайт не будет классным, если контент не оформлять](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55b26a3fbb61eb8d2e8b457e/html5/thumbnails/23.jpg)
Повинуйся
![Page 25: Алексей Желудков. Сайт не будет классным, если контент не оформлять](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55b26a3fbb61eb8d2e8b457e/html5/thumbnails/25.jpg)
Тридцать спиц соединены одной осью, но именно пустота между ними составляет суть колеса.
Горшок лепят из глины, но именно пустота внутри составляет суть горшка.
Дом строится из стен с окнами и дверьми, но именно пустота составляет суть дома.
Лао Цзы
![Page 26: Алексей Желудков. Сайт не будет классным, если контент не оформлять](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55b26a3fbb61eb8d2e8b457e/html5/thumbnails/26.jpg)
![Page 27: Алексей Желудков. Сайт не будет классным, если контент не оформлять](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55b26a3fbb61eb8d2e8b457e/html5/thumbnails/27.jpg)
![Page 28: Алексей Желудков. Сайт не будет классным, если контент не оформлять](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55b26a3fbb61eb8d2e8b457e/html5/thumbnails/28.jpg)
![Page 29: Алексей Желудков. Сайт не будет классным, если контент не оформлять](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55b26a3fbb61eb8d2e8b457e/html5/thumbnails/29.jpg)
![Page 30: Алексей Желудков. Сайт не будет классным, если контент не оформлять](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55b26a3fbb61eb8d2e8b457e/html5/thumbnails/30.jpg)
![Page 31: Алексей Желудков. Сайт не будет классным, если контент не оформлять](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55b26a3fbb61eb8d2e8b457e/html5/thumbnails/31.jpg)
![Page 32: Алексей Желудков. Сайт не будет классным, если контент не оформлять](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55b26a3fbb61eb8d2e8b457e/html5/thumbnails/32.jpg)
![Page 33: Алексей Желудков. Сайт не будет классным, если контент не оформлять](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55b26a3fbb61eb8d2e8b457e/html5/thumbnails/33.jpg)
![Page 34: Алексей Желудков. Сайт не будет классным, если контент не оформлять](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55b26a3fbb61eb8d2e8b457e/html5/thumbnails/34.jpg)
Культ карго
![Page 35: Алексей Желудков. Сайт не будет классным, если контент не оформлять](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55b26a3fbb61eb8d2e8b457e/html5/thumbnails/35.jpg)
![Page 36: Алексей Желудков. Сайт не будет классным, если контент не оформлять](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55b26a3fbb61eb8d2e8b457e/html5/thumbnails/36.jpg)
![Page 37: Алексей Желудков. Сайт не будет классным, если контент не оформлять](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55b26a3fbb61eb8d2e8b457e/html5/thumbnails/37.jpg)
![Page 38: Алексей Желудков. Сайт не будет классным, если контент не оформлять](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55b26a3fbb61eb8d2e8b457e/html5/thumbnails/38.jpg)
![Page 39: Алексей Желудков. Сайт не будет классным, если контент не оформлять](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55b26a3fbb61eb8d2e8b457e/html5/thumbnails/39.jpg)
![Page 40: Алексей Желудков. Сайт не будет классным, если контент не оформлять](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55b26a3fbb61eb8d2e8b457e/html5/thumbnails/40.jpg)
![Page 41: Алексей Желудков. Сайт не будет классным, если контент не оформлять](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55b26a3fbb61eb8d2e8b457e/html5/thumbnails/41.jpg)
![Page 42: Алексей Желудков. Сайт не будет классным, если контент не оформлять](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55b26a3fbb61eb8d2e8b457e/html5/thumbnails/42.jpg)
![Page 43: Алексей Желудков. Сайт не будет классным, если контент не оформлять](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55b26a3fbb61eb8d2e8b457e/html5/thumbnails/43.jpg)
![Page 44: Алексей Желудков. Сайт не будет классным, если контент не оформлять](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55b26a3fbb61eb8d2e8b457e/html5/thumbnails/44.jpg)
![Page 45: Алексей Желудков. Сайт не будет классным, если контент не оформлять](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55b26a3fbb61eb8d2e8b457e/html5/thumbnails/45.jpg)
![Page 46: Алексей Желудков. Сайт не будет классным, если контент не оформлять](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55b26a3fbb61eb8d2e8b457e/html5/thumbnails/46.jpg)
![Page 47: Алексей Желудков. Сайт не будет классным, если контент не оформлять](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55b26a3fbb61eb8d2e8b457e/html5/thumbnails/47.jpg)
![Page 48: Алексей Желудков. Сайт не будет классным, если контент не оформлять](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55b26a3fbb61eb8d2e8b457e/html5/thumbnails/48.jpg)
![Page 49: Алексей Желудков. Сайт не будет классным, если контент не оформлять](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55b26a3fbb61eb8d2e8b457e/html5/thumbnails/49.jpg)
![Page 50: Алексей Желудков. Сайт не будет классным, если контент не оформлять](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55b26a3fbb61eb8d2e8b457e/html5/thumbnails/50.jpg)
?
![Page 51: Алексей Желудков. Сайт не будет классным, если контент не оформлять](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55b26a3fbb61eb8d2e8b457e/html5/thumbnails/51.jpg)
![Page 52: Алексей Желудков. Сайт не будет классным, если контент не оформлять](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55b26a3fbb61eb8d2e8b457e/html5/thumbnails/52.jpg)
Анимация — зло
Немного можно.Но чем больше, тем хуже.А для некоторых вещей и «немного» нельзя.
![Page 53: Алексей Желудков. Сайт не будет классным, если контент не оформлять](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55b26a3fbb61eb8d2e8b457e/html5/thumbnails/53.jpg)
СтруктураПоля, межколоночные просветы, сами колонки образуют сетку, структурируют информацию. Случайное пустое пространство так же плохо, как его полное отсутствие.
![Page 54: Алексей Желудков. Сайт не будет классным, если контент не оформлять](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55b26a3fbb61eb8d2e8b457e/html5/thumbnails/54.jpg)
АбзацОтступ на первой строке не нужен. Абзацы выделяются или отступом (красная строка), или увеличенным межстрочным интервалом между ними.
В вебе забудьте о красной строке.
![Page 55: Алексей Желудков. Сайт не будет классным, если контент не оформлять](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55b26a3fbb61eb8d2e8b457e/html5/thumbnails/55.jpg)
Длина строки
Оптимальная длина строки — 5–8 слов (около 64 символов).
![Page 56: Алексей Желудков. Сайт не будет классным, если контент не оформлять](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55b26a3fbb61eb8d2e8b457e/html5/thumbnails/56.jpg)
Интерлиньяж
1. Чем длиннее строка, тем больше интерлиньяж.
2. Чем больше размер шрифта, тем меньше интерлиньяж.
(расстояние между строками)
![Page 57: Алексей Желудков. Сайт не будет классным, если контент не оформлять](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55b26a3fbb61eb8d2e8b457e/html5/thumbnails/57.jpg)
ПереносыЗабудьте о переносах в вебе. Пока.
![Page 58: Алексей Желудков. Сайт не будет классным, если контент не оформлять](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55b26a3fbb61eb8d2e8b457e/html5/thumbnails/58.jpg)
«Чёрточки»
- – —
дефис короткое тире длинное тире
Тире может быть в начале строки только при оформлении диалогов или списков. Используйте неразрывные пробелы.
![Page 59: Алексей Желудков. Сайт не будет классным, если контент не оформлять](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55b26a3fbb61eb8d2e8b457e/html5/thumbnails/59.jpg)
«Висяк»В конце строки не должны оставаться однобуквенные слова и числа: как правило, они логически связаны с последующим словом. Желательно также не отрывать и двух- трёх-буквенные союзы и предлоги. Используйте неразрывные пробелы.
![Page 60: Алексей Желудков. Сайт не будет классным, если контент не оформлять](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55b26a3fbb61eb8d2e8b457e/html5/thumbnails/60.jpg)
Кавычки
«ёлочки и „лапки“» — вот это настоящие кавычки (основные и вложенные).
" — это знак дюйма или секунды, а не то, что вы подумали.
![Page 61: Алексей Желудков. Сайт не будет классным, если контент не оформлять](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55b26a3fbb61eb8d2e8b457e/html5/thumbnails/61.jpg)
НачертаниеТекст, выделенный жирным, бросается в глаза сразу же. То, что будет выделено курсивом, будет сохранять интригу, пока читатель не дойдёт до нужного места.
![Page 62: Алексей Желудков. Сайт не будет классным, если контент не оформлять](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55b26a3fbb61eb8d2e8b457e/html5/thumbnails/62.jpg)
Начертание
Наиболеепредпочтительныйвариант
Менеежелательныйвариант
![Page 63: Алексей Желудков. Сайт не будет классным, если контент не оформлять](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55b26a3fbb61eb8d2e8b457e/html5/thumbnails/63.jpg)
Чем меньше заглавных, тем лучшеНе нужно калькировать немецкий и английский языки: Делать Без Оснований Все Слова Важными. А ВОТ ТАК — ВООБЩЕ КРИМИНАЛ, ВОН ИЗ ПРОФЕССИИ.
![Page 64: Алексей Желудков. Сайт не будет классным, если контент не оформлять](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55b26a3fbb61eb8d2e8b457e/html5/thumbnails/64.jpg)
Заглавные и строчные
ХУЖЕ Лучше
![Page 65: Алексей Желудков. Сайт не будет классным, если контент не оформлять](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55b26a3fbb61eb8d2e8b457e/html5/thumbnails/65.jpg)
Текст должен быть контрастен
Светлое по светлому и тёмное по тёмному видно плохо.
![Page 66: Алексей Желудков. Сайт не будет классным, если контент не оформлять](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55b26a3fbb61eb8d2e8b457e/html5/thumbnails/66.jpg)
Тени? Не в шрифтах!
Оформление никогда не должно затруднять чтение.
![Page 67: Алексей Желудков. Сайт не будет классным, если контент не оформлять](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55b26a3fbb61eb8d2e8b457e/html5/thumbnails/67.jpg)
Принцип близостиРасстояние между двумя связанными элементами должно быть меньше, чем между несвязанными.
![Page 68: Алексей Желудков. Сайт не будет классным, если контент не оформлять](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55b26a3fbb61eb8d2e8b457e/html5/thumbnails/68.jpg)
ВыключкаВыравниванию по правому краю почти никогда нет оправдания. Чем короче строка, тем выше необходимость флаговой вёрстки.
![Page 69: Алексей Желудков. Сайт не будет классным, если контент не оформлять](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55b26a3fbb61eb8d2e8b457e/html5/thumbnails/69.jpg)
Не надо подчёркивать
Подчёркивание, набор только заглавными и разрядка — наследие печатных машинок. В вебе подчёркивать пока всё ещё надо.
![Page 70: Алексей Желудков. Сайт не будет классным, если контент не оформлять](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55b26a3fbb61eb8d2e8b457e/html5/thumbnails/70.jpg)
Разные стили для разного текста
Чем больше типов данных, тем больше стилей потребуется (врезки, цитаты, комментарии, списки и пр.).
![Page 71: Алексей Желудков. Сайт не будет классным, если контент не оформлять](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55b26a3fbb61eb8d2e8b457e/html5/thumbnails/71.jpg)
Держитесь созданного стандартаЧтение не должно превращаться в шараду.
![Page 72: Алексей Желудков. Сайт не будет классным, если контент не оформлять](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55b26a3fbb61eb8d2e8b457e/html5/thumbnails/72.jpg)
Единообразие
Никаких ВНЕЗАПНО!
![Page 73: Алексей Желудков. Сайт не будет классным, если контент не оформлять](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55b26a3fbb61eb8d2e8b457e/html5/thumbnails/73.jpg)
Спасибо