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

 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

---

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

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

---

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

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

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

• Трябва да се използват подходящи шрифтове. Препоръчват се Verda­na, 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.