Основи на Web дизайна › tu-varnaknt › images › tutorials › webd ›...

Web design, Hristo Valchanov, 2014

Основи на Web дизайна

доц. д-р инж. Христо Вълчанов

102ТВ

http://cs.tu-varna.bg

World Wide Web (WWW)

• Разпределена информационна система;

• Съдържа документи, свързани посредством препратки (хипервръзки).

World Wide Web (WWW)

• Създадена 1989г. в CERN от Тим Бърнърс-Лий;

• Първоначално разработена за “хипертекстови” документи;

• Базирана на модела “клиент-сървър”;

• Използва език за описание на съдържанието на документа Hyper Text Markup Language (HTML).

Компоненти на WWW

• Множество информационни сървъри (Web сървъри);

• Клиенти за визуализиране на информацията

(браузъри);

• Документи (Web страници);

• Протокол за обмен на страници - Hyper Text

Transmission Protocol (HTTP).

Модел “клиент-сървър”

Uniform Resource Locator (URL)

http://www.cisco.com/web/learning/netacad/index.html

протокол име на хост път име на файл

Адресиране на обект

• Mozilla Firefox;

• Internet Explorer;

• Safari;

• Opera;

• Google Chrome;

• Netscape Navigator;

• …

Браузъри

Видове Web документи

• Статични - имат фиксирано съдържание;

• Динамични - създават се винаги при

изискване от браузър.

Разширяване възможноститте на

браузърите (plug-ins)

Множество от софтуерни компоненти,

добавящи нови възможности към

браузърите:

• Adobe Flash Player;

• QuickTime;

• Microsoft SilverLight.

Видове Web сайтове

• Лични;

• Блогове;

• Тематични;

• Рекламни;

• Фирмени;

• Институционални.

Какво е Web дизайн ?

Web дизайнът представлява планирането и

създаването на Web сайтове.

Включва:

• Информационна структура;

• Потребителски интерфейс;

• Структура на сайта;

• Навигация;

• Оформление.

Принципи на Web дизайна

• Баланс (balance);

• Контраст (contrast);

• Ритъм (rhythm);

• Единство (unity);

• Подравняване (alignment);

• Бели пространства (white spaces).

Баланс (balance)

Разпределение на елементите в дизайна.

Позицията на елементите в страницата

определя колко балансирана ще бъде тя.

Fold – позицията в страницата, от където

браузърите започват да скролират.

Препоръки за позицията на fold

Резолюция Позиция надолу

640 x 480 310

800 x 600 430

1024 x 768 600

1200 x 1024 850

1600 x 1200 1030

Баланс- пример

Видове баланс

• Симетричен;

• Асиметричен

• Радиален.

Симетричен баланс

Придава повече формалност и подреденост

на представянето.

Вертикална симетрия

Вертикална и хоринзонтална

симетрия

Асиметричен баланс

Типично е без център и се създава от

нечетен или несъответстващ брой на

коренно различни елементи.

Радиален баланс

Елементите се “излъчват” от или се “въртят”

по кръгова или спираловидна линия.

Контраст

Подчертаване на разликите между

елементите в дизайна.

Може да се реализира чрез:

• промяна на шрифтовете;

• промяна цвета на хипервръзките;

• използване на различни по размер

изображения и елементи;

• използване на контрастен цвят.

Контраст - пример

Ритъм (rhythm)

Създаване на вътрешна консистенция.

• повторение на актуален текст в HTML;

• добавяне на изображения по няколко пъти;

• повторение на background изображение;

• повтаряне на навигационни елементи в

страницата.

Ритъм - пример

Единство (unity)

Предоставя “плътност” на дизайна чрез

свързване на елементите заедно.

Позволява оформяне на логически групи от

елементи.

• настройване на разположението на

елементите да бъдат близко или далеч;

• промяна на пространството около текста;

• използване на свойства на рамки (box) за

получаване на отстъпи и запълвания.

Единство - пример

Подравняване (alignment)

Подреждане на текст и графика едни

спрямо други.

Дава възможност за по-лесно възприемане

на оформлението.

Видове подравняване:

• хоринзонтално;

• вертикално;

• ъглово;

• центрирано;

• визуално.

Подравняване - пример

Бяло пространство (white space)

Използва се за изолиране на елементите и

поставяне на ударение върху конкретен елемент.

• увеличаване на разстоянието между параграфите;

• увеличаване на разстоянието между колоните текст;

• добавяне повече пространство извън ъглите на

страницата;

• оставяне на повече пространство около графиките;

• увеличаване на разстоянието между редовете и

символите.

Бяло пространство - пример

Елементи на дизайна

Това са изграждащите блокове в дизайна,

избрани да предадат съобщението.

Включват:

• линии;

• форми;

• текстури;

• цвят.

Елементи на дизайна - линии

Основен елемент на дизайна. Чрез тях може да се

подобри разбираемостта и читаемостта на дизайна.

Могат да се използват за:

• рамки около елементи;

• разделителни линии между елементи;

• създаване на контури около елементи;

• посока;

• декорация.

Елементи на дизайна - форми

Чрез тях може да се предава значение и да се

организира информация.

• внясяне на определен интерес в дизайна;

• поддържане на интерес;

• организиране или отделяне на елементи;

• движение на очите през дизайна.

Геометрични форми

Известни и познати форми като правоъгълници,

кръгове, триъгълници, диаманти и др.

Естествени форми

Форми, известни от природата.

Абстрактни форми

Изкуствено създадени от изображения, като

азбучни глифове, икони, символи и др.

Елементи на дизайна - текстури

Текстурата е запълване на повърхност.

Придава осезаемост на елементите на

дизайна.

• фон (background);

• акцент;

• стилизиран дизайн като гравюри.

Елементи на дизайна - текстури

Създадени с линии или форми Създадени с фото-редактор

Създадени от обекти от снимки

Елементи на дизайна - цвят Може да се използва за:

• фон (background)

• текст или преден план

• изображения

• акцентиране

Цветови схеми - монохроматична

Използва се базов цвят за

създаване на цялостно

настроение.

Лесна за балансиране и удобна

за изпозване с неутрални

цветове.

Цветови схеми - аналогова

Използва съседни цветове от

палитрата.

Подобна на монохроматичната

но с по-живо излъчване.

Цветови схеми - комплементарна

Използва противоположни

цветове от палитрата.

Позволява постигане на високо-

контрастен ефект.

Цветови схеми на Web сайтове

Текст

Специфика на Web текстовете:

• ограничено пространство на монитора;

• разделителната способност на монитора;

• за разлика от печата, дизайнерът няма

поглед как ще изглежда сайта за

потребителя.

Основни изисквания:

• скорост на четене;

• удобство при четене.

Шрифтове

За целите на дизайна шрифтовете се делят на:

• серифни знаци (serifs);

• безсерифни знаци (sans-serif)

Избор на шрифтове

• За дълги текстове – серифни шрифтове (Times

New Roman, Georgia, Garamond) – до 10-14 p

• За заглавия и привличане на внимание – без

серифни (Arial, Verdana, Helvetica) – до 8-12 p

Оптимизирани шрифтове за ниска екранна

резолюция:

Текстът е част от графичния

дизайн, но не е част от

графичното съдържание на

Web страницата !

Навигация

Ключов компонент на web сайта, имаща пряко

отношение към неговия успех.

• Трябва да бъде лесна за намиране и

използване;

• Трябва да бъде консистентна;

• Да се използват очевидни имена на секции;

• По-малко е повече (Less is More);

• Да се напомня на потребителя къде се

намира.

Видове навигация –

хоризонтален текст

Видове навигация – вертикален

текст

Видове навигация – Drop-Down

менюта

Видове навигация – икони или

графики

Препоръки

• Старателно планиране на web сайта;

• Проектиране страниците да се зареждат бързо;

• Опростена навигация;

• Постоянство с шрифтовете, цветовете и менютата;

• Използвайте много “бяло пространство”;

• Да има достатъчен контраст между текст и фон;

• Не прекалявайте с флаш и анимирана графика;

• Да се пише по възможност кратко и ясно;

• Да се поставя най-доброто съдържание в началото

на страницата.

Това, което може би не трябва да

правите ...

Основи на Web дизайна › tu-varnaknt › images › tutorials › webd ›...

Documents

CINE DE ADULTOS - Ferrol...Un minuto de gloria / una película de Kristina Grozeva, Petar Valchanov Ano de realización: 2016 Duración: 97 min. Localización: CINE 791-DM MIN La conversación

Webd aguulga uguh_shaardlaga

RASPORED PROJEKCIJA - TERASA AGENCIJE ZA VODNE … · 2017-08-16 · ČOVJEK ZVAN OVE / A MAN CALLED OVE Hannes Holm ŠVE / SWE 116' SLAVA / GLORY Kristina Grozeva, Petar Valchanov

THE LESSON - ZED · 2015-09-24 · THE LESSON de Kristina Grozeva et Petar Valchanov Bulgarie Version originale sous titrée en français - 1h45 Au cinéma le 9 Septembre 2015. DISTRIBUTION

62 MUESTRA INTERNACIONAL DE CINEitzel.lag.uia.mx/publico/pdf/fichas-62-mic.pdfDomingo 27 de agosto. Clasificación B La lección (Kristina Grozeva y Petar Valchanov, Grecia, 2014)

mßg el© cÖ g msL¨v ˆR¨ô-Avlvp 1417, Ryb 2010 · cÖ_g msL¨v ˆR¨ô-Avlvp 1417, Ryb 2010. evsjv‡`k wk¶v mvgwqKx BD‡b‡¯‹vi mn‡hvwMZvq ev‡dW I weBD-AvBBwW-Gi †hŠ_

Modul webd

Обща характеристика и резюмета Aneta/rezumeta.pdf · подобласти с подхода на Кан за избор на преходна плътност

3. Изображения хипервръзки и таблици€¦ · Web design, Hristo Valchanov Атрибути на • shape – задава формата

AF a--0027-12A Catalogo Chaves Seccionadoras 3KU ACE WEBd

14. Оптимизиране на WebWeb design, Hristo Valchanov White SEO оптимизиране Разрешените техники за оптимизация на сайтове,Web

Riarify, INN-beclometasone dipropionate, formoterol ...€¦ · растежа, намаляване на костната минерална плътност, катаракта,

filmotecaMAR 20€¦ · Petar Valchanov, finalista del Premio LUX del Parlamento Europeo y multipremiada en festivales internacionales como Tesalónica, Sofía, Luxemburgo, Tokio,

Circular 65/2017 Castellón, 5 de Febrero de 2017 …EV992 RODRIGUEZ ESTEBAN, IKER ESP 6 Atletisme Els Sitges EV993 VALCHANOV FRANCO, NOAH ESP 6 Atletisme Els Sitges EC563 DIAZ FAS,

La Nouvelle-Calédonie fait partie des pays et territoires ... · 17h45 : Happy end de Michaël Haneke (France, Autriche, Allemagne) 20h20 : Glory de Kristina Grozeva, Petar Valchanov

7. Java Script. Функции. Обекти · Web design, Hristo Valchanov String - методи Method Description charAt() Returns the character at the specified index charCodeAt()

13. Семантичен Web - tu-varna.bg · • Разпределени бази от данни; • Интелигентни приложения. Web design, Hristo Valchanov,

po Meditsinska... · Web viewПри равновесното състояние, всеки параметър на системата (температура, налягане, плътност

INTEGRA SEU SERVIDOR OPC COM QUALQUER BANCO DE DADOS - Cogent... · SMS, além de uma IHM baseada na web ataHub® WebD View™, permitem a você visualizar dados de seu banco de dados

ONDAS DE CHOQUE em Ortopedia - ortosom.com.br · Ondas de Choque 1986 - Haupt aplicou ondas de choque em ratos e detectou aceleraçªo da osteogŒnese 1988 - Valchanov reportou o