Сайт

Белый фон для сайта: Светлые фоны для сайта

28.11.1970

Содержание

Глянцевый белый фон для моего сайта



Я пытаюсь установить цвет фона моего сайта на глянцевый белый фон, такой же, как у Linkedin или большинства сайтов нового поколения. Я попытался установить background-color: #fff; в свой файл CSS, но цвет фона по-прежнему выглядит очень тускло-белым.

Есть ли какой-нибудь способ сделать цвет фона гладким и глянцево-белым?

css
Поделиться Источник user636525     01 августа 2012 в 02:37

3 ответа


  • Сделайте белый фон изображения прозрачным в css

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

  • iPhone-переворачивание видов показывает белый фон

    Я использую флип-анимацию для анимации между двумя видами в моем viewcontroller. Проблема в том, что фон показывает белый пустой фон во время анимации. Я хотел бы показать черный фон. Я попытался установить цвет фона основного вида на черный как в IB, так и в коде. Но фон по-прежнему белый….



2

Перейдите сюда: http://www.colorpicker.com/ и выберите нужный цвет.

Замените свой background-color на это.

Поделиться Michael Robinson     01 августа 2012 в 02:40



2

На linkedIn контейнеры имеют background-color:#fff . Как сделать их глянцевыми? Попробуйте нанести какой-нибудь другой, темный цвет на фон корпуса, и тогда белые контейнеры будут «more white». Например, установите background-color из body в #E2E2E2 или любой другой темный цвет. Или используйте какое-нибудь фоновое изображение, например LinkedIn.

Поделиться Miljan Puzović     01 августа 2012 в 02:46



0

Это из-за вашего background color ,замените цвет и попробуйте,он будет работать

Поделиться Prashobh     01 августа 2012 в 02:59


  • белый фон для диалогового окна выбора даты тень

    Я добавляю datepicker в свое приложение, но моя проблема в том, что тень для диалога имеет белый фон, используйте Android 21 для компиляции . пожалуйста, помогите мне удалить белый фон …

  • Белый фон на optionsmenu (Android)

    В моем Samsung Galaxy, когда я нажимаю кнопку меню, меню имеет очень темно-синий (почти черный) фон. Я думаю,что цвет фона по умолчанию зависит от темы rom/version. Для моего приложения мне нужен белый (или очень светлый) фон, иначе мои иконки практически невидимы. Но я не вижу никакого способа…


Похожие вопросы:


Белый фон по всей длине сайта

У меня есть проблема с отображением содержимого моего веб-сайта. Я создаю веб-сайт, и он хорошо отображается в браузере (ширина 100%)), но когда я изменяю размер экрана браузера и делаю переход…


Белый фон для метки тика colorbar

Кому я должен наносить белый фон для меток colorbar тиков? (Я использую струйную цветовую карту, в которой черный текст едва ли визуальен — изменение цвета текста на белый тоже не помогает) Типичный…


iPhone значок приложения показывает белый фон

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


Сделайте белый фон изображения прозрачным в css

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


iPhone-переворачивание видов показывает белый фон

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


белый фон для диалогового окна выбора даты тень

Я добавляю datepicker в свое приложение, но моя проблема в том, что тень для диалога имеет белый фон, используйте Android 21 для компиляции . пожалуйста, помогите мне удалить белый фон …


Белый фон на optionsmenu (Android)

В моем Samsung Galaxy, когда я нажимаю кнопку меню, меню имеет очень темно-синий (почти черный) фон. Я думаю,что цвет фона по умолчанию зависит от темы rom/version. Для моего приложения мне нужен…


Глянцевый Button в VB.Net?

Как сделать глянцевый button в Vb.Net? или как изменить фон button при наведении курсора мыши?


android простой белый фон без градиента

Я установил фон моего приложения Android на белый и использовал светлую тему, чтобы попытаться получить белый фон. Я сделал это, установив в Манифесте следующие атрибуты:…


iTunes connect добавляет глянцевый эффект по умолчанию

Я отправляю приложение в app store. В этом процессе я загрузил большой значок приложения размером 1024 x 1024 пикселя с глянцевым эффектом в itunes connect. Несмотря на то, что значок моего…

Цвет фона | htmlbook.ru

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

Цвет фона веб-страницы задается с использованием атрибута bgcolor тега <body>.

Пример 1. Изменение цвета фона

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Цвет фона</title>
 </head>
 <body bgcolor="#c0c0c0">
   <p>...</p>
 </body>
</html>

Цвет можно указывать в шестнадцатеричном значении или по его имени.

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

Фоновый рисунок

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

Пример 2. Добавление фонового рисунка

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Фоновый рисунок</title>
 </head>
 <body background="images/bg.jpg">
  <p>...</p>
 </body>
</html>

Если изображение меньше размера экрана монитора, оно будет размножено по горизонтали и вертикали.

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Цвет фона</title>
 </head>
 <body bgcolor="#c0c0c0" background="images/bg.jpg">
   <p>...</p>
 </body>
</html>

Фиксированный фон

По умолчанию, при использовании полосы прокрутки, фоновый рисунок перемещается вместе с содержимым веб-страницы. Internet Explorer позволяет сделать фон неподвижным с помощью атрибута bgproperties=»fixed» тега <body>.

Пример 4. Задание фиксированного фона

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Фон</title>
 </head>
 <body bgcolor="#c0c0c0" background="images/bg.jpg" 
  bgproperties="fixed">
   <p>...</p>
 </body>
</html>

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

Дизайн сайтов. Оформление фона сайта

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

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

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

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

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

Кроме одноцветного фона в дизайне сайтов популярно использование

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

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

Подводя итог всему вышесказанному, можно сделать несколько выводов:

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

дизайн сайтов, фон сайтов, фон страниц, фоновый рисунок, градиент, цвет фона

Белый фон для сайта

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

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

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

Где мы обычно размещаем блоки рекламы?  В поле для текста статьи или в сайдбарах.

И очень часто поле текста белого цвета, а сайдбары – цветные. В этой статье я поделюсь секретом о том, как сделать общий белый фон для сайта (блога), чтобы цвет поля текста и  цвет сайдбаров  не отличались.

Но еще раз повторюсь, речь идет только о БЕЛОМ цвете.

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

А если поле для контента(текста) и (или) сайдбары состоят из многократно повторяющихся графических блоков (их можно найти в файлах темы, в  папке images) – тогда как ?

Выход есть. Скачайте себе на компьютер программку Irfanview. Что это такое и для чего ей пользоваться читайте в статье автора курса “Секреты успешного блога для леди” (прим. – курса уже не существует) – Светланы Алликас.

Следуя совету Светланы – “Понажимайте на кнопочки и понаблюдайте, что меняется” – я и обнаружила, что с помощью Irfanview можно менять цвет графических элементов темы блога.

Возьмем, к примеру,  тему оформления   nightgate:

Слева – первоначальный вариант. Красивое сочетание цветов, не спорю, мне тоже нравится .

Справа – измененный вариант: поле для текста и сайдбары стали белого цвета.

Скучно, скажете вы? Дело вкуса, конечно, зато рекламные блоки будут вписываться органичнее. А если поменять парочку других элементов – шапку, бэкграунд (общий фон), то белый фон для сайта будет смотреться очень даже неплохо. Как это можно сделать –  читайте в следующей статье.

35+ белых текстур для фотошопа, бесплатные белые фоны и узоры

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

Скачать белые текстуры для фотошопа вы сможете пройдя по ссылкам в изображениях (кликаете по ним и попадаете на сайт-источник). Мы старались подобирать только бесплатные варианты. Среди файлов найдете разрешения картинок в PNG и EPS (с сервиса Freepik).

Large Leather

Gplay

Cubes

White Paperboard

White Wall 2

Simple Horizontal Light

Straws

Subtle Grey

Subtle Dots

Pyramid

Subtle Light Tile Pattern vol1

Subtle Light Tile Pattern vol2

Subtle Light Tile Pattern vol3

White Linen

Light Paper Fibers

Clean Textile

White Brick Wall

Vintage Speckles

Diamond Eyes

12 Free Minimal Web Patterns

Как видите, в сети удалось найти лишь парочку наборов белых текстур для фотошопа, которые бы содержали сразу несколько материалов. Ниже пойдут ссылки на проект бесплатного вектора Freepik. Здесь следует обратить внимание на то, что часть объектов является текстурами, а часть — просто белые фоны с узорами. Последние вы не сможете использовать в качестве картинки для размножение фона сайта (background-repeat). Хотя с другой стороны это компенсируется векторным форматом изображений.

White Triangles

White Geometric Texture

White Wood

White Bokeh Background with Snowflakes

Если вам нравится эффект боке, то здесь найдете более 100 соответствующих текстур.

Squared Shapes White

White Wall Texture

White Canvas Background

Shiny Triangle Shape

White Polygons Background

Silver Background

Paper Texture

White Paper

Abstract Background with Polygons

Checkered Background

White Abstract

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

Выбираем лучший фон для своего сайта

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

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

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

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

Это шанс показать свой продукт, какое-то место или себя в лучшем свете:

Пример, как сделать задний фон сайта ярким и привлекательным

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

Каждое изображение, будь то фотография или логотип, должно иметь наиболее подходящий формат.

Профессиональный совет. Если размер файла слишком велик, используйте инструмент TinyPNG или TinyJPG, чтобы уменьшить размер файла без ущерба для качества.

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

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

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

Перед тем, как сохранить задний фон с сайта, обязательно проверьте фон в основных браузерах. Таких как Google Chrome, Firefox и на мобильных устройствах, чтобы быть уверенным, что он корректно отображается всех платформах.

Профессиональный совет. Размер изображения в пикселях можно узнать, кликнув правой кнопкой мыши по файлу изображения и выбрав пункт «Свойства». А затем перейдя на вкладку «Сводка». На Mac, кликнув правой кнопкой мыши по файлу изображения и выбрав пункт «Получить информацию», а затем пункт «Дополнительная информация».

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

Используйте функцию «Фокус» для фонового изображения.

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

Чтобы добавить видео на свой Jimdo сайт, нужно выбрать ролик с YouTube или Vimeo. А также найти бесплатные видеоролики на таких сайтах, как Pond5 или AllTheFreeStock.

Профессиональный совет. Постарайтесь, чтобы ваше видео было коротким.

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

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

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

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

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

Данная публикация является переводом статьи «Choose the Best Background for Your Website» , подготовленная редакцией проекта.

советы и рекомендации – 1C-UMI

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

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

Выбираем фон правильно – рекомендации от ведущих дизайнеров

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

1. Связь с целевой аудиторией

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

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

2. Найдите качественные изображения с высоким разрешением

Существует ряд сервисов с готовыми профессиональными изображениями и фотографиями на любой вкус (Shutterstock, Depositphotos и другие). Однако картинка должна иметь удобную для сайта ориентацию (альбомную) и подходящее разрешение. Минимальное рекомендуемое разрешение — 1024 на 768 пикселей, но лучше воспользоваться средним вариантом и искать для фона изображение с шириной не менее 2000 пикселей. При загрузке картинки с маленьким разрешением, фон будет смотреться в стиле начала 90-ых.

Также помните, что лучше скачать картинку с большим разрешением — и лишнее потом отрезать, чем пробовать растягивать низкокачественное изображение. Для обрезки воспользуйтесь специальными сервисами или редакторами изображений (Illustrator, Photoshop, Paint, IrfanView).

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

Сохраняя фон на вашем интернет-ресурсе, убедитесь, что он правильно отображается в разных браузерах (Google Chrome, Mozilla Firefox, Opera и др.).

Рекомендация: применяйте сервисы TinyPNG или TinyJPG, чтобы сжать размер картинки до нужных размеров.

3. Наведите правильно фокус

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

4. Установка видео в качестве фона сайта

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

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

5. Однотонный фон сайта

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

Подбирая однородный фон для сайта HTML, учтите соответствие цветовой гаммы, чтобы текст не пропадал и был отчётливо виден. Если ваша цель сосредоточить гостей сайта на информационной составляющей ресурса, то простой белый фон станет лучшим решением. Белый цвет придаст сайту чистоту и изящность, создаст впечатление более классической и солидной компании.

Рекомендация: в поисках естественного фона попробуйте поиграться с текстурами, например, цветом дерева, камня, металла или ткани.

Одна и та же информация будет восприниматься совершенно по-разному в зависимости от оформления.

1C-UMI – конструктор с возможностью выбора фона для вашего сайта. Фоны наших шаблонов подобраны профессионалами, но в любой момент можете заменить изображение или фон при помощи CSS-редактора.

20 чистых веб-сайтов с чистым белым фоном

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

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

Валдама

Этот белый веб-сайт имеет большой слайдер на главной странице и очень простой и минималистичный макет.

Бен Эшман

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

арк

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

Модный

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

Манггис

Manggis — это творческая тема WordPress, которую вы можете использовать для портфолио или блогов. Фотографии красиво смотрятся на белом фоне.

Друзья Интернета

Этот веб-сайт сочетает в себе преимущества белого пространства и чистого белого фона с некоторыми яркими плоскими цветовыми акцентами. Выглядит прекрасно!

Элегантность

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

Ива

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

Концепция дизайна Repetto

Дизайн этого веб-сайта выполнен в белой цветовой палитре с монохромными светлыми изображениями и розовым цветом в качестве акцента.

Ласка

Caress — элегантная тема WordPress с современным дизайном и преимущественно белой цветовой палитрой.Используйте этот шаблон для быстрого создания профессиональных веб-сайтов.

Эндрю Ревитт

Эндрю Ревитт — внештатный дизайнер, занимающийся веб-дизайном, графикой, брендингом, UI и UX дизайном. Для своего сайта-портфолио он выбрал черно-белый минималистичный дизайн.

Big Bite Creative

Этот веб-сайт имеет белый фон с зелеными акцентами для наиболее важных элементов, таких как кнопки и CTA.

Электрическая масса

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

Хелен и Хард

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

Ярон Шон

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

b14

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

Эрик Пол Сноуден

Дизайн этого веб-сайта сочетает в себе светло-серые тона с чистым белым фоном. Изображения красиво всплывают и являются основным элементом страницы.

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

Виноградники Hanzell

Вот еще один дизайн веб-сайта в винтажном стиле с современными элементами и чистым белым фоном.

Трент Уолтон

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

советов по использованию белого фона в дизайне веб-сайтов

Дизайн • Дизайн веб-сайта Кэрри Казинс • 7 января 2014 г. • 5 минут ПРОЧИТАТЬ

Кажется, что сейчас все используют белый фон .

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

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

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

Белый фон должен иметь цель и красоту в общей схеме дизайна.

Так что же делают дизайнеры, чтобы белый фон работал на них? Давайте взглянем.

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

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

Попробуйте бесплатноДругие продукты

Почему белый фон?

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

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

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

Я заметил корреляцию между белым фоном и двумя тенденциями веб-дизайна:

  1. Адаптивный дизайн: Адаптивный дизайн и сетка «стопов» для различных устройств помогли простому белому фону вернуть себе популярность, потому что он прост и всегда выглядит естественно.В некоторых адаптивных макетах сайты фиксируются на определенных ограничителях сетки шириной в пикселях, и все, что находится за пределами этих границ, показывает фоновый «край». Если общий фон белый, этот край становится невидимым без каких-либо дополнительных дизайнерских усилий.
  2. Плоский и минималистичный стиль: Простой по-прежнему является основной тенденцией (как и на протяжении большей части 2013 года). А белый фон олицетворяет простоту. Белый также позволяет легко сочетать и использовать многие яркие, смелые цвета, которые символизируют стили плоского дизайна.

Что говорит Уайт?

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

Белый по своей природе — это цвет чистоты, веры, света, чистоты, возможности, мягкости и в целом позитивен.

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

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

Другие оттенки белого

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

Другие почти белые оттенки включают щепотку другого цвета — обычно черного — для создания мягкого белого с оттенком для чтения на экранах.

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

Советы по использованию белого цвета

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

Будьте проще: Сущность белого цвета — простота. Для максимального эффекта выберите простую или минималистичную схему дизайна.

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

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

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

Сосредоточьтесь на цвете акцента: Выберите цвет и используйте его на белом фоне и на черном шрифте для забавы. «Вспышка цвета» более тонко акцентирует внимание на определенных частях дизайна. И работает практически с любым оттенком.

Заключение

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

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

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

6 советов по использованию белого фона в современном дизайне веб-сайтов

Последнее обновление 11 декабря 2019 г.

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

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

Определение белого цвета

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

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

Преимущества белого фона в веб-дизайне

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

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

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

1. Используйте белый фон с умом

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

Apple

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

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

2.Сделайте сильный фокус

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

Google

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

3. Создание сильного контраста

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

carbonbeauty

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

4. Меньше значит лучше

Главное преимущество белого пространства — минимализм или простота.Белый фон лучше всего подойдет для чистого плоского веб-дизайна.

weaintplastic

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

5. Сделайте изображения выдающимися

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

RGA

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

Посмотрите, как Asana использует белый фон: синяя кнопка «Попробовать бесплатно» становится естественной точкой доступа.

Асана

6. Она не должна быть белой

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

MailChimp

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

Примеры веб-сайтов на белом фоне

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

nuabikes

элитная модель

Массимобонини

справочный

фитиль

однократно приложение

тедыд

felp

хронобанк

Заключение

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

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

Белый текстурный фон Веб-сайты — Weblium Blog

Hosting Tribunal утверждает, что первые впечатления пользователя 94% связаны с дизайном .Немаловажную роль играет и фон — это первое, что бросается в глаза посетителю сайта.

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

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

Кофейня «Sabcomeed» на белом фоне веб-сайт

веб-сайт: https://sabcomeed.com/

(номинант «Awwwards» в категории «Веб-сайт дня»)

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

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

Студия брендинга и дизайна «Uniel» Веб-сайт с белой текстурой фона

(номинант «CSS Design Awards» в категории «Веб-сайт дня»)

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

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

«Fast Car» Прокат автомобилей на белом фоне веб-сайт

(профессиональный шаблон Weblium)

Посмотреть демо

Используйте этот шаблон бесплатно

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

Шаблон фона с белой текстурой бегового клуба «RunnerZ»

(профессиональный шаблон Weblium)

Посмотреть демо

Используйте этот шаблон бесплатно

Чтобы сделать его проще (если у вас есть нет времени искать гениальные идеи), вы можете оживить обычный белый фон сайта светло-серыми геометрическими орнаментами, как это сделано на сайте RunnerZ.

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

Веб-сайт цветочной студии «Нежные цветы» на белом фоне

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

(профессиональный шаблон Weblium)

Посмотреть демонстрацию

Используйте этот шаблон бесплатно

Веб-сайт с белой текстурой парашютного клуба «Skydive Birds»

(профессиональный шаблон Weblium)

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

Захватывающая типографика, яркие надписи и кнопки, и, конечно же, эффектные фото дополняют картинку!

Посмотреть демо

Используйте этот шаблон бесплатно

Веб-сайт студии дизайна бренда «Logotypio» на белом фоне

(профессиональный шаблон Weblium)

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

Посмотреть демонстрацию

Используйте этот шаблон бесплатно

Детский образовательный центр с белой текстурой фона веб-сайт

(профессиональный шаблон Weblium)

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

Именно так они и поступили на сайте центра «Счастливое детство» — и, как видите, дизайн выглядит довольно круто!

Посмотреть демо

Используйте этот шаблон бесплатно

Веб-сайт IT-школы «ITStudy» на белом фоне

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

Посмотреть демонстрацию

Используйте этот шаблон бесплатно

«Ваш сад» услуги садоводства белая текстура фон веб-сайт

(профессиональный шаблон Weblium)

Познакомьтесь с естественным «зеленым» дизайном от «Your Сад »!

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

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

Посмотреть демо

Воспользуйтесь этим шаблоном бесплатно

Ярослава

Контент-менеджер, маркетолог и SEO-специалист!

24 лучших белых сайта идей

О наших вдохновениях в области белого веб-дизайна

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

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

Почему стоит выбрать белый дизайн сайта?

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

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

Что использование белого дизайна веб-сайта говорит о вашем бренде?

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

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

Какие цвета хорошо сочетаются с белым?

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

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

Сколько разных цветов я должен использовать на своем веб-сайте вместе с белым?

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

ЧЕТЫРЕ ПРИЧИНЫ, ПОЧЕМУ БЕЛЫЙ ФОН ЛУЧШЕ ДЛЯ ВАШЕГО ВЕБ-САЙТА

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

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

Все милые в белом

Взгляните на свои любимые веб-сайты.У всех ли у них черный текст на белом фоне? Скорее всего, это так. Мы называем эту цветовую схему «Черное на белом».

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

Все сводится к трем вещам:

1.) Коэффициент читаемости: Мы, люди, всегда читали свои слова на белом фоне.Наши книги, письма и блокноты всегда бледного цвета, но никогда — синего, красного или зеленого. С появлением Интернета на целых веб-сайтах естественным образом стал использоваться белый фон просто потому, что это то, к чему мы привыкли.

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

3.) Непригодно для старшего поколения: Твои глаза уже не те, какими были в старости. Для технически подкованных пожилых людей, ежедневно просматривающих веб-страницы, черный текст на белом фоне — находка. Слова более четкие, сайт выглядит приятным, и нет риска нанести дальнейший вред глазам. С другой стороны, веб-сайты с цветным фоном и еще более темным текстом представляют для них практически опасность для здоровья и даже могут привести к покупке новой пары очков.Если люди хотят отремонтировать пертское стекло, им следует использовать белый фон. Это потому, что белый фон несет чистые и ясные коннотации.

4.) Просто уродливо: В первые дни Интернета люди все еще экспериментировали с дизайном веб-сайтов, от хороших до совершенно уродливых. Время от времени появлялось несколько хорошо продуманных, но большинство из них было бы неудобно, если бы их показали сегодня. Это, конечно, зависит от личных предпочтений, но веб-сайты с «желтым текстом на ярко-розовом фоне» уже вызывали ужас еще в 1999 году.

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

Теперь вы знаете, почему веб-сайты имеют белый фон. Конечно, ничто не мешает вам выбрать более темный оттенок, но если вы стремитесь к максимальному удобству использования сайта (и хорошему веб-дизайну в целом), почему бы в этом случае не последовать за толпой?

7 смертных грехов веб-дизайна, которые вы, возможно, совершаете

Веб-дизайн — непростая тема.

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

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

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

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

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

Ошибка №1: слишком мелкие шрифты

Первая ошибка, которую делают люди, — это создание сайта со слишком маленькими шрифтами.

Причина этого в том, что в те времена на большинстве веб-сайтов использовались мелкие шрифты. Стандарт был где-то около 12 пикселей (9 пикселей), и почти все следовали этому стандарту.

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

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

Исследование показало, что средняя продолжительность концентрации внимания людей составляет 8 секунд, что на одну секунду меньше, чем у золотой рыбки. Это вообще возможно? Flickr: фотограф23 , Лицензия Creative Commons

Чтобы сразу привлечь внимание людей, вам необходимо сделать следующее:

  1. Составьте отличные заголовки, привлекающие внимание читателей.
  2. Напишите интересный контент, который заставит их прочитать более 28% того, что вы написали.
  3. Используйте шрифты заголовков, достаточно большие, чтобы привлекать внимание.
  4. Убедитесь, что основной шрифт достаточно большой для чтения, чтобы читатели не сдавались, потому что устали прищуриваться.

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

Вот несколько примеров исключительного веб-дизайна с большим размером шрифта:

Веро

  • Заголовок: 41 пикс.
  • Тело: 18 пикселей

Блог Help Scout

  • Вступительный текст: 26 пикселей
  • Тело: 19 пикселей

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

Также нужно помнить, что не все шрифты имеют одинаковый размер. Шрифт Arial размером 16 пикселей может быть меньше, чем версия другого шрифта на 16 пикселей. Это то, о чем вам нужно знать при выборе размера шрифта, поэтому вы не выбираете произвольно 19 пикселей, как это сделал другой сайт, только для того, чтобы узнать, что ваша версия 19 пикселей не такая большая.

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

Совет от профессионалов: Чтобы определить размер шрифта, который вы хотите использовать, в зависимости от веб-сайтов, которые вам нравятся, загрузите расширение WhatFont для Google Chrome.Это плагин Chrome, который позволяет очень легко нажимать на шрифты, чтобы узнать, какой тип и размер шрифта использует веб-сайт.

Ошибка № 2: перемещение ползунков

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

Насколько они эффективны? Они обращаются? Являются ли они лучшим способом представить вашу информацию клиентам?

В большинстве случаев это не так.

Еще в 2017 году Пип Лайа написал для ConversionXL статью под названием «Не используйте автоматические карусели или слайдеры изображений, игнорируйте причуду».

В статье он цитирует Криса Говарда из WiderFunnel и Тима Эша из SiteTuners, которые говорят следующее:

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

— Крис Говард

А…

Вращающиеся баннеры — это абсолютное зло, и их следует немедленно удалить.

-Тим Эш

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

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

Это указывает на теорию экспертов по конверсии, согласно которой ползунки вызывают слепоту баннеров, как и реклама на боковой панели.Люди привыкли видеть на боковой панели нерелевантную рекламу, поэтому имеют тенденцию игнорировать ее. Этот принцип, кажется, применим и к вращающимся ползункам.

Второе исследование было проведено в Университете Нотр-Дам. Они обнаружили, что только около 1% посетителей нажимали на ползунок, при этом 84% кликов нажимали на элемент, находящийся на первой позиции.

Короче говоря, мы уже много лет знаем, что эти ползунки просто не работают.

В 2019 году веб-дизайнер Джо Ринальди прокомментировал: «Если вы в настоящее время используете слайдер на своей домашней странице или рассматриваете его для будущего редизайна веб-сайта […], откажитесь от слайдера» и замените его чем-то более эффективным.

Какой смысл в слайдере веб-сайта, если только 1% людей нажимает на элемент, который занимает самую ценную часть вашей домашней страницы, особенно когда 84% этих кликов в любом случае приходится на первый элемент? Зачем раздражать людей движением, за которым сложно уследить? Почему бы не предоставить им один вариант на выбор, поскольку большинство все равно щелкает первый элемент?

Так почему же так много людей используют ползунки, если они кажутся такими неэффективными?

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

Но владельцам веб-сайтов необходимо подумать о том, будут ли они эффективны и будут ли они лучшим способом донести информацию на своем сайте. Пип Лайя, Крис Говард, Тим Эш и многие другие умные специалисты по интернет-маркетингу больше не считают, что дело.

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

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

Он и его деловой партнер подошли ко мне и сказали: «Эй, мы хотим создать веб-сайт… и мы хотим, чтобы на главной странице был слайдер с этой информацией», а затем он показал мне листовку, которую они раздают в школах для рекламы их обслуживание. Флаер был красивым, невероятно хорошо передавал информацию и, к удивлению, удивлению, не содержал слайдера (эти надоедливые ползунки, похоже, не подходят для мира печатных листовок).

Итак, я посоветовал: «Почему бы вам просто не продублировать вашу брошюру, которая уже работает, на вашей домашней странице, а затем поместить кнопку контакта вместе с вашим номером телефона и адресом электронной почты под ней». Мы попробовали это, и вот как вышло…

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

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

  1. Не забывайте добавлять слайдер вслепую только потому, что это делают все остальные (даже если ваш дизайнер рекомендует его).
  2. Подумайте, как лучше всего представить информацию о на домашней странице вместо того, чтобы слепо копировать то, что делают ваши конкуренты.
  3. Выберите одно важное предложение для размещения в A-пространстве на вашей домашней странице и приступайте к нему. Всегда будут другие вещи, которые вы хотите продвигать, но вы можете сделать это дальше вниз по странице или с помощью кнопки вверху страницы. Выберите одно предложение, сделайте его заметным, а затем не мешайте и пусть ваш сайт заработает.
  4. И чтобы по-настоящему сформулировать последний пункт, подумайте о цели №1, которую вы хотите, чтобы ваш веб-сайт достигал. Сосредоточьтесь на этом, а не на всех остальных призывах к действию.

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

Ошибка № 3: Низкоконтрастные шрифты

Еще одна большая ошибка, которую делают люди, — это использование низкоконтрастных шрифтов.

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

Вы всегда хотите, чтобы содержание вашего веб-сайта было максимально легко читаемым. В упомянутой выше статье Smashing Magazine говорилось, что количество света, проходящего через наши глаза в 40 лет, составляет лишь половину того количества света, которое проходит через наши глаза в 20 лет. К 60 годам оно падает до 20%. , почти 9% американцев страдают нарушениями зрения.

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

Низкая контрастность шрифтов — всегда плохая идея.

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

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

Почему? Это действительно легче читать, или вы просто пытаетесь добавить «визуальной привлекательности»? В книгах не зря используется черный шрифт на белом фоне — их легко читать.Веб-сайтам следовало бы последовать этому примеру.

Вот несколько примеров отличного контраста шрифтов:

Блог Help Scout

Evernote

Это пример хорошего контраста на изображении, что непросто.

Harry’s

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

Дополнительный совет: Важен не только высокий контраст, но и экономное использование реверса. (Обратный шрифт — белый текст на черном (или цветном) фоне вместо черного текста на белом фоне.)

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

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

  • Черный текст на белом: 70% хорошо, 19% удовлетворительно, 11% плохо
  • Белый текст на черном: 0% хорошо, 12% удовлетворительно, 88% плохо
  • Белый текст на фиолетовом: 2% хорошо, 16% удовлетворительно, 82% плохо
  • Белый текст на синем фоне: 0% хорошо, 4% удовлетворительно, 96% плохо

Разве это не невероятно? Результаты для черного текста на белом фоне по сравнению с белым текстом на цветном фоне почти противоположны!

Выводы:

  • Не забывайте использовать высококонтрастные шрифты, но также…
  • Экономно используйте реверсивный тип.

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

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

Ошибка №4: неправильная высота строки текста

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

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

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

Крис Пирсон из DIYThemes был настолько убежден в этом, что построил калькулятор высоты строки, настроенный на то, что известно как золотое сечение. Вот определение золотого сечения в Google:

.

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

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

Ошибка №5: слишком длинная линия

Еще одна ошибка, которую вы можете сделать, — это создание слишком длинных строк текста.

Итак, какова оптимальная длина строки?

Институт Баймара опубликовал статью, в которой говорится, что лучше всего от 50 до 60 символов в строке, при этом допускается до 75 символов.

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

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

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

В то время, когда была написана упомянутая статья, Институт Баймарда решил эту проблему, установив максимальную ширину для своего текста в 516 пикселей, что оставляет в среднем 65 символов на строку при размере шрифта 18 пикселей.Это создает отличные впечатления от чтения, как вы можете видеть на изображении ниже.

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

Ошибка № 6: Отсутствие акцента для призыва к действию

Следующий грех веб-дизайна — отсутствие акцентного цвета.Вот что я имею в виду:

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

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

Вот несколько практических правил выбора акцентных цветов:

  1. Он должен быть достаточно ярким, чтобы привлекать внимание к тому, на что вы пытаетесь привлечь внимание.
  2. Он должен дополнять другие цвета на вашем веб-сайте, чтобы не конфликтовать.
  3. Он должен выделяться на любом фоне. Это означает, что синяя кнопка на синем фоне, вероятно, не лучшая идея.
  4. Его необходимо зарезервировать для ключевых призывов к действию, чтобы не допустить чрезмерного использования на сайте.

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

Ошибка № 7: Общие нарушения принципа проектирования

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

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

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

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

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

Заключение

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

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

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

Об авторе: Джо Патнэм — основатель ConversionEngine, агентства, которое объединяет CRO с PPC, чтобы помочь предприятиям проводить прибыльные платные рекламные кампании.Он помог организациям в 10 раз увеличить SEO-трафик, вдвое снизить стоимость приобретения и в 20 раз увеличить количество потенциальных клиентов из Google Рекламы. Посетите сейчас, чтобы узнать больше.

Узнайте, как мое агентство может привлечь огромное количество трафика на ваш веб-сайт

  • SEO — разблокируйте огромное количество SEO-трафика. Смотрите реальные результаты.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *