Фирмен стил: лого, цветове, шрифтове и меню

Модул 4: Страници, външен вид и функции · Време за четене: 8 минути

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

Основни понятия: фирмен стил, стил (look), лого, графичен знак, словесен знак, фавикон, лента с меню, основен цвят, контраст, коефициент на контраст, WCAG, уеб лиценз, тъмен режим, движение

Защо фирменият стил е повече от красота

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

Всичко в панела Фирмен стил е безплатно и се вижда веднага в прегледа. Едва когато кликнете върху Запазване, се създава нова версия (урок 3.5). Ако искате да се върнете, кликнете върху Връщане или възстановете по-стара версия.

Панелът има следните блокове: Стил, Цветове, Шрифтове, Лента с меню, Име и лого, Изображения, Форма и разстояния, Шрифт и размери, Тъмен режим и Движение.

Име, лого и фавикон

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

• Качване на собствено лого: PNG с прозрачен фон, SVG, JPG или WebP, до 2 MB. Хоризонтално лого изглежда най-добре в лентата с меню.
• Ако нямате лого, AI Builder е създал словесен знак: Вашето име с Вашия шрифт и цветове. Той се променя автоматично, когато ги промените.
• Нека AI проектира лого: опишете накратко фирмата си и атмосферата ("бояджийска фирма в село, занаятчийска и надеждна") и кликнете върху Проектирайте три логота. Получавате три графични знака (символ без текст) във Вашите цветове, с името Ви до тях във Вашия шрифт. Общо това струва 1 редакция. Изберете едно с Използване или напишете какво може да е по-добре ("първото, но по-заоблено") и кликнете върху Създайте три нови логота; това е нов кръг от 1 редакция.
• Показване в менюто и футъра: Лого и име, Само лого или Само име, както и Размер (Малък, Нормален, Голям).

AI Builder Ви предупреждава, ако логото има тънки линии или слаб контраст с лентата с менюто: в малък размер в лентата то може да се изгуби.

Проверете сами логото, създадено от AI: не прилича ли твърде много на логото на друга фирма?

Фавиконът е малката иконка в раздела на браузъра и при отметките. Изберете Автоматично: първата буква във Вашите цветове, Вашето лого или Собствен файл (квадратен, PNG, SVG или ICO, до 512 KB).

Стил и лента с меню

Стилът (в AI Builder също look) определя с едно кликване шрифтовете, формите, бутоните, картите, менюто и декорацията. Има дванадесет стила, например Свеж, Топъл, Делови, Природа, Ателие и Нощ. Вашите собствени цветове остават, когато смените стила; ако искате и цветовете на стила, кликнете върху Използвайте и цветовете на този стил. Стилът Нощ винаги е тъмен.

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

• Прозрачно изглежда добре само ако всяка страница има тъмен hero или hero със снимка.
• Минимално показва само Вашето име и един бутон; връзките към страниците тогава са във футъра.
• С горна лента поставя телефона и работното време в тясна лента отгоре. Верен ли е този телефонен номер?

При Цвят на лентата с менюто избирате Автоматично (следва стила), Бял, Светлосив, Тъмен или Акцентен цвят. Друг цвят можете да поискате в чата.

Цветове и контраст

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

Тук идва ред на контраста: разликата в яркостта между текста и фона. Изразяваме я като коефициент на контраст, от 1:1 (без разлика) до 21:1 (черно на бяло). Международните указания за достъпни уебсайтове, WCAG на W3C, изискват на ниво AA поне 4,5:1 за обикновен текст и 3:1 за голям текст (около 18 пункта или 14 пункта удебелен). Бутоните и другите елементи за управление трябва да достигат поне 3:1 спрямо околната среда.

AI Builder следи това вместо Вас. Ако изберете цвят, върху който текстът не се чете добре, той го коригира и съобщава какво е променено, например: "Цветът на текста ... стана ..., защото иначе текстът не се чете добре върху него." Ако искате да запазите точно своите цветове, включете Запазете точно тези цветове: цветовете Ви остават, а текстът върху тях автоматично получава четим цвят. И в секциите, които AI създава със собствено оформление, AI Builder коригира цветовете на текста под 4,5:1 (за голям текст 3:1).

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

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

Шрифтове и собствен шрифт

В Шрифтове избирате шрифт за Заглавия и шрифт за Основен текст. Шрифтовете се съхраняват като файлове на Вашия собствен сайт; няма връзка към чужда услуга за шрифтове. В Шрифт и размери задавате с плъзгачи за целия сайт: междуредие и разстояние между буквите на текста и заглавията, знаци на ред, ширина на съдържанието и плътност на заглавията. Според стила връща плъзгача в изходно положение. При Размер на текста избирате Нормален, Голям или Много голям; това може и в чата ("увеличете буквите").

Възможен е и собствен шрифт: качете го в Шрифтове или с кламера в чата, като .woff2, .woff, .ttf или .otf, до 2 MB на файл (може няколко плътности). След това избирате за какво: заглавия, текст или и двете. Това е безплатно. Шрифт от услуга като Adobe Fonts не може да се използва.

Важно: качвайте само шрифт, за който имате уеб лиценз. Шрифтът е софтуер с лиценз. Лиценз за използване на Вашия компютър (за изработка на печатни материали) далеч не винаги позволява да поставите файла на уебсайт, откъдето всеки посетител го изтегля. Проверете в лицензионните условия дали уеб използването е разрешено. Шрифтовете под SIL Open Font License могат да се вграждат и разпространяват.

Тъмен режим и движение

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

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

В AI Builder: ето как

1. Отворете Фирмен стил, блок Име и лого. Кликнете върху Качване на собствено лого или върху Нека AI проектира лого.
2. При Фавикон изберете логото си или автоматичната първа буква.
3. Пробвайте два или три стила в Стил; погледнете и в Мобилен.
4. В Лента с меню изберете дизайн и цвят.
5. В Цветове задайте основния си цвят. Прочетете съобщенията на AI Builder.
6. Проверете в Тъмен режим и Движение какво искате.
7. Кликнете върху Запазване и публикувайте сайта си отново онлайн.

Обобщение

• Панелът Фирмен стил е безплатен; Запазване създава нова версия.
• Лого от AI струва 1 редакция за три предложения; фавикона AI Builder създава сам или Вие качвате свой.
• Дванадесет стила и петнадесет дизайна на менюто; съдържанието на менюто остава същото.
• WCAG изисква поне 4,5:1 контраст за обикновен текст и 3:1 за голям текст; AI Builder следи това, освен в снимки и в логото Ви.
• Собствен шрифт само с уеб лиценз; тъмния режим и движението настройвате според нуждите на посетителите си.

Тест

Задача

Задача D4.2: Вашият фирмен стил и контрастът. Настройте фирмения си стил и измерете контраста на най-важните си двойки цветове.

Списък за проверка:

• [ ] логото е качено или избрано от предложенията на AI;
• [ ] фавиконът е настроен и видян в раздела на браузъра на Вашия онлайн сайт;
• [ ] стилът и дизайнът на менюто са избрани и прегледани в Мобилен;
• [ ] основният цвят е зададен и съобщенията на AI Builder са прочетени;
• [ ] контрастът на цвета на текста спрямо фона и на текста на бутона спрямо цвета на бутона е измерен с инструмент за проверка на контраста;
• [ ] тъмният режим и движението са избрани съзнателно;
• [ ] фирменият стил е запазен и сайтът е публикуван отново онлайн.

Въпроси:

1. Какви коефициенти на контраст измерихте за текста спрямо фона и за текста на бутона спрямо бутона, и достигат ли те 4,5:1?
2. На кое място в сайта Ви има текст върху снимка и чете ли се той добре на телефон?
3. Използвате ли собствен шрифт? Къде в лиценза пише, че уеб използването е разрешено?

След "готово" ще видите примерен отговор: Schildersbedrijf Example измери тъмносиво на бяло 14,5:1 и бял текст на зеления бутон 5,1:1, и двете над 4,5:1; заглавието върху снимката в hero се четеше трудно, затова беше избрана по-тъмна снимка; няма собствен шрифт, така че не е нужен лиценз.

Прочетете още

• Understanding Success Criterion 1.4.3: Contrast (Minimum) (W3C, на английски): https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html
• Understanding Success Criterion 1.4.11: Non-text Contrast (W3C, на английски): https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html
• Contrast Checker (WebAIM, на английски): https://webaim.org/resources/contrastchecker/
• SIL Open Font License, официален текст (на английски): https://openfontlicense.org/open-font-license-official-text/