2019

Красивые фоны — это не просто круто иметь на сайте; Фон веб-сайта — одна из важнейших частей UX-дизайна веб-сайта.

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

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

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

Передовой опыт

Выберите правильное фоновое изображение для веб-сайта

Для веб-фона следует выбирать только высококачественные изображения (300 dpi). Имейте в виду, что вам нужно произвести сильное первое впечатление, если вы хотите, чтобы пользователи оставались на сайте дольше всего на несколько секунд.

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

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

Сжатие

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

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

Если вы сохраняете изображения для Интернета в Photoshop, вы можете использовать параметр «Сохранить для Интернета», который автоматически сжимает изображение, чтобы оно соответствовало Интернету. Если вы не являетесь пользователем Photoshop, вы можете использовать один из этих бесплатных компрессоров изображений: Compressor.io, Kraken, TinyPNG или любой другой, который вам нравится, если уж на то пошло.

Выберите правильное название для изображений

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

Используйте релевантные ключевые слова и всегда ставьте самое важное ключевое слово первым.

Вместо «img1034.jpg» изображение выше будет работать намного лучше с именем «лабрадор-ретривер-диета-упражнение».jpg», где «лабрадор-ретривер» является наиболее важным термином, а «диета» и «упражнения» являются дополнительными дескрипторами.

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

Используйте цвет пользовательского интерфейса с умом

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

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

Правильно расположите фоновые изображения веб-сайта

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

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

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

Фоновые изображения должны быть адаптивными

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

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

Скачать бесплатные картинки

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

Pixabay

Если вы ищете бесплатные фоны, Pixabay должен быть одним из первых мест, которые вы должны посетить. Вы сможете выбрать из более чем 420 000 красивых изображений, которые идеально адаптируются к вашему фону.

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

Unsplash

Unsplash — отличный источник потрясающих фонов и фоновых узоров. Вы даже можете подписаться на получение 10 новых изображений, доставляемых на ваш почтовый ящик каждые десять дней. Здесь вы можете получить бесплатное фоновое изображение в виде бесплатного png или бесплатного jpg, которое затем вы можете изменять, копировать и распространять любым удобным для вас способом, поскольку изображения Unsplash подпадают под действие лицензии Creative Commons Zero (CC0).Однако, если вы хотите отблагодарить сообщество, вы всегда можете отдать должное там, где это необходимо.

StockSnap

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

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

Flickr

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

Например, изображения в разделе «Фотографии для бесплатного использования» доступны для всех, и от вас не требуется указывать авторство.Однако не все изображения, найденные на Flick, можно использовать таким образом.

Pexels

Заключение

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

Albert Ślusarczyk

Как один из создателей Be Theme, я твердо верю в тщательность и терпение при проектировании.Я вкладываю свою энергию, время и знания в совершенствование темы для наших 230 000+ клиентов.

18 Веб-сайты с классным узорчатым фоном

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

Цветочный узор

Белые цветы на простом горчичном фоне — это не только мило, но и романтично. Это придает сайту успокаивающую атмосферу. Это хорошая идея представить кафе довольно хорошо.

Cafe Friday

Линии и базовые формы

Это базовые рисунки и узоры, но они придают веб-сайту действительно острый и минималистичный вид.

Letters, Inc.

Точечные каракули

Чтобы заполнить пустое пространство между каракулями, дизайнер использовал спиралевидные точки. Это не слишком подавляет, но объединяет произведение искусства.

Mony’s

Vintage Graphic Look

Сочетание темно-бордового и золотого всегда придает дизайну винтажный вид. Это восхитительный способ представить бренд мороженого.

Мороженое из сладкой магнолии

Крутой шаблон с пузырьками для пузырей

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

Limonades

Узоры в стиле комиксов

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

Jarritos

Красочный и простой фон

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

Cultural Solutions UK

Фон с рисунком дерева

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

Sheldon Farm Baskets

Черно-белые линии

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

Echo UK

Милый фон персонажа-октонавта

Почему бы не создать шаблон с милыми персонажами-октонавтами?

Octonauts

Рыбный фон для рыбного ресторана

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

Ресторан на пирсе Канеанг

Узор из квадратов

Это очень простой дизайн, ностальгирующий по 90-м годам.

Мариано Паскуаль

Черное, белое и звезды

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

Источник изображения: Eat Genesis

Eat Genesis

3D Hues

Контраст освещения на заднем плане придает ему трехмерный вид.

Год Греты

3D-фон с лесом

Хотя это и не шаблон, 3D-фон карты с изображением леса — явный признак изобретательности.

Тропический лес

Шаблон в стиле блокнота

Черно-белый эскиз на бумажном фоне с сеткой.

Они делают приложения

Представьте себе звуковые волны

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

Лента музыки

Крутые неоновые каракули

Неоновые цвета могут сделать любой рисунок милым и уникальным.

Fixate

Читайте также: Узнайте о новейших возможностях искусственного интеллекта Photoshop

Демонстрация бесплатных фонов для веб-сайтов

Графика • Ресурсы Андриан Валяну • 30 мая 2012 г. • 4 минуты ПРОЧИТАТЬ

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

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

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

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

Подробнее о дизайне фонов

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

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

Онлайн-конструктор шаблонов электронной почты

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

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

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

Несмотря на то, что список креативных фоновых идей довольно длинный, вы все равно можете попытаться выделить те из них, которые заслуживают более пристального внимания. Например, вы можете проверить Priid, Lift, Drupalcon DC, Церковь сообщества Eastpoint, Fleming Steele, Moods of Norway, Small Studio, Shipment App, 365 Days of Astronomy и Museum of Science and Industry, чтобы получить вдохновение.

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

Если вы хотите продолжить изучение дизайна фона, взглянув еще на несколько примеров, вам также стоит попробовать Ecoki iPhone Reader, Nanda & Juan Diego, The Kennedys, Inservio Web Solutions.

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

Бесплатный дизайн фонов для веб-сайтов

Бесплатные веб-фоны

20 бесшовных шаблонов сетки Photoshop

Красивая текстура дерева 2 PSD

Льняная текстура Apple iOS

Темная стена

Климпек

Алмазная обивка

Текстура

Серый цветочный

Нравится то, что вы читаете? Подпишитесь на наши главные новости.

фонов для больших веб-сайтов: что можно и чего нельзя делать

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

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

Стили большого фона

По сути, существует много разных стилей, но наиболее часто используемые стили на веб-сайтах:

* Фотографии в качестве фона
* Графика и иллюстрации в качестве фона
* Анимация в качестве фона

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

Распространенные ошибки при использовании больших фонов

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

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

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

Изображения расположены по центру, мозаично или масштабированы

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

Давайте посмотрим на изображение веб-сайта ниже. Этот снимок экрана был создан при разрешении экрана 1024×768:

Как видите, при таком разрешении в дизайне нет ничего плохого, однако давайте посмотрим, как это выглядит при разрешении 1680×1050:

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

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

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

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

body {
background: url(«images/sample.jpg») repeat-x;
}

Приведенный выше код вставляет изображение sample.jpg в качестве фона в элемент body и повторяет его по горизонтали. Атрибут repeat-x задает повтор изображения по оси X. Вы можете использовать следующие стили повторения:

* repeat-x для повторения изображения по горизонтали
* repeat-y для повторения изображения по вертикали
* repeat-xy для повторения по горизонтали и по вертикали изображение

Это следующие примеры кода CSS для каждого метода:

body {
background: url(«images/sample.jpg») повтор-x;
}

body {
background: url(«images/sample.jpg») repeat-y;
}

body {
background: url(«images/sample. jpg») repeat-xy;
}

body {
background: url(«images/sample.jpg») no-repeat;
}

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

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

Чтобы создать бесшовный фон, веб-дизайнер должен обрезать изображение таким образом, чтобы левый край сливался с правым краем, а верхний край сливался с нижним краем, как на изображении ниже:

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

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

Наиболее широко используемые форматы изображений:

* GIF – формат графического изображения
* Jpeg – совместная группа экспертов по изображениям
* PNG – портативная сетевая графика

GIF — это формат изображения, оптимизированный для простой графики, такой как текст или простые формы, круги, линии и т. д. Он не подходит для фотографий. Например:

Образец GIF , размер изображения: 3,3 КБ

Образец Jpeg , размер изображения: 13,5 КБ

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

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

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

Влияние большого фона на пропускную способность и производительность сайта

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

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

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

Давайте посмотрим на следующий пример:

Вот отчет об использовании этого веб-сайта:

Имеется 12 запросов и всего загружено 627 КБ . Это означает, что каждый раз, когда кто-то посещает веб-сайт, загружается 627 КБ, что увеличивает общую пропускную способность веб-сайта. Если веб-сайт посещают в среднем 50 посетителей в день, это составит 31 350 МБ в день.

С помощью плагина Firebug для Firefox вы можете увидеть запросы вашего веб-сайта и получить представление о том, как его оптимизировать.

Советы и рекомендации

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

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

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

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

Очень важно оптимизировать фон с помощью таких методов, как спрайты CSS.

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

Как видите, фото специально сделано маленьким, что дополняет общий дизайн.

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

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

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