Нарушение правил: «Как эффектно нарушить правила хорошего веб-дизайна»

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

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

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

Ниже приведены основные правила хорошего веб-дизайна и примеры их нарушения.

Расположение элементов на странице и дизайн сайта должны быть одинаковы на всех страницах

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

Чтобы вы лучше уяснили, что я имею в виду, приведу наглядный пример: сайт «Jason Santa Maria»

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

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

Вот лишь некоторые страницы, с этого сайта. Круто, не правда ли?

Каждая страница с новым дизайном

У каждой страницы новый дизайн

У каждой страницы новый дизайн

Новый дизайн для каждой страницы

Не помещайте важную информацию ниже «сгиба», или так называемого «первого экрана»

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

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

Важная информация ниже "первого экрана"

Не используйте слишком много разных шрифтов

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

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

20 разных шрифтов на странице

Не делайте фон слишком ярким

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

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

Яркий цвет фона

Не давайте слишком много информации на одной странице

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

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

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

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

Предоставление информации на одной странице

Сделайте вес вашей страницы как можно меньше, не используйте большие фоновые изображения

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

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

Большое фоновое изображение

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

По мотивам: noupe.com

27.05.2010
top


blog comments powered by Disqus
Рубрики
3 месяца отличного хостинга бесплатно
Система Orphus