Проектиране и графичен дизайн на уеб сайт

Тема 3. Основни етапи при проектирането на уеб сайт

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

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

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

2. Информационна архитектура на уеб сайта

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

3. Средства за програмна реализация
- представлява етап за избор на технологии за реализиране и изграждане на уеб
а) езици и технологии за написването и оформянето на уеб страниците - HTML, CSS, JavaScript, РНР, MySQL и др.
б) системи за управление на съдържанието: WordPress, Joomla, Drupal и др.
в) поддръжка от различни операционни системи (MS Windows, Linux, macOS, Unix) и браузъри (MS Edge, Google Chrome, Mozila Firefox, Safari и др.).

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

4. Елементи на уеб сайт

а) основните елементи на уеб сайт

начална страница
главни вътрешни нива
вътрешни средства

б) допълнителни елементи

карта на сайта
форма за търсене
форма за контакт
често задавани въпроси

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

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

Visual site mapper
Visual Site Mapper е безплатен инструмент, който можеш да използваш, за да покажеш бързо структурата на уебсайт.

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

Задача 1. Като използвате гореспоменатите онлайн инструменти вижте карта на:
a) сайта на НХГ - https://nhg-blg.com/
б) електронен вестник Пишурки

Има различни безплатни и платени програми за мисловни карти – mind maps.
Ето някои от тях: Bubbl.us, MindMeister, Mindmup, Coggle, Mind42, Mindomo, Lucidchart.

Задача 2 (карта на сайт): Като използвате едно от безплатните приложение създайте карта на сайта на НХГ - https://nhg-blg.com/
Готовата карта представете в Teams - Бележника на класа!

5. Структура на уеб сайт

Включва цялата информация, включена в него. Тази информация от своя страна определя поведението на посетителите на сайта. Информацията трябва да е съобразена с избраните от вас цели и да следва определена форма и ред.
Цели, пред които трябва да отговаря структурата на един сайт:

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

6. Навигационна структура
Основни правила за добра навигация:

Задължително в страницата трябва да присъства главно меню. В него трябва да има връзки към най-важните подстраници.
Всички навигационни менюта трябва да са изложени на едно и също място, за да не объркват потребителите.
Отделните линкове (бутони) в менютата трябва да са озаглавени кратко и ясно.
Ако страницата ви има повече на брой категории (раздели) и съответно подстраници, е желателно да добавите "карта на сайта" и форма за търсене.
Поставяйте алтернативен текст на бутоните.

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

7. Съдържание на уеб сайт

Съдържанието на сайта включва:

текстове,
графични елементи (лого, бутони, навигация) и др.

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

Тема 4. Проектиране на уеб страница

1. Основни етапи в проектиране на уеб страница (е част от процеса на проектирането на веб сайт):

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

Изготвя се схема на разположението на различните елементи на страницата. Елементите се изобразяват като правоъгълници, върху които се уточнява какво точно ще представляват.
Пример 1 >> Пример 2 >>

Трети етап. Утвърждаване на проекта.

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

2. Графичен интерфейс и графичен дизайн на уеб страница

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

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

Заглавна част (header) - име и изображение на представяния обект.
Главна навигационна част (main navigation) - връзки към вътрешните страници от сайта.
Част за съдържание (content).
Долна част (footer) - информация за автора, допълнителни връзки.

Прототипът позволява за кратко време да се създаде проект, който да покаже идеята преди по-нататъшното й изпълнение.

Началната (входяща страница - home page, index) - на един уеб сайт е много важна. Тя е тази, която трябва да привлече вниманието на посетителя.
На нея е важно да присъства:

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

Съдържанието й трябва да бъде обновявано често.

Задача 1. Като използвате онлайн инструмента https://uizard.io създайте прототип на начална страница на сайт за туристически пътувания.

Елементи на страницата трябва да бъдат:

горен колонтитул (header), който да съдържа: лого на компанията, информация за контакти; хоризонтално меню - дестинации, почивки, екскурзии, круизи, промоции;
тяло (body/content) - топхотели, топдестинации, други услуги;
долен колонтитул (footer) - новини, за нас, календар, горещи оферти.

4. Вътрешни страници
Задачата на вътрешните страници е да задържат вниманието на потребителя. Те трябва да следват стила и логиката на началната страница, при което да са в единство с предходните нива.
Основният акцент при тях е съдържанието:

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

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

5. Изграждане на сайтове за хора с увреждания

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

Домашна работа.

Разгледайте (изтеглета) материалите в споделената папка Социален хъб. Като използвате набора от стандартни елементи за създаване на схематичен дизайн, направете прототип на платформата Социален хъб.
Определете:

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

3. Представете прототипа пред класа.

Статия: Ролята на прототипа в проекта за изработка на уеб сайт
Прототипът е основен визуален инструмент, използван за представянето на оформлението на основните елементи на уеб интерфейса.

Тема 5. Създаване на графичен модел на уеб страница

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

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

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

Връзката между цветовете може да се представи в кръгла диаграма с 12 цвята, наречена колело на цветовете.
Основните три цвята са:

червено
жълто
синьо

Комбинацията между основните три цвята дава трите второстепенни:

оранжево
зелено
лилаво

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

Към статията >>

Цветовете могат да се разделят на неутрални, топли и студени.

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

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

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

2. Видове цветови схеми:

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

б) Аналогична - използва цветове, които са в съседство. Един цвят се използва за основен, а другите допълват схемата.

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

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

Статия: "Как да изберете правилната цветова схема за вашия уеб сайт"

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

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

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

а) основни категории:

серифни (serif) - с допълнителни графични елементи
несерифни (sans-serif) - без допълнителни графични елементи

Изисквания при избора на шрифт:

Трябва да се използват подходящи шрифтове. Препоръчват се Verdana, Arial, Times New Roman, Tahoma, Helvetica. He се препоръчват прекалено големи размери на шрифтовете.
Подходящо е големината да бъде съобразена с размера на страницата, за да не изглежда шрифтът прекалено голям или прекалено дребен.
Не трябва да се използват повече от 2 - 3 шрифта, като едновременната употреба на различни по стил шрифтове невинаги изглежда добре.
Добре е да се използват шрифтове от едно и също семейство с цел отделяне на основен текст и подтекст, вместо основният да бъде в получер/удебелен стил.
Важна е четливостта - трябва да се обръща внимание на детайлите, които да се четат леко и да не дразнят окото. Трябва да има съгласуваност по отношение на стила и размерите на целия набор от символи, съставляващи шрифта.
В заглавията на модерните уеб сайтове все по-често се използват и артшрифтове, както и калиграфски/ръкописни шрифтове.
Когато шрифтът се слага върху фон с натоварено съдържание, той трябва да е удебелен, за да се чете лесно.

Интересно!
Списък на най-често срещаните цветове и как влияят на емоциите ни:

Червен е свързана с любов, страст, опасност, предупреждение, вълнение, храна, импулс, екшън, приключенски.
Син е свързан с доверието, успех, сериозност, спокойствие, сила, професионализъм.
Зелен цвят е свързано с пари, природата, животните , здраве, изцеление, живот, хармония.
Оранжев е свързано с комфорт, творчество, празник, забавление, младежта, достъпност.
Лилав е свързана с кралски особи, справедливост, неяснота, несигурност, лукс, фантазии, мечти.
Бял се свързва с невинност, чистота, простота.
Жълт е свързано с любопитство, игривост, бодрост, забавление.
Розов е свързано с мекота, сладост, невинност, младост, нежност.
Кафяв се свързва с пръст, природа, племенен, примитивен, простота.
Сив е неутрален цвят, безразличие, в добра хармония с всички останали цветове.
Черен се свързва със сериозност, тъмнина , мистерия, тайна.

Професионален инструмент Color калкулатор - има готови решения на цветови схеми за работа с вашия основен цвят.
https://www.color-hex.com/popular-colors.php - Color Hex Color Codes - дава информация за цветовете, включително цветни модели (RGB, HSL, HSV и CMYK), триадни цветове, монохроматични цветове и аналогични цветове, изчислени в цветна страница. Color-hex.com също генерира прост css код за избрания цвят. Пробите от HTML елементи също са показани под страницата с подробности за цвета. Просто въведете 6 -цифрения цветен код в полето по-горе и натиснете enter.
Color.adobe.com е чудесна база данни на цветови схеми за уеб сайт
https://www.paletton.com/ - Paletton е онлайн инструмент за създаване на цветови комбинации и палитри от цветове, които изглеждат добре заедно.

Като разгледате основните етапи при създаване на графичния дизайн:

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

Изпълнете задачите!

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

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

Задача 2. Направете типография на бъдещия сайт Социален хъб. Изберете подходящи шрифтове, размери, стилове.

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

Домашна работа
Задача 4. Като използвате подходящ инструмент, създайте графичен модел на сайт на проекта Социален хъб.
Спазвайте изискванията:

изберете размер: Web 1920х1080рх;
вмъкнете създаденото лого;
създайте хоризонтално меню, което съдържа навигационни бутони: Начало, За нас, Партньори, Контакти;
добавете в заглавната част на страницата (header) поле за търсене и добавете икони за социалните мрежи Linkedin, Facebook и Instagram.