Веб-дизајн

Web dizajn (енгл. Web design) обухвата велики број различитих вештина и дисциплина које се користе у процесу израде wеб сајтова. Различите области wеб дизајна укључују wеб и графички дизајн односно дизајн корисничког интерфејса, ауторска права, стандардизовани код и пропратни софтвер за дизајнирање wеб садржаја, УX дизајн и СЕО оптимизацију. Често одређени број индивидуалних wеб дизајнера раде у тимовима покривајући различите аспекте процеса дизајнирања, иако неки дизајнери могу сами да одраде цео процес дизајнирања. Термин wеб дизајн се обично користи да опише процес дизајнирања који се односи на клијентски - фронт енд део и пројектовање wеб сајта укључујући писање кода, односно кодирање, које је јако битно у wеб дизајнирању . Од wеб дизајнера се очекује да задовоље потребне услове изгледа и функционалности wеб сајта, њихова улога подразумева и писање кода па је потребно да буду у току са wеб девелопмент стандардима.

Историја wеб дизајна

Wеб десигн боокс ин а сторе

1988—2001

Иако wеб дизајн има прилично недавну историју, може бити лако повезан са другим областима као што је графички дизајн. Област wеб дизајна такође представља тренутно технолошко становиште. Оно има велико учешће у свакодневном животу људи. Тешко је замислити интернет без анимираних слика, различитих стилова типографије, шарених позадинских слика и музике.

Почетак wеба и wеб дизајна

Научник Европске организације за нуклеарна истраживања ЦЕРН, Тим Бернерс-Лее је 1989. године предложио да створи глобални хyпертеxт пројекат, касније познатији као Wорлд Wиде Wеб.Од 1989-1990, Тим Бернерс-Лее предложио је скуп протокола и софтвера (први wеб прегледач - броwсер назван Wорлд Wиде Wеб), који је омогућио рачунарима да приказују информације. У периоду од 1991. до 1993. Wорлд Wиде Wеб је створен. Теxт-онлy странице било је могуће видети користећи једноставан лине-моде прегледач. Године 1993. Марц Андреессен и Ериц Бина, развили су Мосаиц броwсер. У то време постојало је више прегледача, али већина њих је била базирана на Униx-у. Тада није било интегрисаног приступа елементима графичког дизајна као сто су слике или звук. Мосаиц броwсер је разбио овај калуп.

У октобру 1994. године, основан је W3Ц конзорцијум како би се поставили стандарди и смернице будућег развоја ХТМЛ-а, да би се омогућио динамички садржај на wеб-у." W3Ц је наставио да поставља стандарде што је данас могуће видети на примеру Јава скрипте. Године 1994. Андресен је покренуо Цоммуницатионс Цорп. који је касније постао познат као Нетсцапе Цоммуницатионс, Нетсцапе 0.9 прегледач. Нетсцапе је створио сопствене ХТМЛ тагове, без обзира на традиционални процес стандарда. На пример, Нетсцапе 1.1. је подразумевао тагове за мењање боје позадине и форматирање текста са табелама на wеб страници. У периоду од 1996. до 1999. почео је прегледачки рат, како су се Мицрософт и Нетсцапе борили за ултимативну прегледачку доминацију.

Током овог периода јављале су се бројне нове технологије на овом пољу, а посебно треба нагласити Јава скрипту, Динамички ХТМЛ и ЦСС. У суштини, конкурентност прегледача водила је ка многим позитивним креацијама и помогла је да се wеб дизајн развија бржим темпом.

Еволуција wеб дизајна

Мицрософт је 1996. године избацио свој први конкурентни веб прегледач, који је био употпуњен са сопственим карактеристикама и таговима. То је такође био и први прегледач који је подржавао стyле схеет, који је у то време сматран за нејасну технику. ХТМЛ елемент за табеле је првобитно био намењен приказивању табеларних података. Међутим дизајнери су убрзо увидели потенцијал коришћења ХТМЛ табела за прављење комплексних распореда у више колона, који иначе не би био могућ. У овом периоду, чинило се да су дизајн и добра естетика имали предност над добром марк-уп структуром и мало пажње је посвећено семантици и wеб приступачности. ХТМЛ сајтови су били ограничени у погледу дизајнерских опција, а посебно са ранијим верзијама ХТМЛ-а. Да би креирали комплексне пројекте, многи дизајнери морали су да користе компликоване табеларне структуре или чак бланк спацер.ГИФ слике како би спречили колапс празне табеларне ћелије. ЦСС је представљен у децембру 1996. године од стране W3Ц, како би подржао презентацију и изглед. Ово је омогућило ХТМЛ коду да буде семантички, пре него семантички и презентацијски, као и да побољша приступачност wеб-у, видевши wеб дизајн без табела.

Године 1996. развијен је Фласх(првобитно познат као ФутуреСпласх). У то доба, инструмент за развој Фласх садржаја био је релативно једноставан у односу на сада, користећи само основни изглед и алате за цртање, лимитираног претходника АцтионСцрипт-а, и временски оквир, али је омогућио wеб дизајнерима да иду изнад тачке ХТМЛ-а, анимираних ГИФ-ова и Јава скрипте. Међутим, како је Фласх захтевао плуг-ин, многи wеб програмери избегавали су да га користе из страха због ограничења свог тржишног удела и недостатка компатибилности. Уместо тога, wеб дизајнери су се вратили ГИФ анимацији и Јава скрипти за виџете. Али предности Фласх-а учинили су га довољно популарним међу специфичним циљним тржиштима како би на крају нашао пут до већине прегледача, као и довољно моћним да би се користио за развој читавих сајтова. Фласх технологија ће владати све до појаве првог Ајфона, када полако пада у заборав.

Крај првог рата веб прегледача

Нетсцапе је 1988. године објавио Нетсцапе Цоммуницатор код под лиценцом отвореног кода, чиме је омогућио хиљадама програмера да учествују у побољшању софтвера. Међутим, они одлучују да почну од самог почетка, који је водио развоју отвореног кода прегледача и убрзо је проширено на комплетну платформу апликације. Пројекат Wеб стандарда је био формиран и промовисан прегледач усклађен са ХТМЛ и ЦСС стандардима, стварањем Ацид 1, Ацид 2 и Ацид 3 тестова. 2000. година била је велика година за Мицрософт.

Интернет Еxплорер је пуштен за Мац; ово је било од изузетне важности јер је то био први веб прегледач који је у потпуности подржао ХТМЛ 4.01 и ЦСС 1 и то је довело до побољшања усклађености стандарда. То је такође био први прегледач који је у потпуности подржао ПНГ формат слике. Током овог периода Нетсцапе је продат АОЛ-у и то се видело као званични пораз Нетсцапе-а, односно као победа Мицрософта у прегледачким ратовима.

2001—2012

Од самог почетка 21. века, интернет је постао део свакодневног живота људи. У складу са тим, технологија wеба је наставила да се развија. Такође су биле значајне и промене у начину на који људи користе и приступају wеб-у, а то је довело до промена у погледу дизајна сајтова.

Модерни веб прегледачи

Од периода завршетка прегледачких ратова, дошло је до појаве нових прегледача који долазе на сцену. Многи од њих били су отвореног кода, сто је значило да су имали тенденцију бржег развоја и подржавања нових стандарда. Ове нове опције сматране су бољим од Мицрософт-овог Интернет Еxплорер-а.

Нови стандарди

W3Ц је објавио нове стандарде за ХТМЛ(ХТМЛ5) и ЦСС(ЦСС3), као и нови ЈаваСцрипт АПИ’с, сваки као нови, али са појединачним стандардима. Међутим, док се термин ХТМЛ5 користи само како би означио нову верзију ХТМЛ-а и неки од ЈаваСцрипт АПИ’с, постало је уобичајено да га користе и како би означили цео пакет нових стандарда(ХТМЛ5, ЦСС3 и ЈаваСцрипт).

Алати и технологије

Wеб дизајнери користе низ различитих алата у зависности од тога у који део производног процеса су укључени. Ови алати се временом ажурирају по најновијим стандардима и софтверима, али принципи на којима они раде остају исти. Wеб дизајнери користе векторску и растерску графику за креирање слика форматираних за Wеб или дизајн прототипа. Технологије које се користе за креирање wеб-сајтова укључују стандардизоване ознаке које могу бити написане ручно или генерисани од стране WYСИWYГ софтвера за уређивање. Остали алати које wеб-дизајнери могу да користе укључују могућност употребе валидатора и друге алатке за тестирање употребљивости и приступачности како би осигурали да њихови wеб-сајтови испуњавају смернице wеб приступачности.

Вештине и технике

Маркетинг и комуникацијски дизајн

Маркетинг и комуникацијски дизајн на wеб сајту могу идентификовати шта привлачи њихово циљно тржиште. То може бити старосна група или специфична културна структура, тако да дизајнер може разумети трендове своје публике. Дизајнери такође могу разумети и врсту wеб сајта који дизајнирају, што на пример значи да (Б2Б) Буссинес-то-буссинес дизајн wеб сајта може у великој мери да се разликује од цонсумер таргетед wеб сајта, као што су забавни сајтови или сајтови малопродаваца. Пажљиво разматрање може осигурати да се естетика и целокупан дизајн сајта не сукобљавају са јасноћом и тачношћу садржаја или лакоћом претраживања интернета, wеб навигатион, посебно на сајту Б2Б. Дизајнери такође могу узети у обзир углед власника сајта како би били сигурни да је сајт приказан на прави начин.

Дизајн корисничког искуства и интерактивни дизајн

Разумевање садржаја сајта од стране корисника често зависи од тога како корисник разуме начин на који сајт функционише. Ово представља део дизајна корисничког искуства. Корисничко искуство је повезано са изгледом сајта, јасним инструкцијама и означавањем на сајту. Колико добро корисници могу да разумеју на који начин могу да комуницирају на сајту, може зависити од интерактивног дизајна сајта. Уколико корисник сагледа корисност сајта, они ће највероватније наставити да га користе. Корисници који су квалификовани и добро упућени у вези са употребом сајта могу наћи интерфејс сајта јединственим и корисним, али и мање интуитивним или мање разумљивим. Међутим, корисници са мање искуства имају мање шансе да увиде предности или користи мање интуитивног wеб интерфејса. Ово доводи до појаве тренда ка више универзалном корисничком искуству, као и лакоћи приступа како би се изашло у сусрет што већем броју корисника, без обзира на то које вештине поседују. Већи део дизајна корисничког искуства и интерактивног дизајна је узето у обзир код дизајна корисничког интерфејса.

Напредне интерактивне функције могу захтевати додатке, ако не напредовање кодирања језичких вештина. Важна одлука у дизајну корисничког искуства подразумева процес избора приликом доношења одлуке о томе да ли користити интерактивност која захтева додатке или не. Уколико додатак не долази унапред инсталиран са свим прегледачима, постоји ризик да корисник неће имати кноw-хоw, као ни стрпљење да инсталира додатак само да би приступио садржају. Уколико функција захтева напредне језичке вештине кодирања, то може бити прескупо у погледу времена или новца за кодирање у односу на количину унапређења функција које ће се додати корисничком искуству. Такође постоји и ризик од тога да напредна интерактивност може бити некомпатибилна са старијим прегледачима или хардверским конфигурацијама.

Студија од стране Лонго ет ал. уводи конструкцију Хуман Ментал Wорклоад(ХМW) у wеб дизајн, са циљем да подржи досадашњу праксу интерактивног дизајна. Експеримент је спроведен помоћу оригиналних Wикипедиа и Гоогле wеб интерфејса, користећи две незнатно различите верзије. Усвојене су три субјективне психолошко- менталне технике за процену обима посла(НАСА-ТЛX, Wорклоад Профиле и Субјецтиве Wорклоад Ассессмент Тецхниqуе), са добро утврђеним проценама употребљивости алата (Сyстем Усабилитy Сцале). Т-тестови су извођени како би се простудирао статистички значај оригиналних и модификованих wеб страница, у смислу обима послова који захтевају посебне задатке. Прелиминарни резултати показали су да, у идеалном случају, повећање употребљивости одговара опадању производног оптерећења, потврђујући негативан утицај структурних промена на интерфејсу. У другом случају, промене су значајне у смислу употребљивости, али не у смислу стварања оптерећења, чиме се подиже важност истраживачких питања и истиче се важност ХМW-а у интерактивном дизајну.

Још једним истраживањем које је спровео Лонго ет ал.(2012) уведен је концепт Ментал Wорклоад као помоћно средство за побољшање мерења употребљивости. Корисничка студија је била дизајнирана и извршена у контексту људске-wеб интеракције. Циљ је био испитати везу између перцепције употребљивости три популарна wеб сајта, као и Ментал Wорлоад који намеће скуп типичних задатака извршених над њима. Резултати добијени скалом система употребљивости су затим били упоређени са Ментал Wорклоад резултатима добијених од стране НАСА-ТЛX и Wорклоад Профиле процене. Резултати показују да су перцепција употребљивости и Ментал Wорклоад две концепције које се не поклапају и не постоји јасан доказ њихове интеракције. Они мере два различита аспекта људског система интеракције, због чега они могу заједничким снагама описати корисничко искуство.

Изглед странице

Део дизајна корисничког интерфејса утиче на квалитет изгледа странице. На пример, дизајнер може приликом дизајнирања размотрити да ли изглед странице сајта треба да остане доследан осталим страницама на том сајту. Ширина пиксела може бити од великог значаја приликом усклађивања објеката у дизајну странице. Најпопуларније фиксне ширине wеб странице генерално имају истоветан скуп ширина које одговарају тренутном најпопуларнијем прегледачком прозору(броwсер wиндоw), важећој најпопуларнијој резолуцији екрана, као и тренутној најпопуларнијој величини монитора. Већина страница је централно постављена ради естетике на већим екранима.

Флуид лаyоутс је добио на популарности око 2000. године као алтернатива ХТМЛ-табле-басед лаyоутс и грид-басед десигн заснованих на принципу дизајна изгледа странице и на техници кодирања, али су били веома спори да би били прихваћени. То је била последица разматрања сцреен реадинг уређаја и различитих величина прозора над којима дизајнери нису имали контролу. Сходно томе, дизајн мозе бити подељен на јединице (сидебарс, цонтент блоцкс, ембеддед адвертисинг ареас, навигатион ареас) које се шаљу прегледачу који ће их поставити на дисплаy монитора, најбоље што може. Како прегледач препознаје детаље на екрану корисника (wиндоw сизе, фонт сизе релативе то wиндоw етц.), прегледач може начинити специфична подешавања за корисника како би постигао тачност распореда, али нема могућности фиксних ширина када је распоред у питању. Иако такав приказ често може променити релативни положај главних садржаја јединица, сидебарс могу бити распоређени испод текста, пре него са стране. Ово је флексибилнији дисплаy од хард-цодед грид-басед лаyоут који се не уклапају у прозор уређаја. Конкретно, релативни положај блокова садржаја може бити промењен остављајући садржај унутар блокова непромењеним. Ово такође смањује потребу корисника да хоризонтално сцролл-ује страницу.

Прилагодљив wеб дизајн је новији приступ, базиран на ЦСС3, има већу компатибилност на различитим уређајима. @media руле.

Типографија

Wеб дизајнери се могу одлучити на то да ограниче разноврсност слоговних фонтова(тyпефаце) на само неколико њих који имају сличан стил, уместо да користе широк спектар фонтова. Већина прегледача препознаје специфичан број сигурних фонтова, које wеб дизајнери претежно користе како би се избегле компликације.

Преузимање фонтова је касније укључено у ЦСС3 модул фонтова и од тада је имплементиран у Сафари 3.1, Опера 10 и Мозилла Фирефоx 3.5. Ово је накнадно повећало интересовање за wеб типографију.

Графика покрета

Изглед страна и кориснички интерфејс такође могу бити под утицајем употребе графике покрета. Одлука о томе да ли користити или не користити графику покрета може зависити од циљног тржишта тог одређеног wеб сајта. Графика покрета може бити боље прихваћена за сајтове који су забавно оријентисани. Међутим, циљна публика сајта са формалнијим и озбиљнијим интересима(као што су бизнис, локална заједница или влада) могу сматрати анимације непотребним и чак збуњујућим. Али то не значи да озбиљнији садржај не треба бити побољшан анимираним или видео презентацијама који су од значаја за садржај. У сваком случају, дизајн графике покрета може направити разлику између ефикасног садржаја и садржаја који одвлачи пажњу.

Квалитет кода

Wеб дизајнери могу узети у обзир да би била добра пракса да се уклопе у стандарде. Ово се обично врши путем прецизног описа шта одређени елемент ради. Неуспех уклапања у стандарде можда неће учинити wеб сајт неупотребљивим или склоном грешкама, али се стандарди могу односити на правилан то јест одговарајући изглед страница у погледу читљивости, као и сигурност да су кодирани елементи затворени на одговарајући начин. Ово укључује грешке у коду, организованији распоред за код, као и сигурност да се личне карте идентификују на прави начин. Слабо кодиране странице се понекад колоквијално називају таг соуп. Провера путем Валидатинг виа W3Ц може се вршити једино када је учињена исправна декларација ДОЦТYПЕ-а, који се користи како би се избегле грешке у коду. Систем идентификује грешке, као и области које не одговарају стандардима за wеб дизајн. Ову информацију затим може кориговати корисник.

Дизајн насловне стране

Стручњаци Јакоб Ниелсен и Кyле Соуцy често истичу важност дизајна насловне стране за успех wеб сајта и тврде да је то најважнија страница на wеб сајту. Међутим, стручњаци су 2000-их година почели да увиђају да све већи број wеб саобраћаја почиње да заобилази насловну страницу, идући директно на унутрашње странице путем прегледача. То је навело многе стручњаке на расправу о томе да ли је насловна страна мање важна него што већина људи сматра. Јаред Споол је 2007. године утврдио да је насловна страна заправо најмање важна страница на wеб сајту.

Током 2012. и 2013. године цароуселс (такође познат као 'слидерс' и 'ротатинг баннерс') су постали изузетно популаран елемент дизајна на почетним страницама, који се често користи за представљање истакнутог или недавног садржаја на ограниченом простору. Многи стручњаци сматрају да су цароуселс неефикасни елемент дизајна и да нарушавају оптимизацију прегледача wеб сајта и употребљивост.

Занимања

Постоје два основна занимања укључена у креирање wеб сајта: Wеб дизајнер и Wеб програмер, који често блиско сарађују на сајту. Wеб дизајнер је одговоран за визуелни аспект, који укључује изглед, боје и типографију на wеб страници. Wеб дизајнери такође имају знање из маркуп језика као сто су ХТМЛ и ЦСС, иако се знање њиховог језика разликује од једног до другог wеб дизајнера. Посебно у мањим организацијама једна особа мора да има све неопходне вештине из дизајнирања и програмирања wеб странице, док веће организације могу имати wеб дизајнера задуженог само за визуелни аспект.

Поред већ наведених, послови који могу да се укључе у процес стварања wеб сајта су следећи:

• Графички дизајнери задужени за прављење визуелних ефеката за сајт, попут лого-а, лаyоутс-а и буттонс-а.
• Стручњаци за интернет маркетинг који помажу у одржавању wеб сајта кроз стратешка решења у погледу таргетирања гледалаца на сајту, користећи маркетинг и промотивне технике на интернету.
• СЕО тимови који истражују и препоручују одговарајуће речи које ће бити укључене у одређени wеб сајт и чине сајт доступнијим за налажење на бројним претраживачима.
• Интернет цопywритер који креира писани садржај на страници како би привукао циљне кориснике на сајт.
• Дизајнер корисничког искуства(УX) обухвата аспекте кориснички фокусираног дизајна разматрања који укључује информациону архитектуру, дизајн средишта корисника, корисничко тестирање, интерактивни дизајн и повремено визуелни дизајн.

Види још

• Интернет
• боје
• Композиција
• Дизајн
• Цртање
• Програмирање
• Кодирање
• ЦСС
• ХТМЛ
• Графика
• СЕО
• Сајт
• Интернет маркетинг
• Wорлд Wиде Wеб

Литература

• Ниелсен, Јакоб; Тахир, Марие (октобар 2001). Хомепаге Усабилитy: 50 Wебситес Децонструцтед. Неw Ридерс Публисхинг. ИСБН 978-0735711020. 

Спољашње везе

• W3Ц цонсортиум фор wеб стандардс
• Шта је wеб десигн, историјат, елементи и раздобља