Уеб дизайн и технологии
Уеб дизайнът е областта на проектирането на уеб интерфейси. Той се занимава с външния вид на уебсайта. Проектирането на това как ще изглежда интерфейсът се нарича дизайн на потребителски интерфейс (User Interface - UI), а проектирането на това как потребителят ще навигира в уебсайта и т.н. са част от дизайна на потребителското изживяване (User Experience - UX).
Без добър дизайн на уебсайта, той няма да се представя много добре, което от своя страна ще се отрази негативно на марката. А добрият дизайн на уебсайта помага за изграждането на уникална идентичност на марката. Той помага за създаването на ангажиращо онлайн присъствие за марката, което помага за привличането на нови клиенти и задържането на стари. [1]
Уебстраница
Уебстраницата е документ, написан на HTML (HyperText Markup Language), който се преглежда в интернет браузър. Достъпът до уебстраница се осъществява чрез въвеждане на URL адрес (Uniform Resource Locator) в адресната лента на браузъра. Уебстраницата може да съдържа текст, графики и хипервръзки към други уебстраници и файлове.
Уебстраницата предоставя информация на потребителите, включително снимки или видеоклипове. Уебстраницата може да се използва и като метод за продажба на продукти или услуги.
Например, достъпът до уебстраница се осъществява, когато щракнете върху връзка, предоставена от търсачка. Интернет се състои от милиони уебстраници, като ежедневно се добавят още. [2]
Уебсайт
Уебсайтът е място в интернет, където можете лесно да публикувате информация за себе си, бизнеса си или теми, които ви вълнуват. Все едно да имате свой собствен кът в мрежата, където да покажете идеите си и да се свържете с други хора.
Независимо дали искате да споделяте знания, да продавате онлайн, да общувате с други хора, да научите нещо ново или просто да се забавлявате, уебсайтовете служат за различни цели. За да получат достъп до уебсайт, потребителите просто се нуждаят от устройство с уеб браузър, като лаптопи, смартфони или таблети, както и от интернет връзка.
Ключови характеристики на уебсайта
Всеки уебсайт има няколко основни елемента, които го правят работещ, създаващ професионално усещане и осигуряващ връзка с аудиторията. Познаването им ще ви помогне да изградите сайт, който е лесен за навигиране, ангажиращ и ефективен.
| Характеристика на уебсайта | Какво представлява | Защо е важно |
|---|---|---|
| Домейн име | Уникалният адрес на вашия уебсайт (като www.example.com) | Помага на хората да намерят сайта ви и го прави лесен за запомняне |
| Уебстраници | Отделните страници, които съставляват вашия уебсайт, обикновено изградени с HTML | Споделяйте съдържание - текст, изображения, видеоклипове – и насочвайте посетителите през вашия сайт |
| Навигация | Менюта и връзки, свързващи вашите страници и секции | Улеснява посетителите да разглеждат сайта ви и да намират това, което им е необходимо |
| Хостинг | Сървърите, където вашият уебсайт е онлайн | Поддържа вашия уебсайт достъпен 24/7, така че всеки може да го посети по всяко време и от всяко място |
| Цел | Причината, поради която вашият уебсайт съществува – споделяне на информация, продажба на продукти или свързване с общност | Определя вашия дизайн и съдържание, така че вашият сайт да отговаря на вашите цели и да обслужва вашата аудитория |
Един уебсайт рядко се оценява по отделните му компоненти. Посетителите не забелязват домейна, хостинга или навигационната структура сами по себе си, а дали сайтът се е заредил бързо, дали е изглеждал надежден и дали им е казано какво да правят след това в рамките на няколко секунди. Направете основните неща правилно, но обърнете истинското си внимание на моментите, в които посетителят решава дали да остане или да си тръгне.
Уебсайтовете са ключова част от ежедневието, помагайки на хората да бъдат информирани, да пазаруват онлайн, да споделят идеи и да се свързват с други хора. Те служат като онлайн пространства за комуникация, обучение, забавление и бизнес. [3]
Визуална композиция
Използването на общоприети правила за структуриране на сайта значително опростява процеса на създаване, насочвайки ви към желания резултат. Тези набори от правила, прилагани към уеб дизайна, са известни като принципи за композиция на уебсайтове.
5-те основни принципа
Принципите на дизайна могат да бъдат определени като набор от принципи и насоки, възприети от дизайнери, от motion дизайнери до уеб дизайнери и архитекти. Целта на тези принципи е да насочат процеса на проектиране по такъв начин, че резултатът да е едновременно естетически и практичен.
Въпреки че няма точен брой на съществуващите принципи на дизайна, тъй като те варират в зависимост от областта, тук ще бъдат засегнати 5 принципа, които са най-подходящи за уеб дизайна.
Баланс
Балансът във вашия уебсайт е „тежестта“ на всеки елемент, който използвате, от текстове до бутони и изображения. За да постигнете балансиран уебсайт, е важно да се уверите, че елементите на уебсайта ви не се надвишават един друг.
В процеса на проектиране на уебсайта си можете да се стремите към симетричен и асиметричен баланс.
Симетричен баланс
Симетричният баланс осигурява визуално изживяване, което е последователно, макар и предвидимо. Визуалното тегло е еднакво от всички страни на дизайна, като се простира по прави линии както от лявата, така и от дясната страна на уебсайта ви.
Симетричният баланс има редица предимства, ключът към които е опростяването на процеса на „смилане“ на информацията. Изберете симетричен баланс, ако искате да осигурите на посетителите си лесен и удобен процес на навигация.
Асиметричен баланс
Основната разлика между симетричен и асиметричен баланс е подредбата: в случай на асиметричен дизайн, теглото на елементите от двете страни е еднакво, но подредбата е различна.
Асиметричният баланс често прави уебсайта по-ангажиращ и интерактивен, тъй като потребителите забелязват дизайна повече и се ангажират повече.
Контраст
Контрастът в уеб дизайна означава поставяне на елементите един до друг по такъв начин, че един от тях да се откроява. Това е полезно, когато имате нещо, което трябва да се подчертае. Контрастът създава пространство на страницата ви, което се откроява и изисква вниманието на потребителя, което прави преживяването по-ангажирано.
Един от по-очевидните начини, по които можете да използвате контраста, е като изберете правилната цветова схема на уебсайта и използвате нюанси, които се допълват взаимно, без да се засенчват. Вашите шрифтове, размери на шрифтове и изображения на уебсайта също могат да се използват за изразяване на контраст във вашия уебсайт и за подчертаване на най-важното съдържание.
Йерархия
Йерархията е един от най-важните и най-известните принципи на дизайна. Както подсказва терминът, това означава открояване на визуалните елементи, които са най-важни в дизайна на уебсайта. Без установена йерархия, посетителите няма да знаят кой елемент е по-важен и ще разглеждат всеки ред текст, изображение или бутон с еднаква важност.
За да установите йерархия на уебсайта, трябва да започнете, като помислите кои елементи от вашия уебсайт са важни и изискват да се откроят. След това можете да постигнете йерархия, като манипулирате тези три фактора:
- Размер - Колкото по-голям е елементът, толкова повече внимание привлича. Хората ще обръщат повече внимание на по-големите елементи, така че колкото по-важен е текстът, толкова по-голям може да бъде той.
- Цвят - Когато искате да откроите нещо, цветовете също са полезни. Например, цветовете, които имат висок контраст с фона, ще бъдат по-забележими.
- Позиция - Позицията на даден елемент говори много за неговата важност: колкото по-високо е разположен елементът, толкова по-важен е той. Поставете елементите, които искате да подчертаете, възможно най-близо до върха.
Бяло пространство
Бялото пространство се отнася до пространствата във вашия уебсайт, които са свободни от каквито и да било елементи. Бялото пространство са полетата на вашата страница, пространството между текстовите блокове, текстовете и бутоните, визуалните елементи и др. Бялото пространство е от решаващо значение в уеб дизайна и има много предимства: прави уебсайта ви по-четлив, информацията е по-малко претрупана и като цяло подобрява потребителското изживяване. Бялото пространство е основата на балансиран уебсайт, където елементите работят заедно по начин, който осигурява пространство за всеки.
Важното нещо, което трябва да се отбележи за бялото пространство, е, че въпреки че се нарича „бяло“, то не е задължително да бъде такова. То може да обхваща фонови снимки, плътни цветове или дори шарки. Ето пример за добро използване на бялото пространство в уеб дизайна.
Единство
Мислете за единството като за кулминацията на вашия уебсайт. То е комбинацията от всички елементи, които сте включили в уебсайта си, и как те работят заедно. За да постигнете единство, всеки елемент на вашия уебсайт, от цвета на текста до формата и местоположението на бутона, трябва да има специфична роля и място в цялостния ви дизайн. Независимо от броя на елементите, които имате, вашият уебсайт не трябва да бъде прекалено натрапчив: всички компоненти трябва да работят заедно по изчистен и визуално приятен начин, за да създадат хармоничен дизайн.
Често използвани оформления
След като вече сте запознати с основните принципи на композирането на уебсайтове, нека разгледаме някои често срещани оформления, използвани от уеб дизайнери по целия свят.
Единично изображение
Първото в нашия списък с често срещани композиции и оформления е оформлението с единично изображение. Това оформление е много просто: това е дизайн с фокус върху едно визуално изображение. Може да бъде снимка или плътен цвят като фон, с много бяло пространство и добавена към страницата текстова навигация.
F-модел
F-моделът е част от добре познато изследване, проведено от Nielsen-Norman Group, което се опитва да разбере онлайн моделите на четене на хората чрез проследяване на погледа. F-моделът е основният модел сред откритията, следван от Z-модели (които ще бъдат обсъдени по-долу). Моделът показва, че:
- Хората първо четат горната част на страницата, в хоризонтално движение. Това формира горната част на F.
- След това те се придвижват малко надолу и с друго хоризонтално движение покриват средната част на страницата, по-къса, отколкото в първия случай. Това е вторият щрих на F.
- След това те отново се придвижват надолу, четейки лявата част на долната част на страницата, този път във вертикално движение, образувайки основата на F.
Ето топлинни карти, базирани на проследяване на погледа, демонстриращи движенията:
F-моделът показва как ще се движат очите на читателя в случай на плътен текст, когато няма друг визуален обект, който да разсейва вниманието му. Това показва, че хората четат изцяло горната част на страницата, като започват да преглеждат по-бързо, докато слизат надолу. Ето защо, ако имате нещо важно да кажете в текста си, не забравяйте да го включите в горната част.
Z-модел
Z-моделът е друг модел, открит по време на същото изследване, базиран на движенията на очите на читателите. Z-образният модел обикновено е моделът на четене, който хората имат за страници с по-малко информация.
Z-образният модел има определени характеристики на F-образния модел (например, горната линия показва, че хората четат началото изцяло), но е по-минималистичен. Целта на Z-образния модел е да насърчи посетителите да предприемат действия, вместо да четат текст. Това го прави перфектно оформление за целеви страници, където хората трябва да изтеглят електронни книги, да попълват формуляри или по друг начин да споделят своята информация.
Тези принципи улесняват началото на целия процес, защото вместо да имате празно платно, вие горе-долу получавате представа как трябва да изглежда вашият уебсайт. [4]
Браузър
Браузърите работят с URL адреси. Можете да въведете буквално всичко в адресната лента. Произволен текст като "pizza" ще бъде трансформиран в URL адрес за „търсене“ като https://google.com/search?q=pizza. Име на домейн като example.com ще бъде нормализирано като пълен URL: https://example.com
Превръщане на URL адрес в HTTP заявка
След като знаем точния URL адрес, който искаме да посетим, можем да изпратим заявка до сървъра, за да извлече ресурса и да го покаже в браузъра. Браузърите комуникират със сървърите, използвайки HTTP протокола.
Разпознаване на адреса на сървъра
Браузърите не могат да изпращат заявки до имена като example.com.
Компютрите комуникират с IP адреси, така че браузърът първо иска от DNS системата да разпознае името на домейна в IP адрес, преди да може да се свърже със сървъра и да изпрати HTTP заявката.
Установяване на TCP връзка
След като DNS предостави на браузъра IP адрес, той все още се нуждае от надеждна връзка със сървъра. TCP е протоколът, който установява тази връзка, преди да бъдат изпратени каквито и да било HTTP данни.
TCP установява връзката чрез триетапно потвърждаване (three-step handshake), което удостоверява, че и двете страни са готови да изпращат и получават данни.
HTTP заявки и отговори
След като TCP връзката е установена, браузърът може да изпрати HTTP заявка до сървъра.
Когато HTTP отговорът пристигне, браузърът прочита суровия HTTP отговор и започва да рендира HTML съдържанието.
Разбор на HTML за изграждане на DOM дърво
След като HTTP отговорът пристигне, браузърът отделя заглавките от тялото и подава HTML байтовете към парсера. Парсерът превръща тагове като <h1> в токени и изгражда DOM дърво.
Браузърът започва да изгражда възли, преди да бъде изтеглен пълният документ, и вмъква липсващи тагове, за да поддържа дървото валидно. Когато се появи таг <script>, парсингът може да се спре, за да може скриптът да се изпълни.
След това DOM дървото се комбинира с CSS, за да създаде дървото за рендериране, което layout и paint използват за рисуване на пиксели.
Относно важността на DOM
DOM е in-memory моделът на браузъра на документа. Това е споделеният договор между HTML парсера, CSS селекторния engine и JavaScript runtime, така че промените в него незабавно влияят на оформлението, стила и това, с което потребителите могат да взаимодействат.
Оформление, рисуване и композитно изображение
След като DOM и CSS са готови, браузърът изпълнява процеса на рендиране: Оформление (преформатиране) за изчисляване на размери и позиции, Рисуване за запълване на пиксели, след това Композитно изображение за сливане на слоевете на графичния процесор.
Не всяка промяна се повтаря на всеки етап. Промяната на цветовете обикновено води до прерисуване, докато промяната на размерите принуждава оформлението и рисуването да се преизчислят. [5]
Технологии
HTML: Език за маркиране на хипертекст
HTML (HyperText Markup Language) е най-основният градивен елемент на мрежата. Той определя значението и структурата на уеб съдържанието. Други технологии освен HTML обикновено се използват за описание на външния вид/представянето (CSS) или функционалността/поведението (JavaScript) на уебстраницата.
„Хипертекст“ се отнася до връзки, които свързват уебстраници една с друга, както в рамките на един уебсайт, така и между уебсайтове. Връзките са основен аспект на мрежата. Като качвате съдържание в интернет и го свързвате със страници, създадени от други хора, вие ставате активен участник в световната мрежа. [6]
CSS: Каскадни стилови таблици
CSS (Cascading Style Sheets) е език за стилови таблици, използван за описание на представянето на документ, написан на HTML или XML (включително XML диалекти като SVG, MathML или XHTML). CSS описва как елементите трябва да се изобразяват на екрана, на хартия, в реч или на други медии.
CSS е сред основните езици на отворената мрежа и е стандартизиран в уеб браузърите според спецификациите на W3C. Преди това разработването на различни части от CSS спецификацията се извършваше синхронно, което позволяваше създаването на версии на най-новите препоръки. Може би сте чували за CSS1, CSS2.1 или дори CSS3. Никога няма да има CSS3 или CSS4; по-скоро всичко сега е просто „CSS“ с отделни CSS модули с номера на версиите.
След CSS 2.1 обхватът на спецификацията се увеличи значително и напредъкът по различните CSS модули започна да се различава толкова много, че стана по-ефективно да се разработват и публикуват препоръки поотделно за всеки модул. Вместо да се създава версия за CSS спецификацията, W3C сега периодично прави моментна снимка (snapshot) на последното стабилно състояние на CSS спецификацията и напредъка на отделните модули. CSS модулите вече имат номера на версии или нива, като например CSS Color Module Level 5. [7]
JavaScript
JavaScript (JS) е лек интерпретиран език за програмиране с първокласни функции. Въпреки че е най-известен като скриптов език за уебстраници, много среди извън браузъра също го използват, като Node.js, Apache CouchDB и Adobe Acrobat. JavaScript е динамичен език, поддържащ множество парадигми като императивна, функционална и обектно-ориентирана. [8]
Структура на HTML документ
Всяка страница започва с:
<!DOCTYPE html>- Казва на браузъра да използва съвременни стандарти<html>елемент- metadata в
<head>- Mетаданните са информация за страницата <body>- Съдържа това, което хората виждат
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Document Title</title>
</head>
<body>
<header>...</header>
<main>...</main>
<footer>...</footer>
</body>
</html>
Head metadata
<meta charset="UTF-8">- Осигурява правилно изобразяване на символите<meta name="viewport">- Прави оформленията адаптивни (responsive)<link rel="stylesheet">- Прикачва външен CSS<script>съдържа JavaScript код и обикновено се зареждат в края на<body>, за да се избегне блокиране на рендирането- Използвайте
<title>за заглавие на раздела на браузъра и SEO, плюс<meta name="description">за фрагменти от търсенето
Контейнери за оформление
Използвайте семантични тагове, за да придадете смисъл на документа:
<header>- Брандиране или навигация в горната част<nav>- Основни връзки за навигация в сайта<main>- Уникално съдържание за страницата (по един на страница)<section>,<article>,<aside>- Подраздели със собствени заглавия<footer>- Заключителна информация, връзки, авторски права [9]