10 команди за уеб дизайн за всеки проект
Имате ли правилник, когато става дума за дизайн на уебсайтове? Има някои правила, които се прилагат за почти всеки проект за уеб дизайн - нека ги наречем „заповедите за уеб дизайн“.
Без значение колко голям или малък е уебсайтът, тези правила са основата за добрия дизайн. Ако следвате тези основни насоки и ги направите част от вашето мислене за всеки стартиран проект, ще избегнете много от клопки, в които дизайнерите могат да се натъкнат!
1. Трябва да бъдете последователни
Направете дизайна възможно най-лесен за взаимодействие с потребителите Постоянният дизайн е лесен за използване и разбираем дизайн. Ангажиментите и действията на потребителите, както и визуалните изображения, трябва да бъдат сходни по вид и употреба в рамките на един дизайн.
Това означава, че бутоните са с един и същи цвят и използват едни и същи състояния на задържане, за да помогнат на потребителите да знаят как да си взаимодействат, заглавията са със същия размер и използват един и същ шрифт в целия дизайн, а елементи като цветове следват палитра, която може да бъде идентифицирана и свързана с марката.
Други визуални елементи също трябва да следват последователен стил, както и със стил и план за използване на елементи като икони или фотография, видео или илюстрации. Дизайнът трябва да има глас, който се използва за копиране на блокове, които съответстват на общата естетика.
Всички тези елементи на последователност допринасят за цялостната използваемост, като правят дизайна възможно най-лесен за взаимодействие с потребителите.
2. Ще използвате Whitespace
Допълнителното пространство около елементите може да помогне за създаването на раздяла и да ги улесни за четене. Няма нужда да претъпквате всеки отделен елемент в пространството над свитъка. Използвайте бялото пространство, за да установите ритъм и поток, да създадете визуална йерархия и да помогнете на потребителите да се движат през дизайна.
Ако съдържанието е добро, те ще превъртат.
И бялото пространство всъщност може да помогне за насърчаване на действията на потребителя, като дърпате окото по екрана.
Бялото пространство е още по-важно, тъй като размерите на екрана стават все по-малки. Допълнителното пространство около елементите може да помогне за създаването на раздяла и да ги улесни за четене. (Помислете колко полезно може да бъде малко допълнително място, когато става въпрос за лесно натискане на бутони.)
Не сте сигурни къде да включите бялото пространство в дизайна? Започни тук:
- Бутони наоколо или други интерактивни елементи
- Като интервал между редове от тип, за да се улесни четенето
- Между елементите, така че да се разделят на изток, например опаковане на снимки, вградени в текстови блокове
- Във формулярни полета, така че те да бъдат лесни за докосване на мобилни екрани
- Около всеки елемент, върху който искате да се съсредоточат потребителите
3. Ще използвате мрежа
Една мрежа е основата на потребителското изживяване. Когато проектирате с мрежа, крайният уебсайт е по-прецизен, последователен и елементите се поставят в ред, който има визуален смисъл.
Мрежите са както хоризонтални, така и вертикални, въпреки че най-известната мрежа за уеб дизайн може да бъде вертикалната мрежа от колони с 12 колони за подравняване на елементи.
Решетката е нещо, което виждате само в процеса на проектиране и ако имате проблеми с намирането на разположения за елементи или създаването на организиран контур, решетката може да бъде пълно спасяване.
4. Няма да забравяте потребителски модели
Потребителите правят нещата по определен начин и очакват конкретни неща от вашия дизайн. За да има максимален успех, дизайнът трябва да използва общоприети потребителски модели (повтарящи се решения на дизайнерските проблеми), така че хората да знаят как точно функционира дизайна.
Общите модели на потребителите включват:
- Подредете информация във формуляри, като започнете с име или имейл и завършите с „изпратете“
- Поставяне на навигационни менюта
- Местоположение и характер за кликване върху иконата на кошницата за електронна търговия
- Как работят известията
- Икони за търсене и чат, наред с други неща
UI Design Patterns има дълъг списък с потребителски модели за всички видове дизайнерски ситуации.
5. Ще използвате сходство в действията на потребителския интерфейс
Всеки елемент в дизайна на уебсайт трябва да работи като всеки друг елемент от същия тип. Тези елементи също трябва да имат визуална идентичност, така че потребителите да знаят какво представляват и какво правят.
Има толкова много действия на потребителски интерфейс, които могат да бъдат вградени в дизайн, който да спазва принципа на сходството на Gestalt е задължително. Групирането на визуални елементи и действия, така че те да бъдат визуално идентифицирани, ще помогне да се създаде по-добро цялостно изживяване за потребителите.
6. Ще използвате добре типографията
Отдръпнете се от дизайна и вижте дали надписът се чете лесно от разстояние. Не е нужно да сте майстор типограф, но определено помага.
Толкова много от това, което представлява добър дизайн, се корени в четливостта и четливостта. И тези понятия зависят от това как избирате и използвате шрифтове.
Когато се съмнявате, изберете опциите за прости шрифтове като serif и sans serif. Отдръпнете се от дизайна и вижте дали надписът се чете лесно от разстояние. След това погледнете надписите на малко платно, като например на екрана на телефона, за да се уверите, че е лесно да се чете и от пръв поглед там.
Опитайте се да използвате тип в среда с висок контраст, като например светъл тип на тъмен фон или тъмен тип на светъл фон, така че всяка дума да се чете лесно.
7. Няма да забравите екраните на ретината
Дори и най-малките екрани могат да изобразяват елементи и изображения с почти пикселно съвършенство.
Трябва да помислите как ще боравите с изображения, икони и други елементи, така че всичко да изглежда красиво, независимо от размера на екрана. Когато е възможно, използването на векторен формат може да бъде идеалното решение, което е една от причините SVG да нараства популярността си през цялото време.
Ако нямате изображение, чиято резолюция да отговаря на общите размери на екрана, не го използвайте. Никоя снимка изобщо не е по-добра от лошо или пикселирано изображение.
8. Ще бъдеш честен
Вашият дизайн трябва да бъде верен на вашия малък бизнес, информация или марка и прозрачен в това, което правите. Не крадете дизайн или изображение, не се пълнете с фалшиви ключови думи, за да задвижвате трафика и да бъдете верни на кого и за какво се съдържа вашето съдържание.
С толкова много претрупвания в мрежата потребителите искат да взаимодействат с дизайни, които са автентични. Измамите на потребителите да правят нещо или да се регистрират за продукт или услуга или просто да ги подведат по тема или информация трябва да са в противоречие с личния ви етичен кодекс. Не приемайте проекти, които очакват това от дизайна.
9. Няма да пренебрегвате достъпността
Мрежата трябва да бъде използвана от колкото се може повече хора. И въпреки че може да ви звучи трудно да се гарантира, че дизайнът е достъпен, той не е толкова сложен, колкото може би си мислите.
Google има страхотно ръководство за достъпност на уебсайтове, което определя така:
Най-общо казано, когато казваме, че даден сайт е достъпен, имаме предвид, че съдържанието му е достъпно и неговата функционалност може да се управлява от буквално всеки. Като разработчици е лесно да се предполага, че всички потребители могат да виждат и използват клавиатура, мишка или сензорен екран и могат да взаимодействат със съдържанието на вашата страница по същия начин, както и вие. Това може да доведе до опит, който работи добре за някои хора, но създава проблеми, които варират от прости досади до стоп-шоута за други.
Тогава достъпността се отнася до опита на потребители, които може да са извън тесния диапазон на "типичния" потребител, които могат да имат достъп или да взаимодействат с нещата по различен начин, отколкото очаквате. По-конкретно, това се отнася до потребителите, които изпитват някакъв вид увреждане или увреждане - и имайте предвид, че този опит може да бъде нефизически или временен.
Много от принципите на добрия дизайн, като размер, контраст и пространство, допринасят за общата достъпност.
WebAIM има контролен списък, както и други инструменти, за да ви помогне да определите дали дизайнът ви е достъпен. Контролният списък обхваща четири области, тъй като те се отнасят до достъпността: Дизайнът възприема, функционира ли, разбираем и здрав?
10. Ще бъдете отзивчиви
Това трябва почти да се изясни през 2018 г., но вашият уебсайт трябва да е отзивчив. Това включва всеки елемент, от текст до изображения до бутони до цялостната рамка.
Всеки дизайн трябва да работи на всяко устройство. Месечен цикъл.
заключение
Солидният набор от правила може да ви помогне да влезете в дизайнерски проект по-бързо и да работите по-последователно. Обърнете внимание, че никоя от тези заповеди не ви казва как трябва да изглежда проект; те се коренят в теорията за това как очертавате и създавате всеки уебсайт.
Имате ли допълнителни правила за уеб дизайн, които да добавите към тези заповеди? Кажете ни какво са в социалните медии. Просто не забравяйте да маркирате Design Shack!
