Най-новите тенденции в света на уеб дизайна: запознайте се с Card Design! Екран с висока резолюция. Добавете естествени цветове и нюанси

Искате ли да разработите модерен интерфейс в стил карти? Това вероятно не е лоша идея. Картите са популярни и лесни за употреба, подходящи за всички видове дигитален дизайни за екрани от всякакъв размер. Ключът към успешния дизайн в стил карти е създаването на нещо, върху което потребителите искат да кликнат. Картата трябва да служи като контейнер за конкретно съдържание - връзка, форма за влизане, видео плейър и т.н. - с което потребителят ще иска да взаимодейства. Ето как да създадете този дизайн.

Започнете с черно-бели контури

Звучи много просто: започнете с черно-бял макет на вашия дизайн. Помислете за предназначението на картите и кои части от тях ще могат да се кликват. (Цялата карта може да служи като връзка.)

Планирайте елементите: бяло пространство, изображения и типография, така че да можете да видите картата без цвят или дизайн. Мислете за това като за етап на проектиране на игрални карти. Всички елементи на картата са на мястото си. Лесно ли е разбираемо оформлението?

Помислете как ще използвате картите на този етап. Къде щракнете, за да извършите това или онова действие? Ясни ли са структурата и резултатът? Как ще се върнете назад или обратното, ще направите крачка напред? Отговорите на тези въпроси трябва да са ясни без подкани като червени знаци „Щракнете тук“.

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

Използвайте много свободно пространство

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

Изобилието от „въздух“ ще даде пространство на елементите на дизайна, ще направи всички карти визуално по-просторни и ще увеличи четливостта.

Вероятно ще искате да започнете с два пъти повече от обичайното пространство между елементите. Разстоянията между картите трябва да са големи, като можете също да увеличите свободното пространство с разстояние между редовете. Много голямо количество въздух ще ви помогне да създадете отворен дизайн и да организирате съдържанието си по най-очевидния начин. Картата е с ограничен размер и трябва да се побере на екрана на смартфон, както и логично и пропорционално да променя размера за екрани на таблети и монитори. На големи екраникартите също могат да отвличат вниманието на потребителя една от друга. Добавянето на „въздух“ ще направи цялостния дизайн по-отворен и лесен за задълбочаване.

Добавете естествени цветове и нюанси

Сега сте готови да помислите за цветове и нюанси за вашия дизайн. Опитайте се да му придадете естествен вид и да придадете реалистичен вид на картите, като използвате сенки и стилове.

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

Използвайте няколко физически правила, които са валидни, когато държите картата в ръцете си:

Осветлението ще хвърля сенки под и в долната част на картата.
Най-тъмната част от дизайна е в долната част на дизайна, защото обикновено, когато държите картата в ръцете си, светлината идва отгоре.
Избягвайте да публикувате съдържание на места, където бихте държали картата в ръцете си.
Допирните точки (призиви за действие и т.н.) трябва да бъдат фокусът и взаимодействията трябва да бъдат лесни и ясни. (Същото като в карти за игра, основният елемент е в центъра на дизайна).
Една карта - една единица информация.

Не го усложнявай

Сега, имайки предвид физическите свойства, преминете към следващата стъпка - създаване на общ стил на карта за целия интерфейс. Не знаете откъде да започнете? Чудесна отправна точка би било Ръководство за дизайн на материалиот Google.

„ВЪВ Материален дизайн физични свойствадокументите се прехвърлят на екрана. Фонът на приложението е плоска, равномерна текстура на лист хартия.

Елементите на приложението се държат като хартия - те също се променят по размер, превъртат се и се събират в стек. Елементите извън приложението, като например лентата на състоянието, се държат по различен начин. Те са отделни от съдържанието в приложението и не наследяват физическите свойства на хартията."

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

Изберете прости шрифтове

Когато става въпрос за типография, най-често най-доброто решениеще прости шрифтовебез сериф. Избягвайте шрифтове, които са твърде тънки или тесни, тъй като могат да бъдат трудни за окото.

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

Ограничете елементите на потребителския интерфейс

Запомнете: една карта се равнява на едно действие.

Това означава, че не е необходимо да разпръсквате куп интерфейсни елементи в целия дизайн, като например бутони. Може изобщо да не ви трябват. Но ако все още мислите, че потребителят се нуждае от визуална реплика, един бутон е достатъчен.

Поддържайте формите и дизайна прости – отново Material Design е страхотна опция – и се опитайте да не правите повече от един бутон.

Бутоните са може би единственият UI елемент, от който ще се нуждаете. Стремете се към него.

Заключение

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

Превод – Дежурна стая

И така, вероятно искате вашият модерен дизайн на картичка не само да изглежда страхотно, но и да бъде възможно най-удобен за потребителя? Нека да разберем как да постигнем това, използвайки примери от известни световни медии.

Идеята да се направи дизайн на базата на карти е просто страхотна.

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

Второ, разбира се, този дизайн също е доста удобен за потребителя.

трето, този дизайн изглежда страхотно на всички видове екрани във всички възможни резолюции.

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

Започнете с черно-бяла рамка

Всичко изглежда доста просто: започнете с черно-бяла рамка. Помислете за картите и кои части от картата ще могат да се кликват и кои ще съдържат само графично съдържание. Съвсем нормална практика е цялата карта да може да се кликва.

Планирайте разстоянието, изображенията, типографията и всички други малки детайли. „Събирайте“ картите заедно, за да разберете в крайна сметка дали дизайнът работи, ясна ли е структурата, удобно ли е всичко? Помислете как ще използвате този набор от елементи в обща структурадизайн.

Опитайте се да мислите като краен потребител:

Къде бихте щракнете, за да преминете към следващата стъпка?
Получавате ли съдържанието, което очаквате, когато щракнете върху елемент от карта?
Лесна ли е навигацията между екраните?

Използвайте увеличена подложка

Разбира се, не трябва да използвате мигащи елементи или червени бутони „Щракнете тук“ като дизайн от 90-те. Но не забравяйте за акцентите; не трябва да криете твърде много призивите за действие зад тях сиви цветове. Вижте колко добре се играят цветовете в следния дизайн:

Най-голямото предизвикателство при създаването на карти е създаването на компактен дизайн, без да се чувствате претрупани с ненужни елементи. Тук идва на помощ бяло пространство . В някои случаи, като продуктова карта, това може да бъде голяма помощ за фокусиране на вниманието върху задължителни площи. Колкото по-малко натоварен е екранът, толкова повече внимание ще отдели потребителят на обекта, който трябва да гледа:

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

Използвайте основни принципии законите на физиката, за да визуализирате и проектирате всяка карта, сякаш я държите пред себе си в ръцете си:

Осветлението трябва да хвърля леки сенки отдолу и отстрани на картата.
Най-тъмното място на картата е нейната основа.
Не поставяйте съдържание твърде близо до краищата.
Елементите, върху които може да се кликне, трябва да бъдат разположени в най-лесно достъпните части на картата във всяка резолюция. Те трябва да бъдат толкова лесни за щракване с мишка, колкото и за щракване с пръст на смартфон.
Една карта - една информация.

Създайте прости слоеве

Сега, след като вече сте се занимавали с физика, направете унифицирана карта за всички части на интерфейса. Не знаете откъде да започнете? Инструкции на Googleот Материален дизайне чудесна отправна точка.

В Material design физическите свойства на хартията се превеждат на екрана. Фонът на приложението в същото време прилича на плосък, непрозрачен лист хартия.

"Свойствата на приложението копират способността на хартията да променя размерите, да смесва и сгъва заедно от няколко компонента. Работните и дисплейните елементи обикновено се обработват по различен начин. Те се различават от съдържанието и не зачитат физическите свойства на хартията."

Всъщност задачата е да се създаде цифров обект, който да изглежда като материален. И ако потребителят иска да го докосне, тогава той ще иска да щракне върху него. Да, концепцията е толкова проста.

Придържайте се към прости интерфейси

Когато става въпрос за типография без серифи- винаги отговорът. Избягвайте да използвате шрифтове, които са твърде тънки или трудни за четене, тъй като тогава текстът ще бъде доста труден за четене.

Повечето карти работят добре със система от два шрифта (дори ако са от едно и също семейство) - един за основния текст и един за заглавието или подканващата фраза. Ключът тук е да получите правилния контраст, така че текстовите елементи бяха лесни за четене. Не забравяйте да осигурите контраст между шрифтовете, както и контраст между фона и текстовите елементи за всяка карта.

Намалете броя на елементите на потребителския интерфейс

повторете: една карта - едно действие.

И това вероятно означава, че не трябва да включвате купчина елементи потребителски интерфейскато бутони и т.н. Всъщност в дизайна на картички можете да се справите напълно без бутони. Но ако смятате, че потребителите се нуждаят от подсказка, един бутон е достатъчен. Придържай се прости формиИ прост дизайн, подходът на Material Design е доста добър в този случай - придържайте се към правилото за един бутон. И като цяло бутонът е единственият елемент, от който се нуждаете. Това е вашата дизайнерска цел.

Заключение

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

Въз основа на интерактивни карти, които съдържат изображения, съдържание, хипервръзки. Metro стилът е използван за първи път от Microsoft през 2010 г. в дизайна на интерфейса на своите продукти. Ползи на този стил, според разработчиците на компанията, бяха стилни и модерен видкакто и функционалност. Потребителят не се разсейваше от странични елементи; цялото му внимание беше фокусирано върху индексните карти, които му предоставяха съдържанието, което търсеше. Този дизайн се счита за интуитивен и опростява потребителското изживяване.

Днес дизайни на карти могат да бъдат намерени в такива добре познати ресурси като Twitter, Pinterest, Google и други.

Характеристики на стила на картата

Метро стилът в дизайна е много популярен, той се използва широко за подобряване на използваемостта и лекотата на възприемане голямо количествосъдържание. Стилът на картата има характерни черти:

Адаптивност. Дизайнът се показва правилно на всяко устройство.
Минималистичен, без разсейващи елементи. Цялото внимание се обръща на функционалните карти.
Модерен и естетичен външен вид, широка палитра от използвани цветове.
Използването на лесни за четене шрифтове (Segoe), ясни тематични изображения.
Достъпност, интуитивно разбиране на функционалността за потребителя.
Динамичност. Използване на анимационни ефекти.
Наличието на ръчно рисувани елементи: икони, обемни бутони, инфографики, които улесняват възприемането и стимулират целенасочени действия.

За кои уебсайтове е подходящ стилът на дизайн Metro?

Лаконичен и модерен дизайн на карти се използва в сайтове с различни теми: портфолио, блогове, корпоративни сайтове, сайтове за визитки, онлайн магазини и дори целеви страници. Например уебсайтът на Microsoft все още изглежда точно в стил метро (https://www.microsoft.com/uk-ua): на начална страницаима големи раздели с продуктите на компанията и връзки към страници с подробна информацияза тях. Между тях има карти стандартен изгледс Кратко описаниеи хипервръзки към съдържание. Има анимационни ефекти - когато задържите курсора, изображенията, бутоните се маркират, а връзките се подчертават. Няма чужди елементи.

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

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

Най-популярният уебсайт, който показва тази тенденция в дизайна, е Pinterest, но има и други сайтове, които често използват този дизайнерски подход и има основателна причина. Когато посетителите видят уебсайт, който използва тази дизайнерска техника, те веднага ще забележат реда и добре организираната структура зад простия, но елегантен дизайнерски подход.

Има много предимства от използването на този дизайнерски подход на вашия собствен уебсайт.

Мрежов подход към информационна архитектура

Когато погледнете какъвто и да е дизайн на карта, няма как да не видите решетка в основата. Това е така, защото всеки ръб на картата всъщност е съставен от различни решетки в голяма, добре организирана система, която насърчава по-голяма последователност и хармония в начина, по който изглежда сайтът.

Това от своя страна значително подпомага информационната архитектура на сайта. Информационната архитектура е интелигентният ред и последователност, в която вашите посетители възприемат информацията за сайта, в идеалния случай в съответствие с предназначението на всяка страница и на целия сайт.

Помислете за това: дизайнът на картата „води очите“ на вашите посетители по логичен път. Всяка карта е част от ред или колона, която насочва зрителното поле на посетителите по еднакви хоризонтални и вертикални линии. Тази подредба помага на посетителите да разберат кои части от информацията са по-важни.

Вземете например Contrastly, списание за фотография. Следването на неговата мрежа/картово оформление ще ви помогне да разберете кое е най-важното в информационната йерархия. Последни статиипубликувано на горен ред, докато по-старите статии се показват в долния ред. Новостта обикновено се свързва с по-голяма важност, така че следването на този низходящ ред в картовата система позволява на потребителите бързо да разберат кое съдържание е по-важно. По този начин те могат да определят приоритета в какъв ред да четат тази информация.

Силна зависимост от изображения

Толкова много пъти сме чували старата поговорка, че хората обичат с очите си, че се е превърнала в клише, въпреки че в дизайна на картичките тя придобива ново значение. Дизайнът на карти разчита почти изключително на визуални модалности; всяко копие на същата страница обикновено е второстепенно спрямо визуалното от гледна точка на информационната архитектура.

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

С други думи, фокусирането върху използването на изображения прави дизайна на картата по-привлекателен за посетителите. Неслучайно Pinterest е 15-ият най-популярен сайт в САЩ според Alexa.

Разглеждайки резултатите от Pinterest, след като въведете думата „храна“ в търсачката, можете да видите, че изображенията са първото нещо, което хваща окото, когато сте на сайта. Не ви интересува какво пише под снимките, но поне, не е въпрос от първостепенна важност. Високо качество, ослепителни снимки, които привличат вниманието ви и едва след като сте взели решение, искате да знаете повече (но вече от представянето на тази снимка), поради което в крайна сметка четете описанието.

Подобрен потребителски опит

Всеки дизайнер може да ви каже, че потребителското изживяване е най-важното нещо. Това са тези, за които трябва да проектираме преди всичко. Друга причина е, че дизайнът на карти резонира толкова добре и ще продължи да го прави в обозримо бъдеще, защото помага на потребителското изживяване. И това е, което кара посетителите на уебсайта да продължават да се връщат и което от своя страна им помага да прекарват повече време там, което в крайна сметка води до Повече ▼преходи!

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

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

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

Сайт като Dribbble позволява на посетителите да намират Правилно мястопо супер удобен начин. Това е въплъщение на страхотно потребителско изживяване!

Идеален за мобилен дизайн

Може би сте чували това мобилни устройствавече изпревариха настолните компютри с голяма сумапотребители. Само през 2015 г. в САЩ мобилното използване дигитална медиямедиите достига 51% спрямо настолни компютри, които имат 42%. Дизайнът, базиран на карти, е идеален, защото взема предвид тази тенденция, като същевременно е лесно съвместим с адаптивни рамки. Тъй като картите предлагат съдържание на „смилаеми парчета“, което го прави по-лесно за показване в мобилни рамки.

Погледнете картите от тази гледна точка: тяхната форма и размер са почти мимикрия на формата и размера на смартфон или таблет. Разбира се, не съвсем перфектна прилика поради голямо числоразлични налични модели, но все пак доста голяма прилика, когато се гледа от гледна точка на съотношението на страните.

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

Това не е просто поредната мода

Проблемът с някои тенденции в дизайна е, че те се превръщат в мода, което ги прави краткотрайни и незапомнящи се. Въпреки че дизайнът на карти може да е изключение! Поради големия брой практическо приложениеи предимствата, които предлага, ще става все по-популярен с времето. Това означава, че той ще "оцелее".

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

Идеята за картите всъщност е стара концепция, но беше опитана още веднъж и актуализирана до нов подход в уеб дизайна. Това е само пример, за да ви покажем, че дизайнерите с креативно мислене могат да вземат нещо старо и светско и да го превърнат в нещо изключително подходящо и полезно в 21 век.