Уеб дизайн

от Уикипедия, свободната енциклопедия
Направо към навигацията Направо към търсенето

Уеб дизайнът включва много и различни умения и дисциплини в производството и поддръжката на уебсайтове. Различи аспекти на уеб дизайна включват уеб графичен дизайн, дизайн на интерфейса, 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 – системи за управление на съдържанието). Днес изработката на такъв сайт не изисква никакво кодиране.

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

Развитие[редактиране | редактиране на кода]

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

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

Проблеми[редактиране | редактиране на кода]

Ето как изглежда примерен HTML код
Ето как изглежда примерен HTML код

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

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

Уеб дизайн, графичен дизайн, писане на код са изобразени в това графично изображение
Уеб дизайн, графичен дизайн, писане на код са изобразени в това графично изображение

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