Основи на Web дизайна › tu-varnaknt › images › tutorials › webd ›...
Transcript of Основи на Web дизайна › tu-varnaknt › images › tutorials › webd ›...
![Page 1: Основи на Web дизайна › tu-varnaknt › images › tutorials › webd › wd1.pdfWeb design, Hristo Valchanov, 2014 Единство (unity) Предоставя “плътност”](https://reader030.fdocuments.es/reader030/viewer/2022040411/5ed73980d37f9f58ca6a80c4/html5/thumbnails/1.jpg)
Web design, Hristo Valchanov, 2014
Основи на Web дизайна
доц. д-р инж. Христо Вълчанов
102ТВ
http://cs.tu-varna.bg
![Page 2: Основи на Web дизайна › tu-varnaknt › images › tutorials › webd › wd1.pdfWeb design, Hristo Valchanov, 2014 Единство (unity) Предоставя “плътност”](https://reader030.fdocuments.es/reader030/viewer/2022040411/5ed73980d37f9f58ca6a80c4/html5/thumbnails/2.jpg)
Web design, Hristo Valchanov, 2014
World Wide Web (WWW)
• Разпределена информационна система;
• Съдържа документи, свързани посредством препратки (хипервръзки).
![Page 3: Основи на Web дизайна › tu-varnaknt › images › tutorials › webd › wd1.pdfWeb design, Hristo Valchanov, 2014 Единство (unity) Предоставя “плътност”](https://reader030.fdocuments.es/reader030/viewer/2022040411/5ed73980d37f9f58ca6a80c4/html5/thumbnails/3.jpg)
Web design, Hristo Valchanov, 2014
World Wide Web (WWW)
• Създадена 1989г. в CERN от Тим Бърнърс-Лий;
• Първоначално разработена за “хипертекстови” документи;
• Базирана на модела “клиент-сървър”;
• Използва език за описание на съдържанието на документа Hyper Text Markup Language (HTML).
![Page 4: Основи на Web дизайна › tu-varnaknt › images › tutorials › webd › wd1.pdfWeb design, Hristo Valchanov, 2014 Единство (unity) Предоставя “плътност”](https://reader030.fdocuments.es/reader030/viewer/2022040411/5ed73980d37f9f58ca6a80c4/html5/thumbnails/4.jpg)
Web design, Hristo Valchanov, 2014
Компоненти на WWW
• Множество информационни сървъри (Web сървъри);
• Клиенти за визуализиране на информацията
(браузъри);
• Документи (Web страници);
• Протокол за обмен на страници - Hyper Text
Transmission Protocol (HTTP).
![Page 5: Основи на Web дизайна › tu-varnaknt › images › tutorials › webd › wd1.pdfWeb design, Hristo Valchanov, 2014 Единство (unity) Предоставя “плътност”](https://reader030.fdocuments.es/reader030/viewer/2022040411/5ed73980d37f9f58ca6a80c4/html5/thumbnails/5.jpg)
Web design, Hristo Valchanov, 2014
Модел “клиент-сървър”
![Page 6: Основи на Web дизайна › tu-varnaknt › images › tutorials › webd › wd1.pdfWeb design, Hristo Valchanov, 2014 Единство (unity) Предоставя “плътност”](https://reader030.fdocuments.es/reader030/viewer/2022040411/5ed73980d37f9f58ca6a80c4/html5/thumbnails/6.jpg)
Web design, Hristo Valchanov, 2014
Uniform Resource Locator (URL)
<protocol> :// <host_name> <path> <file_name>
http://www.cisco.com/web/learning/netacad/index.html
протокол име на хост път име на файл
Адресиране на обект
![Page 7: Основи на Web дизайна › tu-varnaknt › images › tutorials › webd › wd1.pdfWeb design, Hristo Valchanov, 2014 Единство (unity) Предоставя “плътност”](https://reader030.fdocuments.es/reader030/viewer/2022040411/5ed73980d37f9f58ca6a80c4/html5/thumbnails/7.jpg)
Web design, Hristo Valchanov, 2014
• Mozilla Firefox;
• Internet Explorer;
• Safari;
• Opera;
• Google Chrome;
• Netscape Navigator;
• …
Браузъри
![Page 8: Основи на Web дизайна › tu-varnaknt › images › tutorials › webd › wd1.pdfWeb design, Hristo Valchanov, 2014 Единство (unity) Предоставя “плътност”](https://reader030.fdocuments.es/reader030/viewer/2022040411/5ed73980d37f9f58ca6a80c4/html5/thumbnails/8.jpg)
Web design, Hristo Valchanov, 2014
Видове Web документи
• Статични - имат фиксирано съдържание;
• Динамични - създават се винаги при
изискване от браузър.
![Page 9: Основи на Web дизайна › tu-varnaknt › images › tutorials › webd › wd1.pdfWeb design, Hristo Valchanov, 2014 Единство (unity) Предоставя “плътност”](https://reader030.fdocuments.es/reader030/viewer/2022040411/5ed73980d37f9f58ca6a80c4/html5/thumbnails/9.jpg)
Web design, Hristo Valchanov, 2014
Разширяване възможноститте на
браузърите (plug-ins)
Множество от софтуерни компоненти,
добавящи нови възможности към
браузърите:
• Adobe Flash Player;
• QuickTime;
• Microsoft SilverLight.
![Page 10: Основи на Web дизайна › tu-varnaknt › images › tutorials › webd › wd1.pdfWeb design, Hristo Valchanov, 2014 Единство (unity) Предоставя “плътност”](https://reader030.fdocuments.es/reader030/viewer/2022040411/5ed73980d37f9f58ca6a80c4/html5/thumbnails/10.jpg)
Web design, Hristo Valchanov, 2014
Видове Web сайтове
• Лични;
• Блогове;
• Тематични;
• Рекламни;
• Фирмени;
• Институционални.
![Page 11: Основи на Web дизайна › tu-varnaknt › images › tutorials › webd › wd1.pdfWeb design, Hristo Valchanov, 2014 Единство (unity) Предоставя “плътност”](https://reader030.fdocuments.es/reader030/viewer/2022040411/5ed73980d37f9f58ca6a80c4/html5/thumbnails/11.jpg)
Web design, Hristo Valchanov, 2014
Какво е Web дизайн ?
Web дизайнът представлява планирането и
създаването на Web сайтове.
Включва:
• Информационна структура;
• Потребителски интерфейс;
• Структура на сайта;
• Навигация;
• Оформление.
![Page 12: Основи на Web дизайна › tu-varnaknt › images › tutorials › webd › wd1.pdfWeb design, Hristo Valchanov, 2014 Единство (unity) Предоставя “плътност”](https://reader030.fdocuments.es/reader030/viewer/2022040411/5ed73980d37f9f58ca6a80c4/html5/thumbnails/12.jpg)
Web design, Hristo Valchanov, 2014
Принципи на Web дизайна
• Баланс (balance);
• Контраст (contrast);
• Ритъм (rhythm);
• Единство (unity);
• Подравняване (alignment);
• Бели пространства (white spaces).
![Page 13: Основи на Web дизайна › tu-varnaknt › images › tutorials › webd › wd1.pdfWeb design, Hristo Valchanov, 2014 Единство (unity) Предоставя “плътност”](https://reader030.fdocuments.es/reader030/viewer/2022040411/5ed73980d37f9f58ca6a80c4/html5/thumbnails/13.jpg)
Web design, Hristo Valchanov, 2014
Баланс (balance)
Разпределение на елементите в дизайна.
Позицията на елементите в страницата
определя колко балансирана ще бъде тя.
Fold – позицията в страницата, от където
браузърите започват да скролират.
![Page 14: Основи на Web дизайна › tu-varnaknt › images › tutorials › webd › wd1.pdfWeb design, Hristo Valchanov, 2014 Единство (unity) Предоставя “плътност”](https://reader030.fdocuments.es/reader030/viewer/2022040411/5ed73980d37f9f58ca6a80c4/html5/thumbnails/14.jpg)
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
![Page 15: Основи на Web дизайна › tu-varnaknt › images › tutorials › webd › wd1.pdfWeb design, Hristo Valchanov, 2014 Единство (unity) Предоставя “плътност”](https://reader030.fdocuments.es/reader030/viewer/2022040411/5ed73980d37f9f58ca6a80c4/html5/thumbnails/15.jpg)
Web design, Hristo Valchanov, 2014
Баланс- пример
![Page 16: Основи на Web дизайна › tu-varnaknt › images › tutorials › webd › wd1.pdfWeb design, Hristo Valchanov, 2014 Единство (unity) Предоставя “плътност”](https://reader030.fdocuments.es/reader030/viewer/2022040411/5ed73980d37f9f58ca6a80c4/html5/thumbnails/16.jpg)
Web design, Hristo Valchanov, 2014
Видове баланс
• Симетричен;
• Асиметричен
• Радиален.
![Page 17: Основи на Web дизайна › tu-varnaknt › images › tutorials › webd › wd1.pdfWeb design, Hristo Valchanov, 2014 Единство (unity) Предоставя “плътност”](https://reader030.fdocuments.es/reader030/viewer/2022040411/5ed73980d37f9f58ca6a80c4/html5/thumbnails/17.jpg)
Web design, Hristo Valchanov, 2014
Симетричен баланс
Придава повече формалност и подреденост
на представянето.
![Page 18: Основи на Web дизайна › tu-varnaknt › images › tutorials › webd › wd1.pdfWeb design, Hristo Valchanov, 2014 Единство (unity) Предоставя “плътност”](https://reader030.fdocuments.es/reader030/viewer/2022040411/5ed73980d37f9f58ca6a80c4/html5/thumbnails/18.jpg)
Web design, Hristo Valchanov, 2014
Вертикална симетрия
![Page 19: Основи на Web дизайна › tu-varnaknt › images › tutorials › webd › wd1.pdfWeb design, Hristo Valchanov, 2014 Единство (unity) Предоставя “плътност”](https://reader030.fdocuments.es/reader030/viewer/2022040411/5ed73980d37f9f58ca6a80c4/html5/thumbnails/19.jpg)
Web design, Hristo Valchanov, 2014
Вертикална и хоринзонтална
симетрия
![Page 20: Основи на Web дизайна › tu-varnaknt › images › tutorials › webd › wd1.pdfWeb design, Hristo Valchanov, 2014 Единство (unity) Предоставя “плътност”](https://reader030.fdocuments.es/reader030/viewer/2022040411/5ed73980d37f9f58ca6a80c4/html5/thumbnails/20.jpg)
Web design, Hristo Valchanov, 2014
Асиметричен баланс
Типично е без център и се създава от
нечетен или несъответстващ брой на
коренно различни елементи.
![Page 21: Основи на Web дизайна › tu-varnaknt › images › tutorials › webd › wd1.pdfWeb design, Hristo Valchanov, 2014 Единство (unity) Предоставя “плътност”](https://reader030.fdocuments.es/reader030/viewer/2022040411/5ed73980d37f9f58ca6a80c4/html5/thumbnails/21.jpg)
Web design, Hristo Valchanov, 2014
Радиален баланс
Елементите се “излъчват” от или се “въртят”
по кръгова или спираловидна линия.
![Page 22: Основи на Web дизайна › tu-varnaknt › images › tutorials › webd › wd1.pdfWeb design, Hristo Valchanov, 2014 Единство (unity) Предоставя “плътност”](https://reader030.fdocuments.es/reader030/viewer/2022040411/5ed73980d37f9f58ca6a80c4/html5/thumbnails/22.jpg)
Web design, Hristo Valchanov, 2014
Контраст
Подчертаване на разликите между
елементите в дизайна.
Може да се реализира чрез:
• промяна на шрифтовете;
• промяна цвета на хипервръзките;
• използване на различни по размер
изображения и елементи;
• използване на контрастен цвят.
![Page 23: Основи на Web дизайна › tu-varnaknt › images › tutorials › webd › wd1.pdfWeb design, Hristo Valchanov, 2014 Единство (unity) Предоставя “плътност”](https://reader030.fdocuments.es/reader030/viewer/2022040411/5ed73980d37f9f58ca6a80c4/html5/thumbnails/23.jpg)
Web design, Hristo Valchanov, 2014
Контраст - пример
![Page 24: Основи на Web дизайна › tu-varnaknt › images › tutorials › webd › wd1.pdfWeb design, Hristo Valchanov, 2014 Единство (unity) Предоставя “плътност”](https://reader030.fdocuments.es/reader030/viewer/2022040411/5ed73980d37f9f58ca6a80c4/html5/thumbnails/24.jpg)
Web design, Hristo Valchanov, 2014
Ритъм (rhythm)
Създаване на вътрешна консистенция.
Може да се реализира чрез:
• повторение на актуален текст в HTML;
• добавяне на изображения по няколко пъти;
• повторение на background изображение;
• повтаряне на навигационни елементи в
страницата.
![Page 25: Основи на Web дизайна › tu-varnaknt › images › tutorials › webd › wd1.pdfWeb design, Hristo Valchanov, 2014 Единство (unity) Предоставя “плътност”](https://reader030.fdocuments.es/reader030/viewer/2022040411/5ed73980d37f9f58ca6a80c4/html5/thumbnails/25.jpg)
Web design, Hristo Valchanov, 2014
Ритъм - пример
![Page 26: Основи на Web дизайна › tu-varnaknt › images › tutorials › webd › wd1.pdfWeb design, Hristo Valchanov, 2014 Единство (unity) Предоставя “плътност”](https://reader030.fdocuments.es/reader030/viewer/2022040411/5ed73980d37f9f58ca6a80c4/html5/thumbnails/26.jpg)
Web design, Hristo Valchanov, 2014
Единство (unity)
Предоставя “плътност” на дизайна чрез
свързване на елементите заедно.
Позволява оформяне на логически групи от
елементи.
Може да се реализира чрез:
• настройване на разположението на
елементите да бъдат близко или далеч;
• промяна на пространството около текста;
• използване на свойства на рамки (box) за
получаване на отстъпи и запълвания.
![Page 27: Основи на Web дизайна › tu-varnaknt › images › tutorials › webd › wd1.pdfWeb design, Hristo Valchanov, 2014 Единство (unity) Предоставя “плътност”](https://reader030.fdocuments.es/reader030/viewer/2022040411/5ed73980d37f9f58ca6a80c4/html5/thumbnails/27.jpg)
Web design, Hristo Valchanov, 2014
Единство - пример
![Page 28: Основи на Web дизайна › tu-varnaknt › images › tutorials › webd › wd1.pdfWeb design, Hristo Valchanov, 2014 Единство (unity) Предоставя “плътност”](https://reader030.fdocuments.es/reader030/viewer/2022040411/5ed73980d37f9f58ca6a80c4/html5/thumbnails/28.jpg)
Web design, Hristo Valchanov, 2014
Подравняване (alignment)
Подреждане на текст и графика едни
спрямо други.
Дава възможност за по-лесно възприемане
на оформлението.
Видове подравняване:
• хоринзонтално;
• вертикално;
• ъглово;
• центрирано;
• визуално.
![Page 29: Основи на Web дизайна › tu-varnaknt › images › tutorials › webd › wd1.pdfWeb design, Hristo Valchanov, 2014 Единство (unity) Предоставя “плътност”](https://reader030.fdocuments.es/reader030/viewer/2022040411/5ed73980d37f9f58ca6a80c4/html5/thumbnails/29.jpg)
Web design, Hristo Valchanov, 2014
Подравняване - пример
![Page 30: Основи на Web дизайна › tu-varnaknt › images › tutorials › webd › wd1.pdfWeb design, Hristo Valchanov, 2014 Единство (unity) Предоставя “плътност”](https://reader030.fdocuments.es/reader030/viewer/2022040411/5ed73980d37f9f58ca6a80c4/html5/thumbnails/30.jpg)
Web design, Hristo Valchanov, 2014
Бяло пространство (white space)
Използва се за изолиране на елементите и
поставяне на ударение върху конкретен елемент.
Може да се реализира чрез:
• увеличаване на разстоянието между параграфите;
• увеличаване на разстоянието между колоните текст;
• добавяне повече пространство извън ъглите на
страницата;
• оставяне на повече пространство около графиките;
• увеличаване на разстоянието между редовете и
символите.
![Page 31: Основи на Web дизайна › tu-varnaknt › images › tutorials › webd › wd1.pdfWeb design, Hristo Valchanov, 2014 Единство (unity) Предоставя “плътност”](https://reader030.fdocuments.es/reader030/viewer/2022040411/5ed73980d37f9f58ca6a80c4/html5/thumbnails/31.jpg)
Web design, Hristo Valchanov, 2014
Бяло пространство - пример
![Page 32: Основи на Web дизайна › tu-varnaknt › images › tutorials › webd › wd1.pdfWeb design, Hristo Valchanov, 2014 Единство (unity) Предоставя “плътност”](https://reader030.fdocuments.es/reader030/viewer/2022040411/5ed73980d37f9f58ca6a80c4/html5/thumbnails/32.jpg)
Web design, Hristo Valchanov, 2014
Елементи на дизайна
Това са изграждащите блокове в дизайна,
избрани да предадат съобщението.
Включват:
• линии;
• форми;
• текстури;
• цвят.
![Page 33: Основи на Web дизайна › tu-varnaknt › images › tutorials › webd › wd1.pdfWeb design, Hristo Valchanov, 2014 Единство (unity) Предоставя “плътност”](https://reader030.fdocuments.es/reader030/viewer/2022040411/5ed73980d37f9f58ca6a80c4/html5/thumbnails/33.jpg)
Web design, Hristo Valchanov, 2014
Елементи на дизайна - линии
Основен елемент на дизайна. Чрез тях може да се
подобри разбираемостта и читаемостта на дизайна.
Могат да се използват за:
• рамки около елементи;
• разделителни линии между елементи;
• създаване на контури около елементи;
• посока;
• декорация.
![Page 34: Основи на Web дизайна › tu-varnaknt › images › tutorials › webd › wd1.pdfWeb design, Hristo Valchanov, 2014 Единство (unity) Предоставя “плътност”](https://reader030.fdocuments.es/reader030/viewer/2022040411/5ed73980d37f9f58ca6a80c4/html5/thumbnails/34.jpg)
Web design, Hristo Valchanov, 2014
Елементи на дизайна - форми
Чрез тях може да се предава значение и да се
организира информация.
Могат да се използват за:
• внясяне на определен интерес в дизайна;
• поддържане на интерес;
• организиране или отделяне на елементи;
• движение на очите през дизайна.
![Page 35: Основи на Web дизайна › tu-varnaknt › images › tutorials › webd › wd1.pdfWeb design, Hristo Valchanov, 2014 Единство (unity) Предоставя “плътност”](https://reader030.fdocuments.es/reader030/viewer/2022040411/5ed73980d37f9f58ca6a80c4/html5/thumbnails/35.jpg)
Web design, Hristo Valchanov, 2014
Геометрични форми
Известни и познати форми като правоъгълници,
кръгове, триъгълници, диаманти и др.
![Page 36: Основи на Web дизайна › tu-varnaknt › images › tutorials › webd › wd1.pdfWeb design, Hristo Valchanov, 2014 Единство (unity) Предоставя “плътност”](https://reader030.fdocuments.es/reader030/viewer/2022040411/5ed73980d37f9f58ca6a80c4/html5/thumbnails/36.jpg)
Web design, Hristo Valchanov, 2014
Естествени форми
Форми, известни от природата.
![Page 37: Основи на Web дизайна › tu-varnaknt › images › tutorials › webd › wd1.pdfWeb design, Hristo Valchanov, 2014 Единство (unity) Предоставя “плътност”](https://reader030.fdocuments.es/reader030/viewer/2022040411/5ed73980d37f9f58ca6a80c4/html5/thumbnails/37.jpg)
Web design, Hristo Valchanov, 2014
Абстрактни форми
Изкуствено създадени от изображения, като
азбучни глифове, икони, символи и др.
![Page 38: Основи на Web дизайна › tu-varnaknt › images › tutorials › webd › wd1.pdfWeb design, Hristo Valchanov, 2014 Единство (unity) Предоставя “плътност”](https://reader030.fdocuments.es/reader030/viewer/2022040411/5ed73980d37f9f58ca6a80c4/html5/thumbnails/38.jpg)
Web design, Hristo Valchanov, 2014
Елементи на дизайна - текстури
Текстурата е запълване на повърхност.
Придава осезаемост на елементите на
дизайна.
Могат да се използват за:
• фон (background);
• акцент;
• стилизиран дизайн като гравюри.
![Page 39: Основи на Web дизайна › tu-varnaknt › images › tutorials › webd › wd1.pdfWeb design, Hristo Valchanov, 2014 Единство (unity) Предоставя “плътност”](https://reader030.fdocuments.es/reader030/viewer/2022040411/5ed73980d37f9f58ca6a80c4/html5/thumbnails/39.jpg)
Web design, Hristo Valchanov, 2014
Елементи на дизайна - текстури
Създадени с линии или форми Създадени с фото-редактор
Създадени от обекти от снимки
![Page 40: Основи на Web дизайна › tu-varnaknt › images › tutorials › webd › wd1.pdfWeb design, Hristo Valchanov, 2014 Единство (unity) Предоставя “плътност”](https://reader030.fdocuments.es/reader030/viewer/2022040411/5ed73980d37f9f58ca6a80c4/html5/thumbnails/40.jpg)
Web design, Hristo Valchanov, 2014
Елементи на дизайна - цвят Може да се използва за:
• фон (background)
• текст или преден план
• изображения
• акцентиране
![Page 41: Основи на Web дизайна › tu-varnaknt › images › tutorials › webd › wd1.pdfWeb design, Hristo Valchanov, 2014 Единство (unity) Предоставя “плътност”](https://reader030.fdocuments.es/reader030/viewer/2022040411/5ed73980d37f9f58ca6a80c4/html5/thumbnails/41.jpg)
Web design, Hristo Valchanov, 2014
Цветови схеми - монохроматична
Използва се базов цвят за
създаване на цялостно
настроение.
Лесна за балансиране и удобна
за изпозване с неутрални
цветове.
![Page 42: Основи на Web дизайна › tu-varnaknt › images › tutorials › webd › wd1.pdfWeb design, Hristo Valchanov, 2014 Единство (unity) Предоставя “плътност”](https://reader030.fdocuments.es/reader030/viewer/2022040411/5ed73980d37f9f58ca6a80c4/html5/thumbnails/42.jpg)
Web design, Hristo Valchanov, 2014
Цветови схеми - аналогова
Използва съседни цветове от
палитрата.
Подобна на монохроматичната
но с по-живо излъчване.
![Page 43: Основи на Web дизайна › tu-varnaknt › images › tutorials › webd › wd1.pdfWeb design, Hristo Valchanov, 2014 Единство (unity) Предоставя “плътност”](https://reader030.fdocuments.es/reader030/viewer/2022040411/5ed73980d37f9f58ca6a80c4/html5/thumbnails/43.jpg)
Web design, Hristo Valchanov, 2014
Цветови схеми - комплементарна
Използва противоположни
цветове от палитрата.
Позволява постигане на високо-
контрастен ефект.
![Page 44: Основи на Web дизайна › tu-varnaknt › images › tutorials › webd › wd1.pdfWeb design, Hristo Valchanov, 2014 Единство (unity) Предоставя “плътност”](https://reader030.fdocuments.es/reader030/viewer/2022040411/5ed73980d37f9f58ca6a80c4/html5/thumbnails/44.jpg)
Web design, Hristo Valchanov, 2014
Цветови схеми на Web сайтове
![Page 45: Основи на Web дизайна › tu-varnaknt › images › tutorials › webd › wd1.pdfWeb design, Hristo Valchanov, 2014 Единство (unity) Предоставя “плътност”](https://reader030.fdocuments.es/reader030/viewer/2022040411/5ed73980d37f9f58ca6a80c4/html5/thumbnails/45.jpg)
Web design, Hristo Valchanov, 2014
Цветови схеми на Web сайтове
![Page 46: Основи на Web дизайна › tu-varnaknt › images › tutorials › webd › wd1.pdfWeb design, Hristo Valchanov, 2014 Единство (unity) Предоставя “плътност”](https://reader030.fdocuments.es/reader030/viewer/2022040411/5ed73980d37f9f58ca6a80c4/html5/thumbnails/46.jpg)
Web design, Hristo Valchanov, 2014
Цветови схеми на Web сайтове
![Page 47: Основи на Web дизайна › tu-varnaknt › images › tutorials › webd › wd1.pdfWeb design, Hristo Valchanov, 2014 Единство (unity) Предоставя “плътност”](https://reader030.fdocuments.es/reader030/viewer/2022040411/5ed73980d37f9f58ca6a80c4/html5/thumbnails/47.jpg)
Web design, Hristo Valchanov, 2014
Цветови схеми на Web сайтове
![Page 48: Основи на Web дизайна › tu-varnaknt › images › tutorials › webd › wd1.pdfWeb design, Hristo Valchanov, 2014 Единство (unity) Предоставя “плътност”](https://reader030.fdocuments.es/reader030/viewer/2022040411/5ed73980d37f9f58ca6a80c4/html5/thumbnails/48.jpg)
Web design, Hristo Valchanov, 2014
Текст
Специфика на Web текстовете:
• ограничено пространство на монитора;
• разделителната способност на монитора;
• за разлика от печата, дизайнерът няма
поглед как ще изглежда сайта за
потребителя.
Основни изисквания:
• скорост на четене;
• удобство при четене.
![Page 49: Основи на Web дизайна › tu-varnaknt › images › tutorials › webd › wd1.pdfWeb design, Hristo Valchanov, 2014 Единство (unity) Предоставя “плътност”](https://reader030.fdocuments.es/reader030/viewer/2022040411/5ed73980d37f9f58ca6a80c4/html5/thumbnails/49.jpg)
Web design, Hristo Valchanov, 2014
Шрифтове
За целите на дизайна шрифтовете се делят на:
• серифни знаци (serifs);
• безсерифни знаци (sans-serif)
![Page 50: Основи на Web дизайна › tu-varnaknt › images › tutorials › webd › wd1.pdfWeb design, Hristo Valchanov, 2014 Единство (unity) Предоставя “плътност”](https://reader030.fdocuments.es/reader030/viewer/2022040411/5ed73980d37f9f58ca6a80c4/html5/thumbnails/50.jpg)
Web design, Hristo Valchanov, 2014
Избор на шрифтове
• За дълги текстове – серифни шрифтове (Times
New Roman, Georgia, Garamond) – до 10-14 p
• За заглавия и привличане на внимание – без
серифни (Arial, Verdana, Helvetica) – до 8-12 p
Оптимизирани шрифтове за ниска екранна
резолюция:
![Page 51: Основи на Web дизайна › tu-varnaknt › images › tutorials › webd › wd1.pdfWeb design, Hristo Valchanov, 2014 Единство (unity) Предоставя “плътност”](https://reader030.fdocuments.es/reader030/viewer/2022040411/5ed73980d37f9f58ca6a80c4/html5/thumbnails/51.jpg)
Web design, Hristo Valchanov, 2014
Текстът е част от графичния
дизайн, но не е част от
графичното съдържание на
Web страницата !
![Page 52: Основи на Web дизайна › tu-varnaknt › images › tutorials › webd › wd1.pdfWeb design, Hristo Valchanov, 2014 Единство (unity) Предоставя “плътност”](https://reader030.fdocuments.es/reader030/viewer/2022040411/5ed73980d37f9f58ca6a80c4/html5/thumbnails/52.jpg)
Web design, Hristo Valchanov, 2014
Навигация
Ключов компонент на web сайта, имаща пряко
отношение към неговия успех.
• Трябва да бъде лесна за намиране и
използване;
• Трябва да бъде консистентна;
• Да се използват очевидни имена на секции;
• По-малко е повече (Less is More);
• Да се напомня на потребителя къде се
намира.
![Page 53: Основи на Web дизайна › tu-varnaknt › images › tutorials › webd › wd1.pdfWeb design, Hristo Valchanov, 2014 Единство (unity) Предоставя “плътност”](https://reader030.fdocuments.es/reader030/viewer/2022040411/5ed73980d37f9f58ca6a80c4/html5/thumbnails/53.jpg)
Web design, Hristo Valchanov, 2014
Видове навигация –
хоризонтален текст
![Page 54: Основи на Web дизайна › tu-varnaknt › images › tutorials › webd › wd1.pdfWeb design, Hristo Valchanov, 2014 Единство (unity) Предоставя “плътност”](https://reader030.fdocuments.es/reader030/viewer/2022040411/5ed73980d37f9f58ca6a80c4/html5/thumbnails/54.jpg)
Web design, Hristo Valchanov, 2014
Видове навигация – вертикален
текст
![Page 55: Основи на Web дизайна › tu-varnaknt › images › tutorials › webd › wd1.pdfWeb design, Hristo Valchanov, 2014 Единство (unity) Предоставя “плътност”](https://reader030.fdocuments.es/reader030/viewer/2022040411/5ed73980d37f9f58ca6a80c4/html5/thumbnails/55.jpg)
Web design, Hristo Valchanov, 2014
Видове навигация – Drop-Down
менюта
![Page 56: Основи на Web дизайна › tu-varnaknt › images › tutorials › webd › wd1.pdfWeb design, Hristo Valchanov, 2014 Единство (unity) Предоставя “плътност”](https://reader030.fdocuments.es/reader030/viewer/2022040411/5ed73980d37f9f58ca6a80c4/html5/thumbnails/56.jpg)
Web design, Hristo Valchanov, 2014
Видове навигация – икони или
графики
![Page 57: Основи на Web дизайна › tu-varnaknt › images › tutorials › webd › wd1.pdfWeb design, Hristo Valchanov, 2014 Единство (unity) Предоставя “плътност”](https://reader030.fdocuments.es/reader030/viewer/2022040411/5ed73980d37f9f58ca6a80c4/html5/thumbnails/57.jpg)
Web design, Hristo Valchanov, 2014
Препоръки
• Старателно планиране на web сайта;
• Проектиране страниците да се зареждат бързо;
• Опростена навигация;
• Постоянство с шрифтовете, цветовете и менютата;
• Използвайте много “бяло пространство”;
• Да има достатъчен контраст между текст и фон;
• Не прекалявайте с флаш и анимирана графика;
• Да се пише по възможност кратко и ясно;
• Да се поставя най-доброто съдържание в началото
на страницата.
![Page 58: Основи на Web дизайна › tu-varnaknt › images › tutorials › webd › wd1.pdfWeb design, Hristo Valchanov, 2014 Единство (unity) Предоставя “плътност”](https://reader030.fdocuments.es/reader030/viewer/2022040411/5ed73980d37f9f58ca6a80c4/html5/thumbnails/58.jpg)
Web design, Hristo Valchanov, 2014
Това, което може би не трябва да
правите ...