emo - современный интернет, веб-разработка и графический дизайн глазами профессионала

01
11/2006

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

перейти к комментариям (15)

1) Создайте визуальную иерархию элементов и следуйте ей.

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

Говоря более простым языком, когда вы создаете сайт, то заголовки обычно имеют больший размер шрифта, чем текстовые параграфы. Подзаголовки отличаются от текста и заголовком настолько, что можно глядя на них сравнить и определить иерархию этих элементов – заголовок, подзаголовок, текст и так далее. В XHTML, к примеру, для отображения заголовков используется иерархический ряд h1…h6 – где h1 имеет наибольший вес и находится во главе иерархии заголовков.

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

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

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

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

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

2) Дизайн должен течь. Стремитесь к гармонии.

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

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

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

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

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

3) Избегайте множественных фокусных точек.

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

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

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

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

Таким образом, общее количество фокальных точек может колебаться от 3 до 10 и даже более. Разумным считается ограничивать их до 5-ти, при этом действительно сильных точек не должно быть более 2-х. И лучше если в пределах одной экранной страницы их будет не больше трёх.

4) Цвета это кровь дизайна, не мешайте их как попало.

Хороший цвет может все спасти, плохой – все испортить. Во власти цвета находиться многое – настроение, эмоции, чувства.

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

Если вы не уверены в собственных силах, работая с цветом лучше вооружиться здоровым минимализмом. Для подбора цветовой палитры воспользуйтесь соответствующим программным обеспечением, например, Color Schemer Studio или Color Wheel Pro.

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

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

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

Удачного вам дизайна!

RS-232 в Ethernet | май аппарат магнитер амт 02 ветер | реферат стиральная ретона цивилизация | сантехника сантехник марьино | Вакцинация животных, скорая ветпомощь, стрижка животных на дому | Канальные, настенные, оконные кондиционеры lg | капельный полив | угловые шкафы купе заказ | борьба с мышами, крысами и тараканами, насекомыми, кротами, блохами и клопами | цена путевки в ATLANTA | Лучшее такси Киева