принципы дизайна и его основные виды
Исследования показывают, что первое впечатление пользователя о сайте на 94% связано с дизайном. Фон играет при этом важное значение — это первое, что попадается на глаза пользователю, даже если фон — не полноэкранное изображение, а обычный белый цвет. С помощью фона дизайнер завершает концепцию, задает тон основным элементам. В этой статье мы поговорим о его основных видах, приведем примеры и рассмотрим основные принципы при выборе фона для сайта.
Виды фонов для сайта
Сайтов существует множество, но все сайты можно классифицировать по виду фона. Это — неотъемлемый элемент любого ресурса, поэтому так или иначе сайт имеет общие характеристики с другими сайтами. Рассмотрим основные типы фонов и определим, когда лучше использовать каждый из них.
Белый классический фон
Классика — контент на фоне белого цвета. Такой подход применяет большинство сайтов, особенно в последние годы, когда в трендах — стили минимализм и плоский дизайн. Данные стили подразумевают легкость в восприятии, использование простых элементов и избегают излишнего «нагромождения» на странице. Больше об этих стилях можно прочитать здесь (минимализм) и здесь (плоский дизайн).
Мы также на своем сайте и в своих работах часто используем белый фон:
Почему белый фон настолько популярен у дизайнеров?
- Легкость в восприятии. Как правило, использование белого фона предполагает легкую читабельность текста, из-за контраста все элементы хорошо видно, они не сливаются с фоном. Используются даже элементы белого цвета — их выделяют с помощью тени и других эффектов.
- Универсальность. Можно использовать элементы любой цветовой гаммы и стиля: белый цвет универсален и подходит под любую тематику.
- Простота. С белым фоном можно сделать относительно простой дизайн, который в то же время будет стильно смотреться и не отвлекать пользователей от главной цели — приобрести товар или услугу. Также использование белого фона не имеет никаких сложностей в реализации, в сравнении, например, с видеобэкраундом.
- Все внимание на элементы. Белый цвет не отвлекает внимание пользователя и позволяет сосредоточить его поведение на более важных вещах, чем красивый дизайн — прилечь внимание к призывам к действию, важной информации, способу оформления заказа, популярным товарам и прочее.
В целом, белый фон можно использовать для любых проектов. Чаще всего его предпочитают применять при создании дизайна интернет-магазинов и информационных ресурсов, чтобы не отвлекать пользователя дополнительными декоративными элементами и не мешать восприятию контента:
Однотонный цветной фон
Если дизайнер хочет внести разнообразие в макет, подчеркнуть индивидуальность компании или просто создать страницу в определенной цветовой гамме, он использует однотонный цветной фон. Например, на сайте компании Honor используется черный цвет, дополняют цветовую гамму градиентная типографика и изображения, а также шапка белого цвета:
Что дает такой фон дизайнеру? Во-первых, цветной фон — всегда большая нагрузка на внимание пользователя, поэтому необходимо с осторожностью использовать яркие цвета и стараться выделить контентную часть. Нужно, чтобы фон и блоки с контентом дополняли друг друга, а не перетягивали на себя взгляд. Также нужно обратить особое внимание на создание цветовой гаммы: несочетаемые цвета, плохая читабельность текста, неподходящие по цвету изображения только испортят впечатление о ресурсе.
Градиент
Тренд современного веб-дизайна — фон с использованием градиента. Мы писали об этом здесь.
Градиентный фон обладает рядом преимуществ, по сравнению с обычным однотонным фоном:
- выглядит стильно и свежо. Градиенты вошли в моду в 2016-2017 годах и все еще пользуются большой популярностью. С помощью градиента можно подчеркнуть, что компания современная, следит за трендами;
- позволяет управлять вниманием пользователя. Так как градиент обычно состоит из переходов одного цвета в другой, можно с помощью этого «движения» цвета перемещать взгляд пользователя и направлять его к нужному элементу — например, к призыву к действию;
- яркий дизайн. Так как в градиенте используются несколько цветовых оттенков, страница получается яркой и насыщенной. А благодаря плавному переходу из одного цвета в другой, это не так бросается в глаза и не отвлекает внимание пользователя.
Градиент в качестве фона до сих пор остается популярным приемом при создании дизайна макета. Подход в основном используется на сайтах развлекательного характера, ресурсах, в которых важно подчеркнуть «современность» компании, на промо-сайтах и так далее.
Паттерны и текстуры
Еще один прием — использование паттернов и текстур. Раньше это было в тренде и можно было встретить такие сайты на каждом втором ресурсе, где использовались фон в виде дерева или металла, все кнопки были объемными, с различными эффектами в виде теней или блеска. Однако, с развитием технологий и веб-дизайна в частности, такие текстуры считаются устаревшими и практически не используются в современных сайтах. Сейчас этот прием несколько трансформировался и теперь дизайнеры используют яркие рисованные паттерны, текстуры без объема:
Подробнее о применении паттернов и текстур в современном веб-дизайне мы писали в этой статье.
Большое изображение
Еще один тренд в веб-дизайне — использование больших изображений в качестве фона.
На современных ресурсах часто можно увидеть большие изображения на фоне. Как правило, структура таких ресурсов отличается от традиционной — вместо привычного горизонтального меню используется меню-гамбургер, может применяться крупная типографика и специфичные шрифты и приемы (например, леттеринг, о котором мы писали здесь). Как правило, к таким изображениям применяют различные эффекты, которые слегка затемняют фотографии и дают возможность легко воспринимать контент.
Большие изображения в основном используются на сайтах, где элементы навигации не стоят на первом месте по значимости (как уже говорилось, прием исключает использование горизонтального меню). Можно отнести этот подход к креативным решениям в дизайне. Дизайнеры применяют большие фотографии для промо-сайтов, презентации компании или услуги.
Видеобэкграунд
С развитием технологий у дизайнеров появились возможности использовать тяжелые файлы в качестве фона — так в тренд вошел видеобэкраунд.
Такой прием все же применяется не очень часто: дизайнерам нужно учитывать технические возможности разработчиков, а также специфику ресурса. Как правило, видеобэкраунд используется на небольших страницах, чтобы не загружать ресурс еще больше, для эффектной презентации товара или услуги, а также просто в качестве декоративного элемента.
Мы перечислили основные типы фонов для сайта. Однако, остаются вопросы, которые волнуют всех дизайнеров:
- как правильно выбрать?
- каким принципам следовать, чтобы бэкграунд дополнял дизайн и создавал единую концепцию?
- какой фон выбрать с точки зрения юзабилити?
Разберемся, какие правила используются при выборе и когда стоит пренебречь красивым фоновым изображением ради юзабилити.
Основные принципы при выборе фона для сайта
При выборе фона для сайта некоторые дизайнеры просто следуют интуиции, основывают свой выбор на ранее выполненных проектах или просто используют классический белый, разбавляя его цветными блоками и иллюстрациями. Однако, фон — важная часть дизайна, поэтому стоит внимательно подходить к его подбору и концепции страницы в целом. Рассмотрим основные принципы, которые могут использоваться при выборе фона для сайта.
Принцип 1. Специфика ресурса
Самый основной принцип — подбор фона индивидуально под формат веб-страницы. Как уже говорилось, если главное назначение сайта — предоставление пользователям текстовой информации, важно, чтобы фон был нейтральным и не отвлекал пользователя от чтения. С другой стороны, если основная цель сайта — презентация товара, нужно использовать максимум своих возможностей и сделать дизайн ярким и привлекающим внимание.
Принцип 2. Важность контентной части
Несмотря на то, что можно использовать видео и большие изображения, яркие цвета, нужно учитывать, что только красивая картинка пользователям не нужна. Клиенты пришли на сайт с определенной целью: найти нужную информацию, подробнее узнать о товаре, купить продукцию или оформить заказ. Поэтому, стоит подбирать фон в соответствии с контентной частью и следить за легкостью восприятия.
Например, несмотря на темный цвет и множество изображений, дизайнеры выделяют блоки с контентной частью:
Однако, мы хотим, чтобы посетители нашего сайта узнали о нашей компании больше, поэтому за ярким первым экраном идут достаточно нейтральные блоки на белом бэкграунде, что дает возможность пользователю прочитать информацию о наших услугах и просмотреть работы.
Принцип 3. Контраст
Еще один принцип, который также относится к восприятию пользователями контента. Важно, чтобы элементы на сайте достаточно контрастировали с фоном и не сливались в одно большое пятно. Особенно это касается типографики: если текст недостаточно выделяется, его никто не будет читать. Часто дизайнеры, поддаваясь новым трендам, делают текст светло-серым, который тяжел для восприятия. Сама страница при этом выглядит красивой, но текст не читается и пользователь уходит с сайта, не узнав нужной информации.
Принцип 4. Соответствие фирменному стилю
Мы уже много говорили в нашем блоге о том, что дизайн сайта должен соответствовать или хотя бы быть похожим на фирменный стиль компании. Так повышается узнаваемость бренда и уровень доверия к компании. Фон, как один из главных элементов дизайна, тоже может повлиять на концепцию сайта.
На примере фон сайта — текстура, которая используется в оформлении упаковки товара и, таким образом, дополняет фирменный стиль:
В качестве фона лучше не использовать те цветовые оттенки, которые выбиваются из общей концепции фирменного стиля или вызывают другие ассоциации с компанией (например, для сайтов с серьезной тематикой вряд ли подойдет розовый цвет). Больше об элементах айдентики в дизайне можно прочитать в этой статье.
Принцип 5. Качество и адаптивность
В основном этот принцип касается тех сайтов, где используются большие изображения или видео. Чтобы оставить хорошее впечатление о сайте и не испортить дизайн, важно использовать только изображения и видео высокого качества. Если видны пиксели, видео не будет прогружаться или будет расплывчатым, это только усилит негативные впечатления от компании и понизит уровень доверия к организации.
Также важно учитывать адаптацию макета под мобильные устройства. Если вы используете в качестве фона большое изображение, нужно подогнать фотографию под устройства других разрешений соответствующим образом. Например, наше видео на сайте адаптируется под мобильные устройства:
Принцип 6. Баланс между оригинальностью и юзабилити
Используя разнообразные фоны для сайта, также важно соблюдать грань между креативными решениями в виде красивой анимации, эффектного видеобэкграунда или ярких цветовых оттенков и паттернов и удобством пользования. Иногда такие приемы мешают восприятию и пользователь не может быстро сориентироваться на сайте или совершить целевое действие. Поэтому нужно следить за уровнем юзабилити на сайте и не забывать об элементах навигации, качеством контента, элементах призыва к действию и так далее. Более подробно о балансе между креативностью и юзабилити мы писали в этой статье.
Студия дизайна IDBI при создании макетов использует различные приемы и виды фонов. Это могут быть как качественные большие фотографии, сделанные профессиональным фотографом, так и классический белый цвет с использованием различных элементов для привлечения внимания пользователей и повышения конверсии сайта. Предпочтение отдается тому виду фона, который подходит под конкретную специфику ресурса и концепцию дизайна. Наши работы можно посмотреть в разделе «Портфолио».
Как сделать красивый фон для сайта
- Transparent Textures – красивый фон для сайта
- Как сделать красивый фон?
- ]»Успевайте больше за меньшее время вместе с
- «Копилкой эффективных советов»
- Как сделать красивый фон?
Со временем многие из блогеров начинают больше уделять внимания дизайну и всему, что с ним связано. Методом тыка, методом проб и ошибок, с помощью умных подсказок умных друзей и коллег, наши творения и проекты начинают приобретать приятный глазу дизайн и более грамотные очертания. Что, конечно, не может не радовать. Стоит ли говорить, какой проблемой для блогера может являться такая незначительная с виду деталь, как подбор красивого фона для сайта?
На сайте [urlspan]Transparent Textures [/urlspan] можно окунуться в мир потрясающих фонов и текстур. По сути, это целый конструктор, в котором вы можете самостоятельно выбрать фон, придать ему цвет и затем скачать на свой компьютер.
Так что же мы все-таки будем создавать? Фон или текстуру? Открыла Викепидию и прочитала:
[message type=”info”]
В компьютерной графике текстурами часто называют растровые цифровые изображения, содержащие текстурные элементы.
Текстуру часто ошибочно называют фоном. Понятие фона относится к перспективному месту на изображении, заднему плану. Текстура же в этом смысле — это изображение, визуально отображающее совокупность свойств поверхности какого-либо объекта — реального или вымышленного.
Понятия «текстура» и «фактура» применительно к свойствам какой-либо поверхности используются синонимично. Иногда словом “фактура” называют совокупность тактильных свойств, а текстурой — совокупность свойств визуальных. Однако за цифровым графическим изображением таких свойств закрепилось слово «текстура».
[/message]
Да, до дизайнеров нам еще далеко, но основные различия понятны, а значит главное, найти то волшебное место, где можно купаться в изобилии красивых фонов и текстур для сайта и не только…
P.S. Кстати, если вы мечтаете стать профессиональным дизайном, то этому можно научиться в Школе Дизайна Юлии Первушиной. Даже если вы совсем не дизайнер и не умеете рисовать, но есть большое желание получить высокооплачиваемую интернет-профессию, то записаться можно здесь:
Школа вебдизайна Юлии Первушиной
Приступаем к обзору сервиса.
Как сделать красивый фон?
На главной странице, собственно, представлен сам конструктор. Все очень просто и укладывается в три главных действия. На блоке слева мы можем:
- Выбрать нужный нам цвет фона.
- Выбрать шаблон из миллиона вариантов в правом блоке.
- Получить код CSS в левом блоке и использовать его по назначению.
Самое интересное в этом сервисе – выбирать текстуры, чтобы превратить их в свои фоны… Этот процесс может занять очень много времени, говорю из собственного опыта. Но с практикой придет и опыт, а значит в ближайшем будущем, красивый фон для сайта вы сможете выбрать без особого труда.
В том случае, когда вы уже определились, и заветный цветной прямоугольник вам понравился больше всего на свете, вы можете с ним произвести следующие действия:
- Скачать, в этом случае скачивается образец прозрачной текстуры совсем небольшого размера.
- Создать обои.
Если вы нажмете “Сохранить обои”, то в этом случае вас перебрасывает на новую страницу, где можно будет скачать изображение. Перед вами появятся две ссылки: Download (Скачать) и Create Wallpaper (Создать обои). То есть можно будет скачать прозрачную текстуру(слева) и фон для рабочего стола(справа). Хотя изображение такого приличного размера 1920 х 1080, которое сервис автоматически определяет по размеру моего экрана, однозначно, подойдет не только для рабочего стола.
Замечу, что сейчас многие из нас переходят на новый дизайн в Твиттере. Найти подходящий фон большого размера 1500 х 1500 довольно проблематично. Поэтому, узнать о сервисе Transparent Textures было для меня весьма своевременно.
На главной странице сервиса, там где находятся миллионы вариантов фонов и текстур, обратите внимание на ссылки в верхнем правом углу каждого изображения. Нажав на первую ссылку, вы меняете фон всей страницы в соответствии с тем изображением, на которое вы нажали. Нажав на вторую ссылку, вам предложат посмотреть сайт, на котором данная текстура находится в действии. Не стесняйтесь нажимать на ссылки и переходить по ним.
Transparent Textures – очень увлекательный сервис, на котором можно быстро выбрать красивый фон для сайта, картинки и любого изображения. Желаю приятного творчества!
[message type=
"warning"
]"Успевайте больше за меньшее время вместе с
«Копилкой эффективных советов»
[/message]
Просмотры: 617
Загрузить HD-фоны на Unsplash
Более 900 текстурных фоновых изображений: Скачать HD-фоны на Unsplash
Исследуйте › Фоны › Искусство › Текстура
Вам недостаточно обычных фонов? Получите один с небольшой текстурой. В Unsplash есть множество великолепных текстурных фонов, каждый из которых имеет свой уникальный стиль, и каждый можно использовать бесплатно!
Фоны для рабочего столаФоны событийФоны природыСпорт фоныФоны вещей
Скачать бесплатно текстурные фоновые изображения
Noita Digital
Hd серые обоиШкольные фоны
Уэсли Тинги – –––– – – –– ––– –– –––– – –.
Энни Спратт
пустой пробелотрицательный пробелкопия пространства
Джейк Накос
Солт-Лейк-СитиУтуса
Марьян Блан | @marjanblan
Hd серые обоиБумажные фоны
Augustine Wong
Hd белые картинкиМраморные обои hdHD Фоны для сайтов
Kiwihug
Hq фоновые изображенияHd узор обоикартон
Marjan Blan | @marjanblan
Hd grey wallpapersstainfurniture
Jazmin Quaynor
collageripped paperrip
Annie Spratt
Hd pattern wallpapersHd color wallpapersHd purple wallpapers
Augustine Wong
wallwhite wallWhite backgrounds
Toa Heftiba
Hd art wallpapersmodern artoutdoors
Annie Spratt
textileclothcloseup
Luke Chesser
Gradient backgroundsHd orange wallpapersGradient backgrounds
Kiwihug
beigeHq background imagescanvas
Sean Sinclair
Light backgroundsRainbow images & picturesbright
Pawel Czerwinski
Hd abstract картинкиHd красные обоинарисованные
Scott Webb
Hd обоиабстрактный узортекстура узор
Annie Spratt
молдГранж фонымох
Иван Бандура
Hd синие обоижидкая лазурь
–––– –––– –––– – –––– –––– –– – –– –––– – – –– ––– –– –––– – –.
Hd серые фоткиДоска фоныШкола
пустое пространствонегативное пространствокопирование пространства
Hd серые фоткиБумажные фоны0003
textileclothcloseup
beigeHq background imagescanvas
Hd abstract wallpapersHd red wallpaperspainted
moldGrunge backgroundsmoss
wallpBest stone pictures & images
salt lake cityutusa
Hd white wallpapersHd marble wallpapersWebsite backgrounds
Hd grey wallpapersstainfurniture
Hd pattern wallpapersHd color картинкиHd фиолетовые обои
HD обоисовременное искусствона улице
Градиентные фоныОранжевые обои HDГрадиентные фоны
Светлые фоныРадуга изображения и картинкияркие
Обои Hdабстрактный узортекстура узор
Обои Hd синиежидкостьлазурь
–––– –––– –––– – –––– – –––– – – – –– –––– – – –– ––– –– –––– – –.
Серые картинки hdМеловая доскафоныШкола
Серые картинки hdБумажные фоны0003
Gradient backgroundsHd orange wallpapersGradient backgrounds
moldGrunge backgroundsmoss
wallpBest stone pictures & images
Hd white wallpapersHd marble wallpapersWebsite backgrounds
collageripped paperrip
Hd art wallpapersmodern artoutdoors
beigeHq background imagescanvas
Hd wallpapersabstract patterntexture pattern
blank spacenegative spacecopy space
Солт-Лейк-СитиУтуса
Hq фоновые изображенияHd узор обоибумага
Hd узоры обоиHd цветные обоиHd фиолетовые обои
тканьтканькрупным планом
Светлые фоныРадуга изображения и картинкияркие
Скидка 20% на iStock
Unsplash
Красивые бесплатные изображения, подаренные самым щедрым сообществом фотографов в мире. Лучше, чем любые бесплатные или стоковые фотографии.
- About
- Blog
- Community
- Join the team
- Developers/API
- Press
- Help Center
Product
- Explore
- Unsplash Awards
- Unsplash for Education
- Unsplash for iOS
- Приложения и плагины
Популярные
- Фоны
- Бесплатные изображения
- Бесплатные стоковые фото
- Картинки с днем рождения
- Cool Photos
- Nature Pictures
- Black Backgrounds
- White Backgrounds
- Textures
- Desktop Backgrounds
Wallpapers
- HD Wallpapers
- 4k Wallpapers
- iPhone Wallpapers
- Cool Wallpapers
- Cute Wallpapers
- Live Обои
- Обои для ПК
- Черные обои
- Обои для iPad
- Обои для рабочего стола
- ФотоФотографии 10k
- Стопка фотографийКоллекции 10k
- Группа людейПользователи 0
9019| Скачать бесплатные картинки на Unsplash
750+ Фоновая Текстура Картинки | Скачать Free Images на Unsplash
Фон
Обои
Текстура
Паттерн
Аннотация
Дизайн
Логотип UNSPLASH
UNSPLASH+
В сотрудничестве с Mike Hindle
FOORESLARK FOORESPLACK FOORESBLACLENSBLACLENSBLARK. imagesHd черные обоисерый
–––– –––– –––– – –––– – –––– –– – –– –––– – – –– ––– –– –––– – –.
Кивихуг
Hd grey wallpaperslinenpaperboard
Diana Light
Hd pattern wallpapersWebsite backgroundsHd design wallpapers
Joanna Kosinska
Paper backgroundsmailoffice
Noita Digital
spongeinteriormemory
Unsplash logo
Unsplash+
In collaboration with Mariia Shalabaieva
Unsplash+
Unlock
rendersalesavings
NordWood Themes
Hd белые обоизерноминималистичный
Carson Arias
legoHd yellow wallpapersrandom
Jean-Philippe Delberghe
londonHd abstract wallpapersarchitecture
Casey Horner
Space images & picturesStar imagesnight
SJ Objio
república dominicanacollagerug
Unsplash logo
Unsplash+
In collaboration with Aakash Dhage
Unsplash+
Разблокировать
Hd 3d обои3d визуализацияТекстуры фоны
Valentin Salja
Brown backgroundsbackdropcroatia
Laura Vinck
Hd sky wallpapersCloud pictures & imagesNature images
Annie Spratt
fabricHd red wallpaperssurface
Henry & Co.
Hd art wallpapersHd wallpapersminimal
Annie Spratt
wallMetal backgroundstin
Логотип Unsplash
Unsplash+
В сотрудничестве с MJH SHIKDER
Unsplash+
Разблокировать
bangladeshHq background imagesdigital image
Marek Piwnicki
Hd wallpaperspolandcanvas
Texture backgroundsBlack backgroundsDark backgrounds
Hd grey wallpaperslinenpaperboard
Paper backgroundsmailoffice
spongeinteriormemory
legoHd yellow wallpapersrandom
Space images & picturesStar imagesnight
Hd 3d wallpapers3d renderTexture фоны
Коричневые фоныфонХорватия
тканьHD красные обоиповерхность
стенаМеталлический фонжесть
–––– –––– –––– – –––– – –––– –– – –– –––– – – –– ––– – – –––– – –.
HQ фонового фона ImageShd Black Wallpapersgray
HD Pattern Wallpaperswebsite foanshdshd дизайнерский обои
rendersalesavings
HD Белый обои
-namesclancyravans restravan resplican. 0003
HD Art Art WalpaperShd Walpapersminimal
BangladeshHQ Фоновое изображение Дигитальное изображение
Связанные коллекции
Фоновая текстура
363 Фотографии · Стоимость Shambhala Publicist
9049 FOURE / TEXTURE
236. фото · Куратор Эми Чан0002 Hd pattern wallpapersWebsite backgroundsHd design wallpapers
Hd white wallpapersgrainminimalistic
Space images & picturesStar imagesnight
Hd sky wallpapersCloud pictures & imagesNature images
wallMetal backgroundstin
Hq background imagesHd black wallpapersgray
spongeinteriormemory
londonHd abstract wallpapersarchitecture
Hd 3d обои3d визуализацияТекстура фоны
Коричневые фоныфонХорватия
Художественные обои HdHd wallpapersminimal
–––– –––– –––– – –––– – –––– –– – –– –––– – – –– ––– –– –– –– – –.
HD Grey Walpaperperperslinenpaperboard
Paper Packensmailoffice
rendersalesavings
Legohd Желтая обои.