Дизайн сайта. Вебинар 2

Содержание

Слайд 2

Сайты бывают разными

— и простыми,
— и сложными,
— и красивыми,

Сайты бывают разными — и простыми, — и сложными, — и красивыми,
и не красивыми,
— и удобными,
— и не удобными.

Слайд 3

— А сколько стоит автомобиль?

— А сколько стоит автомобиль?

Слайд 4

Зачем мне автомобиль?

Цель: Перемещение из пункта А в пункт Б
Ограничения:
— перевозить до

Зачем мне автомобиль? Цель: Перемещение из пункта А в пункт Б Ограничения:
4 человек;
— грузы весом до 200 кг и габаритами 1,5 * 3 метра;
— путь к пункту Б лежит через лес (или наоборот: пункты А и Б находятся близко друг к другу);
— ремонт должен быть экономичным и сервис рядом с домом;
— соседи должны считать меня успешным человеком (мне важен мой социальный статус);
— в нем должно быть комфортно;
— и должна быть музыка :)

Слайд 5

Сколько денег есть? А сколько надо?

1. Не обязательно если у вас есть

Сколько денег есть? А сколько надо? 1. Не обязательно если у вас
есть 5 млн
рублей, то вам все их нужно потратить
на автомобиль.
2. Если у вас есть только 10 т.р., то не факт,
что вам сгодиться любое предложение
в этом бюджете.

Слайд 6

10 вопросов, чтобы понять, какой сайт нужен:

1. Зачем Вам нужен сайт?

10 вопросов, чтобы понять, какой сайт нужен: 1. Зачем Вам нужен сайт?

2. Чем вы занимаетесь? Какие приоритетные
направления деятельности?
3. Кто Ваши покупатели?
4. География реализации товаров/услуг?
5. Какие 20% Клиентов или продуктов дают Вам
80% доходов?

Слайд 7

10 вопросов, чтобы понять, какой сайт нужен:

6. Кто Ваши конкуренты? Их

10 вопросов, чтобы понять, какой сайт нужен: 6. Кто Ваши конкуренты? Их
в интернете много?
7. В каком состоянии находятся информационные
материалы, которыми мы будем наполнять сайт?
8. Как часто предполагается менять информацию
на сайте? Какую?
9. Какие сайты Вам нравятся? Какие нет?
10. Какие функциональные компоненты
будут на сайте?

Слайд 8

5 вопросов-бонусов

1. У Вас уже был сайт или этот будет первым?
2. В

5 вопросов-бонусов 1. У Вас уже был сайт или этот будет первым?
чем уникальность Вашего предложения?
3. Есть ли жесткие ограничения по срокам
и по бюджету?
4. Зачем Вам нужен сайт с индивидуальным
дизайном?
5. Как Вы считаете, будет ли аудитория внимательно
изучать Ваш сайт или просмотрит по диагонали?

Слайд 9

5 важных советов

1. Первый сайт не должен быть дорогим.
2. Первый сайт сделайте

5 важных советов 1. Первый сайт не должен быть дорогим. 2. Первый
как можно быстрее.
3. Не меняйте «шило на мыло», если сайт не первый.
4. Информационные материалы начинайте
готовить как можно раньше.
5. Правило Парето: 20% Клиентов или
продуктов дают 80% доходов.

Слайд 10

Что такое сайт?

Что такое сайт?

Слайд 11

Какие бывают сайты?

Какие бывают сайты?

Слайд 22

Сайт – как часть бренда

Сайт – как часть бренда

Слайд 23

Сайт – как часть бренда

Сайт – как часть бренда

Слайд 24

Основы успешного сайта

Основы успешного сайта

Слайд 25

Комплексный подход к созданию сайта

Комплексный подход к созданию сайта

Слайд 26

Этапы разработки сайта

Этапы разработки сайта

Слайд 27

Дизайн сайта - это предоставление информации в графической форме на экран для

Дизайн сайта - это предоставление информации в графической форме на экран для
наиболее удобного визуального восприятия.
Разработка дизайна сайта - важный этап создания сайта. Именно дизайн сайта сформирует у пользователя сайта первое впечатление о сайте.

Дизайн сайта

Слайд 28

Правила дизайна

Размер каждой загружаемой страницы не должен превышать 30К. Если ваша страница

Правила дизайна Размер каждой загружаемой страницы не должен превышать 30К. Если ваша
требует длительной загрузки, предупредите об этом посетителей.
Избегайте крупных изображений и апплетов, они долго грузиться.
Составляйте крупные изображения из более мелких. Несколько маленьких картинок загружаются значительно быстрее, чем одна большая.
Для ускорения загрузки страниц применяйте в изображениях теги HEIGHT, WIDTH и ALT.
По общепринятым нормам баннер размером 468х60 рiх (пикселей) не должен превышать 15-20 Кб.

Слайд 29

Избегайте пестрых, многоэлементных фоновых изображений: они сильно затрудняют чтение страниц.
Регулярно проверяйте

Избегайте пестрых, многоэлементных фоновых изображений: они сильно затрудняют чтение страниц. Регулярно проверяйте
свои ссылки на работоспособность.
Если на изображении сотни цветов или оно имеет фотографическое качество, пользуйтесь форматом JPEG. Он обеспечивает меньший размер файла для таких изображений. Если же это изображения с крупными монотонными областями или текстом, пользуйтесь форматом GIF, так как JPEG пачкает цвета и смазывает текст.
Пользуйтесь таблицами (\div) - это самый эффективный способ оформления, особенно для изображений, сопровождаемых текстом.
Не пишите ничего в статусной строке, пользователю хочется знать куда он попадет после нажатия на ссылку.

Слайд 30

Шаг 1

Важную роль в дизайне играют цвета, которые используются на сайте. Их

Шаг 1 Важную роль в дизайне играют цвета, которые используются на сайте.
не должно превышать 3-х основных цвета и их оттенки

Правильно подобраны цвета (текст читаемый)

Неправильно подобраны цвета (текст нечитаемый)

Слайд 31

Шаг 2

Рисунки должны быть четкими, не размытыми

Шаг 2 Рисунки должны быть четкими, не размытыми

Слайд 32

Шаг 3

Правильное расположение информации на странице облегчает восприятие

Шаг 3 Правильное расположение информации на странице облегчает восприятие

Слайд 33

Логотип

Меню

Название

Текстовая информация

Дополнительные ссылки

Логотип Меню Название Текстовая информация Дополнительные ссылки

Слайд 34

Теория цвета. Тон

Тон ("Hue") (иные переводы: собственно цвет, краска, оттенок, тон)
Контраст тонов

Теория цвета. Тон Тон ("Hue") (иные переводы: собственно цвет, краска, оттенок, тон)
- явно различные тона
Контраст тона - различные оттенки, одинаковый тон (синий)

Слайд 35

Хроматичность (Chromaticity, Chorma)

О хроматичности мы говорим, когда рассуждаем о "чистоте" цвета.

Хроматичность (Chromaticity, Chorma) О хроматичности мы говорим, когда рассуждаем о "чистоте" цвета.

Если в цвете отсутствуют примеси белого, черного или серого, цвет имеет высокую чистоту.

Слайд 36

Высокая хроматичность - очень сияющие, живые цвета.
Низкая хроматичность - ахроматичные, бесцветные цвета.
Хроматичность

Высокая хроматичность - очень сияющие, живые цвета. Низкая хроматичность - ахроматичные, бесцветные
одинакова - средний уровень. Та же живость цветов несмотря на различный тон; чистота меньше, чем у образцов выше.

Слайд 37

Насыщенность (Saturation)

В связи с хроматичностью насыщенность говорит нам, как цвет выглядит

Насыщенность (Saturation) В связи с хроматичностью насыщенность говорит нам, как цвет выглядит
в различных условиях освещенности.
Насыщенность одинаковая - та же интенсивность, различные тона
Контраст насыщенности - различные уровни наполнения, тон одинаковый

Слайд 38

Яркость (Value)

Когда мы говорим, что цвет "темный" или "светлый", мы имеем в

Яркость (Value) Когда мы говорим, что цвет "темный" или "светлый", мы имеем
виду его яркость.
Низкая яркость, постоянная - одинаковый уровень яркости.
Контраст яркостей - серый = ахроматичный.
Контраст яркостей - полное различие яркости.

Слайд 39

Светимость (Luminance)

Несмотря на то, что вместо этого слова часто употребляют слово "яркость"

Светимость (Luminance) Несмотря на то, что вместо этого слова часто употребляют слово
(brightness), мы предпочитаем использовать слово "светлота". Это понятие связано с многими теми же переменными, что и яркость в смысле "value". Но в данном случае используется другая математическая формула.
Добавление белого увеличивает светимость, добавление черного - уменьшает.

Слайд 40

Оттенок (tint), тональность (tone), и тень (shade)

Главное помнить, насколько цвет отличается от

Оттенок (tint), тональность (tone), и тень (shade) Главное помнить, насколько цвет отличается
своего начального тона (hue). Если к цвету добавляется белый, эта более светлая разновидность цвета называется "оттенок" (tint). Если цвет делается темнее путем добавления черного, полученный цвет называется "тень" (shade). Если же добавляется серый цвет, каждая градация дает вам различную тональность (tone).

Слайд 41

Оттенки (добавляем белый к чистому цвету).
Тени (добавляем черный к чистому цвету).
Тональности (добавляем

Оттенки (добавляем белый к чистому цвету). Тени (добавляем черный к чистому цвету).
серый к чистому цвету).

Слайд 42

Комплиментарные, дополнительные цвета (Complementary Colors):

Когда два или несколько цветов "подходят друг к

Комплиментарные, дополнительные цвета (Complementary Colors): Когда два или несколько цветов "подходят друг
другу", их называет комплиментарными, дополняющими друг друга цветами. Этот признак абсолютно субъективен, и мы готовы его обсудить и выслушать другие мнения.
Более точным определением будет: "если два цвета, будучи смешанными вместе, дают нейтрально-серый (краска/пигмент) или белый (свет) цвет, они называются дополняющими, комплиментарными".

Слайд 43

Основные цвета (Primary Colors)

Определение основных цветов зависит от того, как мы собираемся

Основные цвета (Primary Colors) Определение основных цветов зависит от того, как мы
воспроизводить цвет.
Цвета, видимые при расщеплении солнечного света с помощью призмы, иногда называют спектральными цветами. Это красный, оранжевый, желтый, зеленый, голубой, синий и фиолетовый. Эту комбинацию КОЖЗГСФ часто сводят к трем цветам: красный, зеленый и сине-фиолетовый, которые являются основными цветами аддитивной системы цветов (свет).
Первичными цветами субтрактивной системы цветов (краска, пигмент) являются циан, фуксин и желтый.

Слайд 44

Системы цвета. RGB

В различных случаях в зависимости от того, как воспроизводится цвет

Системы цвета. RGB В различных случаях в зависимости от того, как воспроизводится
используются различные цветовые системы.
Если мы используем источники света - доминирующей системой является RGB (от "red/green/blue" - "красный/зеленый/синий").

Слайд 45

Системы цвета. CMYK

Для цветов, которые получаются путем смешивания красок, пигментов или чернил

Системы цвета. CMYK Для цветов, которые получаются путем смешивания красок, пигментов или
на ткани, бумаге, полотне или другом материале, в качестве цветовой модели используется система CMY (от "cyan/magenta/yellow" - "циан/фуксин/желтый"). В связи с тем, что чистые пигменты очень дороги, для получения черного (букве K соответствует Black) цвета используется не равная смесь CMY, а просто черная краска.

Слайд 46

Системы цвета. HSL

Другой популярной цветовой системой является HSL (от "hue/saturation/lightness" - "цвет/насыщенность/яркость").

Системы цвета. HSL Другой популярной цветовой системой является HSL (от "hue/saturation/lightness" -
У этой системы есть несколько вариантов, где вместо насыщенности используется хроматичность (chroma), светимость (luminance) вместе с яркостью (value) (HSV/HLV). Именно эта система соответствует тому, как человеческий глаз видит цвет.

Слайд 47

Цветовые модели

Цветовые модели

Слайд 48

Цветовые схемы сайтов

Тетрадная схема

Триадная схема

Комплиментарная схема

Цветовые схемы сайтов Тетрадная схема Триадная схема Комплиментарная схема

Слайд 49

Сходственная схема цветов

Сходственная схема цветов

Слайд 50

Способность выделяться

Цветовая
схема

2. Композиция

Способность выделяться Цветовая схема 2. Композиция

Слайд 51

Композиция

«Скелет» композиции»
в изобразительном искусстве

Композиция «Скелет» композиции» в изобразительном искусстве

Слайд 52

Paul Cйzanne: Stilleben mit Дpfeln und Biskuits, um 1877, Цl auf Leinwand,

Paul Cйzanne: Stilleben mit Дpfeln und Biskuits, um 1877, Цl auf Leinwand,
38 Ч 55 cm, Paris, Sammlung Bйnatov, Land: Frankreich, Stil: Postimpressionismus

Слайд 53

Paul Cйzanne: Stilleben mit Дpfeln und Gebдck, um 1895, Цl auf Leinwand,

Paul Cйzanne: Stilleben mit Дpfeln und Gebдck, um 1895, Цl auf Leinwand,
Paris, Musйe Cognacq-Jay, Land: Frankreich, Stil: Postimpressionismus

Слайд 54

Paul Cйzanne: Stilleben mit Дpfeln und Fruchtschale, 1879-1882, Цl auf Leinwand, 43

Paul Cйzanne: Stilleben mit Дpfeln und Fruchtschale, 1879-1882, Цl auf Leinwand, 43
Ч 53 cm, Kopenhagen, Ny Carlsberg Glyptotek, Land: Frankreich, Stil: Postimpressionismus.

Слайд 55

Paul Cйzanne: StraЯenbiegung, 1879-1882, Цl auf Leinwand, 60 Ч 75 cm, Boston,

Paul Cйzanne: StraЯenbiegung, 1879-1882, Цl auf Leinwand, 60 Ч 75 cm, Boston,
Museum of Fine Arts, Land: Frankreich, Stil: Postimpressionismus

Слайд 56

Paul Cйzanne: Taubenschlag bei Montbriant, 1888-1892, Цl auf Leinwand, 66 Ч 81

Paul Cйzanne: Taubenschlag bei Montbriant, 1888-1892, Цl auf Leinwand, 66 Ч 81
cm, Cleveland (Ohio), Museum of Art, Land: Frankreich, Stil: Postimpressionismus

Слайд 57

Paul Cйzanne: Stilleben, Blumen in einer Vase, 1885-1888, Цl auf Leinwand, 46,5

Paul Cйzanne: Stilleben, Blumen in einer Vase, 1885-1888, Цl auf Leinwand, 46,5
Ч 70,5 cm, Privatsammlung, Land: Frankreich, Stil: Postimpressionismus

Слайд 58

Lovis Corinth: Walchensee, 1924, Цl auf Leinwand, 70 Ч 85 cm, Mьnchen,

Lovis Corinth: Walchensee, 1924, Цl auf Leinwand, 70 Ч 85 cm, Mьnchen,
Neue Pinakothek, Land: Deutschland, Stil: Impressionismus

Слайд 59

Lovis Corinth: Walchensee-Panorama, Blick von der Kanzel, 1924, Цl auf Leinwand, 100

Lovis Corinth: Walchensee-Panorama, Blick von der Kanzel, 1924, Цl auf Leinwand, 100
Ч 200 cm, Kцln, Wallraf-Richartz-Museum, Land: Deutschland, Stil: Impressionismus

Слайд 60

Edgar Germain Hilaire Degas: Ballettprobe, 1873, Цl auf Leinwand, 45,8 Ч 61

Edgar Germain Hilaire Degas: Ballettprobe, 1873, Цl auf Leinwand, 45,8 Ч 61
cm, Cambridge (Massachusetts), Fogg Art Museum, Land: Frankreich, Stil: Impressionismus

Слайд 61

Edgar Germain Hilaire Degas: Ballettschule, um 1879-1880, Цl auf Leinwand, 42 Ч

Edgar Germain Hilaire Degas: Ballettschule, um 1879-1880, Цl auf Leinwand, 42 Ч
49 cm, Washington (D.C.), Corcoran Gallery of Art, Land: Frankreich, Stil: Impressionismus

Слайд 62

Edgar Germain Hilaire Degas: Rennpferde: Das Training, 1894, Pastell, 48 Ч 64

Edgar Germain Hilaire Degas: Rennpferde: Das Training, 1894, Pastell, 48 Ч 64
cm, New York, Sammlung W. Webb, Land: Frankreich, Stil: Impressionismus

Слайд 63

Шаблоны страниц сайтов

«Скелет композиции»
в web-дизайне

Шаблоны страниц сайтов «Скелет композиции» в web-дизайне