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