Background для сайта: Как сделать фон для сайта?

Как подобрать лучшие цвета для сайта

25 мая 2014      Интернет-маркетинг, Контент, Полезные советы, Продвижение сайтов

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

Выберите лучшие цвета для сайта, и ваши посылы обретут силу и ясность.

Вот основные значения в психологии цвета.

Первичные цвета:

• красный – привлекает внимание;
• желтый – несет бодрость и веселье, надежду и оптимизм;
• синий – цвет честности и надежности.

Вторичные:

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

Третичные:

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

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

• Используйте 2-3 цвета в оформлении сайта, не больше. Для усиления можно использовать оттенки основных цветов.

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

Только не переборщите с контрастами. Все цветовые сочетания должны быть легкими для восприятия!

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

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

Детям нравятся более яркие и простые цвета, чем взрослым, подростки выбирают черный или сложные цвета. Мужчины предпочитают синий, а женщины – красный, желтый, оранжевый. Хорошо образованные люди любят третичные цвета с необычными названиями.

Люди в тропических странах выбирают яркие и теплые цвета. Те, кто живет в странах с  более холодным климатом – холодные.

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

• Красный – цвет удачи и празднования в Китае, но цвет траура в Южной Африке.
• Желтый – священный и благоприятный в Китае и Индии, однако цвет траура в Египте.
• Зеленый связан с богатством и престижем в Саудовской Аравии, но традиционно запрещен в Индонезии.
• Голубой во всем мире считается цветом для новорожденных мальчиков, розовый – для девочек, а в Бельгии наоборот.

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

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

/Автор статьи: Юлия Мураева/

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

* В случае упоминания в тексте социальных сетей Facebook, Instagram, уведомляем: деятельность компании Meta (Facebook, Instagram) признана экстремистской и на территории РФ запрещена.

Выбираем фон для сайта: фото или видео?

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

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

Для начала определим плюсы и минусы видео в качестве фона для сайта.

Плюсы и минусы видео-фона для сайта

Плюсы видео-фона

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

Brand & interactive Design Team WAAAC

Advertising Agency Paradowski

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

NYC Investment Firm Bienville Capital Management

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

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

Life According to Sam Movie

Jack The Giant Slayer Movie

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

The Music Bed

Production House Profilm Portfolio Site

Прежде чем перейти к недостатками видео-фона, насладиетесь действительно достойными примерами применения этого тренда:

Industrial Website of the Company that Builds Rail

Coffee and Tea BrandPromotional Website

Tyoulip Sisters Leather Handbags

LeigensPiscines

Хороший сайт с различными видео на каждой странице.

Laquadra Brand Movies

Шикарный сайт со множеством полноэкранных видео.

Names Not Numbers

Сайт-провокация, который дает вам 60 секунд для приятия решения.

Eagle Adventure Tours

Сайт, который показывает скорость и просто не может быть спроектирован иначе.

Минусы видео-фона

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

Passion for Sochi

Можно вздремнуть пока загружается сайт.

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

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

Плюсы и минусы использования изображений как фона

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

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

MeCre Mechanical Creatures

Day Dream Designs Creative Agency

Farmerhaus Restaurant Website

Colette Malouf Online Shop

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

University of San Diego – School of Business Administration

Prestigious Italian Furnishing CompanyGiellesse

Florist’s Website

Cars Website

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

GDC Company Website

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

Electronic Music ArtistHenry Saiz

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

Charles-Axel Pauwels Design Portfolio

Software Engineering Website

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

Sam Docker’s Portfolio Site

Photography Portfolio Website Design

Минусы использования фоновых изображений

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

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

Chicago Shirts

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

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

Автор статьи Julia Blake

Перевод — Дежурка

Смотрите также:

• 5 дизайнерских техник по работе с эмоциями
• Фоновые изображения в веб-дизайне: советы и примеры
• Использование черно-белых фото в веб-дизайне

5 способов получить высококачественные фоновые изображения для вашего веб-сайта WordPress

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

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

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

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

В любом случае идеальное изображение может стать дополнительным бонусом для удержания посетителей.

1. Архив общественного достояния

Архив общественного достояния больше не доступен.

2. Photobucket

Когда дело доходит до обширной коллекции бесплатных изображений, Photobucket является одним из самых популярных мест для посещения.

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

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

3. FreeImages.com

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

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

4. Pixabay

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

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

5. Создание собственного

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

Например, бесплатный редактор Pixlr напоминает Photoshop с множеством инструментов. Эти приложения могут помочь вам превратить фотографии со смартфона в потрясающие фоновые изображения WordPress.

Добавьте немного бликов на свой сайт

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

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

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

Фон веб-сайта — Etsy.de

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

Воспользуйтесь всеми преимуществами нашего сайта, включив JavaScript.