🗒️ Бележки

⏪ Преговор (⏱️ 2 m)

• Кои са 4-те вида шрифтове?
• Този сайт с подходящ шрифт ли е?

📰 Heritage (⏱️ 20 m)

• Как да подравняваме текстове.
  • Ляво подравняване – стандартното и придава предвидимост на окото къде трябва да отиде, когато е стигнало до края на реда.
  • Централно подравняване – само за кратки текстове от 1 до 3 реда. Придава симетрия, но трябва да се използва много по-малко пъти от в сайта, отколкото лявото подравняване.
  • Дясно подравняване – използва се рядко и визуално се свързва с обект от дясната половина в грида. Прави прескачането на окото трудно и бавно. Може да се използва, но внимателно и трябва да има повече от 1 ред на текста.
  • Justified – Никога не го ползвайте в уеб дизайн. Сайтовете не са книга и редовете, които четем онлайн, са по-къси от редовете в книгите. Има и техническо затруднение, което прави това подравняване. Тоест, след като се програмира сайта, ще се образуват неочаквани дупки на различните екрани. Затова, без justified, когато правите сайтове.
• Защо е важно да се подравняват текстовете? – Четивност. Добър и лош пример в уеб дизайна на подравняване на текстове.
• Междуредие – Как да го избираме.
  • Златното сечение
  • Работете само с кръгли стойности. По-добре да са четни.
• Дължина на реда — 10-12 думи или около 2 азбуки написани една след друга или между 50 и 70 керактъра. Какво е керактър?
• Самотниците – Те правят така, че буква или букви от реда “да изпадат”.

✏️ Проверка на домашни – 2 човека (⏱️ 15 m)

• Двама човека – един по желание, един от томболата.

🟨 Навигация (⏱️ … m)

• Защо е важна навигацията на уеб дизайна?
• По същата причина, по която е важна и в “живия живот” – За да не са загубим. Ето примерно аз съм на разходка на планина Витоша. Обаче в един момент компасът ми спира. Какво ще правя? На къде да тръгна? Затова е важно да имаме работещ компас.
• Но да си представим друга ситуация, аз шофирам във Варна. И GPS-ът ми казва да завия на северозапад. Ама накъде е северозапад? Ако извадя компас в колата, шофьорите зад мен ще се изнервят.
• Фродо. Тоест, без навигация ние можем да стигнем до мястото, на което искаме да бъдем, но ще ни отнеме много повече време. А понякога може и да не стигнем.
• Хедър
  • Какво е хедър? – Основен визуален елемент от сайта,в който се съдържа цялата или основнатанавигация и спомага за бързи придвижванев страницата, подстраниците и секциите.
  • Колко високи трябва да са хедърите? – От 10 до 15% от височината на видимото поле. В нашия случай видимото поле е 1080 px. Тоест, от 110 до 160 px.
  • Какво е item? Item-ите са линковете към страниците и секциите. Към тях мога да се включат и функционалността на бутона за търсене, както и количката в онлайн магазините. Примери.
    • Вметка/уставка — Всички ли знаят какво е ховър? Ховър е състояние на един елемент. В темата за бутоните ще стане повече дума за ховърите, но сега трябва да знаете, че това е събитие (нещо, което се случва) след интеракция на курсора на потребителя с част от сайта.
    • Някои големи сайтове могат да имат падащи подайтъми в хедъра. Пример.
    • Други сайтове пък, най-вече такива с ужасно голям контент и много подстраници с техни подстраници, имат така наречените мега менюта или мега хедъри. Пример. Вижте как този хедър може да се разпъне до почти целия екран. Това е сложна навигация, която трябва да се използва само когато няма друг вариант и контентът не предполага друг тип навигация.
  • Навигацията в хедъра спомага за построяването на йерархията на секциите и подстраниците в един сайт. Кое е важно в един сайт? Защо то е по-важно от друго нещо в сайта? Вие трябва предварително да си дадете тези отговори, защото потребителите ще си отговорят на тези въпроси – съзнато или несъзнато. Също така нали си спомняте за вниманието? Потребителите не инвестират твърде много време във сайтовете, които правим. Затова те може да прочетат само първите 3 item-a от хедъра и ако не открият това, което търсят, дори изображението в Hero секцията да е правилно използвано, те могат да решат, че в този сайт няма да открият това, което търсят. А то иначе да е там. Просто на последно място сред item-ите. Пример със сайта на Кристал.
  • Видове хедъри
    • Залепени – остават винаги на екрана и следват потребителя навсякъде, където отива.
    • Незалепени – изчезват заедно с Hero секцията при скроловете нагоре и надолу.
    • Смесен тип — изчезват при
    • Бургери – Бургерите, вече стана на въпрос веднъж, скриват навигацията. Бургерът може да е наличен (така дизайнат) още от самото начало. Може и да се появява чак след като потребителят скролне надолу към секциите.
    • Странични — те са нетрадиционни и се използват при сайтове, в които подхода и за към другите елементи на сайта е нестрандартен.
  • Предизвикателства в хедъра
    • Хедър с твърде много айтъми – Това е като да ви трябва карта на град София, за да намерите някой булевард, а ви дадат това.
    • Ховър структурирана навигация – Лично за мен тя има много повече недостатъци пред предимства. Ховърът е сложно събитие. То изисква концетрация и премерени движения. Ето какви проблеми може да създава. Пример.
  • Бутон за смяна на езика
    • Значение — Трябва да бъдат видими и потребителите много бързо да се ориентират, че този бутон ще промени езика на сайта, дори да вижда пред себе си азбука, която не познава. Пример.
    • Видове — С изписване на езиците като отделни item-и; с падащо меню. Кой е по-удобен според вас?
    • Позиция — Малко елементи на сайтовете имат задължителна фиксирана позиция, тъй като композицията им зависи от уеб дизайнера. Но бутонът за смяна на езика се е наложил и утвърдил сред потребителите на сайтове в горен десен ъгъл. Целта на унифицирана и уеднаквана позиция на този бутон е, човек да не се загуби, когато попадне на сайт, който първоначално е на различна азбука. Пример със сайт на корейски и английски език.
  • Бутон за търсене — Добавя най-вече в блогове и онлайн магазини. За сайтове от друг вид, например сайт на събитие, сграда, портфолио сайт, бутон за търсене би бил необходим само ако страниците са повече от 40-50.
• Карти