SlideShare a Scribd company logo
1 of 24
Download to read offline
Веб-дизайн
4.5 Web Design colors
Содержание:
• Веб дизайн
• Дизайн сайта по шагам
• Цвета в Веб Дизайне
Что такое Веб-дизайн?
Техническое
задание
Структурирование
информации
Вебмастеринг
Графическое
оформление
Верстка
1. Рисуем дизайн на бумаге
На данном этапе надо нарисовать сайт
по Технической Задаче. Показать
картинку как вы видите сайт в будущем.
Именно от этого шага будет зависеть
конечный результат.
2. Базовая разметка
Данный этап рисует уже будущий
дизайн сайта. Основная базовая
разметка уже сделана, не нужно уделять
время мелким деталям экрана,
3. Проработка всех элементов
На данном этапе идет проработка всех элементов сайта.
• Добавление картинки
• Стили слоя
• Выравнивание текста
Делаем всё чтобы сайт был в конечном варианте.
4. Подбор шрифтов
Подборка шрифтов под дизайн.
5. Подбор цветов
Добавление цветов к
• иконкам
• ссылкам
• различным другим блокам
6. Интерактивные элементы
Интерактивные элементы должны
показать
• как будут взаимодействовать
элементы,
• как будут взаимодействовать
элементы при наведении.
• при нажатии.
Цвет в Веб дизайне
Цвет определяет эмоциональную реакцию
пользователя на сайт, даже если сам
человек этого не осознаёт. Какие цвета
использовались для фона и разных
элементов сайта, чтобы вызвать те или иные
ощущения, и как правило сочетать цвета в
веб дизайне.
Резонанс
Каждый цвет вызывает
определённое настроение.
Яркие тёплые цвета (красный,
оранжевый, желтый) наполняют
человека энергией, пробуждают
его, а холодные тёмные оттенки
(зелёный, голубой, фиолетовый),
наоборот, расслабляют и
успокаивают
«Мүмкүнчүлүктөрү чектелген адамдарга карата IT окутуу» проекти Европалык Союзу тарыбынан
финансылоо болгон.
Бул документин мазмуну толугу менен IT Академиянын жоопкерчилиги жана эч кандай жолунда
Европалык Комиссиянын көз карашын көргөзбөйт.
Проект «IT тренинг для людей с ограниченными возможностями» финансирован Европейским Союзом.
Содержание этого документа полностью является ответственностью IT Academy и никак не отражает
взгляды Европейской Комиссии.
The project “Promotion of IT training for people with disabilities” is financed by the European Union.
The content of this document is the sole responsibility of IT Academy and can in no way be taken to reflect the views of
the European Commission.
#programmingwithoutbarriers
#cheksizprogramming

More Related Content

More from IT Academy Project EU

JS switch. events (onclick, onfocus, onblur)
JS switch. events (onclick, onfocus, onblur)JS switch. events (onclick, onfocus, onblur)
JS switch. events (onclick, onfocus, onblur)IT Academy Project EU
 
Препроцессор LESS. Компилятор Winless
Препроцессор LESS. Компилятор WinlessПрепроцессор LESS. Компилятор Winless
Препроцессор LESS. Компилятор WinlessIT Academy Project EU
 
Использование Google Fonts
Использование Google FontsИспользование Google Fonts
Использование Google FontsIT Academy Project EU
 
Создаем границы для элементов в CSS
Создаем границы для элементов в CSSСоздаем границы для элементов в CSS
Создаем границы для элементов в CSSIT Academy Project EU
 
Работа с графикой (GIMP)
Работа с графикой (GIMP)Работа с графикой (GIMP)
Работа с графикой (GIMP)IT Academy Project EU
 
3.5.3 Свойства границы в CSS
3.5.3 Свойства границы в CSS3.5.3 Свойства границы в CSS
3.5.3 Свойства границы в CSSIT Academy Project EU
 
3.1.5 Основные селекторы
3.1.5 Основные селекторы3.1.5 Основные селекторы
3.1.5 Основные селекторыIT Academy Project EU
 
3.2.1 CSS - Свойсва шрифта
3.2.1 CSS - Свойсва шрифта3.2.1 CSS - Свойсва шрифта
3.2.1 CSS - Свойсва шрифтаIT Academy Project EU
 

More from IT Academy Project EU (20)

Переменные PHP.pdf
Переменные PHP.pdfПеременные PHP.pdf
Переменные PHP.pdf
 
Js. alert, prompt, confirm
Js. alert, prompt, confirmJs. alert, prompt, confirm
Js. alert, prompt, confirm
 
Введение в DOM
Введение в DOMВведение в DOM
Введение в DOM
 
JS switch. events (onclick, onfocus, onblur)
JS switch. events (onclick, onfocus, onblur)JS switch. events (onclick, onfocus, onblur)
JS switch. events (onclick, onfocus, onblur)
 
Препроцессор SASS
Препроцессор SASSПрепроцессор SASS
Препроцессор SASS
 
Препроцессор LESS. Компилятор Winless
Препроцессор LESS. Компилятор WinlessПрепроцессор LESS. Компилятор Winless
Препроцессор LESS. Компилятор Winless
 
Bootstrap
BootstrapBootstrap
Bootstrap
 
Что такое framework?
Что такое framework?Что такое framework?
Что такое framework?
 
1.1.1 Text Alternatives
1.1.1 Text Alternatives1.1.1 Text Alternatives
1.1.1 Text Alternatives
 
Использование Google Fonts
Использование Google FontsИспользование Google Fonts
Использование Google Fonts
 
Создаем границы для элементов в CSS
Создаем границы для элементов в CSSСоздаем границы для элементов в CSS
Создаем границы для элементов в CSS
 
Работа с графикой (GIMP)
Работа с графикой (GIMP)Работа с графикой (GIMP)
Работа с графикой (GIMP)
 
3.5.5 Свойства Margin
3.5.5 Свойства Margin3.5.5 Свойства Margin
3.5.5 Свойства Margin
 
3.5.4 Свойства Padding
3.5.4 Свойства Padding3.5.4 Свойства Padding
3.5.4 Свойства Padding
 
3.5.3 Свойства границы в CSS
3.5.3 Свойства границы в CSS3.5.3 Свойства границы в CSS
3.5.3 Свойства границы в CSS
 
3.1 BASICS CSS
3.1 BASICS CSS3.1 BASICS CSS
3.1 BASICS CSS
 
CSS - Цвета
CSS - ЦветаCSS - Цвета
CSS - Цвета
 
3.1.5 Основные селекторы
3.1.5 Основные селекторы3.1.5 Основные селекторы
3.1.5 Основные селекторы
 
3.2.1 CSS - Свойсва шрифта
3.2.1 CSS - Свойсва шрифта3.2.1 CSS - Свойсва шрифта
3.2.1 CSS - Свойсва шрифта
 
2.4.7 HTML - Формы
2.4.7 HTML - Формы2.4.7 HTML - Формы
2.4.7 HTML - Формы
 

4.5 Веб-дизайн

  • 2. Содержание: • Веб дизайн • Дизайн сайта по шагам • Цвета в Веб Дизайне
  • 4. 1. Рисуем дизайн на бумаге На данном этапе надо нарисовать сайт по Технической Задаче. Показать картинку как вы видите сайт в будущем. Именно от этого шага будет зависеть конечный результат.
  • 5. 2. Базовая разметка Данный этап рисует уже будущий дизайн сайта. Основная базовая разметка уже сделана, не нужно уделять время мелким деталям экрана,
  • 6. 3. Проработка всех элементов На данном этапе идет проработка всех элементов сайта. • Добавление картинки • Стили слоя • Выравнивание текста Делаем всё чтобы сайт был в конечном варианте.
  • 7. 4. Подбор шрифтов Подборка шрифтов под дизайн.
  • 8. 5. Подбор цветов Добавление цветов к • иконкам • ссылкам • различным другим блокам
  • 9. 6. Интерактивные элементы Интерактивные элементы должны показать • как будут взаимодействовать элементы, • как будут взаимодействовать элементы при наведении. • при нажатии.
  • 10. Цвет в Веб дизайне Цвет определяет эмоциональную реакцию пользователя на сайт, даже если сам человек этого не осознаёт. Какие цвета использовались для фона и разных элементов сайта, чтобы вызвать те или иные ощущения, и как правило сочетать цвета в веб дизайне.
  • 11. Резонанс Каждый цвет вызывает определённое настроение. Яркие тёплые цвета (красный, оранжевый, желтый) наполняют человека энергией, пробуждают его, а холодные тёмные оттенки (зелёный, голубой, фиолетовый), наоборот, расслабляют и успокаивают
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24. «Мүмкүнчүлүктөрү чектелген адамдарга карата IT окутуу» проекти Европалык Союзу тарыбынан финансылоо болгон. Бул документин мазмуну толугу менен IT Академиянын жоопкерчилиги жана эч кандай жолунда Европалык Комиссиянын көз карашын көргөзбөйт. Проект «IT тренинг для людей с ограниченными возможностями» финансирован Европейским Союзом. Содержание этого документа полностью является ответственностью IT Academy и никак не отражает взгляды Европейской Комиссии. The project “Promotion of IT training for people with disabilities” is financed by the European Union. The content of this document is the sole responsibility of IT Academy and can in no way be taken to reflect the views of the European Commission. #programmingwithoutbarriers #cheksizprogramming