Главная > Web-дизайн > Стили и направления веб-дизайна – Оригинальный фон

Стили и направления веб-дизайна – Оригинальный фон


27 августа 2012, 13:15. Разместил: Design FactoRy
Верно угадав наиболее выигрышный для вашего фона стиль, вы можете задать тон оформления всего веб-сайта. Мы с вами рассмотрим ряд очень показательных примеров успешного решения этой задачи, а также текущие модные тенденции в оформлении фона веб-страниц, среди которых использование крупных изображений, ярких цветов и броских орнаментов.

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

Стили и направления веб-дизайна – Оригинальный фон

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

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

Какой фон нам кажется хорошим?

Стили и направления веб-дизайна – Оригинальный фон
перейти на сайт


Нет твёрдых правил определения фона, наиболее пригодного для вашего веб-сайта, но есть несколько обуславливающих его выбор факторов.

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

Как не отставать от моды?

Стили и направления веб-дизайна – Оригинальный фон
перейти на сайт

Стили и направления веб-дизайна – Оригинальный фон
перейти на сайт

Стили и направления веб-дизайна – Оригинальный фон
перейти на сайт

Стили и направления веб-дизайна – Оригинальный фон
перейти на сайт

Стили и направления веб-дизайна – Оригинальный фон
перейти на сайт


Модные тенденции в веб-дизайне меняются так же, как мода на одежду и причёски. Особенно, это касается оформления фона.

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

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

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

Отчётливые изображения

Стили и направления веб-дизайна – Оригинальный фон
перейти на сайт

Стили и направления веб-дизайна – Оригинальный фон
перейти на сайт

Стили и направления веб-дизайна – Оригинальный фон
перейти на сайт

Стили и направления веб-дизайна – Оригинальный фон
перейти на сайт

Стили и направления веб-дизайна – Оригинальный фон
перейти на сайт

Стили и направления веб-дизайна – Оригинальный фон
перейти на сайт


Вообще-то, резкие, отчётливые изображения никогда не выходят из моды, варьируется лишь манера их подачи. Они всё чаще используются непосредственно в качестве фона, а не фото-изображений на другом фоне. Выбирайте броские цвета или выразительные лица - как на сайте Рори Макилроя (Rory McIlroy).

Набирают популярность и иллюстрации. Опять же, здесь велика роль раскраски, как и качественных характеристик рисунка.

Размытые или растушёванные изображения

Стили и направления веб-дизайна – Оригинальный фон
перейти на сайт

Стили и направления веб-дизайна – Оригинальный фон
перейти на сайт

Стили и направления веб-дизайна – Оригинальный фон
перейти на сайт

Стили и направления веб-дизайна – Оригинальный фон
перейти на сайт

Стили и направления веб-дизайна – Оригинальный фон
перейти на сайт


Применение размытых или растушёванных изображений требует осторожности. Сработать этот приём может лишь при наличии отчётливого исходного изображения. (Из картинки низкого качества в данном случае вряд ли выйдет что-то путное.)

Размывайте или растушёвывайте изображения сами, чётко представляя себе конечную цель. Иногда сильнее впечатляет едва различимый образ, как гора на сайте Humaan, а порой вполне достаточно лишь слегка размыть картинку (сайт обмена изображениями “We Make”).

Сплошная заливка цветом

Стили и направления веб-дизайна – Оригинальный фон
перейти на сайт

Стили и направления веб-дизайна – Оригинальный фон
перейти на сайт

Стили и направления веб-дизайна – Оригинальный фон
перейти на сайт

Стили и направления веб-дизайна – Оригинальный фон
перейти на сайт


Яркие краски правят бал, и мимо них не пройти. Большинство дизайнеров выбирают наиболее простой способ придания дизайну глубины и контрастности – за счёт игры цвета. (Сочетание кислотно-зелёного с чёрным и белым на странице mediumrare особенно впечатляет.)

Чёрный или белый фон

Стили и направления веб-дизайна – Оригинальный фон
перейти на сайт

Стили и направления веб-дизайна – Оригинальный фон
перейти на сайт

Стили и направления веб-дизайна – Оригинальный фон
перейти на сайт

Стили и направления веб-дизайна – Оригинальный фон
перейти на сайт


Чёрный или белый фон – это классика, причём, он прост в использовании. С ним вам легко обеспечить контрастность шрифта (даже мелкого), и он никогда не устареет.

Добавьте белому или чёрному фону модного шика за счёт лёгкой объёмности. Сайту Foundry Co. дополнительную выразительность придают линейные штрихи, а страницу Designing Monsters оживляет яркий цветовой акцент в противовес самому тёмному из оттенков.

Узоры и текстуры

Стили и направления веб-дизайна – Оригинальный фон
перейти на сайт

Стили и направления веб-дизайна – Оригинальный фон
перейти на сайт

Стили и направления веб-дизайна – Оригинальный фон
перейти на сайт

Стили и направления веб-дизайна – Оригинальный фон
перейти на сайт

Стили и направления веб-дизайна – Оригинальный фон
перейти на сайт

Стили и направления веб-дизайна – Оригинальный фон
перейти на сайт

Стили и направления веб-дизайна – Оригинальный фон
перейти на сайт


Смелее используйте узорный фон, не бойтесь. Крупные, повторяющиеся мотивы сегодня повсюду. Лёгкие текстуры помогут вашему дизайну выглядеть реалистичнее.

Здесь главное – приглушить контрастность. Обратите внимание на мягкость фиолетовых переливов на сайте Alfred, где диагональный узор можно увидеть, лишь внимательно приглядевшись (заметив неоднородность фона).

Заключение

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

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