Веб дизайн html

[notificationbox]Нашел эту статью совершенно случайно. Выкладываю здесь для себя, чтобы не потерять в последствии. Автору большое спасибо. [/notificationbox]

Похоже протесты дизайнеров против скучных двух -трех-колоночных сайтов в стандартных бело-синих тонах наконец были услышаны. Все чаще заказчики отдают предпочтение авторскому минималистическому дизайну с оригинальной типографикой и контрастной цветовой гаммой. Однако хороший веб дизайн html строится не только на грамотных и уникальных художественных элементах, но и немыслим без применения последних технологий JQ, HTML5 и CSS3. О том, что будет в тренде на следующий год, как правильно подбирать цвета для сайта и где найти нужные скрипты мы и поговорим в этой статье.

Сегодня веб дизайн переживает переходный этап. Увлечение «слишком дизайнерскими» («over-designed») сайтами, с грязноватым оттенком контрастных гранжевых текстур, «прошитыми» флажками и нестандартными формами блоков, похоже, сходит на нет.

На смену буйству красок и неожиданным дизайнерским решениям приходит предсказуемая (плиточная) разметка веб страниц, простая типографика, легкая, едва уловимая текстура на светлом фоне и яркие, четкие и контрастные фотографии в блоках с простыми (чаще прямоугольными) формами. Новый девиз — максимальная простота во всем, чтобы ничего не отвлекало посетителя от просмотра контента и максимально облегчало поиск и восприятие нужной информации.

Большие размеры иллюстраций и блоков на веб странице, пришедшие на смену компактной двух и трех-колоночной верстке, потребовали более аккуратного отношения к колористике. На больших пространствах любые ошибки видны сильнее.

Как и где подобрать цветовую палитру для сайта

Сегодня чаще всего используются цвета: зеленый (цвет богатства по фен-шуй — восточное филосовское течение, которым многие увлечены), красный (оранжевый, желтый), коричневый и бежевый (кремовый). По-прежнему актуальны классические цвета — белый и черный (и его оттенки). Синий же цвет современный веб дизайн html наоборот перевел из основных цветов в разряд цветовых акцентов (флажки, плашки и т.д.).

Веб дизайнресурсы для подбора цвета

  1. Самостоятельный подбор цвета:kuler.Здесь цвета подбираются автоматически под заданный основной цвет. Но подбирает пусть и совершенная, но все же машина, поэтому не стоит во всех случаях полагаться на этот ресурс.
  2. Когда я начинаю новый проект, то прежде всего заглядываю наcolourloversв раздел web palettes где можно найти уже готовые палитры, подобранные дизайнерами. Рекомендую этот ресурс в закладки.
  3. Если ничего не подходит и идей совсем никаких нет можно зайтисюдаи просто взять цвета с понравившегося сайта или посмотреть здесь готовые подборки цветов. В конце-концов, как сказал ведущий лого дизайнер Кен Кейто на прошедшей в Москве конференции «идеи надо уметь грамотно заимствовать»:).

Правильное сочетание цветов

Важно не только подобрать модные и красивые цвета, но и уметь грамотно их сочетать на веб-странице. Для себя я выбрала «правило трех цветов» цветового круга.

Есть два способа, как сделать хороший веб дизайн html, пользуясь этим правилом:

Triadic. Использует три цветовых семейства.
Выбирается один доминантный цвет, в нашем случае зеленый, один вспомогательный цвет (из другого семейства цветов!) — оранжевый и цветовой акцент — синий.

 

Analogous. Использует два цветовых семейства, мой любимый способ. Выбирается один доминантный цвет, в данном случае коричневый и его оттенки, вспомогательный цвет (из того же семейства цветов!) — желтый, и синий из другого семейства цветов в качестве цветового акцента.

Фоновый слайдер

Cохраняется интерес к сайтам, где используется фоновый слайдер.

Скрипты для создания full screen слайдера

Fullscreen Video Slideshow with BigVideo.js

Fullscreen Slit Slider with jQuery and CSS3

Responsive Horizontal Layout

Fullscreen Pageflip Layout

 

Вот, пожалуй, и все, что хотелось сказать о настоящем и будущем веб дизайна. Если вы видите веб дизайн по другому пишите на olga1011@yandex.ru

[infobox]Источник:
http://www.luckyframe74.com/articles/html5/web-disain.html [/infobox]