Вебмеханик
Москва, Люблинская 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, где успела взять несколько призовых мест, личные номинации и гран-при за несколько сезонов — маркетинг из увлечения перерос в серьёзную работу.


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

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