Web design, Hristo Valchanov, 2014
Основи на Web дизайна
доц. д-р инж. Христо Вълчанов
102ТВ
http://cs.tu-varna.bg
Web design, Hristo Valchanov, 2014
World Wide Web (WWW)
• Разпределена информационна система;
• Съдържа документи, свързани посредством препратки (хипервръзки).
Web design, Hristo Valchanov, 2014
World Wide Web (WWW)
• Създадена 1989г. в CERN от Тим Бърнърс-Лий;
• Първоначално разработена за “хипертекстови” документи;
• Базирана на модела “клиент-сървър”;
• Използва език за описание на съдържанието на документа Hyper Text Markup Language (HTML).
Web design, Hristo Valchanov, 2014
Компоненти на WWW
• Множество информационни сървъри (Web сървъри);
• Клиенти за визуализиране на информацията
(браузъри);
• Документи (Web страници);
• Протокол за обмен на страници - Hyper Text
Transmission Protocol (HTTP).
Web design, Hristo Valchanov, 2014
Модел “клиент-сървър”
Web design, Hristo Valchanov, 2014
Uniform Resource Locator (URL)
<protocol> :// <host_name> <path> <file_name>
http://www.cisco.com/web/learning/netacad/index.html
протокол име на хост път име на файл
Адресиране на обект
Web design, Hristo Valchanov, 2014
• Mozilla Firefox;
• Internet Explorer;
• Safari;
• Opera;
• Google Chrome;
• Netscape Navigator;
• …
Браузъри
Web design, Hristo Valchanov, 2014
Видове Web документи
• Статични - имат фиксирано съдържание;
• Динамични - създават се винаги при
изискване от браузър.
Web design, Hristo Valchanov, 2014
Разширяване възможноститте на
браузърите (plug-ins)
Множество от софтуерни компоненти,
добавящи нови възможности към
браузърите:
• Adobe Flash Player;
• QuickTime;
• Microsoft SilverLight.
Web design, Hristo Valchanov, 2014
Видове Web сайтове
• Лични;
• Блогове;
• Тематични;
• Рекламни;
• Фирмени;
• Институционални.
Web design, Hristo Valchanov, 2014
Какво е Web дизайн ?
Web дизайнът представлява планирането и
създаването на Web сайтове.
Включва:
• Информационна структура;
• Потребителски интерфейс;
• Структура на сайта;
• Навигация;
• Оформление.
Web design, Hristo Valchanov, 2014
Принципи на Web дизайна
• Баланс (balance);
• Контраст (contrast);
• Ритъм (rhythm);
• Единство (unity);
• Подравняване (alignment);
• Бели пространства (white spaces).
Web design, Hristo Valchanov, 2014
Баланс (balance)
Разпределение на елементите в дизайна.
Позицията на елементите в страницата
определя колко балансирана ще бъде тя.
Fold – позицията в страницата, от където
браузърите започват да скролират.
Web design, Hristo Valchanov, 2014
Препоръки за позицията на fold
Резолюция Позиция надолу
(px)
640 x 480 310
800 x 600 430
1024 x 768 600
1200 x 1024 850
1600 x 1200 1030
Web design, Hristo Valchanov, 2014
Баланс- пример
Web design, Hristo Valchanov, 2014
Видове баланс
• Симетричен;
• Асиметричен
• Радиален.
Web design, Hristo Valchanov, 2014
Симетричен баланс
Придава повече формалност и подреденост
на представянето.
Web design, Hristo Valchanov, 2014
Вертикална симетрия
Web design, Hristo Valchanov, 2014
Вертикална и хоринзонтална
симетрия
Web design, Hristo Valchanov, 2014
Асиметричен баланс
Типично е без център и се създава от
нечетен или несъответстващ брой на
коренно различни елементи.
Web design, Hristo Valchanov, 2014
Радиален баланс
Елементите се “излъчват” от или се “въртят”
по кръгова или спираловидна линия.
Web design, Hristo Valchanov, 2014
Контраст
Подчертаване на разликите между
елементите в дизайна.
Може да се реализира чрез:
• промяна на шрифтовете;
• промяна цвета на хипервръзките;
• използване на различни по размер
изображения и елементи;
• използване на контрастен цвят.
Web design, Hristo Valchanov, 2014
Контраст - пример
Web design, Hristo Valchanov, 2014
Ритъм (rhythm)
Създаване на вътрешна консистенция.
Може да се реализира чрез:
• повторение на актуален текст в HTML;
• добавяне на изображения по няколко пъти;
• повторение на background изображение;
• повтаряне на навигационни елементи в
страницата.
Web design, Hristo Valchanov, 2014
Ритъм - пример
Web design, Hristo Valchanov, 2014
Единство (unity)
Предоставя “плътност” на дизайна чрез
свързване на елементите заедно.
Позволява оформяне на логически групи от
елементи.
Може да се реализира чрез:
• настройване на разположението на
елементите да бъдат близко или далеч;
• промяна на пространството около текста;
• използване на свойства на рамки (box) за
получаване на отстъпи и запълвания.
Web design, Hristo Valchanov, 2014
Единство - пример
Web design, Hristo Valchanov, 2014
Подравняване (alignment)
Подреждане на текст и графика едни
спрямо други.
Дава възможност за по-лесно възприемане
на оформлението.
Видове подравняване:
• хоринзонтално;
• вертикално;
• ъглово;
• центрирано;
• визуално.
Web design, Hristo Valchanov, 2014
Подравняване - пример
Web design, Hristo Valchanov, 2014
Бяло пространство (white space)
Използва се за изолиране на елементите и
поставяне на ударение върху конкретен елемент.
Може да се реализира чрез:
• увеличаване на разстоянието между параграфите;
• увеличаване на разстоянието между колоните текст;
• добавяне повече пространство извън ъглите на
страницата;
• оставяне на повече пространство около графиките;
• увеличаване на разстоянието между редовете и
символите.
Web design, Hristo Valchanov, 2014
Бяло пространство - пример
Web design, Hristo Valchanov, 2014
Елементи на дизайна
Това са изграждащите блокове в дизайна,
избрани да предадат съобщението.
Включват:
• линии;
• форми;
• текстури;
• цвят.
Web design, Hristo Valchanov, 2014
Елементи на дизайна - линии
Основен елемент на дизайна. Чрез тях може да се
подобри разбираемостта и читаемостта на дизайна.
Могат да се използват за:
• рамки около елементи;
• разделителни линии между елементи;
• създаване на контури около елементи;
• посока;
• декорация.
Web design, Hristo Valchanov, 2014
Елементи на дизайна - форми
Чрез тях може да се предава значение и да се
организира информация.
Могат да се използват за:
• внясяне на определен интерес в дизайна;
• поддържане на интерес;
• организиране или отделяне на елементи;
• движение на очите през дизайна.
Web design, Hristo Valchanov, 2014
Геометрични форми
Известни и познати форми като правоъгълници,
кръгове, триъгълници, диаманти и др.
Web design, Hristo Valchanov, 2014
Естествени форми
Форми, известни от природата.
Web design, Hristo Valchanov, 2014
Абстрактни форми
Изкуствено създадени от изображения, като
азбучни глифове, икони, символи и др.
Web design, Hristo Valchanov, 2014
Елементи на дизайна - текстури
Текстурата е запълване на повърхност.
Придава осезаемост на елементите на
дизайна.
Могат да се използват за:
• фон (background);
• акцент;
• стилизиран дизайн като гравюри.
Web design, Hristo Valchanov, 2014
Елементи на дизайна - текстури
Създадени с линии или форми Създадени с фото-редактор
Създадени от обекти от снимки
Web design, Hristo Valchanov, 2014
Елементи на дизайна - цвят Може да се използва за:
• фон (background)
• текст или преден план
• изображения
• акцентиране
Web design, Hristo Valchanov, 2014
Цветови схеми - монохроматична
Използва се базов цвят за
създаване на цялостно
настроение.
Лесна за балансиране и удобна
за изпозване с неутрални
цветове.
Web design, Hristo Valchanov, 2014
Цветови схеми - аналогова
Използва съседни цветове от
палитрата.
Подобна на монохроматичната
но с по-живо излъчване.
Web design, Hristo Valchanov, 2014
Цветови схеми - комплементарна
Използва противоположни
цветове от палитрата.
Позволява постигане на високо-
контрастен ефект.
Web design, Hristo Valchanov, 2014
Цветови схеми на Web сайтове
Web design, Hristo Valchanov, 2014
Цветови схеми на Web сайтове
Web design, Hristo Valchanov, 2014
Цветови схеми на Web сайтове
Web design, Hristo Valchanov, 2014
Цветови схеми на Web сайтове
Web design, Hristo Valchanov, 2014
Текст
Специфика на Web текстовете:
• ограничено пространство на монитора;
• разделителната способност на монитора;
• за разлика от печата, дизайнерът няма
поглед как ще изглежда сайта за
потребителя.
Основни изисквания:
• скорост на четене;
• удобство при четене.
Web design, Hristo Valchanov, 2014
Шрифтове
За целите на дизайна шрифтовете се делят на:
• серифни знаци (serifs);
• безсерифни знаци (sans-serif)
Web design, Hristo Valchanov, 2014
Избор на шрифтове
• За дълги текстове – серифни шрифтове (Times
New Roman, Georgia, Garamond) – до 10-14 p
• За заглавия и привличане на внимание – без
серифни (Arial, Verdana, Helvetica) – до 8-12 p
Оптимизирани шрифтове за ниска екранна
резолюция:
Web design, Hristo Valchanov, 2014
Текстът е част от графичния
дизайн, но не е част от
графичното съдържание на
Web страницата !
Web design, Hristo Valchanov, 2014
Навигация
Ключов компонент на web сайта, имаща пряко
отношение към неговия успех.
• Трябва да бъде лесна за намиране и
използване;
• Трябва да бъде консистентна;
• Да се използват очевидни имена на секции;
• По-малко е повече (Less is More);
• Да се напомня на потребителя къде се
намира.
Web design, Hristo Valchanov, 2014
Видове навигация –
хоризонтален текст
Web design, Hristo Valchanov, 2014
Видове навигация – вертикален
текст
Web design, Hristo Valchanov, 2014
Видове навигация – Drop-Down
менюта
Web design, Hristo Valchanov, 2014
Видове навигация – икони или
графики
Web design, Hristo Valchanov, 2014
Препоръки
• Старателно планиране на web сайта;
• Проектиране страниците да се зареждат бързо;
• Опростена навигация;
• Постоянство с шрифтовете, цветовете и менютата;
• Използвайте много “бяло пространство”;
• Да има достатъчен контраст между текст и фон;
• Не прекалявайте с флаш и анимирана графика;
• Да се пише по възможност кратко и ясно;
• Да се поставя най-доброто съдържание в началото
на страницата.
Web design, Hristo Valchanov, 2014
Това, което може би не трябва да
правите ...
Top Related