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

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

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

Планиране Outline на страницата

С горния пример Fork CMS използва проста навигация в горната част на страницата, която изглежда естествено. Няма трудности при използването и имате достъп до цялата важна информация, която се намира на сайта.

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

Подменю

Едва ли има нужда от пример. Падащите менюта са едни от най – често срещаните. Има такова дори на този сайт. Можете да реализирате подобно само с css или като използвате javascript. Има стотици допълнителни библиотеки, които могат автоматично ви правят подобни готини менюта. От там идват и различните начини на интеракция с менюто. При този сайт допълнителното странично меню се появява при кликване(обърнете внимание и как се променят снимките в горната част при mouseover – този малък ефект е готин, ако layout-a ви би работил добри, ако линковете ви са със фиксирани линкове). Естествено можете да се обърнете и към css3 transition (което започва да става все по – добра алтернатива). И css3 и javascript се поддържат вече при повечето мобилни операционни системи, но за по – стари browser-и, може би ще имате повече успех, използвайки jQuery.

Естествено подменюто не трябва да е задължително падащо под главното. Както виждате на примера от картинката използването на облак от подлинкове може да е доста добро и успешно решение, ако списъкът с линкове за подменюто е доста дълъг (друг вариант е да си направите дърво от подменюта и да ги групирате в дадени категории, ако това е възможно разбира се).

Ajax tabs

За да можете да имате голям брой от линкове в малко пространство, част от тях трябва да бъдат скрити по подразбиране. Падащите менюта са едно на ръка, но табовете са друга опция. Още по – красиво може да се получи ако се обърнете към ajax и асинхронно зареждате информацията на различните табове. Това може да се възприеме като един от най – модерните начини за реализиране на сайтове с доста информация, когато искаме да запазим статично всичко освен показваната информация (даваме повече време на посетителя да се замисли дали не иска да кликне на някоя рекламка). За пример можете да погледнете http://www.yahoo.com/. В кутийката с новините информацията се зарежда именно по този начин.

Ако ще е голямо – нека е голямо.

По всяка вероятност тези от вас, които често са разработвали галерии, са имали чести срещи със страницата на Coda (Mac). Те използват както табове за зареждане на динамична информация, също така и голям хедър с 3-те си най – важни линка – сваляне, купуване, помощ.

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

Специално сайта на Coda създава усещането за flash-made сайт с ефектите и интеракцията си. Разбира се това не е реализируемо (въобще има ли такава дума или само на мен ми звучи странно) при всеки проект. Но при малко на брой навигационни линкове е добре да им поувеличите размера. Ако имате само 3-4 странички, би трябвало те да са лесно откриваеми и да изпъква достъпа до тях. Ако извинението ви е, че не можете да си намерите да речем иконка – пробвайте този сайт – http://www.iconfinder.com/ . И там ако не намерите това което ви трябва, пробвайте и този – http://findicons.com/ .

HTML5 ftw

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

Намесвам го, защото html5 представя nav тага, който постепенно си пробива път при всички сайтове.  В тази връзка – хвърлете поглед на тази дискусия – заслужава си да се прочете http://stackoverflow.com/questions/5178761/html5-nav-tag-correct-usage (говори се за семантичен html и правилното използване на nav тага. ) За тези, които не им се чете, цитирам най – важното – „nav елемента представя част от страницата, която води до други страници или части от същата страница”. Още една добра статия за начина по който html5 промени навигацията на сайтовете – цък.

Заключение

Гледайте на навигацията си, като на една от най – важните части на сайта си. С новите css3 анимационни ефекти и jQuery UI библиотеките има тонове варианти за настройване и визия, които можете да реализирате. Front-end разработката става все по – очарователна и привличаща. Разбира се нарастващото community също дава своето отражение при намирането на бързи отговори на излизащите въпроси и новите в областта бързо могат да се ориентират.

Разработвали ли сте динамично меню за ваш проект? Или може би сте попадали на други готини решения? Ще се радвам да споделите мнението си с идеи и дискусия.