Как да използвате ефективно бялото пространство в сайта си

Грешиш, ако си мислиш „в моя сайт всичко е цветно, затова тази статия не ме касае“. Бялото пространство в сайта ти всъщност е празното пространство, незаето от текст, снимки, бутони, форми за запитване, графични елементи.

То ти помага да задържиш посетителите на сайта си и дори да ги превърнеш в клиенти. Не гледай на него като на разхищение, не се опитвай да го запълниш до краен предел. Разбери за какво и как да го използваш.

⇒ Прочети цялата статия на дизайнера Люба Попова. Направи необходимите промени и ако искаш мнение, остави линк към сайта си в коментарите. Люба ще ти даде обратна връзка, насоки и препоръки кое как да подобриш. 

Бялото пространство е един от най-мощните инструменти в уеб дизайна. Можете да го използвате, за да:

• насочите вниманието към даден елемент (бутон, акцент);
• създадете усещане за по-висок стил (колкото повече въздух оставяме, толкова по-премиум изглежда продуктът);
• осигурите по-висока степен на четимост, което пък помага на читателя да се потопи в съдържанието без да се изнервя.

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

Много често бялото пространство се пренебрегва. Някои хора мислят, че колкото повече неща има на страницата, толкова повече информация получават потребителите. Всъщност това не е така. Претрупаността отвлича вниманието и създава излишен шум. (Припомнете си статията ми за когнитивното претоварване и начините да го избегнем.)

⇒ Бялото пространство не е задължително в бял цвят. То е просто празно пространство без никакви обекти в него. Може да е макро – „въздухът“ или фона около основните елементи (секциите в сайта ви), а може и да е микро – пространството между елементите в дадена група (междуредия, разстояния, negative space).

За какво да използвате бялото пространство в сайта си

1. Използвайте го за подобряване на ползваемостта

То помага на посетителя да сканира текста по-лесно. Освен това добре използваните пространства между елементите, особено в съчетание с добра визуална йерархия, лесно насочват към желаното действие, например към бутона за поръчка.

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

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

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

2. Използвайте бялото пространство, за да насочвате вниманието към най-важното

За целта не трябва да слагате излишни елементи И не трябва да правите елементите, с които работите еднакво значими. Оставете някои от тях да „потънат“ назад, докато другите изпъкват.

Водещите елементи могат да са 1-2 думи, бутон или един образ в снимката. Така  насочвате вниманието на посетителите към най-важната информация или емоция и подсилвате желанието им да прочетат, вече достатъчно съсредоточено, и останалото.

3. Използвайте го, за да подобрите визията

Добрият дизайн не е претрупан. Колкото повече въздух оставяте и колкото по-малко излишна информация (вкл. визуална) давате, толкова по-ефектен и запомнящ се ще е той.

Празните пространства придават изисканост на визията, което подобрява възприятието и опита на потребителите. За да разделите визуално различните секции в сайта си, можете да използвате 1-2 нюанса за фон – така ще изглежда наистина минималистично, а не просто празно.

Къде в уеб сайта можете да ползвате ефективно бялото пространство

Освен гореизброените съвети, които важат за целия сайт и за цялостната концепция, вижте и няколко конкретни примера, в които бялото пространство е истински ефективен инструмент:

Hero section – тя първото, което потребителят вижда. Не просто не я претрупвайте, използвайте я, за да кажете само най-важното. Това може да е услугата/ продукта, който приоритетно предлагате, може да се фокусирате върху удовлетворяването на най-голямата потребност на вашия клиент.

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

Оферти – когато някъде в страницата ви има оферта, оставете около нея колкото можете повече въздух. Нека офертата да е единственото, което се вижда на екрана. По този начин давате малко „почивка“ на потребителя от информацията в предишната секция и му помагате да се съсредоточи върху неустоимото ви предложение.

Основната ви услуга/продукт – редно е да изброите всички свои услуги. И все пак основната ви услуга трябва да грабва вниманието категорично. Можете да я отделите с цвят и контраст, но може и да я оставите в по-голямо каре без нищо друго във видимата част на екрана. Останалите услуги подредете в по-малки карета една до друга.

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

Секция с продукти – в някои страници в онлайн магазините (начална, лендинг, блог статия) може да се добави секция с определени продукти (сезонни, промоционални, най-нови). Тя изглежда по-представително, ако е отделена с повече бяло пространство.

Категорийна страница – дори да ви се иска да сложите колкото се може повече продукти във всяка категория, всъщност е по-добре да има по-малко, но по-големи продукти на един ред. Така ще позволите на всеки артикул да диша, а на потребителя – да ги възприема пълноценно.

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

Продуктови снимки – въздухът в самите снимки е добър пример за микробяло пространство. Би било добре, ако можете да снимате продуктите си на изчистен фон (не задължително бял и не задължително без други елементи). Оставете повече въздух около тях, без обаче да ги загубите във фона.

Цитати – ако в съдържанието ви има важен цитат, който подкрепя мнението ви или подходящ израз на известна личност, нека е отделен с повече пространство, за да изпъква визуално и като значимост. Това се отнася и за ревютата и мненията от клиенти, особено на лендинг страниците, при които се използват за убеждаване за покупка.

Call to action – един от най-важните елементи в сайта. Призивът за действие не винаги е само един бутон – понякога е цяла секция. В такъв случай тук важи съветът ми да се даде повече въздух не само около секцията, но и между елементите вътре в нея.

Бутон – тъй като това е елементът, чрез който потребителят ви става клиент, направете го достатъчно видим, контрастен и „свободен“ от разсейващи елементи наоколо. Независимо дали става въпрос за бутона в онлайн магазина, в лендинг страницата ви или в листинга на блога – той трябва да е лесно кликаем, особено на мобилна версия.

Как да разберете претрупан ли е дизайнът на сайта ви

Направете следния 5-секунден тест:

1. Отворете някоя страница от сайта си.
2. Гледайте я 5 секунди.
3. Затворете я и си запишете какво си спомняте.

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

Ако се притеснявате, че познавате сайта си прекалено добре и тестът няма да е верен, помолете приятел да ви помогне.

Направете промените в сайта си и ако имате въпроси, или искате да го погледне дизайнер, за да сте спокойни, оставете ми линк в коментар. Ще ви отговоря и ще ви дам насоки и препоръки. 

Разгледайте и тези статии (на английски) за работа с бялото пространство в уеб сайта:

• The Power of White Space in Design
• White space design: 20 striking examples and best practices
• WhiteSpace in Web Design: Definition, Best Practices &Examples 
• White Space in Graphic Design
• Using White Space (or Negative Space) in Your Designs
• Difference Between Negative space and White space in Design

===

Любомира Попова е уеб дизайнер на свободна практика и художник-сюрреалист с артистичен псевдоним Fineluart.
Създава първия си статичен сайт през 2008. В момента се е специализирала в изработката на WordPress сайтове и визии за уеб. Занимава се с дизайн повече от 17 години, като през повечето време е била част от рекламни фирми и агенции. Създавала е визии за почти всички рекламни среди – външна, печатна, уеб, digital, TV. Работи основно с малки бизнеси в сферата на услугите, макар през годините да е правила реклами за представители на почти всички сфери.

Има професионален интереси в областта на дигиталния маркетинг, графичния дизайн и social media. Това ѝ дава възможност да вижда уеб сайтовете не само като дизайн, а като част от визуалната комуникация между бранда и потребителя. За нея всяка отделна визия е част от цялостно развитие, а не „парче дизайн“.

„Редовно консултирам клиенти и млади колеги и винаги се радвам, когато успея да улесня някого по пътя му в моята (любима) сфера. Ако имате въпроси за дизайн и реклама, съм насреща да помогна, независимо дали става въпрос за принципи в дизайна, тенденции, технически въпроси, видове реклами или се нуждаете от конкретни съвети за личните си проекти. Питайте ме.“ Люба