Окт 10 2011

Создание контрастов на сайте

Категория: Это интересно!Максим Шайхалов @ 14:00

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

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

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

1. Размер

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

sizelarge thumb Создание контрастов на сайте

А когда требуется уменьшить значимость, это легко сделать шрифтом меньшего размера.

sizesmall thumb Создание контрастов на сайте

2. Шрифт

Добиться контраста можно и путем комбинирования разных шрифтов. Для этого чаще всего используют так называемые «веб-безопасные» шрифты. Есть два основных типа таких шрифтов – serif (шрифт с засечками) и sans-serif (без засечек). typeclass thumb Создание контрастов на сайте

Оба используются при создании контраста между текстовым блоком (sans-serif) и собственно заголовком (serif).

classcontrast thumb Создание контрастов на сайте

3. Цвет

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

faded thumb Создание контрастов на сайте

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

colorlink thumb Создание контрастов на сайте

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

colorgroup thumb Создание контрастов на сайте

Цветовые контрасты применяются и для выделения внутри текста отдельных абзацев  или определенных слов.

redcolor thumb Создание контрастов на сайте

Полностью нейтрализует важность текста или его частей комбинирование маленького размера шрифта с блеклыми цветами и светлым фоном.

leastimportant thumb Создание контрастов на сайте

4. Регистр

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

Для смены регистра используется CSS свойство – text-transform: uppercase.

casecontrast thumb Создание контрастов на сайте

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

uppercaseblock thumb Создание контрастов на сайте

5. Стиль

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

italic thumb Создание контрастов на сайте

Не стоит злоупотреблять подчеркиванием любого текста, если он не является ссылкой. Лучше воспользуйтесь курсивом (italic) для контраста.

underlinetext thumb Создание контрастов на сайте

6. Начертание

Полужирный шрифт (bold) – еще один способ контрастно выделить значимые части  текста.

bold thumb Создание контрастов на сайте

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

everythingbold thumb Создание контрастов на сайте

7. Пространство

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

Создать пространство можно несколькими приемами:
– разбивка на блоки (с использованием элементов margin или padding для создания отступов);
– разбивка на параграфы (путем создания промежутков между блоками текста);
– межбуквенные (letter-spacing) и межстрочные (line-height) интервалы;
– создание абзацев (при работе со списками и/или цитатами).

А теперь попробуем соединить все описанные методы на конкретном примере.

typographiccontrastsm thumb Создание контрастов на сайте

via Typographic Contrast and Flow.

Нашел, где обменять LiqPay на AlertPay. Кому надо, то велком по ссылке: www.bestchange.ru/liqpay-rur-to-alertpay.html Также на их сайте был обмен электронных денег.

Теги: , ,


Июл 01 2011

Дизайнерские новинки от Google

Категория: Это интересно!Максим Шайхалов @ 13:00

googlelogoplus0fbe8f0119f4a902429a5991af5db563 thumb Дизайнерские новинки от GoogleНи для кого не секрет, что гугл — одна из самых крупных и уважаемых компаний в Сети. Однако дизайн сервисов гугла оставляет желать лучшего. Стоит взглянуть хотя бы на страницу выдачи. Зачем они добавили эту ужасающую колонку слева? Раньше все было гораздо проще и приятней.

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

Читать дальше →

Теги: , , ,


Янв 06 2011

FAQ для начинающего дизайнера

Категория: Это интересно!Максим Шайхалов @ 5:00

FAQ thumb FAQ для начинающего дизайнера

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

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

Читать дальше →

Теги: , , ,


Ноя 22 2010

20 популярных дизайнерских инструментов

Категория: Это интересно!Максим Шайхалов @ 6:00

design tool thumb 20 популярных дизайнерских инструментов

Интересно, какие являются наиболее популярными и сколько человек ими пользуется? Мне тоже!

На просторах интернета я нашел интересную инфографику с изображением 20 самых популярных дизайнерских инструментов. Инфографика рассчитана с использованием «магической» формулы, а исходные данные взяты из трех различных популярных веб-сайтов.

Была использована статистика с Software Informer, Wakoopa и iUseThis. Для подсчета числа твитов в минуту был использован Twitter Tussle.

Работа была сделана Ricardo Cavolo и переведена мной специально для блога.

Удивлены результатами? Некоторые инструменты, которые мы ожидали увидеть в Top 20 на самом деле внизу...

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

Читать дальше →

Теги: , , ,


Сен 12 2010

Что такое минимализм?

Категория: Это интересно!Максим Шайхалов @ 6:00

thumb Что такое минимализм? vs.

Я постоянно слышу термин «минимализм» и «минималистический». В мире дизайна есть разные способы, чтобы описать дизайн, простой, ясный и удобный. Однако все используют термин — «минимализм». Если вы собираетесь использовать это слово, то по крайней мере потрудитесь понять истинное значение и использовать его правильно. Первое, что нужно понимать, что простота — это не минимализм. Они похожи, но они не то же самое.

Читать дальше →

Теги: , ,


Следующая страница →