Най-добри практики за уеб дизайн: минимализъм и типография
Когато говорим за дизайн, ние трябва да разгледаме текста от гледна точка на дизайнера. Текстът трябва да е четлив и четим, докато се вписва добре в стила на уебсайта. Но тя също трябва да е свързана с йерархия на съдържанието.
Изграждането на йерархии е „голямата картина“ на състава на уебсайта. Но докато преминавате в типография, вие също трябва да създадете йерархии, свързани с конкретен текст на страницата. В това парче ще обясним създаването на връзки с вашите заглавки и как да използвате бялото пространство, за да направите визуално смилаемите дълги абзаци.
Заглавия и интервали
Обикновено уеб съдържанието се фокусира около няколко различни текстови елемента. Заглавията варират от H1-H6, но повечето уебсайтове използват само H1-H4. Независимо от това колко стилове на заглавия се използват, ваша работа като дизайнер е да ги изработите, така че йерархията да е ясно установена.
Пространството между текста е важно, защото помага да се определи самото съдържание на страницата. Когато потребителите намерят ново заглавие, те очакват да разпознаят дали съдържанието преминава към чисто нов обект или е в рамките на съществуваща тема. Правилната комбинация от размер, цвят и стил на заглавния текст помага да се създадат правилните очаквания за потребителите.
Отрицателното пространство между текста показва как е свързано съдържанието на страницата. Заглавките с много място се разглеждат като по-доминиращи, докато заглавките по-близо до абзаците се разглеждат като свързани чрез контекста. Долните полета след абзаци показват връзката между редовете на текста и мястото, където те принадлежат в йерархията. Всичко това се отнася до създаването на йерархия на съдържанието, за да се разграничи визуално текста на страницата.
Заглавие взаимоотношения
Всяко заглавие трябва да отразява свой собствен уникален стил, който също допълва други стилове текст на страницата. Създаването на блестящи заглавки става по-лесно с практиката, но стойностите на бялото пространство обикновено трябва да се държат еднакво, независимо от стиловете на заглавието.
Square използва традиционно оформление на началната страница с изобилие от изображения и блокове текст. Заглавията са особено интересен сегмент от дизайна, тъй като варират от големи до безкрайно малки. И все пак размерът всъщност не е толкова важен, колкото връзката с други текстове на страницата.
Забележете на екрана по-горе как големите заглавия използват допълнително разстояние над и под текста. Тези заглавия на раздели визуално предават усещане за „самостоятелно“, но също така естествено се групират в по-големи блокове от подпозиции и параграфи.
Всеки вътрешен блок използва текст в подзаглавието, който е много по-малък. Тези вътрешни заглавки са с приблизително същия размер като текста на абзаца, но те се открояват с удебелен текст и по-тъмен цвят. Визуално е кристално ясно, че тези удебелени редове от текст все още са заглавия (само по-ниско от визуалния тотем полюс).
Количеството пространство между заглавките и абзаците също определя кои абзаци принадлежат на кои заглавия. По подобен начин трябва да поставите много място между по-малки заглавки и по-големи заглавки. Отново отрицателното пространство определя йерархията както във визуалния дизайн, така и в типографията.
Както е обяснено в безплатното ръководство Най-добри практики за дизайн на потребителски интерфейс, помнете следните точки, когато изработвате заглавия на страниците:
- Визуалната йерархия трябва да бъде очевидна чрез използването на пространство, размер, цвят и / или стил на текст. Това трябва да се вижда дори когато стоите на 3–5 метра от монитора. Можете също така да използвате 5-секундния тест за размиване на Гаус, за да проверите йерархията.
- Дръжте всяка подзаглавие близо до първия си абзац.
- Поставете жалките заглавки в непосредствена близост, за да предавате идеи по-бързо и ясно.
Дълги параграфи
По темата за контекстното бяло пространство стои въпросът как да се проектира около общия параграф. Твърд, надежден и открит почти навсякъде, параграфът е основата на стратегията за съдържание на всеки уебсайт.
Но как се пише съдържание варира в зависимост от това как е оформено съдържанието. Например онлайн списание за новини ще използва различни стилове на абзаци от по-малък блог за градинарство. Количеството на съдържанието, дължината на съдържанието и нивото на детайлността влизат в игра при стилизирането на параграфи.
Опитайте се да проектирате с достатъчно голям текст, така че да е ясно четим на 3 фута от екрана. Размерът на текста е много подобен на бялото пространство, тъй като обикновено е по-добре да се проектира по-голям от по-малък. Въпреки това, упражнявайте умереност и сдържаност.
Ако размерът на текста е твърде голям, той просто ще заема повече пространство на екрана и ще изисква повече превъртане. Но ако е твърде малък, това може да бъде нечетливо или посетителите ще изпитат затруднения с вертикален ритъм, докато движат очите си от линия на линия.
Две важни неща, които трябва да имате предвид, са полетата на абзаца и височината на реда (интервалът между всеки ред). Размерът на текста в параграфите ви диктува и двете стойности, защото бялото пространство зависи от размера.
Medium е онлайн блог платформа, която прави дизайна на абзаци правилно. Текстът е ясен, четим и разположен перфектно. Както показва техният дизайн на абзаци, стойностите на височината на линията трябва да са достатъчно големи, за да се свържат със следващия ред, без да се чувстват прекомерни.
Както се препоръчва в електронната книга за уеб дизайн тенденции 2016, ето няколко добри правила, които трябва да спазвате:
- Избягвайте да увеличавате височината на реда по-голяма от типичния ред текст.
- Единицата за шрифт em е идеална за създаване на еднакви размери във всички браузъри.
- Често височината на линията трябва да е малко по-голяма от шрифта.
- Опитайте размер на шрифта 1em, комбиниран с височина на линията 1, 5em-1, 75em.
Разстоянието между абзаци може да бъде сложно, но това е важна тема, особено за уеб сайтове с тежки текстове. Долната граница на абзаца трябва да е много по-голяма от типичен ред текст. Полетата на долния абзац трябва да са достатъчно големи, за да можете визуално да определите кога абзацът е приключил.
След като разберете размера на текста на уебсайта, става много по-лесно да играете със стойности на височината на линиите и да разберете полета за разстояние. Целта тук е яснота и структура. Всеки нов параграф трябва да е очевиден без никакво съмнение. Ключът е пропорционално пространство между всеки блок текст.
Както споменахме по-рано, по-безопасно е да имате "твърде много" бяло пространство, а не достатъчно. Просто избягвайте използването на колосални количества пространство или ще се окажете с много плитка плътност на съдържанието. Съхранявайте достатъчно съдържание на страницата, за да е интересно, но не толкова, че да е зашеметяващо.
За да научите повече за проектирането на съдържание в уеб интерфейси, разгледайте тази част за това как да проектирате перфектния абзац.
За вкъщи
Отрицателното пространство в типографията влияе директно върху цялостната композиция и по-малките елементи на страницата едновременно. При проектирането на типография контекстът е крал.
Параграфите, намерени на страницата, може да се нуждаят от по-големи полета от абзаците, намерени в страничната лента. Връзките в заглавката могат да изглеждат по-гладки с допълнително подплащане, но връзките в долния колонтитул могат да изглеждат по-подредени с много малко подплънки. Няма твърди правила, само най-добри практики, които трябва да имате предвид.
Не забравяйте също, че типографията следва заедно със собствената й йерархия, точно като структурата на страниците. Много практики ще бъдат оптималният начин да подобрите очите си за бързо разпознаване на пространствени стойности, които се вписват най-добре във всеки даден уеб проект.
Когато става дума за проектиране с пространство, не забравяйте, че пространството като естетическо качество заема задната седалка към пространството като инструмент за дизайн. Пространството създава взаимоотношения, определя йерархии и набляга на съдържанието - винаги имайте това предвид, когато обмисляте как да намалите зрителния шум.
Можете да научите по-пригодните техники за дизайн в безплатната електронна книга за уеб дизайн тенденции 2016 от UXPin. Ръководството на 185 страници обяснява 10 детайла най-добри практики. Ще намерите 165 анализирани примера от най-добрите компании днес.
