Создание и оформление документов

.

Создание и дизайн документов

Содержание

1. Правила дизайна
2. Создание документа

1. Правила дизайна*

*Раздел является переработанной книгой Робина Уильямса «Недизайнерская книга о
дизайне (дизайн и типографика для новичков)»

Четыре основных правила дизайна
Приближенность

Выравнивание

Повтор

Контраст

Четыре основных правила дизайна
 Элементы, которые относятся друг к другу, должны располагаться рядом. Они
являются единым целым, а не несколькими отдельными фрагментами. Это помогает
организовать информацию и уменьшает пустоты.

 На странице ни что не должно размещаться случайно. Каждый элемент нужно
зрительно связывать с другими элементами. Это придает странице аккуратный,
утонченный и чистый внешний вид.

Повтор
 Повторяйте наглядные детали оформления на протяжении всей работы. Можно
повторять цвет, контур, гарнитуру шрифта, размеры, линейки и т.д. Это помогает
повысить организованность текста и усилить единообразие.

Контраст
 Правило контраста заключается в том, чтобы избежать расположения на странице
одинаковых элементов. Если эти элементы: шрифт, цвет, размер, толщина штриха,
контур, пробелы и т.д. – не означают одно и тоже, их следует оформлять по-разному.
Нередко контраст – наиболее важное привлечение внимания к странице.

Приближенность (1)
Согласно правилу приближенности, взаимосвязанные
смысловые элементы должны быть сгруппированы,
расположены как можно ближе друг к другу, чтобы они
выглядели как одна логическая группа, а не набор
бессвязных элементов.

Рассмотрим на примере визитки

PR-директор (843) 227-40-58

Дамир Закиев

LLC «KommandCore»
РТ, г. Казань, а/я 777

Сколько раз взгляд остановился на визитке? Пять раз?

Внесем еще больший беспорядок

(843) 227-40-58
PR-директор


LLC «KommandCore»

Что произошло?

А теперь сгруппируем

PR-директор

LLC «KommandCore»
(843) 227-40-58

Когда несколько элементов расположены рядом друг с другом, они скорее
зрительно становятся единым целым, а не воспринимаются отдельными
частями. Как и в жизни, приближенность, или близость, предполагают некую
связь.

А теперь сгруппируем

PR-директор

LLC «KommandCore»
(843) 227-40-58

Группируя похожие элементы, вы делаете страницу более организованной. Вы
знаете, откуда начинать чтение материала, и знаете, когда закончите читать. И
пробелы (пространство вокруг букв) тоже становятся более организованными.

Пример со списком

Подведем итоги

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

Основная цель правила приближенности –
организовать текст.

Другие правила тоже направлены на это, но даже только простая группировка
взаимосвязанных элементов автоматически создает ощущение организованности текста.

Если информация хорошо организована, вероятность того, что ее прочтут и запомнят
более высока. В результате достигается еще и побочный эффект – более привлекательные
(более организованные) пробелы (так любимые дизайнерами).

Чего следует избегать

 Избегайте расположения на одной странице слишком большого числа
отдельных элементов

 Не лепите информацию по углам или только в середине

 Избегайте располагать одинаковые пробелы между элементами текста, за
исключением случаев, когда каждая группа текста является частью
подраздела

 Избегайте даже малейшей путаницы между заголовком, подзаголовком,
подписями, рисунками и т.п. и прилегающим к ним материалом. Создайте
ощущение единства элементов текста, располагая их как можно ближе друг
к другу

 Не связывайте между собой элементы, которые не имеют отношения друг к
другу. Если элементы не связаны, отделите их друг от друга

Выравнивание (2)
Правило выравнивания гласит, что ничто не должно быть
расположено на странице случайно. Каждый элемент текста
должен быть зрительно связан с другими элементами
страницы.

Рассмотрим на примере визитки

PR-директор (843) 227-40-58


LLC «KommandCore»

Элементы на этой визитке выглядят так словно они случайно набросаны на нее


PR-директор

LLC «KommandCore»
(843) 227-40-58

Этот пример иллюстрирует хорошее распределение частей текста, их
группировку по принципу смысловой близости.

Текст выровнен по центру.


PR-директор

LLC «KommandCore»
(843) 227-40-58

В этом примере текст по смыслу распределен также, но теперь он выровнен по
правому краю.

Невидимая линия связала по смыслу две группы текста визуально.


PR-директор

LLC «KommandCore»
8 (905) 311-08-48

Примеры двух обложек

Сравните эти две обложки – какие ощущения возникают у вас?


Типичная обложка доклада. Такое стандартное
выравнивание выдает скучную, почти любительскую
работу и может повлиять на чье-либо
первоначальное отношение ко всему докладу


Энергичное выравнивание текста по левому краю
создает более утонченное впечатление от обложки.
Хотя имя автора и стоит далеко от заглавия,
невидимая линия выравнивания связывает
два блока текста воедино


Ничто не должно быть расположено на странице случайно.
Каждый элемент должен иметь определенную зрительную
связь с другими элементами на странице.

Единство – важное понятие в дизайне. Что бы все элементы
текста выглядели едиными, взаимосвязанными, должна
существовать некая зрительная связь между отдельными
элементами.
Даже если отдельные элементы страницы не расположены
рядом друг с другом, они могут казаться связанными,
родственными, едиными с другой информацией только
благодаря их местоположению.

Основная цель – объединить и организовать информацию
на странице.
Как правило, именно строгое выравнивание (конечно в
сочетании с соответствующим шрифтом) придает тексту
либо изысканный, либо официальный, либо смешной, либо
серьезный вид.


 Избегайте использования на одной странице более одного вида
выравнивания (то есть не ставьте один текст в центр, другой в середину)

 И пожалуйста, постарайтесь избавится от привычки выравнивать текст по
центру, за исключением случаев, когда вы создаете более официальную,
уравновешенную (часто безликую) презентацию. Выбирайте выравнивание
по центру осознанно, не делайте этого случайно.

Повтор (3)
Правило повтора гласит, что следует повторять некие
элементы оформления на протяжении всего проекта.
Повторяющимися элементами могут быть жирный шрифт,
подчеркивание жирными линиями, какой-нибудь
специальный символ, цвет, элемент дизайна, особый
формат, пространственное расположение элементов текста
и т.д. Это может быть все что угодно – то, что читатель будет
узнавать.

Повтор (3)
Повтор – это некая «последовательность».
Когда вы посматриваете восемь страниц рабочего отчета,
именно благодаря повтору определенных элементов, их
последовательности вы понимаете, что эти восемь страниц
принадлежат одному документу.
Правило повтора выходит за пределы простой естественной
последовательности – это сознательное объединение всех
частей оформления.

Повтор (3)
Рассмотрим на примере двух визиток

PR-директор

LLC «KommandCore»
(843) 227-40-58

PR-директор

LLC «KommandCore»

(843) 227-40-58

Повтор (3)

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

Повтор (3)
Повторы:
жирный шрифт заголовков
тонкий шрифт внутри раздела
квадратные маркеры синего цвета
пробелы между блоками информации
выравнивание

Повтор (3)

Основная цель – объединить и добавить внешней
привлекательности.
Не пренебрегайте внешней привлекательностью страницы:
если текст выглядит интересно, вероятность того что его
прочтут, значительно возрастает.

Как это сделать?

Повтор (3)
Сначала найдите уже имеющиеся в тексте повторы а затем
усильте их.
Например вы используете линию толщиной в 1 пункт для
подчеркивания низа страницы и каждого заголовка. Почему
бы вам вместо нее не применить линию толщиной в четыре
пункта, чтобы повторяемый вами элемент стал более
энергичным и эффектным?
Теперь подумайте, возможно ли ввести какой-нибудь
повторяющийся элемент просто ради создания повтора?
У вас в тексте есть пронумерованные списки? А что если
применить для нумерации особо выделяющийся шрифт или
вывернутые цифры? А затем повторить такое оформление
во всех пронумерованных списках документа?

Повтор (3)
Повтор сродни подчеркиванию одежды аксессуарами.

Повтор (3)

 Постарайтесь избегать частого использования повторяющихся элементов,
когда повторение начинает раздражать или подавлять

Контраст (4)
Контраст – один из самых эффектных способов придать
странице интересный внешний вид, благодаря которому
читателю захочется обратить на страницу внимание, - и один
из способов показать организованную соподчиненность
различных элементов текста.

Важное правило, о котором необходимо помнить, создавая
эффектный контраст, - то, что контраст должен быть
сильным.

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

Абсолютно разными.

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

Только не робейте.
Шрифт 14 и 16 кегля не создает контраста.
Синий не будет контрастировать с темно-синим.


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


Контраст привлекает ваше внимание к странице, вашему
взгляду нравится контраст.

Контраст преследует две цели, и они неотделимы одна от другой.

Первая – стремление придать странице интересный внешний вид: поскольку если
страница выглядит интересно, то больше вероятность что ее прочтут.

Вторая цель – помочь организовать информацию на странице. Читателю необходимо дать
возможность мгновенно понять как расположена информация на странице, как одна часть
текста перетекает в другую.


 Не робейте! Если уж вы вводите контраст, то делайте это с акцентом

 Избегайте контраста между толстой линией и еще более толстой линией

 Избегайте контраста коричневого фона текста с черным заголовком

 Не используйте два или более похожих шрифта

 Если части текста не совсем похожи друг на друга, сделайте их совершенно
разными

Краткий обзор четырех правил
Довольно безликий, но типичный титульный
лист бизнес-плана: чтобы заполнить
пространство всей страницы текст выровнен
по центру, пробелы распределены
равномерно между строками.

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

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

Даже не смотря на то, что имя автора
расположено далеко от заголовка,
благодаря выравниванию между
элементами существует совершенно четкая
зрительная связь.

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

Маленькие треугольники были введены
специально для создания эффекта повтора.

Цвет треугольника – тоже повторяющийся
элемент.

Контраст
Здесь контраст создан с помощью введения
темно-синего прямоугольника

2. Создание документа
(презентации)

Первый шаг создания
Первый шаг – определитесь с фоном презентации.
Ни в коем случае не используйте готовые фоны.
Оптимально – простой белый или черный фон.

Вот, типовые фоны для презентаций. Что их связывает?

На их фоне любая информация теряется. Их нельзя использовать.

Это фоны, которые предлагает программа Keynote.
Они гораздо лучше.

Эти фоны – отражение опыта Стива Джобса, который умеет готовить
и проводить интереснейшие презентации. Он знает что предлагает.

И все таки самые оптимальные фоны для презентации –
это простой белый фон или …

… или простой черный фон.

Второй шаг создания
Второй шаг – создание структуры слайда.
Необходимо слайд разделить на функциональные зоны:
место для заголовка слайда
место для размещения информации на слайде
поля слайда
прочие ваши фишки, например место для размещения
разных индикаторов вашей презентации (логотип, раздел
презентации) и т.д.

Место для основного заголовка

Место для заголовка второго уровня

Место для размещения информации на слайде

Лого (раздел)

Место для основного заголовка

Место для заголовка второго уровня

Место для размещения информации на слайде

Зона идентификации презентации и размещения индикаторов

Самый простой способ – сделать границы презентации.

Самый простой способ – сделать границы презентации.

Обратите внимание –
объекты точно привязаны к линиям. Заголовок
привязан справа и снизу. Текст – справа и сверху.

Еще один важный момент –
поля слайда должны давать больше воздуха!
Чтобы информация не лепилась по краям.

Третий шаг создания
Третий шаг – создание сетки слайда.
Место для размещения информации необходимо разделить
на сетку, для придания в дальнейшем всему документу
упорядоченности и гармонии.

В дальнейшем все объекты, вставляемые в это поле должны
привязываться к этим границам.
Назначение сетки не только выравнивание элементов. Сетка
помогает делать объекты пропорциональными, то есть
обладающими четкими и заметными пропорциями.

1х1 1х1,63
2х3

1х3

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

2х3 2х2,6

Например вот так


Или так…

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

Почему так интересно золотое сечение?
Потому что эта природная константа встречается
практически во всех природных объектах. Например
расстояние между тремя ветками дерева или цветка
соответствует пропорции золотого сечения.
Именно поэтому для человека, эта природная гармония
естественна и очень приятна для глаза. Не важны возраст,
пол, культура, раса. Глаз любого человека воспримет такие
вещи как гармоничный элемент мира.
Эта пропорция, выраженная численно, составляет 1 × 1,618.

Не зря эти пропорции отражены во многих великих
творениях человечества.

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


1х1,63 1х1,63

1х1,63 1х1,63

Например вот так

Четвертый шаг создания
Четвертый шаг – определиться с цветами, которые мы будем
использовать в презентации.
Например, для заголовка, основного и вспомогательного
текста, списков (маркированных и нумерованных), таблиц,
графиков, диаграмм и т.д.

Какие цвета вам нравятся?

Четвертый шаг создания
Здесь важное правило – не более одного основного цвета
для текста (например белый), один цвет для заголовков
(например оттенок синего) и один-два вспомогательных
цветов для выделения в тексте или на схемах.
Не более!!!

Пятый шаг создания
Пятый шаг – создание стиля презентации. То есть выбрать
шрифт, размер и цвет текста, который будет использоваться.
Необходимо создать стили заголовка и основного текста,
стили списков (маркированных и нумерованных), стили
таблиц, графиков, диаграмм…

Основной заголовок
Основной текст (шрифт Calibri, 14 размер, белый цвет), основной текст (шрифт
Calibri, 14 размер, белый цвет), основной текст (шрифт Calibri, 14 размер,
белый цвет)

Вспомогательный текст (шрифт Calibri, 14 размер, серый цвет),
вспомогательный текст (шрифт Calibri, 14 размер, серый цвет),
вспомогательный текст (шрифт Calibri, 14 размер, серый цвет)

 маркированный список 1. нумерованный список

Стили таблиц

Заголовок Заголовок Заголовок Заголовок
Текст Текст Текст Текст







Стили диаграмм

100
90

80
70
60

50
40
30
20

10
0
1 кв 2 кв 3 кв 4 кв

Восток Запад Север

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

P.S. Продолжение следует…

Lively management of projects

www.KommandCore.com

Создание и оформление документов

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (11)

Создание и оформление документов