Лучшие статьи и кейсы стартапов
Включить уведомления
Дадим сигнал, когда появится
что-то суперстоящее.
Спасибо, не надо
Вопросы Проекты Вакансии
Разработка качественных корпоративных сайтов, для малого и среднего бизнеса.
Рекомендуем
Продвинуть свой проект
Лучшие проекты за неделю
39
Битрикс24

Битрикс24

www.bitrix24.ru

30
Отследить-посылку

Отследить-посылку

отследить-посылку.рф

13
WebResidentTeam

WebResidentTeam

webresident.agency

12
Логомашина

Логомашина

logomachine.ru

11
Devicerra

Devicerra

devicerra.com

11
Flowlu

Flowlu

flowlu.ru

10
GIFTD

GIFTD

giftd.tech

9
Aword

Aword

Приложение для изучения английских слов

9
ADN Digital Studio

ADN Digital Studio

adn.agency

9
Eczo.bike

Eczo.bike

www.eczo.bike

Показать следующие
Рейтинг проектов
Подписывайтесь на Спарк во ВКонтакте

Как эффективно использовать пустое место в веб-дизайне?

5 800 5 В избранное Сохранено
Авторизуйтесь
Вход с паролем
Складывалось ли у вас когда-нибудь впечатление, глядя на готовую дизайнерскую концепцию, что чего-то не хватает? Если точнее, приходили вы к выводу, что дизайн является перегруженным или пустоватым?

Для нас, дизайнеров, затруднительно не обращать внимание на такие вещи.

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

b_56471c3c10eae.jpg

Действительно ли пустое место?

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

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

b_56471c3c53e9d.jpg

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

Фокус

Теперь, когда мы выяснили важность пробелов в наших работах, осталось понять, как их использовать. Для этого давайте выполним упражнение. Откройте новую вкладку вашего любимого браузера и перейдите на google.com. Что первым бросается в глаза? Спорю, вы обратили внимание на яркий логотип Google, верно? Где он расположен? Конечно, ваши глаза отыскали его не в верхнем углу, хотя поиск по привычке начинается именно там. Почему же тогда ваше внимание сразу сфокусировалось на центре страницы, минуя оставшуюся её часть?

b_56471c3c9d2cb.jpg

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

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

Организация

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

b_56471c3ce0c98.jpg

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

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

Акцент

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

b_56471c3d2f07e.jpg

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

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

Пустоты не обязательно должны быть белыми

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

b_56471c3d7135c.jpg

Отличным примером, иллюстрирующим это, является одностраничник модного тренда Gucci. Если вы ограничены лишь одной страницей контента, становится критически важным эффективное использование пробелов. Это помогает акцентировать внимание аудитории на продукте, как в данном конкретном примере. Блоки контента часто проектируются так, чтобы создать преемственность между ними – один перетекает в другой логичным образом. Меняя цвет пустого пространства в них, можно добиться выделения каждой области, разграничив при этом их значимость. Но это уже зависит от компоновки блоков и цветов. Так вы добьётесь ударения на содержании каждого блока без смешения всей страницы в кашу. Надеюсь, данные советы помогут вам пересмотреть отношение к пробелам в ваших дизайнерских работах и откроют новые перспективы!

Перевод статьи: http://speckyboy.com/2015/04/30/how-to-effectively...

+3
Добавить в избранное Сохранено
Авторизуйтесь
Вход с паролем
Первые Новые Популярные
Boosta.ru
Сайт об интернет-маркетинге: кейсы, советы, анализ ошибок, обзор сервисов
Andrei
Не раз замечал, что ребята, которые занимаются A/B тестами и увеличением конверсии уделяют много внимания пустым местам на страницах. Это позволяет разгрузить страницу и сконцентрировать внимание пользователей на самых важных элементах.
У нас в блоге проекта Changeagain, здесь, на Спарке, в последней статье есть даже кейс A/B тестирования, где в тестовом варианте в том числе добавили больше пустого места на лендинге и конверсия в регистрацию значительно увеличилась.
Вообще, интересная тема. Не совсем однозначная, поэтому требует проведения A/B тестов для проверки эффективности.
Ответить
Webest
Разработка качественных корпоративных сайтов, для малого и среднего бизнеса.
Чистяков Дмитрий
Полностью поддерживаю.
Как правило многие клиенты не понимают этого.
Ответить
Пол Грэм Коммюнити
Площадка для чтения и обсуждения эссе Пола Грэма
WOB
Эээ... так вот как теперь называется изучение законов композиции и компоновки. Пустое место никак не надо использовать, надо учиться композиции и дизайну.
Ответить
Vasilisa
Спасибо за интересный материал! Анонсировали в сообществах «Спарк» и «Цукерберг Позвонит»:

http://vk.com/wall-64915591_4069
https://www.facebook.com/spark.ru/posts/417419578455848
http://vk.com/wall-33393308_350245
https://www.facebook.com/SMMrussia/posts/998407970184118
Ответить
Webest
Разработка качественных корпоративных сайтов, для малого и среднего бизнеса.
Чистяков Дмитрий
Рады быть полезны!
Ответить
Выбрать файл
Читайте далее
Загружаем…
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать