Уеб дизайн

Уеб дизайнът включва много и различни умения и дисциплини в производството и поддръжката на уеб сайтове. Различни аспекти на уеб дизайна включват уеб графичен дизайн, дизайн на интерфейса, UX (от англ. user experience – потребителско изживяване) дизайн и СЕО оптимизация за търсещи машини. Някои практикуват само част от дисциплините, докато други работят над всичките. Терминът уеб дизайн обикновено се използва, за да опише процесът по изработката на дизайна за потребителя (т.нар. front end). Уеб дизайнерът трябва да е наясно с ползваемостта (т.е. сайтът да може да бъде лесно използван от потребителя, да е полезен) и да е наясно с всички последни тенденции и изисквания към един сайт.

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

Кратка история

Исторически протоколът за изработването на уеб страници е създаден от Европейската организация за ядрени изследвания CERN. Първоначално уеб страниците са били използвани като вътрешна система за каталогизиране и свързване на отделени един от друг текстове на сървърите на ЦЕРН. Впоследствие поради изключителното си удобство по този начин да се свързват текстове чрез хипервръзки идеята бързо набира скорост и скоро след това се появява първият графичен браузър Gopher, който при пускането си е бил невероятен хит, поради възможността си да представя графично хипертекста, позволявайки не само форматирането му, но и използването на картинки. Впоследствие се появяват по-модерни браузъри, с които WWW (World Wide Web) започва да доминира над по-старите стандарти и продължава да съществува. Първият създаден уеб сайт се е намирал на адрес info.cern.ch.

Умения и техники

Маркетингов дизайн

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

UX дизайн и интерактивен дизайн

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

Шрифтове

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

Въпреки това в CSS3 е включено свалянето на шрифта, което бе вградено в браузърите Safari 3.1, Opera 10 и Mozilla Firefox 3.5. Това повиши интереса към уеб шрифтовете, както и свалянето на шрифтове като цяло.

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

Графики на движение

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

Генерирано съдържание

Има два типа, по които се генерира един сайт: статично и динамично.

Статични сайтове

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

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

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

Динамични сайтове

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

Първите динамични сайтове са кодирани директно на езици, като Perl, PHP и др. Някои от тях използват „шаблонен“ подход, където сървърната страница прилича по структура на потребителската страница, и данните се попълват на съответните места, определени от „етикети“. При Perl цялата процедура се кодира.

И двата подхода намериха своето място в т.нар. CMS системи (Content Management Systems – системи за управление на съдържанието). Изработката на такъв сайт вече не изисква никакво кодиране. Най-често използваната система за управление на съдържанието е WordPress, която задвижва повече от 39,5% сайтовете в интернет през 2021.

Редактирането на съдържанието (и на страницата на шаблона) може да се направи от самия сайт, или чрез външен софтуер. Възможността да се редактира съдържанието е само за потребители с определени нива на достъп (например администратори или регистрирани потребители). Има други сайтове, които разрешават и анонимно редактиране на съдържанието – като Уикипедия.

Развитие

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

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

Mobile first и риспонсив дизайнът вече отдавна са навлезли като принципи в уеб разработката. Тя обаче тепърва ще търпи влияние от мобилния бранш с навлизането на технологии като progressive web apps, които прехвърлят към уеб среда някои от възможностите на native приложенията за телефони.

Проблеми

Примерен HTML код

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

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