Текст и фон . Веб-дизайн
Элементы, без которых не обходится ни одна веб–страница, — фон, текст и гипертекстовые ссылки (стр. 215) — ставят интересную задачу гармонизации трех (или четырех, если учитывать цвет «посещенных» ссылок) цветов, занимающих в композиции резко различающиеся площади и выполняющих разные функции. Есть немало страниц с минимумом графики и достаточно ординарной композицией, которые привлекают и запоминаются исключительно своей цветовой гаммой.
Первое требование к паре цветов для фона и текста — достаточный контраст между ними, необходимый для комфортного, неутомительного чтения. Контраст этот должен прежде всего выражаться в различной яркости цветов, так как разница только в тоне или насыщенности не позволит сознанию различать текст и фон с достаточным автоматизмом, а для текста небольшим кеглем его тональная окраска или степень насыщенности вообще с трудом различимы (кроме того, эти параметры цвета теряются на черно–белых устройствах вывода).
Неудивительно поэтому, что тесты психологов указывают на черный цвет на белом фоне как на сочетание, обеспечивающее максимальное удобство при продолжительном чтении. Однако эргономика — хотя и важный, но не единственный аспект информационного дизайна, и нередко ей приходятся уступать место эстетике. Помимо черного на белом, существует бесчисленное множество цветовых схем, обеспечивающих хорошую читаемость текста, и при выборе одного из них нужно учитывать общий стиль дизайна страницы, сочетаемость цветов друг с другом и множество иных, чисто эстетических соображений. Не стоит также забывать, что экран компьютера позволяет гораздо свободнее манипулировать компонентами цвета, делая возможными сочетания, невоспроизводимые на бумаге.
Необычные цветовые решения веб–страниц можно разбить две большие группы: с темным текстом на светлом фоне и со светлым текстом на темном фоне.
Рис. 22
Вторые несколько популярнее первых (если не учитывать традиционные черные–на–белом страницы, составляющие все же заметное большинство).
Посмотрим сначала, что может дать нам схема с темным текстом на светлом фоне. Оставим пока текст черным, возьмем какой–нибудь достаточно насыщенный цвет (синий, к примеру), увеличим его яркость (другими словами, смешаем его с белым) и закрасим им фон. Результат (рис. 22 на цветной вкладке,
Теперь вам должны быть ясны способы, которыми можно улучшить эту цветовую схему. Нужно либо сделать фоновый цвет более темным, чтобы его насыщенность выступила на первый план, — либо, наоборот, оставить его светлым, но понизить его насыщенность. Для первого способа нужно, чтобы фоновый цвет сам по себе был достаточно оригинальным, так что чистый синий здесь уже не подойдет, — но зато можно попробовать какой–нибудь неочевидный промежуточный тон, например сине–зеленый или кофейный (рис.
Второй способ — понижение насыщенности — превращает фоновый цвет в светло–серый с оттенком исходного цвета. Это делает цвет менее очевидным и потому более интерес–, ным, но сам по себе он все еще может быть не слишком убедительным. Поэтому такой цвет требует поддержки со стороны цвета текста — лучше всего использовать для текста более темную вариацию того же цвета.
С тем же успехом я бы мог сказать, что, наоборот, темный цвет текста требует поддержки со стороны фона, иначе его тональная составляющая будет с трудом различима. Как аккорд звучит интереснее отдельной ноты, так и эта пара цветов гораздо лучше выражает характер их общего тонального компонента. В то же время невысокая насыщенность не позволяет цвету выйти на первый план восприятия, обеспечивая комфортное чтение (рис. 22 на цветной вкладке, в).
Необходимую долю разнообразия такому цветовому ландшафту может придать более насыщенный или контрастный по тону цвет ссылок.
Второй тип цветовых решений — со светлым текстом и темным фоном — на первый взгляд кажется более привлекательным. Поскольку буквы текста занимают существенно меньшую площадь, чем фон, любой достаточно темный цвет для текста, как мы видели, норовит превратиться в черный. Поэтому для текста выгоднее выбирать светлый и насыщенный оттенок, которому, естественно, требуется темный фон. Нужно также учитывать, что светлый текст на темном фоне, хотя и уступает по комфортности длительного чтения черному тексту на белом, в небольших объемах меньше утомляет глаз, так как ограничивает общее количество света, получаемое от монитора (к сожалению, у многих пользователей мониторы настроены так, что белый фон страницы почти моментально вызывает резь в глазах).
Печать текста белым по черному применяется иногда и в журнальной верстке, однако только на экране компьютера эта цветовая схема открыла все заложенные в ней возможности.
Любой достаточно темный цвет в качестве фона звучит сдержанно, благородно, даже таинственно;
любой светлый цвет для текста становится по–особому ярким и выразительным. Пожалуй, теперь такие цветовые сочетания уже ни у кого не ассоциируются с чем–то мрачным или траурным, так что свобода творчества ничем не ограничена.
Есть, тем не менее, одно ограничение технического плана. Фоновый цвет, который хочет выглядеть именно цветом, а не бесцветным черным, обязан быть достаточно насыщенным, — «ночью все кошки серы», и слишком слабая примесь основного тона будет в темном цвете трудно различима, несмотря даже на большую площадь, занимаемую этим цветом. Насыщенность цвета текста может при это» поддерживать насыщенность фона, а может контрастировав с ней.
На втором месте по популярности после чисто черного фона стоят насыщенные холодные цвета — такие как, например, бархатно–синий фон сайтаwww.verso.com (пример 19). Для текста, наоборот, популярны оттенки теплых цветов, в особенности желтого, призванного символизировать золото.
Как установить веб-страницу в качестве фона рабочего стола в Windows 10
Windows 10
Все знают, как изменить фоновый рисунок рабочего стола в Windows 10. Хотя процедура изменения фонового рисунка в Windows 10 немного изменилась, можно щелкнуть правой кнопкой мыши изображение и выбрать параметр «Установить в качестве фона рабочего стола», чтобы быстро использовать изображение в качестве фона рабочего стола.,
Есть несколько встроенных опций для настройки Windows 10, но нет никакого способа установить веб-сайт в качестве фона рабочего стола.
Использовать веб-сайт или веб-страницу в качестве обоев в Windows 10
Многие пользователи, которые хотят получить максимальную отдачу от области рабочего стола, хотят установить живой веб-сайт или веб-страницу в качестве фона рабочего стола в Windows 10. Например, вы можете установить свою страницу Twitter в качестве обоев для просмотра последних твитов. Аналогичным образом, некоторые пользователи могут захотеть установить новостной сайт в качестве фона рабочего стола, чтобы видеть последние новости на рабочем столе вместо статических обоев.
Большинство пользователей не знают об этом, но старая версия Windows XP позволяла пользователям устанавливать веб-страницы в качестве обоев без помощи стороннего программного обеспечения. Функция под названием Active Desktop позволила пользователям использовать веб-страницу в качестве фона рабочего стола в Windows XP. Даже операционная система Mac позволяет пользователям устанавливать веб-сайт в качестве фона рабочего стола без помощи сторонних инструментов.
Функция Active Desktop была удалена из Windows Vista и отсутствует в последней версии Windows 10.
К счастью, установка веб-страницы в качестве фона рабочего стола не является сложной задачей, если не возражаете против использования стороннего программного обеспечения. Вы можете воспользоваться бесплатной программой WallpaperWebPage для использования веб-сайта или веб-страницы в качестве обоев Windows 10 с помощью нескольких щелчков мыши.
Программа WallpaperWebPage для установки веб-страницы в качестве фона рабочего стола Windows 10
WallpaperWebPage — это бесплатная программа, которая позволяет пользователям Windows использовать живую веб-страницу в качестве фона рабочего стола вместо статического изображения.
Когда программа запущена, маленький значок WallpaperWebPage находится в системном трее. Щелкните правой кнопкой мыши значок в системном трее WallpaperWebPage, нажмите «Настроить», а затем введите URL-адрес веб-сайта или веб-страницы, для которой вы хотите установить фоновый рисунок рабочего стола Windows 10.
Единственным недостатком WallpaperWebPage является то, что он не заменяет фактический рабочий стол Windows. Вместо этого окно программы располагается поверх самого рабочего стола и покрывает весь экран.
Поскольку WallpaperWebPage не заменяет фактический рабочий стол, он не отображает значки на рабочем столе, если они у вас есть. Вы можете увидеть фактический рабочий стол Windows с помощью сочетания клавиш Windows logo + M и получить на нем значки доступа, если таковые имеются. Наконец, нет никакого способа получить доступ к реальному рабочему столу с помощью мыши, когда работает WallpaperWebPage.
Чтобы завершить WallpaperWebPage, щелкните правой кнопкой мыши по его значку на панели задач и выберите «Выход».
Последние мысли
WallpaperWebPage не идеален и, конечно, не сравним со старой функцией Active Desktop. Тем не менее, с ограниченными возможностями, это лучшее программное обеспечение для создания живого веб-сайта в качестве фона рабочего стола Windows 10.
Дайте нам знать, если есть лучший способ сделать живую веб-страницу в качестве обоев Windows 10 бесплатно.
Скачать обоиWebPage
Windows 10
Выберите лучший фон для вашего веб-сайта
Логотипы, веб-сайты и многое другое…
Логотипы, веб-сайты, обложки книг и многое другое…
Получить дизайн
Если есть один аспект веб-сайтов, которым слишком часто пренебрегают, так это фон. К счастью, это легко исправить, и вариантов гораздо больше, чем было раньше.
В этом посте я расскажу, как выбрать лучшее изображение, видео или цвет фона для вашего веб-сайта, и покажу несколько примеров для вдохновения.
Выбор правильного изображения
Правильное изображение может оказать непосредственное влияние на вашу аудиторию. Он может задать правильное настроение и сразу сообщить, о чем ваш сайт или чем вы занимаетесь. Это также шанс продемонстрировать некоторые из ваших активов — ваше местоположение, ваш продукт или даже вас!
Большое фоновое изображение создаст первое впечатление у пользователей о вашем сайте, поэтому выбирайте его с умом.
Если вы не можете выбрать только одно изображение, вы всегда можете вместо этого запустить слайд-шоу.
Большое красивое фоновое изображение может задать тон вашему сайту: радостный, серьезный, игривый или безмятежный. Этот пример взят из Cuic Creation.
Размеры
Также важно выбрать изображение с правильными техническими характеристиками. Я рекомендую использовать фоновые изображения, ориентированные горизонтально, а не вертикально, чтобы они соответствовали большинству современных широкоэкранных экранов компьютеров.
Размер изображения не менее важен. Большинство экранов компьютеров поддерживают минимальное разрешение 1024 x 768 пикселей, а это означает, что ваша фоновая фотография должна быть как минимум такого размера. Лучше всего стремиться к ширине не менее 1200 пикселей. Загрузка изображения шириной всего 500 пикселей приведет к размытому или пикселизированному фону, а этого никто не хочет.
Большинство программ для редактирования фотографий могут отображать размер вашего изображения в пикселях.
Вы также можете увидеть размер прямо на вашем компьютере. Если вы на ПК, щелкните правой кнопкой мыши файл изображения, выберите «Свойства», а затем вкладку «Сводка». На Mac щелкните правой кнопкой мыши файл изображения, выберите «Получить информацию», а затем нажмите «Подробнее». Это покажет вам размеры в пикселях.
Поиск изображений в Интернете
Сайт кайтсерфинга isurfnl.com использует большую фотографию в качестве фона для оформления сцены.
Если у вас нет собственных фотографий, которые подошли бы вам, в Интернете есть отличные ресурсы с бесплатными высококачественными стоковыми фотографиями, которые вы можете использовать на законных основаниях без лицензионных отчислений. Некоторые из наших фаворитов — Pixabay, Fotolia и UnSplash.
Плитка или не плитка?
Ювелир Грег Жоайе (Greg Joaillier) использует изящную, утонченную мозаику на сайте greg-joaillier.fr.
Если вы планируете использовать фоновое изображение, я настоятельно рекомендую вам не размещать его в виде мозаики.
Мы все видели веб-сайты, которые снова и снова повторяют небольшую фотографию в фоновом режиме, и это может выглядеть перегруженным и немного раздражающим. Вместо этого я рекомендую использовать одно высококачественное изображение, установленное на полную ширину, чтобы его великолепие могло проявиться.
Веб-сайт с произведениями искусства fancyfeatures.com выделяет более яркий узор на фоне. Обратите внимание, как они сводят количество других цветов к минимуму, чтобы визуально не конкурировать с синими и белыми точками.
Мозаичный фон можно сделать красиво. Лучше всего он работает с тонкими узорами, такими как обои. Если вы рассматриваете этот вариант, выберите изображение, которое может быть плавным и не будет конфликтовать при повторении. Поиграйте с разными цветами и узорами, чтобы найти повторяющийся фон, который будет дополнять ваш сайт, а не напрягать глаза ваших посетителей.
Фоновое видео
Найти подходящее видео для использования в качестве фона может быть сложно, но такое изображение прекрасно работает из-за небольшого движения на заднем плане.
По мере того, как интернет-соединения становятся быстрее, фоновые видео становятся все более и более популярными в Интернете. Хорошее видео может идеально вписаться в ваш сайт и добавить эффект «вау».
Эту функцию следует использовать с осторожностью, поскольку некоторые видеоролики могут отвлекать или раздражать. Эффект лучше всего работает с окружающими и спокойными видео. Например, на новом веб-сайте Airbnb используются видеоролики, на которых люди отдыхают дома, пьют кофе, просыпаются и т. д. Это помогает вызывать у пользователей нужные эмоции. Сравните это с фоном видео на веб-сайте Google Hangouts. Быстрые нарезки и быстрый темп имеют совершенно другой эффект, который может помешать зрителям сосредоточиться на вашем контенте.
Постарайтесь выбрать не слишком длинное видео и, возможно, такое, которое имеет плавный цикл в начале и в конце. Такие сайты, как Pond5, предлагают бесплатные видеоклипы на самые разные темы.
Цвета фона
Вы не ошибетесь, выбрав белый или серый фон для демонстрации своего контента или фотографий.
В первые дни (медленного) Интернета большинство веб-сайтов имели фон одного цвета, чтобы ускорить загрузку страниц. По мере того, как Интернет становился быстрее, использование фотофона стало более распространенным.
Однако современные тенденции в веб-дизайне возвращают концепцию одного цвета. Разница на этот раз в том, что мы больше не используем яркие красные и синие цвета прошлых лет. При использовании более нежных цветов — даже простого белого — веб-сайты выглядят чище и элегантнее, и больше внимания уделяется содержанию, а не дизайну.
Обратите внимание, как mdcreation.com уравновешивает яркий цвет фона с минималистичным черным, белым и серым текстом для чистого, современного вида.
Однако не бойтесь использовать яркие и яркие цвета на своем веб-сайте. Различные цвета могут заставить посетителей чувствовать себя по-разному в зависимости от того, как вы их используете. Если вы решите использовать цвет, убедитесь, что ваш текст достаточно контрастен, чтобы его можно было прочитать (обычно лучше всего использовать белый или черный текст на цветном фоне).
С красочным фоном также рекомендуется свести к минимуму другие цвета.
Имейте в виду…
В заключение запомните эти быстрые и простые советы, чтобы найти лучший фон для вашего веб-сайта:
- Выбирайте изображения с высоким разрешением (минимум 1024×768 пикселей — если у вас есть изображение большего размера, оно даже лучше).
- Убедитесь, что эти изображения находятся в ландшафтном, а не в портретном режиме.
- Только те изображения, которые должны быть мозаичными. Для этого отлично подходят выкройки, но не столько фотографии вашего кота.
- Если вы собираетесь использовать видеофон, выберите тот, который ненавязчив и не требует слишком много действий, чтобы ваши посетители не заскучали.
- Для простых фоновых цветов вы не ошибетесь с белым.
Придерживайтесь этих советов, и ваш веб-сайт будет выделяться среди остальных.
Эта статья изначально была написана для Джимдо Уильямом Молиной. Благодаря простому интуитивно понятному интерфейсу Jimdo позволяет любому создать уникальный веб-сайт с блогом и интернет-магазином.
