9 принципов хорошего дизайна (Выпуск 6)

По мотивам http://psdtuts.com/designing-tutorials/9-essential-principles-for-good-web-design/

1. Приоритетность (направляющая взгляд).
   Хороший веб-дизайн, как никакой другой дизайн, ориентирован на эффективное приподнесение информации. Главный инструмент в арсенале веб-дизайнера - приоритетность. При хорошем дизайне, пользователя ведёт по экрану дизайнер. И речь здесь идёт о том, каким визуальным весом обладают различные части дизайна.
   
   Самый простой пример приоритетности, который можно увидеть в большинстве сайтов, - это логотип. Обычно логотип достаточно большой и помещается именно в то место, которое психологические исследования обозначили, как первое, на которое люди смотрят первым делом на веб-странице, - левый верхний угол. И если вы поместите логотип вашего сайта в левый верхний угол, то поступите правильно, ибо пользователь вашего сайта хочет всегда чётко знать, где он находится.
   
   Но приоритетность - это более широкое понятие. Вы должны уметь провести пользователя через последовательность шагов. Например, вы хотите, чтобы пользователь с логотипа переместился на краткое описание сайта, потом на картинку, потом на текст, затем на навигационное меню и боковой текст, выражающий вторичную идею сайта. То, на что посмотрит пользователь, зависит от вас, как от веб-дизайнера.
   
   Для достижения приоритетности, в вашем распорядении множество инструментов:
   


• Расположение информационных блоков на странице непосредственным образов воздействует на порядок их просмотра.


• Цвет: жирные и тонкие шрифты - простой способ указать пользователю, на что смотреть.


• Контраст: контрастные вещи выделяются, а однотипные подразумевают вторичность.


• Размер: большое имеет преимущество над маленьким (если только вы не решили сделать ВСЁ большим, а с помощью маленького - лишь подчёркивать контрастность).


• Элементы дизайна: если на странице присутствует гигантская стрелка, указываюшая куда-то, угадайте, куда посмотрить пользователь.


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


• Пространство между строками
  Пространство между строками влияет на читаемость текста. Слишком мало - и вы легко можете перскакивать с одной строчки на другую, даже когда это не нужно. Слишком много - и после прочтения строчки взгляду будет нелегко найти следующую строку. Истина, как всегда, где-то посредине. Расстояние между строками в CSS контролируется параметром line-height. И, честно говоря, значение по умолчанию для этого параметра мне кажется маловатым.


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


• Пространство белого цвета
  Говоря пространство белого цвета, я не имею в виду #ffffff. Этот аспект касается прежде всего пустого пространства на странице (негативное пространство, иными словами). Пространство белого цвета используется для придания странице баланса, контраста и пропорций.


3. Навигация
   Пользователь всегда должен знать своё расположение на сайте. Для создания навигации примите во внимание два аспекта:
   


• Где я сейчас? Кнопки навигации должны располагаться в видимом месте (обычно в верзней панели страницы). Они должны выглядеть, как кнопки навигации, и надписи на них должны быть легко читаемыми. Навигация, кроме того, должна быть со смыслом. Например, если вы используете выпадающее меню, то следите за тем, чтобы динамическая часть не выпала за границы экрана, потеряв часть навигации. А если вы ещё и будете изменять цвет пункта меню по приближению к нему мышки, пользователь будет рад ещё больше.


• Куда я могу пойти? Существует множество способов сообщить пользователю его местоположение на сайте. Поэтому просто непростительно не сделать этого. На небольших сайтах это могут быть просто большие заголовки. На больших сайтах вы можете отобразить навигационную цепочку в верхней части страницы.
  
4. Рентабельность дизайна
   Жизнь дизайнера упростилась с изобретением CSS. Но всё ещё важными остаются следующие аспекты:
   


• Это вообще можно сделать? Вы можете выбрать расчудесный шрифт для содержимого страницы, но это стандартный HTML шрифт? Ваш дизайн может чудесно выглядеть приширине 1100 пикселов, но эта ширина почти всегда является причиной горизонтальной прокрутки, которая не нравится пользователям.


• Что случится, если уменьшить окошко браузера? Что случится с повторяющимися фоновыми картинками? Как выровняется текст: по центру или слева?


• Вы имеете дело с чем-то технически трудным? Даже с CSS некоторые вещи, например, вертикальное выравнивание, могут быть достаточно трудоёмкими.


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


• Можно ли сократить работу для большого сайта? Можно, конечно, любую кнопочку иллюстрировать картинкой. А можно акцентировать контрастность при помощи CSS, хотя это и не будет так ярко (а может, это и к лучшему).


5. Типография
   Текст - это самый распространнёный элемент на странице. Поэтому обратим внимание на следующие аспекты:
   


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


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


• Пространство, как уже обсуждалось чуть выше, очень важно не только между строками, но и вообще между любыми элементами страницы.


• Длина строки - здесь нету каких-то жёстких правил. Запомните лишь, что чем длиннее строка, тем сложнее она читается. Посмотрите, в книгах ширина текста где-то 12-15 см. В газетах текст разбивается на колонки.


• Цвет - низкоконтрастный цвет текста - это модно и привлекательно, но трудночитаемо.


• Абзацы - выравнивание текста по обеим сторонам - это красиво и удобно для чтения. Но автовыравнивание иногда создаёт нелепые пробелы между словами. Редактируйте ваш текст так, чтобы он удачно вписывался в отводимое ему пространство.


6. Юзабилити
   По-русски это модное слово переводится как "удобство использования". Веб-дизайн - это не только красивые картинки, но и эффективность подачи информации, а также интерактивность. Это означает, что вы должны сделать ваш сайт используемым. Мы уже обсудили некоторые аспекты удобства использования: навигация, приоритетность, текст. Вот ещё три важных аспекта:
   


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


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


• Побудьте в шкуре пользователя. Что пользователь может захотеть увидеть на сайте? Куда он захочет перейти? Какие операции он захочет выполнить?


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


8. Ясность (резкость)
   Поддержание ясности и резкости дизайна - супер-важно. И речь здесь идёт о пикселях, в том числе и на картинках. Подредактируйте картинки в фотошопе, сделайте их резче и контрастнее.


9. Непротиворечивость
   Непротиворечивость означает, что всё должно быть согласовано между собой. Размеры заголовков, шрифты, цветовая гамма, кнопки, пробелы, элементы дизайна, стиль иллюстраций... Всё должно представлять собой единую когерентную тему как между всеми страницами, так и на отдельно взятой странице.
   
   Даже если это плохой дизайн, сделайте его непротиворечивым. Противоречивый дизайн - это как опечатки, портит сразу всё впечатление.
   
   Самый просто способ сделать дизайн непротиворечивым - заранее обдумать его и придерживаться задумки. Хотя для процесса разработки больших сайтов этот совет и не подходит. Поэтому скажу так: сделайте единый CSS стиль для всего сайта и примените его на всех страницах. Очень важно определит непротиворечивые стили для тэгов h1 и р так, чтобы вам не приходилось мучительно долго вспоминать стили их специфических классов.