Сайт за Уеб и БГ бизнес

Ефективно използване на “бялото пространство ” в уеб дизайна част първа

3

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

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

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

За да усетите разликата при правилното му използване или липсата му, нека да разгледаме няколко уеб страници, които използват бели пространството ефективно и професионално.

Сайта на Sofa

Дизайнерите на madebysofa.com са използвали голямо изображение в хедъра за да предизвикат силна емоция върху посетителя. Те използват бялото пространство за да разделят заглавието,мотото и параграфите. Нека погледнем от близо:

Забележка: сивите области са бялото пространство

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

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

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

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

Ето няколко съвета за начало:

1. Разстояние между редовете

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

Прекалено малко бяло пространство:

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

Прекалено голямо разстояние между редовете:

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

Манипулирането на разстоянията между редовете с CSS става с помощта на “line-height”

p { line-height: 1.4 }
p { line-height: 14pt }
p { line-height: 140%}


1.Разстояние между абзаците и различните елементи от дизайна

“margin” е пространството около даден елемент в дизайна. CSS “margin”-те са чудесен начин да се контролира това пространство. Когато ползвате “margin”,трябва да знаете следните особености:

1. Съгласуваност
Използвайте пространството около елементите последователно в цялосносто оформление на уеб сайта.Колкото по-последователно използвате разстоянията, толкова по-организиран и професионален ще изглежда уеб сайта ви. Ползвайте вертикалното и хоризонталното разделяне на елементите в дизайна, и двете имат силен ефект върху цялостната визия на уеб сайта.

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

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

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

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