Tema - 1 - ВЪВЕДЕНИЕ В КУРСА - -

WEBB103 Форми, функционалност и онлайн логика – I част
ВЪВЕДЕНИЕ В КУРСА
Основни положения и терминология в уеб дизайна
Tema: 1 Д-р Вероника ЯКИМОВА

• Tema: 1
ЕТАПИ НА ПРОЕКТИРАНЕ НА
САЙТ
ОСНОВНИ ТЕРМИНИ И ПОНЯТИЯ
UI – USER INTERFACE
Потребителският интерфейс се отнася до всеки аспект на цифров
продукт или услуга, с които потребителят взаимодейства.
Всяка контактна среда и повърхност, като се започне от графичния

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

• Tema: 1
САЙТ
UX – USER EXPERIENCE
Вследствие на напредъка в потребителския интерфейс се разви
потребителското изживяване или UX.
Изживяванията на потребителите, независимо дали са благоприятни,

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

продукт или услуга, а не просто дигитални взаимодействия.
Някои практикуващи UX предпочитат да наричат дисциплината

клиентско изживяване, докато други отиват още по-далеч и просто го
наричат дизайн на потребителския опит.
• Tema: 1
САЙТ
ОСНОВНИ ТЕРМИНИ И ПОНЯТИЯ Потребителски поток в UX дизайна
UX потокът е блок-схема, която изобразява

маршрута на потребителя, когато използва
продукта, от началото до края.
Тъй като има толкова много различни цели за

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

фокусирани върху едно действие.
• Tema: 1
САЙТ
Потребителски поток в UX дизайна
Потребителският поток очертава

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

• Tema: 1
САЙТ
Диаграмата започва с входната точка на

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

дизайнерите да оценят и оптимизират
потребителското изживяване и следователно да
увеличат процентите на реализация на клиента.
• Tema: 1
САЙТ
Потребителските потоци описват възможни модели по начин, който улеснява дизайнерите

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

определи какво работи, какво не и кои области се нуждаят от подобрение.
Диаграмата на потребителския поток помага на вашия дизайнерски екип да

визуализира как потребителите ще се движат през продукта.
https://careerfoundry-com.translate.goog/en/blog/ux-design/what-are-user-
UX потокът е блок-схема flows/?_x_tr_sl=auto&_x_tr_tl=bg&_x_tr_hl=bg&_x_tr_pto=wapp
• Tema: 1
САЙТ
Потребителските потоци се фокусират

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

тип блок-схема, може да имате много
различни сценарии, които започват на
различни места. Но основната задача
или постижение обикновено винаги е
едно и също.
• Tema: 1
САЙТ
UX потоците се синтезират рано, по време на етапите на

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

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

• Tema: 1
САЙТ
ПРОТОТИПИРАНЕ
Прототипът е прост експериментален

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

• Tema: 1
АРХИТЕКТУРА НА САЙТ
АНАТОМИЯ НА УЕБ САЙТ АРХИТЕКТУРАТА
Архитектурата на уебсайта е
йерархичната структура на страниците
на вашия уебсайт. Тази структура се
отразява чрез вътрешно свързване.
Структурата на вашия уебсайт трябва да

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

• Tema: 1
СТРУКТУРНА СХЕМА НА СТРАНИЦИТЕ В САЙТА
Без съмнение структурата на уебсайта ви

играе важна роля за задържането на
потребителите и увеличаването на
реализациите.
Внедряването на структура на уебсайт ви
помага да проектирате уебсайта си за
потребителското изживяване . Може да имате
най-удивителното съдържание, но ако
потребителите не могат да го намерят, те ще
напуснат сайта.
• Tema: 1
СТРУКТУРНА СХЕМА НА СТРАНИЦИТЕ В САЙТА
Типичната структура на уебсайт изглежда като

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

• Tema: 1 ЕТАПИ НА РАЗВИТИЕ ВЪВ
ВРЕМЕТО
ДИЗАЙН С ФИКСИРАНА ШИРИНА Fixed-width design
От къде идва необходимостта от създаването на адаптивен дизайн.
В началото на 90-те години, когато мрежата за първи път

стана популярна, повечето монитори имаха размери на
екрана от 640 пиксела ширина и 480 пиксела височина.
Това бяха изпъкнали електронно-лъчеви тръби CRT, а не

като плоските дисплеи с течни кристали и LED, с които
разполагаме сега.
Независимо дали е 640, 800 или 1024 пиксела, изборът на

една конкретна ширина за проектиране се нарича дизайн
с фиксирана ширина.

ВРЕМЕТО
ДИЗАЙН С ФИКСИРАНА ШИРИНА
Fixed-width design
В дните на формиране на ранния

уеб дизайн беше безопасен залог
за успех да се проектират уеб
страници с ширина 640 пиксела.
archive.org
 Уебсайтът на Microsoft в края на 90-те е проектиран за ширина от 640 пиксела.
ВРЕМЕТО
Fixed-width design
Технологиите се развиваха динамично
докато телефони и камери се
миниатюризираха, екраните ставаха
все по-големи (и в крайна сметка по-
плоски).
Не след дълго повечето екрани имаха

размери 800 на 600 пиксела.
Уеб дизайнът се промени съответно.

Дизайнерите и разработчиците
започнаха да приемат, че 800 пиксела
са безопасни по подразбиране.
 Уебсайтът на Microsoft в началото на 2000-те е проектиран за ширина от 800 пиксела. Екранна снимка от archive.org
ВРЕМЕТО
Fixed-width design
Технологиите се развиваха и екраните

отново станаха по-големи. 1024 на 768
стана по подразбиране.
 Уебсайтът на Microsoft в средата на 2000-те е проектиран за ширина от 1024 пиксела. Екранна снимка от archive.org
ВРЕМЕТО
Fixed-width design
Технологиите се развиваха и екраните

отново станаха по-големи. 1024 на 768
стана по подразбиране.
 Уебсайтът на Yahoo от началото на 2000-те години на миналия век в браузър, който е по-широк от 800 пиксела
широк дизайн на сайта. Екранна снимка от archive.org
ВРЕМЕТО
Ако посочите фиксирана ширина за вашето оформление, тогава то ще изглежда добре

само при тази конкретна ширина.
Ако посетител на вашия сайт има по-широк екран от ширината, която сте избрали,
тогава ще се губи място на екрана.
Можете да центрирате съдържанието на вашите страници, за да разпределите това

пространство по-равномерно (вместо да имате празно пространство от едната
страна).
ВРЕМЕТО
По същия начин,
ако посетител е с по-тесен екран от
ширината, която сте избрали, съдържанието
ви няма да се побере хоризонтално.
Браузърът генерира лента за обхождане , т.е,

хоризонтален еквивалент на лента за
превъртане.
Потребителят трябва да премести цялата

страница наляво и надясно, за да види цялото
съдържание.
ВРЕМЕТО
ДИЗАЙН С ПЛАВАЩО ОФОРМЛЕНИЕ – / ТЕЧНО ОФОРМЛЕНИЕ /
Liquid layout
Докато по-голямата част от дизайнерите използваха оформления

с фиксирана ширина, някои избраха да направят оформленията си гъвкави.
Вместо да използвате фиксирани ширини за вашите оформления,

можете да направите гъвкаво такова,
като използвате проценти за ширините на колоните си.
Тези дизайни работят в повече ситуации, което изглежда правилно само при един
конкретен размер.
ВРЕМЕТО
Liquid layout
На пръв поглед това е едно отлично

решение, но реално докато течното
оформление ще изглежда добре в широк
диапазон от ширини, то ще започне да се
влошава в крайностите.
На широк екран оформлението изглежда

разтегнато, а на тесен екран то изглежда
смачкано.
И двата сценария не са идеални.
 Течното оформление на Уикипедия от средата на 2000-те, както е изживяно в тесен прозорец на

браузъра. Екранна снимка от archive.org
ВРЕМЕТО
Liquid layout
Можете да смекчите тези проблеми, като използвате min-width и max-width за вашето

оформление.
Но след това при всеки размер под минималната ширина или над максималната ширина
имате същите проблеми, които бихте имали с оформление с фиксирана ширина.
На широк екран ще има неизползвано място, което ще се губи.
На тесен екран потребителят ще трябва да премести цялата страница наляво и надясно, за

да види всичко.
ВРЕМЕТО
Liquid layout
При течния уеб дизайн ширините на

елементите на страницата се
задават пропорционално на
ширината на екрана или прозореца
на браузъра.
Един флуиден уебсайт се

разширява или свива въз основа на
ширината на текущия прозорец за
изглед. Плавният дизайн помага да
направите уебсайтовете по-
използваеми на различни типове
устройства с различни размери на
екрана.
ВРЕМЕТО
Liquid layout
Думата течност е само един от термините, използвани за описание на този вид

оформление.
Тези видове дизайни се наричат също течни оформления или гъвкави оформления.
ВРЕМЕТО
ДИЗАЙН НА МАЛКИ ЕКРАНИ
През 21-ви век мрежата продължава да става все по-голяма и по-голяма.

Но пристигнаха нови екрани, които бяха по-малки от всяко настолно устройство.
С появата на мобилни телефони с пълнофункционални уеб браузъри,

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

компютър и мобилен телефон? Те се нуждаеха от начин да стилизират
съдържанието си за екрани с ширина до 240 пиксела и височина до 1200 пиксела.
ВРЕМЕТО
ДИЗАЙН НА МАЛКИ ЕКРАНИ
ВРЕМЕТО
РАЗВИТИЕ НА МОБИЛНИТЕ МРЕЖИ ПРЕЗ ГОДИНИТЕ
https://smartarena.bg/razliki-1g-2g-3g-4g-5g/
• Tema: 1
ОБЩИ ПОЛОЖЕНИЯ И ТЕРМИНИ

АДАПТИВЕН ДИЗАЙН -
От къде идва необходимостта от

създаването на адаптивен дизайн?
Адаптивния дизайн не е първият

подход за проектиране на уеб
сайтове.
В годините преди него, уеб

дизайнерите и разработчиците
изпробваха много различни техники,
като например – дизайн с
фиксирана ширина.

• Tema: 1

АДАПТИВНИ ОФОРМЛЕНИЯ
Adaptive design
Вместо да имате отделни сайтове в различни

поддомейни, можете да имате един сайт
с две или три оформления с фиксирана ширина.
• Tema: 1

Adaptive design
Голяма част от разработчиците все още не бяха

мотивирани да правят оформления с фиксирана
ширина за различните устройства.
Една техника включваше превключване между

шепа оформления с фиксирана ширина при
определени ширини.
• Tema: 1

Adaptive design
Една техника включваше превключване между шепа оформления

с фиксирана ширина при определени ширини.
• Tema: 1

Adaptive design
Някои хора наричат това решение

- адаптивен дизайн.
• Tema: 1

Adaptive design
Адаптивният дизайн позволи на дизайнерите да

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

Въпреки, че не беше толкова лош,
колкото при оформление с фиксирана ширина.
• Tema: 1

Адаптивен уеб дизайн
• Обслужва подобно оформление на всички

устройства.
• Прави се отделен дизайн за всеки размер.
• По-добре работи за достигане до широка
аудитория.

• Tema: 1

Отзивчив дизайн
• Обслужва различни оформления за различни

устройства. Правят се най-много 3 варианта на
дизайн. Съдържанието само се адаптира към
размера, който е най-близък до него.
• По-добре за достигане до целеви аудитории.
• Дизайните са съобразени с индивидуалните
потребители.

• Tema: 1

ТЕРМИНИ И ПОНЯТИЯ
Преди смартфоните уебсайтовете бяха проектирани за екрани на настолни

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

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

• Tema: 1

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

• Tema: 1

Плюсове и минуси на адаптивния уеб дизайн
Адаптивният уеб дизайн използва точки на

прекъсване, за да определи къде се
прекъсва съдържанието, за да се адаптират
към екрани с различен размер.
Тези точки на прекъсване мащабират

изображения, обвиват текст и коригират
оформлението, така че уебсайтът да пасва
на екрана.
• Tema: 1

Адаптивния уеб дизайн е

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

• Tema: 1

Плюсове и минуси на адаптивния и отзивчив уеб дизайн
Ако използвате платформа за управление на

съдържанието като WordPress, можете да
намерите безплатни теми, които използват отзивчив
дизайн.
В замяна на лесно внедряване, адаптивните уеб
страници се зареждат по-бавно от отзивчивите уеб
страници. Освен това тези страници може да не
предоставят винаги оптималното потребителско
изживяване в зависимост от подредбата на
елементите на страницата.
• Tema: 1

Плюсове и минуси на адаптивния и отзивчив уеб дизайн
Когато разглеждате адаптивен уебсайт, сайтът се

адаптира към всеки уеб браузър на компютър,
таблет или смартфон.
Отзивчивият дизайн използва CSS медийни заявки,
за да промени външния вид на сайта въз основа
на целевото устройство.
Когато сайтът се отвори в браузър, информацията
от устройството се използва за автоматично
определяне на размера на екрана и съответно
коригиране на рамката на сайта.
• Tema: 1

АДАПТИВЕН ДИЗАЙН
В първите дни на мрежата повечето хора

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

• Tema: 1

АДАПТИВЕН ДИЗАЙН – ПРОБЛЕМИ И РЕШЕНИЯ
С прилагане на meta елемент на място, вашите

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

оформлението, преди да е поставен мета тагът, в
сравнение с оформлението вдясно.
• Tema: 1

Плюсове и минуси на отзивчивия уеб дизайн / Responsive design /
Предимства
• Оформленията са оптимизирани за всеки потребител.
• Зареждат се два до три пъти по-бързо от адаптивните уебсайтове.
• По-лесно проследяване на потребителските анализи.
Недостатъци
• Отнема повече време за създаване от адаптивния дизайн.
• Не е толкова удобен за търсачката.
• Изисква внимателен анализ на трафика за оптимизиране на потребителското
изживяване.

• Tema: 1

Терминът е въведен от Итън Маркот в статия в A List Apart през 2010 г.
Отзивчивият уеб дизайн открива размера на екрана и

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

да показва информация за ваканционни дестинации на
началната страница.
В същото време мобилното оформление може да
включва формуляр за резервация на началната
страница и от там да имаме разлики във визията.
• Tema: 1

Отзивчивият уеб дизайн се основава на шест базови

ширини на екрана, които варират от 320 пиксела за
смартфон до 1600 пиксела за настолен компютър.
Уеб дизайнерите не винаги проектират за всичките

шест размера.
Те разглеждат своя уеб анализ и дизайн за най-често
използваните устройства и формати.

• Tema: 1

Отзивчивият дизайн също позволява прогресивно

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

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

• Tema: 1

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

Responsive Web Design - САЙТ
Да бъдеш напълно отзивчив не означава само да бъдеш
удобен за мобилни устройства и таблети,
но също така това включва и правилно разгръщане на
съдържанието на огромни телевизионни екрани, настолни
десктоп компютри и лаптопи.

Responsive Web Design -
Отзивчивият уеб дизайн ви помага да

избегнете:
●
грешно преоразмеряване
●
неудобно превъртане
●
неподходящо мащабиране

ПОЛЕЗНА
ИНФОРМАЦИЯ
Tema: 1 Learn Responsive Design https://web.dev/learn/

https://web.dev/learn/design/?gclid=Cj0KCQjwqPGUBhDwARIsANNwjV7yISdn_hyJ2jbiXKsm6BA_IJ6qO-
EN 6ENdQQYuO77PijeMxL9YJjQpYaAv2dEALw_wcB
https://web-dev.translate.goog/learn/design/?gclid=Cj0KCQjwqPGUBhDwARIsANNwjV7yISdn_hyJ2jbiXKsm6BA_IJ6qO-
BG 6ENdQQYuO77PijeMxL9YJjQpYaAv2dEALw_wcB&_x_tr_sl=auto&_x_tr_tl=bg&_x_tr_hl=bg&_x_tr_pto=wapp
ОСНОВНИ
ПРИНЦИПИ НА УЕБ ДИЗАЙНА
1. LAYOUT - СТРУКТУРА, СХЕМА ,ОФОРМЛАНИЕ
2. ALIGNMENT - ПОДРАВНЯВАНЕ
3. PROXIMITY - БЛИЗОСТ
4. BALANCE - БАЛАНС
5. REPITITION - ПОВТОРЕНИЕ
6. COLOR - ЦВЯТ
7. CONTRAST- КОНТРАСТ
8. WHITE SPACE – БЯЛО ПРОСТРАНСТВО

САЙТ
PROXIMITY – БЛИЗОСТ
Поставянето на свързани елементи в

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

могат да сканират страници доста бързо, така че
правенето на тези групирания визуално очевидни
увеличава използваемостта, като помага на
потребителите бързо да намерят и да се
съсредоточат само върху тези елементи на
потребителския интерфейс, които са най-свързани
с текущата им задача. WEBB103 Форми, функционалност и онлайн логика – I част
САЙТ
PROXIMITY – БЛИЗОСТ
Hulu на Apple TV:

Инструкции за щракване и задържане: (за)
Подробностите са представени в долния

десен ъгъл на екрана, далеч от
информацията за следващия епизод за
гледане. Особено на голям телевизионен
екран, това разположение го прави трудно
забележим.
САЙТ
REPITITION – ПОВТОРЕНИЕ
Повторението може да бъде полезно при дизайна на уеб и приложения. Например бихте
очаквали логото на фирма да се повтаря на всяка страница и на едно и също
място. Елементите от менюто често се повтарят на едно и също място на страницата. Това
помага да се осигури последователно потребителско изживяване.
https://vanseodesign.com/web-design/rhythm-examples/
https://vanseodesign-com.translate.goog/web-design/rhythm-examples/?
_x_tr_sl=auto&_x_tr_tl=bg&_x_tr_hl=bg&_x_tr_pto=wapp
САЙТ
REPITITION – ПОВТОРЕНИЕ
Повтаряйки елементи, ние като дизайнери не само работим според

очакванията на нашите потребители, но също така подобряваме
тяхното изживяване.
Последователността създава удобство за потребителите.
Можем също да използваме форми, цветове, текстури, шрифтове и
т.н., за да поддържаме тази последователност чрез повторение.
https://thewebsitearchitect-com.translate.goog/10-great-examples-of-repetition-in-graphic-design/?
_x_tr_sl=en&_x_tr_tl=bg&_x_tr_hl=bg&_x_tr_pto=wapp
САЙТ
ПРИНЦИПИ НА УЕБ ДИЗАЙНА LAYOUT
LAYOUT – Това е скелетната конструкция на сайта ни.

Известна е още като Wireframe structure.
Когато обмисляте стила на оформлението на

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

LAYOUT – Това е скелетната конструкция

на сайта ни.
Oценка на уебсайт
• Използване на цвят за оформлението на
страницата
• Оформяне на текст, както в основното
съдържание, така и в заглавията на страниците
• Типът навигация, нейният стил и интерактивност
• Тип дизайн и стил на заглавката
• Разположението и размера на логото
• Използването на изображения на страниците,
особено на началната страница
• Как се представя съдържанието на страниците
LAYOUT
Уверете се, че уебсайтът ви следва 5-те принципа на използваемост:

наличност, яснота, разпознаваемост, достоверност и уместност.
WEBSITE ARCHITECTURE

СТРУКТУРА НА САЙТА – ONE PAGE
• HEADER
• HERO
• SERVICES
• OUR THEAM
• PORTFOLIO
• ABOUT US
• FOOTHER
LAYOUT – ONE PAGE CONCEPT
https://www.behance.net/
gallery/97989781/UXUI-for-
FinTech-App-Relevium-
student-loan-manager
LAYOUT – ONE PAGE CONCEPT
One Pager е уебсайт с една страница без

допълнителни страници като Информация, Екип
или Услуги. Цялото съдържание се намира в една
и съща уеб страница, традиционно
в оформление с дълго превъртане .
Красотата на уебсайта с една страница е в това,

че се опитва да популяризира едно нещо по чист
и директен начин. Това позволява на посетителя
да вземе по-бързо решение вместо да го изпрати
до раздут уебсайт с много опции.

Красив пример за уебсайтове, които използват отзивчив уеб
дизайн.
Красив пример за уебсайтове,
които използват
отзивчив уеб дизайн.
ЕТАПИ НА ПРОЕКТИРАНЕ LAYOUT
1. LAYOUT – Това е скелетната конструкция
на сайта ни.

WIREFRAME DESIGN
ЕТАПИ НА КОНСТРУИРАНЕ НА САЙТ
Докато разглеждаме инструментите, които дизайнерите използват, важно е да се

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

ПОЛЕЗНИ ЛИНКОВЕ
• https://www-smashingmagazine-com.translate.goog/2011/01/guidelines-for-responsive-web-design/?_x_tr_sl=hi&_x_tr_tl=bg&_x_tr
_hl=bg&_x_tr_pto=wapp
• https://web-dev.translate.goog/learn/design/?gclid=Cj0KCQjwqPGUBhDwARIsANNwjV7yISdn_hyJ2jbiXKsm6BA_IJ6qO-6ENdQQYu
O77PijeMxL9YJjQpYaAv2dEALw_wcB&_x_tr_sl=auto&_x_tr_tl=bg&_x_tr_hl=bg&_x_tr_pto=wapp
• https://www.pinterest.com/pin/369435975696920670/
ПОЛЕЗНИ ЛИНКОВЕ
• https://www.adobe.com/bg/products/xd.html
• https://proto.io/
• https://www.atomic.io/
• https://www.axure.com/
• https://zeplin.io/
• https://www.framer.com/
• https://mockflow.com/
• https://balsamiq.com/
• https://webflow.com/
• https://www.framer.com/
• https://origami.design/
• https://www.invisionapp.com/
• https://www.axure.com/
• https://www.uxpin.com/
https://blog.prototypr.io/top-20-prototyping-tools-for-ui-and-ux-designers-2017-46d59be0b3a9

Tema - 1 - ВЪВЕДЕНИЕ В КУРСА - -

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Tema - 1 - ВЪВЕДЕНИЕ В КУРСА - -

Uploaded by

Copyright:

Available Formats

WEBB103 Форми, функционалност и онлайн логика – I част

Tema: 1 Д-р Вероника ЯКИМОВА

Всяка контактна среда и повърхност, като се започне от графичния

WEBB103 Форми, функционалност и онлайн логика – I част

Изживяванията на потребителите, независимо дали са благоприятни,

Това е широк термин, който може да включва всяка среща на човек с

Някои практикуващи UX предпочитат да наричат дисциплината

UX потокът е блок-схема, която изобразява

Тъй като има толкова много различни цели за

Някои са по-сложни, докато други са

Потребителският поток очертава

UX потокът e отразен в блок-схема

Диаграмата започва с входната точка на

Изобразяването на този процес позволява на

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

За продукти, които вече се използват, диаграмите на потребителите помагат да се

Диаграмата на потребителския поток помага на вашия дизайнерски екип да

Потребителските потоци се фокусират

Следователно, когато използвате този

UX потоците се синтезират рано, по време на етапите на

След като сте събрали вашите данни от потребителско

WEBB103 Форми, функционалност и онлайн логика – I част

Прототипът е прост експериментален

WEBB103 Форми, функционалност и онлайн логика – I част

ОСНОВНИ ТЕРМИНИ И ПОНЯТИЯ

АНАТОМИЯ НА УЕБ САЙТ АРХИТЕКТУРАТА

Структурата на вашия уебсайт трябва да

WEBB103 Форми, функционалност и онлайн логика – I част

СТРУКТУРНА СХЕМА НА СТРАНИЦИТЕ В САЙТА

Без съмнение структурата на уебсайта ви

СТРУКТУРНА СХЕМА НА СТРАНИЦИТЕ В САЙТА

Типичната структура на уебсайт изглежда като

WEBB103 Форми, функционалност и онлайн логика – I част

От къде идва необходимостта от създаването на адаптивен дизайн.

В началото на 90-те години, когато мрежата за първи път

Това бяха изпъкнали електронно-лъчеви тръби CRT, а не

Независимо дали е 640, 800 или 1024 пиксела, изборът на

WEBB103 Форми, функционалност и онлайн логика – I част

В дните на формиране на ранния

Не след дълго повечето екрани имаха

Уеб дизайнът се промени съответно.

Технологиите се развиваха и екраните

Технологиите се развиваха и екраните

Ако посочите фиксирана ширина за вашето оформление, тогава то ще изглежда добре

Можете да центрирате съдържанието на вашите страници, за да разпределите това

Браузърът генерира лента за обхождане , т.е,

Потребителят трябва да премести цялата

Докато по-голямата част от дизайнерите използваха оформления

Вместо да използвате фиксирани ширини за вашите оформления,

На пръв поглед това е едно отлично

На широк екран оформлението изглежда

И двата сценария не са идеални.

 Течното оформление на Уикипедия от средата на 2000-те, както е изживяно в тесен прозорец на

Можете да смекчите тези проблеми, като използвате min-width и max-width за вашето

На широк екран ще има неизползвано място, което ще се губи.

На тесен екран потребителят ще трябва да премести цялата страница наляво и надясно, за

При течния уеб дизайн ширините на

Един флуиден уебсайт се

Думата течност е само един от термините, използвани за описание на този вид

През 21-ви век мрежата продължава да става все по-голяма и по-голяма.

С появата на мобилни телефони с пълнофункционални уеб браузъри,

Как биха могли да гарантират, че техните дизайни ще изглеждат добре на настолен

ОБЩИ ПОЛОЖЕНИЯ И ТЕРМИНИ

Някои хора наричат това решение