4 заметки с тегом

Советы

Оформление текста. Шпаргалка для всех, кто пишет

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

Абзац

Абзац в печатном издании принято отбивать отступом первой строки — красной строкой. Раньше типографы так облегчали чтение и экономили бумагу. В веб-формате нам не нужно экономить бумагу, поэтому абзацы отбиваются отступом друг от друга. Комбинировать эти два способа не нужно — одного достаточно.

Перенос слов

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

Неразрывный пробел привязывает слова друг к другу — связанные им слова переносятся на новую строку вместе. Используйте неразрывный пробел, чтобы привязать предлоги или местоимения к зависимым словам. «Висячие» в конце строки предлоги прерывают равномерное чтение и неприятны глазу.
Сравните два абзаца с висячими предлогами и без:

Тире, в отличие от предлогов, не переносится:

Всё лучшее — 
детям.

Неправильно:

Всё лучшее
— детям.

HTML:  
Mac: ⌥ Opt+Пробел
MS Word: Ctrl+⇧ Shift+Пробел

Если не можете использовать неразрывный пробел, используйте неразрывный диапазон norb:

<nobr>123–45–67</nobr>
<nobr>кто-то</nobr>

Тире, дефис и минус

Есть четыре наиболее распространенных знака в виде горизонтальной линии:

Тире (—)

HTML: &mdash;
Mac: ⌥ Opt+⇧ Shift+-
MS Word: Ctrl+Alt+Num -
Windows: Alt+0151

Короткое тире (–)

HTML: &ndash;
Mac: ⌥ Opt+-
MS Word: Ctrl+Num -
Windows: Alt+0150

Дефис (-)

HTML: &#x2010;
Есть на клавиатуре.

Минус (−)

HTML: &minus;

Отличаются они длиной и областью применения.

Если расположить знаки на одной строке, то минус, как и плюс, будут чуть выше остальных — они выровнены относительно прописных букв и цифр:

Тире, короткое тире, дефис, минус, плюс

В русском языке нет короткого тире, используется обычное (—): 

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

— Как чудесно! — сказала я.
Москва — Санкт-Петербург, весна — лето.
Море — кайф.

В английском языке есть короткое тире (–), его используют в диапазонах чисел: 2015–2017. В русском языке можно отойти от правил и также использовать короткое тире в диапазоне чисел, потому что обычное тире кажется длинноватым: 2015—2017.

Дефис используется в присоединении частиц и префиксов, сложно-сочиненных словах, при сокращении слов, в номерах телефонов, в печати при переносе слов и еще во множестве случаев по правилам русского языка: по-русски, кто-либо, красно-синий, веб-дизайнер, изд-во, 123-45-67.

Недопустимо использовать тире вместо дефиса, и наоборот.

Минус используется только в математических выражениях: 10−2=8. Грубая ошибка — использовать минус вместо тире или дефиса.

Многоточие

Многоточие указывает на пропуск в тексте, незаконченную мысль или интервал значений. В иврите, русском и английском языке многоточие обозначается тремя точками … Иногда многоточие используют одновременно с вопросительным или восклицательным знаком, тогда ставится знак и две точки: !.. или ?..

Неправильно писать две точки .. или более трех точек …. — это признак неграмотности.

Кавычки

В русском языке применяются кавычки-ёлочки « », а в цитате второго уровня — и ёлочки, и кавычки-лапки „ “.

Правильно: « — « » — » или « — „ “ — ».

В английском: ’такие "кавычки" в Англии’, а "такие ’кавычки’ в Америке".

Цитаты

Цитаты набирают обычным шрифтом в кавычках. Чтобы привлечь больше внимания, цитату можно оформить декоративной кавычкой. Такая кавычка может быть и ёлочкой и лапкой:

БУКВЫ

Прописными буквами можно набирать заголовки (как над этим абзацем) или короткие вставки-цитаты, но ни в коем случае не основной текст. Они «кричат» и привлекают внимание. Прописные буквы требуют разрядки, то есть нужно увеличивать межбуквенные пробелы.

Прописные без разрядки слипаются и затрудняют чтение

Строчные буквы разряжать нельзя:

Справа разреженный текст

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

Курсив можно использовать вместо кавычек, если в тексте нужно указать какое-то название (книги или произведения искусства) или слово на иностранном языке:
Картину «Постоянство памяти» Сальвадор Дали написал в 1931 г.
или
Картину Постоянство памяти Сальвадор Дали написал в 1931 г.

Жирное начертание нужно, чтобы привлечь внимание. Им можно набирать заголовки.

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

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

Списки

Список состоит из обобщающего абзаца и пунктов. Я расскажу о наиболее распространенных видах списков: нумерованых, упорядоченных и маркированных.

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

Арабскими цифрами с точкой обозначается список, если каждый элемент списка является законченным предложением:

Вкусная яичница в три шага:

  1. Положите кусочек сливочного масла в сковороду и поставьте её на большой огонь.
  2. Когда масло растает, вбейте яйцо и убавьте огонь на среднюю температуру.
  3. Дождитесь, когда белок полностью приготовится.

Кроме арабских цифр можно использовать римские цифры и прописные буквы.

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

Во внутренней области нашей Солнечной системы четыре планеты:
1) Меркурий,
2) Венера,
3) Земля,
4) Марс.

Выходя из дома не забудьте:
а) выключить все электроприборы;
б) взять с собой телефон и наушники;
в) закрыть дверь и забрать ключи из замка.

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

Компания Apple производит и продает:
 — ноутбуки,
—  телефоны,
 — настольные компьютеры,
— планшеты,
 — часы.

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

Компания Apple производит и продает:

  • ноутбуки,
  • телефоны,
  • настольные компьютеры,
  • планшеты,
  • часы.

Допускается использование и других символов (• ‣ ⁃ ∙ ◦), но не желательно — они отвлекают внимание от текста и засоряют его. Черный кружок (•) — маркер в английском языке.

Числа

В тексте числа можно писать прописью или в цифровой форме.

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

Также прописью следует писать простые числа: Я купила три мандарина.

Цифровой формой следует писать сложные числа и числа при единицах величин или денежных единицах: Ёлка стоила 10 345 рублей, но нам сделали скидку 50%.

Следует разделять числа на тысячные пробелом: 12 000.

Числа с разрядом в русском языке отделяются запятой: 1,25. В английском языке точкой: 1.25.

Дробные числа следует набирать на верхнюю и нижнюю линию шрифта: ½ площади, а не 1/2 площади, при этом не нужно писать слова часть или доля.

Интервал значений следует обозначать тире (—), коротким тире (—), троеточием (…), заком плюс-минус (±), предлогами от и до.

Тире в числах прописью: десять — пятнадцать метров.

Короткое тире в цифровой форме чисел: 2000—2017 года.

Троеточие при отрицательных значениях: температура −15… −20 °C.

Плюс-минус при допускаемых отклонениях: 20±3 штуки.

От и до для записи интервалов между числовыми значениями: от 30 до 70 литров.

Когда два числа прописью стоят в значение то ли то, то ли другое, между ними ставится дефис: За завтраком я съела две-три конфеты.

Номера телефонов

В номерах телефонов используются дефис и пробел.

Городские номера:
123-45-67
12-34-56
1-23-45
12-34

Номера с кодом города:
(123) 123-45-67
(12-34) 12-34-56
(123-45) 1-23-45
(12-34-56) 12-34

Номера мобильных телефонов:
8 123 123-45-67
+7 123 123-45-67

Российские номера телефонов за рубежом:
+7 123 123-45-67
+7 12-34 12-34-56
+7 123-45 1-23-45
+7 12-34-56 12-34
либо
(+7 123) 123-45-67
(+7 12-34) 12-34-56
(+7 123-45) 1-23-45
(+7 12-34-56) 12-34

Если номер телефона с удачным сочетанием цифр, то допускается их объединение в группы для более легкого запоминания: 222-3-222 или 222 3 222, 44-44-555 или 44 44 555.

Дата и время

Формы записи даты:
5 января 2017 года
5 янв. 2017 г.
05.01.2017 г.
05.01.17 г.
Израиль, 5 янв. 2017 г.
2016/17 учебный год
В 2010—2017 гг. (неправильно: 2010—17 гг., но верно с десятилетиями: 1970—80-е гг., либо 70—80-е гг.)
В датах в круглых скобках слово год опускается: (1933—1997), (1987)

Время:
В обозначении времени дня: Сейчас 11 часов 3 минуты 30 секунд.
В обозначении числа единиц времени: Прошло 6 ч 30 мин 45 с.
В цифровом виде между числами следует ставить двоеточие: 11:03:30 или 11:03. В английском языке можно ставить точку: 11.03.

Знаки в тексте

Неправильно:
(С) 2017 Tanya Sokolovskaya(R)

Правильно:
© 2017 Tanya Sokolovskaya®

Ссылки в тексте

Ссылки в тексте рекомендуется выделить цветом и подчеркнуть, либо просто подчекнуть, если цвет неуместен.

Денежные единицы

В русском языке знаки отделяются пробелом:
100 ₽
100 $
100 €
Разделитель классов — пробел или уменьшенный пробел: 3 000 ₽ (три тысячи рублей)
Разделитель десятичной дроби — запятая: 3,14 ₽ (три рубля четырнадцать копеек)
EUR, USD, руб. и р. пишутся после числа через пробел: 3 000 руб.

В английском языке знаки не отделяются пробелом:
₽100
$100
€100
Разделитель классов — запятая: $3,000 (три тысячи долларов)
Разделитель десятичной дроби — точка: $3.14 (три доллара четырнадцать центов)
EUR, USD, RUB пишутся перед числом через пробел: USD 3,000


Источники

«Справочник издателя и автора», Мильчин и Чельцова
«Облик книги» и «Образцы шрифтов», Чихольд
«Синтаксис современного русского языка», Валгина

 Нет комментариев    129   3 мес   Советы

Объекты внутри модуля

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

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

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

Эскизы макетов с использованием модульной сетки в 32 клетки. Иллюстрация из книги «Модульные системы в графическом дизайне» Йозефа Мюллер-Брокманна

Модуль и объекты внутри него

Роль объектов внутри модуля играют иллюстрации, заголовки, логотипы, цитаты, фактоиды, текстовые блоки, подписи, сноски, словом — все, что располагается в модуле.

Чтобы модуль визуально не развалился, значимые объекты внутри него должны тяготеть к углам, сторонам или визуальному центру

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

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

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

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

Посмотрите на рисунок ниже:

Прямоугольные объекты в модуле. Слабый вариант

Тут две ошибки:

1) Сверху и снизу есть незадействованное пространство — комозиция неустойчива:

Незадействованное пространство

2) Объекты разбросаны хаотично, как следствие образовалось много блоков отрицательного пространства. Композиция разваливается:

Отрицательное пространство

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

Хороший модуль

Объекты организованны между собой в прямоугольники и тяготеют к углам и сторонам модуля. Отрицательное пространство приняло более простую форму:

Отрицательное пространство хорошего модуля

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

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

Круг в модуле

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

Два равнозначных круга в модуле

Допустим, все объекты в модуле равнозначны:

Сейчас мы смотрим на макет и нам не за что зацепиться. Привлечь внимание можно с помощью цвета или начертания:

Также можно использовать другой шрифт или увеличить его размер:

Добавить значимый объект и воздух вокруг него:

Структура в модуле

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

Чтобы разглядывать страницу было комфортно, сбор макета всегда нужно начинать с самых значимых объектов и вести взор читателя от одного к другому. Людям свойственно считывать информацию по ходу письма: слева направо, сверху вниз. В иврито-язычной среде направление меняется в обратную сторону — справа налево, сверху вниз.

Одна колонка текста

Если текст набран в две колонки, то мы начнем чтение с левой колонки (или правой в тексте на иврите) сверху вниз, а продолжение будем искать наверху второй колонки.

Две колонки текста

Если колонок и строк больше, направить взгляд помогут расстояния между объектами по правилу близости:

Слева уменьшены горизонтальные расстояния, справа — вертикальные

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

Модули на практике

Разберем пример:

Макет состоит из модуля, внутри которого еще один модуль: сама страница и белый прямоугольник в ней. Посмотрите, как себя ведут объекты внутри своих модулей:

В главном модуле есть два значимых объекта:

  1. Заголовок «Time» — расположен в правом верхнем углу, при этом слева и снизу от него достаточно свободного пространства.
  2. Белый прямоугольник — в левом нижнем углу, с противоположных сторон он также дышит.

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

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

Еще один пример:

Мы видим три ключевых объекта: крупные красные иероглифы в правом верхнем углу, фигуру человека вдоль левой стороны модуля и текстовый блок на черной травяной плашке внизу. Все они расположены по углам или сторонам.

Или вот:

Значимые объекты распределены по углам и сторонам своих блоков, иллюстрации выглядят гармонично.

Проанализируйте разворот журнала:

Разворот состоит из двух модулей: левой и правой страницы.

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

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

Еще пример с кругом:

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

Часто круг используют для специальных предложений, скидок, акций:

Посмотрите, как ловко орудует композицией Ян Чихольд:

Он мастерски направляет взгляд читателя от одного объекта к другому.

А вот пример плохого распределения объектов в модуле:

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

Еще плохой пример:

Комментарии излишни.

Располагать значимые объекты сверху и снизу принято в операционных системах:

macOS Sierra

Меню на многих сайтах привязано к верху:

А вот пример расположения по центру:

Но подобная симметрия хороша единожды, иначе не избежать хаоса:

Меню сайта

Композиция из модулей

Теперь рассмотрим, как взаимодействуют между собой модули на страницах сайтов.

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

Посмотрите, как решили задачу дизайнеры BBC. Вдоль всей страницы идет чередование ритма: разные размеры модулей, иллюстраций и заголовков. Внимание читателя не рассеивается, и ему интересно изучать страницу:

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

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

Чем проще макет, тем легче его считывать. Динамика достигается за счет чередования ритмов. Посмотрите, как с длинной страницей справляется Apple:

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

 Нет комментариев    19   2016   Советы

Правило близости

Дизайнеры часто ставят дизайн на первое место и оправдывают неряшливость работ словами: «здесь такой творческий замысел» или «такая авторская задумка». Но дизайнер — не художник.

Дизайнер ≠ художник

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

В этом посте я расскажу о главном принципе восприятия информации и следующем из него правиле.

Немного теории

В основе правила лежит принцип близости в гештальт-психологии — расположенные рядом объекты воспринимаются вместе.

Принцип близости. Правая часть рисунка воспринимается как три столбика

Отсюда вывод:

Внутренние расстояния элемента должны быть меньше внешних.

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

Рассмотрим текстовый блок. Расстояние между словами является внутренним, а расстояние между строками (интерлиньяж) — внешним. Поэтому, согласно правилу, увеличим интерлиньяж:

Справа интерлиньяж увеличен. Блок выглядит аккуратнее и легче

Если добавить к тексту заголовок, то интерлиньяж заголовка — внешнее, должен быть больше, чем интерлиньяж текста — внутреннее. Помните, внешнее всегда больше внутреннего:

Блок с правильно выстроенными расстояниями считывается легче

Если этот блок положить на плашку, то ее поля будут играть роль внешнего, поэтому они должны быть больше интерлиньяжа заголовка:

Большие поля плашки придают блоку значимость

Теперь рассмотрим это на примерах.

В буквах и словах

Для примера напишем слово:

В слове внутреннее расстояние играет пространство внутри буквы, а внешнее — пространство до соседних букв. Сейчас правило близости нарушено. Буквам тесно, прочитать слово тяжело. А серединка буквы О напоминает дырку.

Увеличим межбуквенное расстояние так, чтобы визуально буква О перестала дырявить слово:

Появилась некая торжественность, буквы дышат, слово читается значительно легче.

Добавим еще два слова, но пробел между ними оставим стандартным:

Фраза читается тяжело, создается впечатление, что это одно длинное слово.

Увеличим пробелы между словами:

Уже лучше, продолжаем эксперимент. Заменим шрифт на более вытянутый:

Так как буквы ýже, расстояние внутри них стало меньше, значит можно уменьшить расстояние между самими буквами:

Готово! Фраза стала компактной, ясной и легко считываемой.

Так эта надпись выглядит на здании аэропорта:

Фото из сети

А вот как она могла бы выглядеть при соблюдении правила близости:

Не мешало бы и флаг выровнять по буквам, но не об этом речь

В текстовом блоке

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

Рассмотрим пример из абзаца с заголовком. Абзац и заголовок это два самостоятельных объекта. Роль внешнего для них играет расстояние от заголовка до первой строки. Роль внутреннего играет расстояние между строками — интерлиньяж текста.

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

Приведем его в порядок. Сперва увеличим расстояние от заголовка до текста:

Стало лучше. Заголовок приобрел независимость.

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

Готово.

В текстовом блоке с изображением

Теперь рассмотрим связку из текстового блока, заголовка и иллюстрации. Например, такой скриншот сайта:

Блоки состоят из трех элементов: картинка, заголовок и описание. Мы видим, что текстовые описания трех столбцов болтаются сами по себе, а их заголовки прилипли к картинкам. Это неправильно.

Тут работает еще один принцип из гештальт-психологии — принцип схожести:

Элементы, схожие по размеру, очертаниям, цвету или форме, имеют тенденцию восприниматься вместе.

Заголовок и текст имеют большую связь, нежели картинка и заголовок, поэтому следует описания подвинуть к своим заголовкам:

Вместе они создают единый блок, который вступает в связь с картинкой над ним.

На каждом уровне соблюдено правило близости:

Еще один пример. Разберём такой блок:

Было

Применяем правило близости: увеличиваем интерлиньяж текста и отодвигаем текст от заголовка. Увеличиваем поля со всех сторон. Убираем кнопку «Подробнее», а ее функцию переносим на заголовок. Стрелку, которая указывает в никуда, переносим к заголовку.

Стало

Элементов меньше, информативность не пострадала, блок стал чище и аккуратнее.

Еще пример:

Было

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

Уже лучше

Объединяем «Подробнее» с заголовком блока и увеличиваем иконку.

Стало

Блок стал компактнее и привлекательнее.

Вывод

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


Читайте подробнее:
О расстояниях между объектами и их восприятии в «Редактируем дизайном» Яна Уайта.
Правило внутреннего и внешнего в «Типографке и верстке» Горбунова.
Теория близости в ководстве Лебедева.
Об интерлиньяже в «Модульных системах» Мюллер-Брокманна, в «Облике книги» Чихольда, в «Живой типографике» Корольковой.
Разрядка прописных в «Образцах шрифтов» Чихольда.

 Нет комментариев    15   2016   Советы

Хорошие бесплатные фотобанки

Иногда для работы нужны красивые фотографии в высоком разрешении. Где их брать? Однозначно в фотобанках. Вот только цены у них кусачие, особенно если нужно 1—2 фото в месяц, а то и реже. На помощь приходят бесплатные фотобанки, но не все они могут похвастаться качественными фотографиями.

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

  1. Unsplash — отличные художественные фотографии. Можно подписаться на обновления — каждые 10 дней 10 новых фото.
  2. Picjumbo — не очень большой выбор, но фото очень хорошие и есть сортировка по категориям.
  3. Gratisography — множество креативных фотографий.
  4. Imcreator — много-много фотографий разбитых по категориям.
  5. Get refe — платный фотобанк, но есть раздел с бесплатными фотографиями в высоком разрешении. Кстати, фото можно покупать поштучно всего за 5$.
  6. New Old Stock — замечательные старинные фотографии.
  7. Splitshire — качественные фотографии с сортировкой по категориям.
  8. Superfamous — фотографии с невероятными видами!
  9. Pixabay — очень богатый банк. Кроме фотографий можно найти различные арты, в том числе векторы.
  10. Freepik — куда же без него. Почти полтора миллиона бaесплатных фото и векторов. В коммерческом использовании необходимо указывать их авторство.

На самом деле, авторство лучше указывать всегда. И не забывайте про пожертвования для банков, которыми вы регулярно пользуетесь. Мелочь, а создателям приятно!

 Нет комментариев    13   2015   Советы