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

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

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

1. Добавяне на контраст

За съжаление, добавянето на допълнителен контраст е една от най-пренебрегваните и най-неизползвани техники.

Joost de Valk използва чудесни тънки силно контрастни линии, които помагат на потребителя да различава отделните секции на страницата. В уголемения вариант на горното изображение ще видите, че основната част на контраста е просто светла 1px линия до тъмна 1px линия.

От друга страна, бутоните “More” и “Go” на началната страница са с толкова малък контраст, че е лесно да не ги забележите дори, когато ги търсите.

WordPress използват цвят, за да добавят контраст на своя най-популярен линк “Download”. Червеното изпъква сред спокойната палитра от сини и сиви тонове, и в същото време цветът не е толкова ярък, че да ви боли като го погледнете.

Ако имате съмнения относно това дали се нуждаете от контраст, помислете за него като за гримиране например. Идеята не е хората да си кажат: „Я виж ти! Контраст!” Все пак желанието ви е естествено да привлечете вниманието на хората към важните неща на страницата ви и да подчертаете детайли, които вече са там.

2. Градиенти

Развитието на технологиите донесе инструменти за създаване на преливки (градиенти) на всеки, който ги пожелае. Но дали това е добре?

Media Temple има градиенти на почти всяка страница от уебсайта си, но сдържаността и финеса са ключа към успеха на дизайна. Логото, заглавията, бутоните и бекграундите – всички имат фин, на места почти минимален градиент, който подчертава съдържанието. Най-сложните градиенти на уебсайта са на простите бутони с ширина 120px, които грабват вниманието.

Commission Junction не само използва градиенти доста по-фини от Media Temple, но вмъква и разнообразие от различни типове градиенти:

• Хоризонтален, линеен градиент от черно до средно сиво в горната част на страницата.
• Зелен радиален градиент във фона на зеления хедър.
• Лек диагонален градиент върху логото “CJ” в логин формата.
• Светла вертикална линейна сянка в бекграунда на всяко поле.
• Вертикален градиент в бекграунда на навигацията.
• Светла линейна сянка в Webinar банера
• Друга вертикална линейна сянка за заглавията

Дизайнът е малко нестандартен и в по-голямата си част работи, но има няколко основни проблема. Най-основният е, че липсва последователност. Подобно на избирането на цветови схеми, дизайнерите трябва внимателно да избират само няколко типа градиенти за всеки отделен проект.

Например, хоризонталният градиент (1) „води” очите по ширината на страницата. Това не е проблем само по себе си, но по-долу вдясно са двата радиални градиента (2), които „избутват” погледа към центъра на страницата и още една линейна сянка (3), която насочва погледа надолу
към долния десен ъгъл на логин формата. Тези неща правят страницата доста объркваща за потребителя и променливото визуално „течение” я прави малко трудна за четене.

Когато работите с градиенти, е важно да запазите приятно визуално „течение”: използвайте градиентите умерено или неуловимо. И най-важното – използвайте ги само, когато допълват цялостното усещане на проекта.

3. Цветове

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

Realmac Software реализира доста смела идея, включвайки целия спектър от цветове на своята страница за грешка 404. Този вариант работи в случая поради няколко причини. Първо, Realmac реализират страницата си на неутрален сив бекграунд. По-важното обаче е, че не са използвали цвят никъде другаде на страницата, с изключение на сините линкове на текста и малките цветни петна чак в долната част на страницата.

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

Когато използвате цветовете внимателно и интелигентно в своите дизайни, е доста по-лесно да насочите вниманието към важните неща. На страницата „About Us” в сайта на Interspire потребителите бързо са въвлечени в логото в горната част на страницата, след това веднага идват заглавията и най-накрая – логото в дясната част на съдържанието.

Работа с шрифтове. Типографията е изкуство далеч по-дълбоко, отколкото повечето от нас осъзнават. Със сигурност има място за детайли като възходящите елементи на буквите, (напр. за латинските b, h, f, d), както и за страничната им ориентация, но те не са от толкова решаващо значение за разбиране, колкото следните техники.

4. Разстояние между буквите

Разстоянието между буквите и „опашките” на буквите могат да придадат огромна разлика в заглавията, параграфите, логата и каквото друго се сетите, което съдържа текст. Това не е нищо повече от разстоянието между всяка двойка букви.

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

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

Ако не сте го правили досега, поиграйте си с разстоянията между буквите във вашите дизайни и ще бъдете шокирани от разликите, които се получават. Няколко добри шрифта, с които да започнете са „Myriad Pro” за картинки и “Trebuchet MS” за текст в HTML.

5. Големина на буквите

…. Както при главните и малките букви. Смяната на големината не изисква нищо повече от натискане на клавишите от клавиатурата Shift или Caps Lock и ето как няколко дизайнера взимат преднина с потенциала на тази техника.

На някои места в сайта на MSNBC използването на този тип техника е очевидно. Сред всичките малки букви в логото, компанията умело използва гл
авни букви на други места. Голямото поле за съобщения в горната част на страницата обикновено казва нещо от типа на “WATCH LIVE” („ГЛЕДАЙ НА ЖИВО”) или “BREAKING NEWS” („ПОСЛЕДНИ НОВИНИ”). Смятайки че по този начин думите обикновено изтъкват нещо много важно, това е един отличен начин да привлечете внимание точно към тези специфични съобщения.

В допълнение, използването само на големи букви, позволява на MSNBC да превърнат своите невероятно малки бутони в достатъчно изчистени, за да бъдат четливи. В тази апликация, висока само 5 пиксела, малките букви като a, m, x и z биха били само 2 до 3 пиксела високи и следователно – нечетливи.

Говорейки за новинарски уебсайтове в момента, CNN пропускат много възможности да използват големината на буквите, за да подчертаят страниците си. Те използват навигационно меню изцяло с главни букви, но основната част от страницата е с традиционните букви – само първата буква на всяко изречение е главна.

6. Антиалайзинг (Anti-Aliasing)

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

Stockxpert правят разумен избор за доста обикновената си страница, в която някои текстови редове са загладени, други не са. По-голямата част на текста е с гладки ръбове и не изглежда ръбато, но това не е и в случаите, когато имаме малък текст в горната и долната част на страницата. Подобно на малкия текст на бутоните в сайта на MSNBC, споменати по-горе, височината на текста от 5 пиксела се нуждае от изостряне на ръбовете, за да бъде текстът четлив. Всяко замазване или антиалайзване на текст с такава големина би накарало читателите да напрягат очите си и просто да се откажат.

Разбърквайте нещата! Мислете, че това, което изглежда перфектно, често изглежда измамно и безинтересно. Листата на дърветата не са точно симетрични; светлината от който и да е източник осигурява необичайни сенки и светлосенки; лещите на камерата или фотоапарата понякога замазват някои зони на снимката и се получава блещукане. Някои дизайни изглеждат страхотно с подредени, изчистени и неестествено изглеждащи ефекти…. някои се нуждаят от повече бъркотия.

7. Несъвършенства

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

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

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

Успешното добавяне на несъвършенства и състаряването на дизайна е по-лесно, отколкото
си мислите. Започвате с обезцветяване на снимката или добавяне на „сепия” тоновете и ефектите и вече имате основите, от които да продължавате нататък.

8. Замъгляване (Blur)

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

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

Замъгляванията могат да се използват и за да дадат дълбочина или наслояване. Аеро темата на Windows Vista замъглява всичко, което е зад отворения прозорец, което придава готин стъклен ефект.

9. Подравняване

Дори изчистените, прави линии, имат шанс да придадат на проекта онова допълнително нещо, от което той се нуждае.

Примерното лого придобива своя облик предимно заради буквите „logo”, които са разположени по-нависоко. Промяната в подравняването на елементи от дизайна може да го направи по-запомнящ се, обект, за който да се говори, следователно – доста по-въздействащ.

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

Icon Designer запазват себе си чрез ротация на няколко дизайнерски компонента. Иначе страницата би била доста монотонна и скучна, но елементарната ротация запазва нещата интересни.

Повечето от днешните уебсайтове са с размери 700 х 900 px, центрирани са вертикално в браузъра и имат прави краища от всяка страна, които определят къде започва и къде свършва съдържанието. В много случаи този начин на подреждане и предвидимост са добри, но значителна част от уебсайтовете биха спечелили заради мисленето на дизайнерите извън кутията… в пряк и преносен смисъл.

И най-важното…

10. Орязването

Вероятно най-важната и най-подценяваната техника – изтриване на всички излишни части от проекта – още едно от най-сложните действия.

Чрез изтриването на всички излишни компоненти CSS Remix е останал само със съществената си част и може да покаже седем премиум реклами (128 x 96 px), 53 favicon реклами (онези малки картинки, които се поставят в адрес-бара на браузъра, обикновено представлява логото на фирмата/организацията) (16 x 16 px) и 56 уебсайта наведнъж – всичко това в горните 1000 пиксела на страницата! Дори логото на уебсайта е орязано на 53 х 7px.

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

За автора

Mark Praschan е Web Developer, Web Designer и Web Project Manager с близо 10 годишен професионален опит. Той притежава и управлява Arrival Media и вина
ги е в търсене на оригинални нови проекти, върху които да работи. Можете да следите Марк в Twitter.

Source: Smashing Magazine