Симпъл оформления и съвсем конкретни съвети за дизайн, които да ви помогнат да създадете зашеметяващи уеб страници…
В момента по света има над милиард уеб сайтове, създавани от хиляди хора и фирми. Тази статия се основава на скорошни изследвания на екипа на Tilda. Те са анализирали често срещаните грешки, които хората правят, когато създават уеб сайтове, използващи тяхната платформа. Но, същите грешки се допускат и за всякакви платформи и къстъм разработки.
Ето списък на това какво е добре и какво не е добре да се прави, приложим към който и да е инструмент или услуга за уеб дизайн, които използвате.
Често допускани грешки при дизайна на целевата страница, които да се избягват
1. Съдържанието не е разделено на логически блокове
По-лесно е потребителите да възприемат и асимилират информация, ако е групирана в логически блокове. Задайте подложка около 120 px-180 px и отделни блокове от текст, като използвате цветни фонове.
Тук има съвсем малко място между редовете и някакси не става съвсем ясно кога свършва едната тема и къде започва другата, освен това този дизайн се нуждае от цветни блокове, за да разделят съдържанието в логически комплекти.
В резултат на това тази информация е трудна за разчитане и не е ясно кой текст към кой блок от информация принадлежи.
Тук разстоянията са достатъчно големи и блоковете са разделени по цвят, което прави нещата съвсем ясни – тези блокове съдържат различни видове информация.
2. Неравномерно пространство между елементите на уеб страницата
Еднакви размери празно пространство трябва да има около логическите блокове от съдържание. В противен случай страницата ви ще изглежда объркана и потребителите няма да обръщат еднакво внимание на всеки раздел.
Пространства с различни ширини изглеждат неравномерни и създават впечатление, че фирмената информация е свързана със заглавната част, въпреки че всеки блок е еднакво важен.
Еднаквите размери около заглавията и описанията помагат на логическите блокове да се възприемат по-лесно и да показват, че носят различна, но еднакво важна информация.
3. Прекалено малкото празно пространство, между съдържанието, означава че потребителите не могат да разделят мислено самото съдържание в логически блокове
За да избегнете смесването на логическите и семантични части, ги разделете и поставете голямо пространство (поне 120 пиксела) между тях.
Ако използвате малки празни пространства между различните блокове със съдържание, те като че ли се придърпват един към друг. Това претоварва страницата и е доста объркващо – посетителите на сайта вярват, че това са абзаци от един солиден текст, а не части с различно значение.
Когато празното пространство е достатъчно голямо, разликата между тези два семантични и смислово разделени части от сайта е веднага видима. Това е много по-силно изявено и играе по-голяма роля, когато става дума за едностранични уеб сайтове (SPW).
4. Не достатъчен контраст за текст върху изображение
Трябва да има достатъчно контраст между текста и фона. За да направите текста достатъчно видим, поставете контрастен филтър върху изображението. Черното е популярен цвят, но можете също да използвате ярки цветове и да ги смесите.
Друга опция е използването на контрастиращо изображение от началото и поставянето на текста върху тъмната част на снимката.
Това изображение е прекалено светло, което прави твърде трудно прочитането на текстовото съдържание.
Филтърът, приложен към снимката, прави текста съвсем лесен за четене.
5. Твърде много стилове на една страница
Твърде много типографски и дизайн стилове на една страница я правят да изглежда непрофесионална и трудна за четене. За да избегнете това, ограничете се до един шрифт и две опции за насищане, например нормална и по-тъмна.
Поради прекаленото използване на множество
типографски стилове, не е ясно къде попада акцентът.
Един шрифт, един цвят и два вида сатурация.
Типографията настраницата изглежда чиста и ясна.
6. Не слагайте цветни подложки на кратки логически блокове
Избягвайте да подчертавате тесните елементи на страницата с цвят. Просто не изглежда добре. Например заглавията вече са добре маркирани благодарение на техния размер и болдването на самия шрифт. Искате ли да подчертаете конкретна точка на страницата? Използвайте цветен фон за целия блок, включително заглавието и текстовото съдържание.
Заглавията, поставени на цветен фон, разбиват непрекъснатостта на страницата и приличат на отделни независими елементи.
Както заглавието, така и свързаният текст споделят
един и същ фон. Съвсем ясно показва, че принадлежат
към един и същ логически набор.
7. Твърде много текст във вътрешни блогове
Когато в определена страница има няколко колони със съдържание и там има много текст, се чете трудно, защото посетителите на сайта трябва буквално на всяка втора, трета дума да прескочат от един ред на друг. Освен това просто не изглежда добре! Правилно би било да намалите броя на колоните и да съкратите текстовото съдържание в тях. В противен случай никой няма да го прочете.
Много текст под тесен блог е труден и неприятен за четене.
Под тези смислови съдържателни откъси има съвсем малко текст
и е лесен за четене и възприемане.
8. Прекалено много центриран текст
Центрирането на текста на страницата работи добре, когато има малко текст, в противен случай потребителите започват да се затрудняват да навигират ефективно. Същевременно увеличавайте размера на шрифта, като започнете от 24 пиксела.
Ако трябва да включите много текст, използвайте блоковете, които „крият“ текстовото съдържание и след като кликнете на тях се показва цялото. Като падащо меню.
Дългите центрирани текстове не са лесни за четене.
Краткият центриран текст, изглежда добре на страницата.
9. Текстовото съдържание върху съществена част от изображението
Избягвайте да покривате смислени части или малки детайли на изображение с текст. По този начин ще закриете изображението и ще направите текста нечетлив. Изпробвайте различни позиции за редовете, като центриране или приравняване на текста вляво, дясно, или поставянето му вертикално.
Това заглавие пречи на лицето на жената. С толкова много
детайли на изображението е трудно да прочетете текста.
Изображението и текстовото копие са лесни за четене
и формират добра композиция.
10. Нарушена визуална йерархия
За да може йерархията на информацията да бъде ясно видима на страницата, заглавието на хедъра трябва да е по-голямо от останалите заглавия или поне със същия размер, особено ако е дълго, например.
Обикновено то е маркирано като H1 заглавие, но е необходимо и да притежава определена визуална големина.
Заглавието на хедъра е несъразмерно по-малко от следващото, което е объркващо. Защо? Това прави второто заглавие очевидно и открояващо се, а първото незначително.
Заглавието на хедъра е по-голямо от това в следващия блок,
така че цялата страница изглежда нормална и последователна.
11. Един логически блок е разделен на две
Едно изображение или галерия на цял екран, след текст, прилича на отделен независим блок. Ако добавите подложка около галерията, текста и изображенията ще изглеждат като логично цяло благодарение на това, че споделят един фон.
Галерията на цял екран изглежда несвързана със заглавието
по-горе и изглежда като самостоятелен блок.
Галерията споделя същия фон като заглавието точно над нея,
което прави цялата композиция смислово разбираема.
12. Заглавието е твърде голямо и дълго
Много голям шрифт е идеален за няколко думи. Ако заглавието е дълго, използвайте шрифт с по-малък размер. То ще бъде лесно за четене и ще остави достатъчно пространство за всички други дизайнерски елементи на страницата.
Заглавието, което е твърде голямо, заема цялото място, докато дизайнерските елементи се свиват за пространство и заглавието става грубо и трудно за четене.
Тази страница е съставена добре, всички елементи на дизайна
са в баланс помежду си и текста е лесен за четене.
13. Грешно използване на цветова рамка за бутони
Цветовите рамки са необходими, когато бутонът е прозрачен. Добавянето на рамка за цветен бутон няма смисъл, това е просто още една безсмислена дизайнерска функция, която претоварва страница и я затруднява за четене и възприемане.
14. Използване на твърде много цветове
Използването на твърде много цветове на страница е объркващо и не става ясно кое е най-важното. Един или два цвята са достатъчни, за да дадат визуална среда на това, което е наистина от значение.
На страницата има твърде много ярки цветове; това е объркващо.
Един цветен акцент създава разнообразие и не
отвлича вниманието от съдържанието на страницата.
15. Претрупано меню
Хората посещават уебсайтове, за да намерят решения на проблемите си. Помогнете им! Използвайте менюто, за да помогнете на хората да навигират в уеб сайта и да намерят това, от което се нуждаят, бързо и лесно. Не ги претоварвайте с прекомерна информация. Достатъчно е да имате 5-7 елемента в менюто.
Това меню носи твърде много информация, което прави навигацията в сайта по-трудна.
Едно опростено меню прави лесното намиране на това, от което се нуждаете.
