Вебмеханик
Москва, Люблинская 151,
Phone: Номер телефона – 7 (495) 504-30-20 Вебмеханик
Астрахань, Н.Островского 148Б,
Phone: Номер телефона – 8-(804)-333-98-28
Вы можете связаться с нами бесплатно:
8 804 333-98-28
или заказать обратный звонок
отправьте вопрос
Заполните бриф
Остались вопросы? Задавайте!
Дизайн и пустота: как белое пространство может стать лучшим вариантом для оформления веб-страницы
Автор: Алёна Леонова
Дата: 15.02.2019      
Комментарии: 0

Одним из способов объединения всех дизайнерских решений веб-страницы (заголовки, иконки, текст, картинки и пр.) является применение вёрстки с привлечением белого пространства — нейтрального фона, который удачно выделяет нужные элементы. Почему использование контрформы так необходимо и как правильно её внедрить? Разбираем в сегодняшнем материале.

Немного о белом пространстве

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


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

Два вида белого пространства: микро и макро

Белое пространство можно охарактеризовать как микро и макро. Классификация подразумевает разделение на два типа в зависимости от плотности расположения элементов.

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


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

Как понять, когда и какой тип контрформы необходим?

У верстки с контрформой есть свои правила. Выбор макро- и микро-пространства зависит от наполнения страницы.

  1. Контент и контрформа. Чем больше текстовых и графических блоков на сайте, тем больше необходимо использовать макро-пространства, но вместе с тем доля микро-пространства увеличивается. Этот баланс важно соблюдать для поддержания смысловой границы веб-страницы.
  2. Стиль веб-страницы также сильно влияет на выбор того или иного вида контрформы. Полная «воздуха» страница или плотная колонка графики и текста — выбор за вами. Главное — помнить о балансе своего решения.
  3. Стоит провести небольшой тест на целевой аудитории, чтобы узнать мнение пользователей о дизайне сайта. Нет единого дизайнерского решения, которое было бы универсальным и нравилось всем, так что за основу лучше взять результаты опроса.
  4. Самое главное — помните, что по тому, как именно вы верстаете с использованием белого пространства, можно неявно, но говорить о бюджете, потраченном на дизайн сайта. Хороший пример — сайты мировых брендов. Взгляните на примеры, и вы сами всё поймёте.




Активное и пассивное применение белого пространства

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


На что влияет негативное пространство?

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



Авторская группа
Алёна Леонова
менеджер отдела таргетированной рекламы

Алёна обучается по специальности «Маркетинг в торговой деятельности» в АГТУ, а также получает образование переводчика в сфере коммуникаций. В детстве мечтала быть режиссёром: хотела творить, быть знаменитой и командовать людьми. Однако поняв, что режиссёром становиться немного накладно, начала задумываться о творческой профессии, но с серьёзным подтекстом. В 9 классе узнала о конкурсе для маркетологов и рекламистов в АГТУ, приняла участие, выиграла всех «старожилов». Так и втянулась. После второго курса параллельно с двумя образованиями пошла работать к нам. Тут Алёна занимается любимым копирайтингом — пишет статьи, любые тексты и правит уже написанные, а также работает с репутацией заказчиков и продвижением компаний в социальных сетях. 


В работе сильно помогают чувство юмора, отличное знание русского языка и любовь к знаниям: Алёна является капитаном сильной студенческой команды по «Что? Где? Когда?». Также она участвует в международном конкурсе по маркетингу BigGame by Marketorium, где успела взять несколько призовых мест, личные номинации и гран-при за несколько сезонов — маркетинг из увлечения перерос в серьёзную работу.


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

Вам наверняка понравится:
Dublin trip: Google Premier Partner Awards и прекрасная Ирландия, или статья о том, как мы посетили самое важное событие года
Кейс «Видео против фото»: сравнение эффективности кампаний MyTarget по продаже земельных участков
Тестирование логику бьёт. 4 причины попробовать что-то самому, чем довериться логике.
Оптимизация рекламных кампаний на основе статистики конверсий высокого порядка
Яндекс и Вебмеханик: 100% бизнес-аналитики + сертификат!
GO ON: GAME ON!
CallTouch this: от выступления до сертификации
Контекстная реклама как инструмент продвижения издательства «Delibri»
#ЯСДАЮКРОВЬ: курс юного донора
Тонкости баннерной рекламы. Как не «слить» бюджет?
Кто виноват и что делать? 7 принципов работы с негативом в Сети.
РА Webmechanic вновь подтвердил статус сертифицированного агентства Яндекс по результатам IV квартала
Не надо так: типичные ошибки продвижения имиджа работодателя в сети
Ok, Google! Рекламное агентство Webmechanic
9 трендов в графическом дизайне в 2017 году, о которых должен знать ваш дизайнер (и наш)
Бизнес-профили в Instagram: как перестать нравиться подвесному потолку
Каждый желает знать… И мы не исключение!
Дорогие подарки и долгие отношения: инфографика любви РА Webmechanic
Анатомия контекста. Часть 1.
Говорим без остановки: 3 способа взять от SocialMedia больше
«ЖМИ СЮДА!» — СЕКРЕТЫ «ПРАВИЛЬНЫХ» КНОПОК
Яндекс.Медиана: теперь действительно найдётся всё
Результаты сертификации Яндекс: III квартал наш!
От статуса до премии: РА Webmechanic готовится к Google Premier Partner Awards 2017!
Google Premier Partners Awards: мы попали в shortlist!
Что не так с вашими котиками? 5 типичных ошибок в реализации SMM-стратегии.
РА Webmechanic подтвердил статус сертифицированного партнера компании Яндекс по результатам I квартала 2019 года
Новая награда! Google Premier Partner Day
We are all anonymous: тёмная сторона Сети
CSS Writing Mode
Ответы на 4 частых вопроса о прототипах
Оставьте свой комментарий: