Kniga by Kristina Kovacheva

Серия от дизайн на сайтове, съобразени със съвременните тенденции

Серия от дизайн на сайтове, съобразени със съвременните тенденции Кристина Пламенова Ковачева F61763 магистър в специалност “Графично и пространствено проектиране”

Научен ръководител: ас. д-р Илия Кожухаров

Съдържание

Серия от дизайн на сайтове...............................................................................4 12 тенденции при изграждането на уеб сайт...............................................5 Важността на адаптивния ефективен уеб дизайн........................................8 Еволюция на дизайна. Основни принципи на флат дизайна...............10 Какво предвиждат дизайнерите за 2014г.?..................................................12 5 дизайна на сайтове, съобразени със съвременните тенденции......13 Онлайн магазин за бижута на фирма “Диамант”......................................14 Представяне на страниците и разположение на елементите................16 Кулинарен сайт “Готви у дома”.........................................................................22 Ре-дизайн на сайта на група Д2......................................................................28 Личен фотографски сайт....................................................................................32 Сайт на уеб дизайн студио................................................................................38 В заключение.........................................................................................................43

Серия от дизайн на сайтове, съобразени със съвременните тенденции

През последните две години ситуацията в уеб пространството се промени значително. Това главно се дължи на широкото използване на мобилни устройства за влизане в интернет, поради което се промени начина, по който уеб дизайн специалистите и компаниите правят сайтове. Съвременния уеб дизайн в 21 век не впечатлява със своята пищност, цветове и движения, а е предназначен за масово използване като продукт, вграден силно в съвременното интернет общество, което изисква от уеб сайтовете бързина на работа, ползваемост, достъпна и лесно намираща се информация. Напоследък уеб дизайн тенденциите продължават да вървят към изчистване, олекотяване и забравяне на тежките ненужни флаш елементи и анимации, които освен, че не са практични, не носят стойност на потребителите. Flash технологията просто никога не е била част от WEB като стандарт и технология за изграждане на уеб сайтове (поне не от W3C консорциума, които определят стандартите и правилата в WWW). Колкото и спорове да има по темата дали Flash има място в съвременния уеб дизайн, все пак ползваемостта и функционалността надделява и въпреки че Flash дизайнерите продължават да обичат своя продукт и стил на работа, постепенно тази практика започва да се избягва от сериозните разработчици и сериозните клиенти.

12 тенденции при изграждането на уеб сайт

Съдържание Интернет страниците съществуват главно за да предоставят информация на своите посетители. Затова и основната цел при проектирането на дизайна е как и по какъв начин ще бъде позиционирана информацията, така че потребителят да попадне веднага на текста, а не да го търси някъде из дизайна. Адаптивен (responsive) дизайн Дизайнът се адаптират в зависимост от големината на екрана. С други думи няма значение дали гледате сайта на огромен телевизор или на миниатюрно устройство - дизайнът ще се адаптира автоматично в зависимост от големината му. Поради това вместо различни изгледи на уебсайта за всякакви устройства, вече практиката е да се прави един изглед, но пък за сметка на това динамичен или наречен responsive. Освен това в някои случаи изискванията към мобилните изгледи са специфични, защото потребителят има ограничено пространство за преглед. Поради тази причина някои компании наблягат на изработката на динамично (например Android, iOS или Windows Phone) приложение. По този начин обхватът на потребителя, посетил уебсайта, се увеличава многократно, тъй като приложението се адаптира в софтуерната среда на съответния производител и се възползва от вградените инструменти с цел по-удобен преглед или предлагане на допълнителни продукти и услуги. Простота на дизайна След пускането на Windows 8, много сайтове започнаха да акцентират върху простото изграждане на уеб дизайна, подобно на ”метро” стила. В този стил, съдържанието е организирано по блокови елементи в различни рамери, като се използват големи икони или снимки. Често срещан е и „rollover” ефекта върху фотографиите.

Ретина дисплей През 2012г. Apple представи своя Retina Desplay в iPhone 4 , IPAD, и MacBook Pro лаптопи. Това са дисплеи с течни кристали, които са с много по-висока плътност на пикселите. Apple твърди, че при “Ретина дисплей” човешките очи не могат да забележат пикселизация, която обикновено се фокусира от определено разстояние на гледане. През 2013г. много уеб разработчици започнаха да използват по-висока резолюция , за да подобрят адаптивния дизайн и потребителите, които използват такъв тип дисплеи. Изображенията достигат ново ниво на реализъм. Infinite Scrolling

Много популярни сайтове, като социалните мрежи, поддържат Infinite Scrolling – способността страницата да зарежда ново съдържание, когато потребителя скролва надолу. По този начин на посетителя не му се налага да зарежда нови страници. Parallax Друг ефект на превъртане, при който два или повече паралелни обекта се движат с различни скорости. С повишаването на браузър поддръжката, Parallax започва да става все по-популярен, като начин за добавяне на интерактивност и дълбочина на уеб дизайна. Сайт от една страница Акцентът върху съдържанието, както и различните видове превъртане, доведоха до популяризирането на един друг вид сайт – от една страница. Това много се харесва на потребителите, тъй като знаят, че информацията, която им е нужна, ще намерят на тази страница. Цялостен фон от снимка или видео Отскоро големите фонови изображения са популярна тенденция. Тази година място до тях намират и видеата, заемащи целия екран. Много от тези сайтове са привлекателни и предразполагат към добро потребителско изживяване. App Design Style Interface Популярността и познаването на мобилните приложения е намерило своето място и в уеб дизайна. App Style Interface са интуитивни за повечето потребители и лесно могат да се превърнат в динамичен дизайн, когато се прехвърлят на мобилно устройство.

CSS3 Ефекти Откакто браузърите започнаха да поддържат CSS3, много дизайнери се възползват от ефектите, предлагани от актуализирания скриптов език. CSS3 позволява на дизайнерите да създават сенки , прозрачни елементи , а дори и анимации с помощта на лек скриптов език , вместо на тромавите прозрачни PNG изображения или Flash. Огромен размер на буквите и удебелени заглавия Големият и удебелен размер на буквите, серифните шрифтове са водещи в дизайна от 2012г. Този типографски стил е добър подход за бързото ориентиране на потребителя. Кръгли дизайн елементи Повечето уеб страници са изградени с квадратни, ъглови или блокови елементи. Някои дизайнери се осмеляват да внесат малко свежест и да използват поорганични форми – като кръговете. Кръгове се използват и в метро стила или просто като големи икони. Скеоморфизъм Скеоморфизъм е сложна дума, изразяваща прости идеи – създаване на неща, които да приличат на други неща. Този метод е познат от доста време. Уикипедия изброява два примера: джанти на кола, които имат спици и декоративни нитове по дънките. И двете неща реално не са тенденция сред големите производители, но те ни напомнят за нещо от по-ранни времена. Спиците вече не са нужни за направата на джанти, както е било в началото на ерата на автомобилостроенето, но въпреки това привлича вниманието и според мнозина спиците си остават класика. Скеоморфизма се използва в софтуера от доста време, например папките се появяват още от самото създаване на Windows. Те са създадени да наподобяват на картонени папки, като не можем да отречем, че това наистина е повлияло положително на начина, по който те бяха възприемани. Въпреки, че имаме достатъчно компютърни папки и може би никакви картонени вече, метафората е все още ефективна.

Таблети

Важността на ефективния адаптивен уеб дизайн.

Развитието на технологиите в днешни дни изглежда като един безкраен процес, със своите иновативни методи и многобройни инструменти за кодиране и адаптиране на дизайн. Понякога обаче голяма част от дизайнерите не обръщат необходимото внимание на детайли, като приспособимост на изображението към съответния размер на екрана, било то на десктоп, на таблет или на телефон. Ежедневно излизат устройства с най – различни размери, затова е немислимо големите технологични компании, с претенции за лидерски претенции, да не предлагат вариативност и адаптация. Десктоп устройства Вниманието, което отделят дизайнери за разработване на уеб интерфейс на десктоп устройства, определено предизвиква позитивни реакции у потребителите. С допълнителното място по периферията на екрана и възможността за използване на клавиатура и мишка, възможностите за сравнително големи. • Добре обмислено позициониране на съдържанието, с цел да се улесни търсенето и намирането на информация. • Хоризонтална навигация, подменюта, падащи менюта. • Повече страници за задоволяване на повече нужди. • Място за реклама, допълнителни бележки. • „Трохи“ (breadcrumbs), които да ориентират потребителя по – бързо. • Използването на “най-новите” технологии, което неминуемо допринася за позитивното впечатление от навигацията с уеб сайта у потребителя. Уеб сайтовете трябва да се ориентират бързо и да използват, колкото могат повече възможности, за да осигурят опции на своята аудитория. От гледна точка на потребителя е хубаво да се създава чувство на удовлетвореност и вълнение.

С всеки изминал ден таблетите стават все по-популярни и докато цените непрестанно се понижават, нови марки и модели излизат на пазара. И по всичко личи, че това не е краткосрочна тенденция. Tаблетът по никакъв начин не бива да се сравнява с десктоп устройствата, и поради ограничения си размер да се поставя на второ място, а по –скоро да бъде изследван самостоятелно, като равен, грижейки се за положителните потребителски впечатления и емоции. Тук едно от нещата, които отличава таблета в най – голяма степен, е сензорният екран. Това предизвиква създаване на изцяло нов подход, който взема под внимание начина, по който потребителите си взаимодействат с интерфейса на уеб сайта. Интерфейсът за таблет се отличава с няколко основни характеристики: • По – голяма площ на сензорните зони при навигация. Тук липсва прецизността на мишката и клавиатурата, които са заместени с пръстова навигация. • Подпрозорци, меню от типа акордеон и др. могат да бъдат от полза в опитите да се спести малко място, предвид ограничения размер на екрана. • Хубаво е да има бутони, поставени на видно място, за основните функции и линкове. • Добре е дизайнът да е оптимизиран за ретина дисплей. Тук вземаме предвид два основни фактора – първият е, разбира се, популярността на iPad. А освен това Apple често са пример за подражание, така че може да очакваме развитие на технологиите в тази посока. Телефони и смартфони Липсата на достатъчно място не бива да ни коства по – доброто потребителско изживяване. При разработване на адаптивен дизайн за телефони и смартфони от изключителна важност е планирането – защо хората посещават съответен уеб сайт през телефона си. Докато при десктоп устройствата потребителите очакват да намерят повече интерактивност и детайли и по – обширна информация, то при мобилните устройства от най – голяма важност са съдържанието, достъпът до по – основна информация и времето, което това отнема. Освен някои от препоръките за таблети (по – големи бутони и икони, изчистен дизайн) телефоните и смартфоните изискват още няколко, допълнителни такива: • Колкото е възможно по – опростен интерфейс. Потребителят трябва да може да се фокусира върху най – важната информация. • Информацията трябва да е сортирана и да бъдат поставени на видимо място търсачка и филтри - потребителите не обичат да губят времето си. • Изкачащи менюта, рекламни банери и различни известия са по– скоро непрепоръчителни, освен ако не са от изключителна важност. Проучвания сочат, че до 2015г. употребата на мобилни устройства и таблети ще измести тази на десктоп устройствата. Имайки предвид това, трябва да използваме развиващите се технологии в максимална степен и да се научим на най – добрите техники за кодиране на адаптивен дизайн. Хубаво е да запомним две основни неща: Изображенията на таблети и мобилни устройства трябва да хващат окото, а десктоп устройствата да съдържат цялата необходима информация.

Mac OS X – След като Microsоft поставя основите на life-like обекти в интерфейса си, Apple прави даже още по-смела стъпка в тази посока, лансирайки ОС изпълнена с “блестящи” обекти, сенки и отблясъци.

Еволюция на дизайна. Основни принципи на флат дизайна.

От край време всеки дизайнер се стреми да създаде автентични продукти, максимално доближаващи се до идеала за съвършенство, идентични, уникални, предлагащи безгранични възможности. Някои от тях успяват. Те създават тенденции, приключват ери и поставят основите на нови такива.Те са хората, на които много от нас подражават и следват. В края на 19-ти век над хоризонта се извисява една тенденция – масовата продукция. Продуктите са се произвеждали с основната цел да бъдат практични и качествени, като всеки “излишен” елемент е бил отстраняван. Липсва цветово разнообразие – основни цветове са черно, бяло и сиво. А едно популярно разбиране от онова време е – “Колкото по-опростен дизайнът, толкова по-добре за широката публика”. В стремежа си за развитие и промяна дизайнерите на първата половина на 20ти век отиват в другата крайност, като добавят прекалено много орнаменти към дизайна на своите продукти. Един от основателите на модерния дизайн, Адолф Лос, твърди, че “Колкото по-нисък е стандартът на хората, толкова по-голямо става насищането на орнаменти.” Нека дам няколко примера за еволюция на софтуерния дизайн и това как се стигна до флат-ът. Първият графичен интерфейс – Естествено първите операционни системи с графичен потребителски интерфейс (ГПИ) предлагат много слабо изживяване, с базовите си настройки, “скучния” външен вид и липсата на цветово разнообразие. Този интерфейс лесно може да го наречем плосък, еднообразен (на английски – flat). Спорно, но нека предположим, че първият графичен софтуер е Mac OS на Apple. Той представлява съвкупност от някои, вече съществуващи функции и разработени нови такива. Отличава се с бутони, икони, папки, шрифтове и много други, наподобяващи истински обекти от ежедневието. Цветовото “разнообразие” е изразено в бяло/черен дизайн на ниска резолюция. Windows XP – Следващата значима стъпка е представянето на една от найуспешните операционни системи създавани някога – Windows XP, в края на 2001г. Развитието на технологиите набляга на по-силно визуално преживяване. Дизайнерите на Microsoft представят ГПИ изпълнен с разнообразие от цветове, множество сенки и градиенти, и някакси му придават един по-”жив”, реален вид.

Скеоморфизъм – Все повече прилики между новите версии на ОС и обектите от ежедневието ни. В новите си операционни системи, Microsoft излиза с бляскав, “стъклен” дизайн и най-различни прозрачни теми. Applе пък добавя дизайн, наподобяващ истинска кожа и скъсана хартия. Тази тенденция е добре позната като скеоморфизъм – стил в дизайна, базиран на елементи взети от ежедневието, с идеята да направят интерфейса да изглежда по-истински. Windows 8, iOS 7 – Смела стъпка встрани от страна на Microsoft, вдъхновена от “Metro” стила. Вярно новия Windows 8 отнесе доста критики по своята функционалност и “излишна” иновативност. Но нека се спрем само на дизайна на операционната система. Никой дизайнер не може да отрече, че някога е предполагал толкова самоуверена (или пък неизбежна) стъпка в страни от страна на Microsoft. Резултатът обаче е страхотен! Ето това е пътят, по който се стигна до флат дизайна. Не малко статии се изписаха последните няколко месеци за флат-а, някои го харесват и следват, докато други изпитват трудности да го възприемат и го отричат. Някои пък застанаха по средата, опитвайки се да направят дизайна си малко по-малко флат или вземайки само отделни негови характеристики. Тенденцията се отличава с премахването на множество орнаменти и детайли. Флат дизайнът е силно ориентиран към съдържанието и не толкова към орнаментите. Дългите сенки с ъгъл от 45 градуса, два пъти по-големи от обекта са характерни. Идеята е да се добави дълбочина в логото, въпреки че сянката също е флат. Apple, както и много други, пък наблягат на градиента. Той представлява лек ефект, които по подобие на сенките добавя вкус и естетика в дизайна. И докато все още сме на тема сенки, флат дизайнът обръща внимание и на падащите сенки. Сравнително популярни сред доста уеб сайтове, падащите сенки се различават от дългите с това, че те описват копие на формата на обекта, падаща върху земята. И нещо от кухнята… може би всички знаем флат дизайна като 2D, и той си е. Но вече се появяват дизайнери, които работят и по 3D флат дизайн или 3D Bevels, отличаващи се с повече сенки. Стремейки се към съвършенството, дизайнерите, избрали пътя на флат дизайна, определено имат поле за изява с много широки граници. Избягвайки повечето орнаменти, те подчертават важността на информацията, която носи продуктът. С бързината, с която се сменят тенденции, приключват и започват ери, не можем да предположим какво ще се случи с флат дизайна и кои от горе посочените аспекти ще бъдат последвани и кои не.

КАКВО ПРЕДВИЖДАТ ДИЗАЙНЕРИТЕ ЗА 2014Г.?

5 ДИЗАЙНА НА САЙТОВЕ, СЪОБРАЗЕНИ СЪС СЪВРЕМЕННИТЕ ТЕНДЕНЦИИ

Според lunaweb.com модата в уеб дизайна за 2014г. ще продължи в някои от вече изброените тенденции, а именно: флат дизайн, адаптивен дизайн, parallax превъртане, сайтове от една страница и фон от снимка, обхващащ целия екран. По мое мнение дори вече адаптивния уеб дизайн не би трябвало да се смята като „тенденция”, а да бъде неизменна част от проектирането на сайта.

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

Designpromotivate предвиждат нещо доста интересно за 2014г. Според тях ще нарасне използването на т.нар. code free design. Още от зората на интернет съществуват сайтове, които помагат за изграждането на свой собствен, без да се пише код от потребителя. Webydo е разработил онлайн дизайнерско студио, където всеки може да направи собствен сайт. Дизайнерите пък го използват за по-лесно и бързо представяне на своите идеи.

1. Онлайн магазин за бижута. 2. Кулинарен сайт. 3. Ре-дизайн на сайта на група Д2. 4. Личен сайт за фотография. 5. Сайт на студио по уеб дизайн.

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

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

ОНЛАЙН МАГАЗИН ЗА БИЖУТА НА ФИРМА “ДИАМАНТ”

Първият сайт е онлайн магазин за бижута на фирма „Диамант”. Дейността на „Диамант” е да произвежда и продава свои уникални бижута. Всеки аспект и характеристика на техните бижута се обмисля внимателно, преди да го оставят в ръцете на професионалните си златари. Използват 14к и 18к злато, сребро и внимателно подбрани скъпоценни камъни и култивирани перли, които се комбинират във вековна изработка с модерно мислене и красив дизайн. В този дух е изграден и самият сайт. Той е стилен и модерен. Използвала съм серифен шрифт, който добре се вписва в стилния дизайн. Ширината е 1920px, а съдържанието е вместено между 1000px в центъра. Основно акцентирам върху един цвят, като съм се стараела да е максимално изчистен и опростен дизайна. Лесен за ориентиране и добро потребителско изживяване.

ПРЕДСТАВЯНЕ НА СТРАНИЦИТЕ И РАЗПОЛОЖЕНИЕ НА ЕЛЕМЕНТИТЕ 16

В хедъра съм разположила навигацията, чийто хипер линкове се увеличават при преминаване на мишката върху тях и се подчертават с елемент, който се използва и в банера. Над навигацията съм поместила търсачка и информация за закупените продукти. Сайтът е във “флат” дизайн, като има и елементи от App Style Interface. App Style Interface са интуитивни за повечето потребители и лесно могат да се превърнат в динамичен дизайн, когато се прехвърлят на мобилно устройство. Кръглите елементи се повтарят, както в хедъра и бодито, така и присъстват почти незабележимо в категориите, банера и търсачките. В банера са поместени 5 новини, които ще се сменят през интервал. Едната ще е видима, а другите 4 са показани в кръг. Бодито е разпределено в 5 колони. Отляво се намират категориите, а вдясно промоции и други новини от сайта. Тези две колони ще остават статични, с изключение на промоциите. В трите централни колони ще бъдат разположени новите продукти. Футъра представлява умален вид на целия сайт. В него се намират социалните връзки, категориите и търсене на магазини „Диамант” в целия свят.

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

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

Четвъртата страница е блог. В него фирмата може да пише за новините, свързани с нейните продукти или дейности, както и да предлага на посетителите интересна информация относно бижута, модни тенденции и т.н. Потребителят ще може да коментира или да сподели новината във facebook, twitter, google+ или pinterest.

Последната страница съответно е за контакти. Там е описано местоположението на офисите, телефони и връзка със социалните мрежи.

КУЛИНАРЕН САЙТ “ГОТВИ У ДОМА”

Следващият сайт е на кулинарна тематика. Дизайнът му е разработен в стил „скеоморфизъм”. Всички илюстрации на плодове, зеленчуци, дървения плот и дървената табела са истински. По този начин се създава домашен уют и непринуденост. Затова и сайта се казва „Готви у дома!”. Логото представлява стилизирана тенджера. Капакът е леко отхлупен и от него излиза пара. Ако присвием очи ще ни наподоби на къща, от чийто комин излиза пушек. Шрифтът е съобразен с линиите, от които е изградено логото.

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

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

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

РЕ-ДИЗАЙН НА САЙТА НА ГРУПА “Д2”

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

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

Всяка страница е проектирана идентично с останалите. Така потребителят се ориентира бързо и не му се налага да мисли къде се намира дадена секция или защо тя е преместена на друго място. В третата страница са поместени албумите на групата - раздел „Музика”. Различното тук е, че албумите са черно-бели, които при scrollover получават истинските си цветове. Аналогична е ситуацията и при следващата страница – „Видео”.

ЛИЧЕН ФОТОГРАФСКИ САЙТ

Четвъртият сайт е на тема фотография. Авторът на снимките е Тенко Николов. Фотографията за него е хоби и въпреки това се справя като професионалист. Обича да прави предимно портрети, модни снимки и пейзажи. Затова и фотографиите са организирани в тези категории.

33 ТЕНКО НИКОЛОВ ФОТОГРАФИЯ www.nikolov.com

ПРЕДСТАВЯНЕ НА САЙТА

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

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

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

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

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

Страницата, в която се намира галерията, снимката е цветна, а всички останали тя е черно-бяла, тъй като са посветени на автора и връзка с него. Последната страница отново е „Контакти”. Там е поставена контактна форма за обратна връзка, като има подсказки вътре в самите форми.

САЙТ НА УЕБ ДИЗАЙН СТУДИО

Последният сайт е фирмен. PixelDesign е студио, което се занимава с уеб дизайн и други услуги в тази сфера. Логото е съставено от думите Pixel и Design, като помежду си образуват ID, което означава идентичност. Като изпълнение е строго технично, което вдъхва увереност и доверие в предоставяните услуги. Този сайт съставен от една страница. Преходът между отделните теми е представен чрез разчупени линии. За удобство навигацията остава фиксирана най-отгоре през цялото време на превъртане. Така посетителят ще може да „прескочи” веднага на дадена секция. Въпреки това, отделенията са подредени логически и на самият потребител ще му бъде интересно да прочете и види цялата информация, организирана по този начин.

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

При преминаване на мишката, дадения проект се оцветява в зелено и се показва лупичка, което подсказва на потребителя, че може да го увеличи. Предпоследната секция е „Блог”. Могат да бъдат представени три новини, като последната е с най-голям размер. Структурата е: снимка на новината, заглавието е със зелен фон и снимка на човека от екипа, който я публикува. И най-накрая е страницата с контактите. Потребителят има два варианта за връзка със студиото. Единият е да използва контактната форма, а другият е да използва директно e-mail адреса. Адресът на офиса е представен на карта, която съвсем леко прозира като фон.

В ЗАКЛЮЧЕНИЕ

Днес е ерата на AJAX, jquery, mootools и различни JavaScript библиотеки и технологии, базирани на клиента или на сървъра, които изпълняват голяма част от функционалността и ефектите на потребителското изживяване в съвременните уеб сайтове.

С навлизането и масовото поддържане на CSS 3 и HTML 5, WEB ще се промени още повече и ще доведе до нов облик уеб страниците. Едно е сигурно. Уеб дизайнът днес е по-добър от всякога и ще продължва да се развива в тази насока. И това не се дължи само на факта, че има повече уеб сайтове и повече добри примери за подражание, а уеб дизайнерите знаят подобре от всякога как се изгражда и поддържа един уеб сайт. Днес срещаме все по-рядко страници, чието съдържание е разположено из целия екран. Склонни сме да превъртаме повече, отколкото от преди. Искаме да има разстояние между редовете, оформени абзаци и повече бели полета. А и така намираме по-лесно, това което търсим. В хубавият и модерен уеб дизайн се влага повече енергия върху съдържанието, отколкото върху неговият фон (например). Добрият дизайн днес е равнозначен на ползваемост, адаптивност и лесно ориентиране.

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