Ефективно използване на “бялото пространство ” в уеб дизайна част първа
3Какво е “бяло пространство” в уеб дизайна
Бяло пространство е пространството между различните елементи на дизайна – зоната между текста, изображения, параграфите, заглавията,футърите, линковете и др. Това е пространство между различните елементи на дадена страница, пространство между буквите и редовете в параграф.
Бялото пространство дава възможност за разделяне на визуалните елементи на дизайна, без добавяне на нови елементи, като например видими линии или кутии. За съжаление то е един от най-недооценените елементи на уеб дизайна. Просто защото не придава лъскавост или блясък не означава, че не е важно или от съществено значение за една уеб страница, напротив, когато се използват правилно, придава изчистеност и професионализъм на уеб сайта.
За да усетите разликата при правилното му използване или липсата му, нека да разгледаме няколко уеб страници, които използват бели пространството ефективно и професионално.
Дизайнерите на 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. Не твърде малки
Ако разстоянията са твърде малки текстът ще бъде нечетим, изображенията ще изглеждат сбити, ще се загуби ефекта на заглавието и потребителя ще се задуши от визуалния ефект на вашия дизайн.
Related posts:
- Ефективно използване на “бялото пространство ” в уеб дизайна част втора 3. Минимализмът не е равен на бяло пространство Един от...
Related posts brought to you by Yet Another Related Posts Plugin.
Ако тази публикация ви е харесала, моля дайте вашия коментар или се абонирайте за актуални новини и публикации от blogiada.net.
Браво, Марто!
Много просто и ясно казано, с нагледни примери. Добра работа!