- •© КНТЭУ, каф. ИТС, Основы веб-дизайна. Лекция №5
- •1. Критерии качественного дизайна.
- •Типы сайтов по сложности дизайна и содержания
- •Пример дизайна некоммерческого сайта
- •Пример академического дизайна.
- •Пример дизайна корпоративного сайта
- •Пример дизайна контент-портала
- •Связь посещаемости сайтов и сложности дизайна
- •Критерием качества дизайна сайта может служить его
- •2. Основные принципы композиции
- •Равновесие тесно связано с пропорцией.
- •Равновесие на странице сайта может быть
- •Неформальное равновесие достигается путем размещения елементов разных размеров, форм, цветовой интенсивности на разных
- •2). Единство композиции
- •Характеристики шрифтов.
- •б) Начертание – прямое и курсивное. (А, А)
- •3). Соразмерность элементов
- •4). Цветовое решение
- •Большой цветовой круг Освальда применяется для образования гармоничных сочетаний из двух, трех, четырех
- •Инструментарий для создания цветового решения в Corel Draw
- •Белый, черный и все оттенки серого цветов называются ахроматическими.
- •Правила сочетаемости цветов:
- •3. Этапы создания сайта
- •4.Требования к дизайну сайта
Равновесие тесно связано с пропорцией.
Пропорцией в дизайне называют соотношение размеров либо разных объектов, либо составных частей (например, ширины и высоты) одного объекта.
Особый интерес – золотая пропорция (золотое сечение)
a b
b
a
b |
|
a |
|
|
a |
a b |
b = 0,618a |
||
|
|
|
|
|
|
|
|
|
|
Золотое сечение считается самой совершенной, гармоничной, уравновешенной пропорцией.
Концепции дизайна |
© КНТЭУ - 2006, каф. ИТС, доц. Шклярский С.М. |
Равновесие на странице сайта может быть
формальным и неформальным
Формальное равновесие достигается путем симметричного размещения элементов вокруг
оптического центра страницы.
Концепции дизайна |
© КНТЭУ - 2006, каф. ИТС, доц. Шклярский С.М. |
Неформальное равновесие достигается путем размещения елементов разных размеров, форм, цветовой интенсивности на разных расстояниях от оптического центра (пример – рычаг).
Концепции дизайна |
© КНТЭУ - 2006, каф. ИТС, доц. Шклярский С.М. |
2). Единство композиции
Единство - это соединение всех элементов страницы в единое целое .
Правила:
•Шрифты - в пределах сайта должны иметь одинаковые характеристики - такие, как гарнитура (начертание), кегль (высота), цвет.
•Абзацы - желательно, чтобы преобладал какой-нибудь один из видов выравнивания.
•Цветовая схема сайта - должна повторяться на всех страничках сайта.
Концепции дизайна |
© КНТЭУ - 2006, каф. ИТС, доц. Шклярский С.М. |
Характеристики шрифтов.
а). Гарнитура – это набор начертаний одного шрифта различающихся по толщине штрихов, ширине букв,
общему рисунку и т.д.
A A A A
Типы гарнитур:
1.Рубленные (без засечек).
2.С засечками.
3.Моноширинные.
4.Декоративные
Концепции дизайна |
© КНТЭУ - 2006, каф. ИТС, доц. Шклярский С.М. |
б) Начертание – прямое и курсивное. (А, А)
в) Насыщенность – определяется толщиной штрихов и соотношением площади белого и черного в рисунке букв:
•светлый (light)
•жирный (bold)
•cверхжирный (extra bold)
г) Кегль – высота шрифта. Измеряется в пунктах (пт.). 1 пт = 0,35 мм.
A
Концепции дизайна |
© КНТЭУ - 2006, каф. ИТС, доц. Шклярский С.М. |
3). Соразмерность элементов
Все элементы композиции страницы должны занимать площадь, соразмерную с их значением в композиции как в
едином целом.
При посещении страницы посетители:
1.Смотрят на картинку.
2.Читают заголовок.
3.Читают текст.
Концепции дизайна |
© КНТЭУ - 2006, каф. ИТС, доц. Шклярский С.М. |
4). Цветовое решение
Основные параметры цвета:
1.Тон (hue) – цветовой компонент, представляющий собой один из цветов спектра (радуги).
2.Насыщенность (saturation) - соотношение основного тона и равного ему по яркости бесцветного серого.
3.Яркость (brightness) – различимость цвета в пределах одного тона.
Вкомпьютерном дизайне для построения цветового решения используется HSB-модель, которая, в отличие от RGB-модели, точнее передает цветовые нюансы присущие человеческому восприятию.
Концепции дизайна |
© КНТЭУ - 2006, каф. ИТС, доц. Шклярский С.М. |
Большой цветовой круг Освальда применяется для образования гармоничных сочетаний из двух, трех, четырех цветовых тонов.
Круг естественных цветов по Гете
•сжк - основной треугольник, первичные (основные) цвета
•фоз - перевернутый треугольник (вторичные цвета)
Концепции дизайна |
© КНТЭУ - 2006, каф. ИТС, доц. Шклярский С.М. |
Инструментарий для создания цветового решения в Corel Draw
Концепции дизайна |
© КНТЭУ - 2006, каф. ИТС, доц. Шклярский С.М. |