Transcript За web-дизайна и още нещо “Най-добрите дизайнерски решения са прости, защото не съдържат елементи, които не са необходими...

За web-дизайна и още
нещо
“Най-добрите дизайнерски решения са
прости, защото не съдържат елементи,
които не са необходими... и съдържат
необходимите елементи по начин, който
изглежда логичен.” Парм Амквист
1. Първи принцип - простота
 “Простотата е ключът към щастието в модерния





свят” (Далай Лама)
Простотата е необходима, за да се определи
правилно всяка идея.
Определение за простота – отсъствие на ненужни
елементи.
Познаването на трите елемента на дизайна
(баланс, контраст и невидими линии) е ключът
към достигането на простота.
Просто не означава отегчително.
Простотата не е стил на дизайн, а подход, който
дава най-красивите и най-полезните резултати.
2
2. Трите елемента на дизайна
 Баланс – цялостно подреждане на
изображенията, графичните елементи,
текста и др. елементи в един сайт.
 Контраст – взаимодействието между
различните елементи.
 Невидимите линии – осезаемите, но
невидими линии, които са построени
хоризонтално и вертикално в една
страница.
3
3. Анализ на аудиторията:
 Когато някой посещава даден уеб сайт, той търси
едно от следните 3 неща:
Информация
Забавление
Услуга
 Ползваемостта на сайта се определя от:
 Лекотата на употреба на един дизайн.
 Ясно ли е дефинирана целта на сайта и какво може
да се прави там.
 Имат ли полза потребителите, от това, което се
изисква да направят.
 Удобната навигацията, без опасност от изгубване.
 Информацията лесна ли е за четене и отговаря ли на
основните въпроси на потребителите.
4
4. Главна страница (home):
 Грабване на вниманието на посетителите – с едно изречение,
което да изяснява смисъла на сайта.
 Удобна навигация и връзки с всички основни теми (менюта).
 Заглавие!!! <title> </title>
 Ключови думи – добре е повечето от тях да присъстват в
текста на първата страница.
Едно изследване
показва, че
посетителите
решават дали ще
останат на
страницата или
не за 4 секунди.
5
5. Как работят хората?
 Хората искат да им е забавно.


Принципът: “Кажи ми и ще забравя, покажи
ми и ще запомня, включи и мен и съм твой.”
Емоционално ангажираната комуникация е
най-добрият начин да разпространиш едно
съобщение.
 Хората искат да се чувстват умни и да
откриват разни неща.
 Хората нямат време да разучават неща,
които са прекалено сложни.
6
6. Втори принцип – 30+10+60
 В мрежата съобщението
е съставено от 60% от
дизайна, 10% от
съдържанието и 30% от
стила на писане.
 Съдържанието е важно!
Но дори и прекрасно
написан текст лесно
изчезва, когато е
поставен в лошо
оформена среда.
7
7. Съдържанието от гледна точка на
потребителя:
 Текст, който може да бъде преглеждан –
постига се чрез:




Акцентирани ключови думи - хипервръзки
и вариантите на шрифта и цвета.
Смислени подзаглавия.
Подточки.
Стил обърната пирамида, при който се
започва от заключението.
 Достоверност на информацията.
 Отвращение от маркетингови послания.
8
8. Текстът като част от web-дизайна:
 Използвайте таговете <Hi> за заглавия и





подзаглавия.
Основният размер на шрифта е добре да е 10-12рt.
Текста да е четлив и да не затормозява очите.
Шрифтове – серифни (със заобляния – Times New
Roman) и несерифни (прави и остри – Ariel).
Несерифните шрифтове се четат по-лесно от
екрана.
Контрастни цветове на текста и на фона.
Използване на списъци с точки (bullets), думи с
визуален акцент (BOLD), къси абзаци, дву или
триколонни текстове, таблици и др.
9
9. Навигацията:
 Вътрешни хипервръзки, съобразени с това, че





посетителите не идват от едно и също място.
От всяка вътрешна страница трябва да има
връзка към главната.
Без задънени страници (страници, от които
потребителят не може или не знае как да излезе).
Препоръка: Във всички страници навигационните
елементи да са поставени на едно и също място.
Цветове на хипервръзките – особено е важно да
има друг цвят за посетените връзки.
Ако се използват картинки като хипервръзки,
атрибута ALT да е попълнен (заради търсачките).
10
10. Менюта
 Оптимална дължина –
5 или 7 елемента.
 Четен брой не се
препоръчва заради
липсата на среда,
която да дава
ориентацията.
11.Търсене – потребителите го предпочитат,
защото им позволява сами да контролират съдбата си.
“Не искам да разглеждам сайта по начина, по който
искат те. Просто искам да намеря онова, което търся.”
11
12. Цветове:
 Цветовете се възприемат по различен начин в зависимост
от това, каква форма или площ заемат и какви други
цветове са около него.
 Цвета се използва за:
 Класифициране (отделни категории обекти)
 Представяне (наподобяване на реалността)
 Украса (ефект върху естетиката)
 Емоция (начин за представяне на настроението)
 Привличане на вниманието
 Въздействие на цветовете:
 Възбуждащи (червен, оранжев, жълт)
 Успокояващи (зелен, светло син)
 Затормозяващи (виолетов, тъмно сив, черен)
12
Цветове и форми
 Оптическо
 Емоционално
въздействие
въздействие
отдалечаване
приближаване
13
Още за възприятието:
 МММММММММ - Сините букви (по-хладни
по цвят) ни изглеждат по-далечни,
отколкото червените (по-топли по цвят).
 пада, носи се, лети, виси и т.н.
14
Емоционално въздействие:
червен
син
зелен
черен
жълто,
злато
бяло,
сребро
пурпурно
рубин
сапфир
изумруд
елмаз
топаз
бисер
аметист
право
слава
върховенство
чистота
свобода
постоянство
благород
ство
ликуване
скромност
величие
невинност
власт
надежда
смърт
здраве
траур
сила
мъжество
чест
вярност
любов
храброст
искреност
покой
уважение
великолепие
богатство
мъдрост
безметежност
върхове
нство
достойнс
тво
величие
15
Емоционално въздействие:
черве
н
син
зелен
черен
жълто,
злато
бяло,
сребро
пурпурно
рубин
сапфир
изумруд
елмаз
топаз
бисер
аметис
т
право
слава
върховенство
чистота
свобода
постоянство
благоро
дство
ликуване
скромност
величие
невинност
власт
надежда
смърт
здраве
траур
сила
мъжество
чест
вярност
любов
храброст
искреност
покой
уважение
великолепие
богатство
мъдрост
безметежност
върхове
нство
достойн
ство
величие
16
14. Още 8 препоръки, които ще
повишат ползваемостта на сайта:
 Лого на всяка страница,
което е хипервръзка към
главната.
 Ако сайта е повече от
100 страници,
задължително трябва да
има възможност за
търсене.
 Смислени и прости
заглавия на страниците.
 Структурирайте
страницата, така че да
улеснява преглеждането
– групиране текста на
“хапки”.
 Структуриране с меню.
 Използвайте малки
снимки на страницата,
които да са хипервръзки
към по-големи или серия
от по-големи снимки.
 Намаляването на
размера на
изображенията да се
извършва с графична
програма.
 Уверете се, че всички
страници са достъпни за
хора с физически
недостатъци.
17