Сколько стоит дизайн сайта

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

 Если даже не составит труда в фотошопе нарисовать хедер, или логотип, то и в этой ситуации придётся потратить много времени за  компьютером (возможно несколько дней), пока появится  идея. Можно сделать, по-другому найдя отличного дизайнера, который сделает это за 500$, только есть один нюанс, где они найдутся у начинающего верстальщика. Да, но можно сделать еще легче - создать простой цветной фон, соответственно  фону выбрать цвет шрифта, а саму шапку для сайта заказать. Такую работу могут сделать где-то за 40$, и могут еще предложить вставить его в сайт за 10$. Но такой вариант займет время. А если через пару дней дизайн необходимо будет изменить, то это снова потребует финансовых затрат.

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

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

Если действительно необходимо заказать дизайн, то лучше будет обратиться к услугам  фрилансеров, а не в студию. В студии работает не один человек, и быстро могут забыть об этой работе, один человек в свою работу сделает больше вклад  и через месяц сможет узнать и вспомнить работу которую делал и без труда откорректировать, и это более выгодно, и работа  обойдется дешевле. Таких специалистов можно найти на бирже: www.free-lancers.net.

 Подводя итоги:

 - необходимо приобрести книгу, в которой написано, как работать с программой фотошоп,

 - скачать или приобрести непосредственно программу,

 - потом в течение месяца выучить основы, а в процессе изучения возникнут разные идеи, учитывая, что появится больше возможностей,

 - лучше будет скачать пару бесплатных уроков видео, за счет которых можно узнать о технике выполнения некоторых работ, таких роликов много,

 - в итоге всех действий, выучиться самому, создавать дизайн сайта.

 Этот способ обойдется в сто долларов, а потом, хорошо изучив, можно будет хорошо зарабатывать, практически - новая профессия. Есть возможность выбирать варианты и каждый сам его делает.

На эту тему можно прочитать на этом сайте:

http://kapon.com.ua/in_6.php 

Акварельный дизайн сайта в фотошопе

В области графического дизайна такой стиль как "акварель" стал в наше время популярным. Дизайнеры, а также веб-сайты часто применяют этот стиль.

В этом уроке будет возможность узнать, как использовать архивную художественную кисть, а также как создать неповторимый образ фона хедера и еще много интересного. Полагаю можно начать.

Вот, над чем мы будем трудиться:

В первую очередь необходимо нарисовать эскиз того что вы будете делать, дабы после было представление о том где поставить элементы в шаблоне.

Это шаблон будет фиксированной ширины с выравниванием элементов в центре. Необходимо начать проектирование.

Шаг 1 - Настройка шаблона

Скачать PSD шаблон от 960 Grid System (это совсем не обязательно, можно создать документ шириной в 960px и просто нарисовать несколько направляющих), открыть шаблон, сделать новую группу и разместить туда все слои. После нужно сделать больше ширину изображения, дабы видеть, как проект выглядит на других широких разрешениях, для этого необходимо 

 перейти в "Изображение> Размер холста" и увеличить значение ширины до 1420 пикселей.

Шаг 2 - Редактирование текстуры

Нужно найти текстуру бумаги, или  скачать ее. Вот это изображение станет фоном страницы, но его  нужно немного отредактировать. Скопировать текстуру бумаги и вставить ее  в новый документ.

После перейти на Filter-Other- Offset (Фильтр-Другое-Сдвиг) и сдвинуть изображение так, чтоб границы его были в центре. Далее используя инструмент Clone Tool (Инструмент Штамп) убрать границу. Затем после окончания клонирования, выделить всё (Ctrl + A) и копию откорректированного изображения вставить в шаблон.

 Шаг 3 - Настройка Фона

Применяя инструмент Free Transform (свободное трансформирование) трансформировать слой таким образом, чтобы он покрыл примерно пол шаблона. После размещения первого слоя с бумагой дублировать его и поместить  около первого слоя, в итоге будет покрыто фактически 960px области.

После дублировать эти слои два раза, дабы расположить их слева и справа от границы, чтобы была покрыта вся поверхность холста, и тогда объединить эти 4 слоя , потом дублировать их по вертикали и разместить их ниже существующих, делать это столько раз, пока будет покрыто все полотно. И под конец  создать группу "Фон" и поместить в нее все слои текстуры.

Шаг 4 - Фон для хедера

Теперь необходимо добавить фон для хедера. В этом случае я применяю образ горного пейзажа. За действуя Marquee Tool (инструмент выделение) выделить широкую часть изображения и вставить в основной документ и назвать слой примерно так "Пейзаж". Теперь сделать  изображение больше похожим на картину чем на фотографию.

Дублировать слой и нажать Ctrl + I, дабы инвертировать цвета, после перейти в панель цветовой тон/насыщенность (Ctrl + U) и сделать меньше насыщенность до -100, потом поменять  его режим смешивания на Overlay. В самом конце соединить эти слоя "Пейзаж" и "Пейзаж копию" в один.

Шаг 5 – Использование архивной художественной кисти

 Дабы  изображение смотрелось как настоящая картина, необходимо выбрать архивную художественную кисть (Y) в панели инструментов.

Для того чтобы  изображение сделать особенным, в первую очередь, необходимо сделать  мгновенный снимок работы. Для этого перейти  в Windows-History (Окно-История) для просмотра истории группы, и нажать на кнопку "Новый снимок" которая находится внизу.

Потом в панели Options, выбрать кисть (я применяю 36px Chalk tip) и установить режим: нормальный, а непрозрачность:25% , Стиль: Tight Short , Размер: 25px и Tolerance: 0%.

Теперь простыми  мазками превратить изображение в картину. Затем поиграть с настройками и сделать обработку края изображения, дабы закрасить границу.

 

Шаг 6 - Акварельная маска слоя

Создать маску слоя для слоя "Пейзаж", необходимо постараться сделать так, дабы изображение лучше сливалось с фоном. Для этого нужно использовать некоторые акварельные кисти.

Скачать  набор кистей, потому что, они понадобятся на протяжении всего процесса. Взять  кисть, выставить цвет переднего плана черным и нажать несколько раз.

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

 





Шаг 7 - Добавление градиента

Чтобы кодирование было немного сложнее (шутка)  добавить вертикальный градиент (# 96AFCE - # FFFFFF). Режим для слоя с градиентом Linear Burn (линейный затемнитель).

 







Шаг 8 - Контент

Использовать Rounded Rectangle Tool (прямоугольник с округленными углами)(U), радиус - 15px, нарисовать прямоугольник, начав со второй направляющей слева и закончить предпоследней направляющей справа. Fill (заливка) сделать меньше до 35% и прибавить этому слою обводку 1px (# FFFFFF) "Положение: внутри". Этот слой можно назвать  "Контент".

 













Шаг 9 - Дорабатываем блок контент

Дублировать слой "Контент" и поместить копию сверху него. Установить Fill до 100% и скрыть обводку. Затем добавить маску слоя и залить его линейным градиентом (#000000 - #FFFFFF).

 










Шаг 10 - Навигация

Использовать Rounded Rectangle Tool (Прямоугольник с округленными углами)(U), добавить синий (# 3F5060) прямоугольник вверху шаблона, установить его значение Fill 50% и добавить стиль слоя к нему обводка 1px синий (# 3F5060). Взять инструмент Текст, и шрифт, который понравился (в уроке применялся "Futura Std") .

Шаг 11. Затем  слой "Контент" преобразовать в смарт-объект, добавить маску слоя к нему и, применяя черную кисть, скрыть часть блока который находится в верху как указано на картинке.

Шаг 12 - Логотип

Добавить логотип сайта. Применить шрифт  "Futura Std", цвета: # F2F6FC и # E1EDFF.

После взять любую кисть из набора (который был раньше скачан), цвет(# 112C37) и кликнуть один раз на новом слое, поместить  слой под слой с логотипом и поменять режим смешивания на Soft Light (Мягкий свет). Создать новую группу "Лого" и поместите в нее два слоя.

 Шаг 13. Для улучшения визуального воздействия фона, применить больше акварельных мазков различных цветов, расположить их по всей верхней границе над слоем "Пейзаж". Потом поменять  его режим смешивания на Overlay (перекрытие). В самом конце добавить огромное голубое небо (# 51D3D3). В  новом слое кистью нарисовать небо как показано на картинке внизу, и расположить  этот слой над слоем "Пейзаж" и ниже слоя "Контент" После заменить режим смешивания на Overlay (Перекрытие).

 












Шаг 14 – Добавить кисть

Применять реальные жизненные объекты в веб-дизайне весьма модно, можно  добавить реальное изображение кисти к проекту. Открыть изображение, извлечь часть кисти и вставить его в шаблон.

Шаг 15 . Добавляем реалистичную тень

Дублировать слой "кисть", назвать копию "тень" и расположить его под оригиналом, а потом перейти в панель Hue / Saturation (цветовой тон/насыщенность) и поменять  его насыщенность до -100.

А сейчас перейти в Filter-Blur-Gaussian Blur (фильтр-размытие-размытие по гауссу) радиус 4px, после поменять его непрозрачность до 50%.

 Шаг 16. Осветление и Затемнение

Всегда применять инструменты Dodge (осветление) и Burn (затемнение) когда были извлечены и добавлены тени.

 Шаг 17 . Блок "о нас"

Добавить текст, используя шрифт Futura Std для заглавий и Tahoma (11px, резкость: нет) для центрального текста, и серая линия, для разделения (применять инструмент линия, дабы сделать это).

Для краткого текста добавить поле. Нарисовать прямоугольник с округленными углами, радиус 15px и заполнить его зеленым цветом (# 434726), а потом использовать стиль Stroke (обводка) с этим же цветом и поменять его обозначение Fill (Заливка) до 50%. Потом преобразовать слой в смарт-объект и добавит маску слоя до него. Воспользоваться большой, черной, мягкой  кистью, дабы спрятать некоторые части фона, как указано в шаге 11. Под конец, можно добавить второстепенные детали, такие как акварельный знак, находящийся под текстовым слоем  "О нас", как изображено на картинке ниже.

 

















Шаг 18 . Некоторые детали

Можно добавить некоторые стили слоя для логотипа и названия, дабы увеличить контраст между ними и фоном. Добавить слегка тени. Помимо того кисть переместить вперед.

Шаг 19 . Главный Ajax баннер

Бывает нужно показать ь больше одной части информации на сайте, в этом случае нужно будет  создать Ajax слайдер. Добавить крупное изображение в виде активного баннера, разместить его возле восьми колонн направляющих шаблон.

Еще ниже в четыре-пять квадратных миниатюр остальные баннеры. Теперь добавить синий (# 5D8CB6) треугольник (это можно сделать при помощи Polygon Tool, инструмент "многоугольник"), который показывает на активный баннер.

Лучше применять реальные фотографии, а не наполнители изображения.

Шаг 20 . Баннерный текст

Есть библиотеки, которые включают в себя опцию добавления текста на баннере, в таком случае надо использовать шрифты Futura Std для заголовков и Tahoma 11px для содержания. Применяйте  белый прямоугольник, Fill (заливка) 50% и 1px белой обводки для фона.

Шаг 21 . Фон сайдбара

Самая трудная часть процесса уже сделана, но существует еще некоторая важная область слева, такая как боковая панель. Можно начать с простого фона, применяя прямоугольник с округленными углами (радиус 5 пикселей) нарисовать белый прямоугольник. Поменять заливку слоя до 25% и добавить обводку 1px (#FFFFFF).

Шаг 22 . Фон сообщений

Добавить пару акварельных знаков в новый слой, над фоновым  содержанием. Одного из  подходящих  к фону цвет.

Шаг 23 . Сообщения

Теперь добавить сообщение. Применять шрифты Futura Std для заголовков и Tahoma для короткого описания и 1px в высоту строки в виде разделителя. Потом в новом слое нарисовать один синий знак, применяя акварельную кисть для фона комментария, «количество комментариев" написать, применяя Futura и слово "комментарии" с Tahoma.

Шаг 24 - RSS иконка

Настало время, чтобы добавить содержимое в боковой панели, и начать с  использования  кнопки RSS. Загрузить иконки. Открыть значок RSS, потом скопировать  и вставить  его в макет, добавить  RSS  текст: электронная почта, форма подписки, количество читателей и 1px в высоту строки для  разделения.

Шаг 25 - Поиск

Применить в качестве фона акварельные мазки. Сверху фона  нарисовать прямоугольник с неострыми углами (радиус 5 пикселей), цвет: # 1D1D1D. Использовать обводку 1px (#FFFFFF), значение Fill (заливка) сделать меньше до 50%. При помощи инструмента текст и шрифта Tahoma написать слово "поиск". В конце загрузить  Icon Pack и вставить значок лупы для кнопки поиска. Вложить все это в группу с названием "Поиск" или что-то подобное.

Шаг 26 - Объявления

Обычный формат для хорошей рекламы составляет 125 на 125 пикселей, в связи с этим необходимо добавить пару блоков, в боковой панели.

Дабы меньше потратить времени, можно сделать  документ 125 на 125 пикселей с ярким  дизайном заполнителя рекламы, а потом превратить  его в смарт-объект и где-то сохранить.  Его можно применить для большого количества конструкций без потребности редизайна его за каждым разом.

Если располагаете большим количеством времени, то предлагаю список  стандартного размера  объявлений (имеется в виду через объявление Google). Пора рассмотреть работу над PSD с использованием некоторых заполнителей для них.

Шаг 27 . Twitter

Для поклонников Twitter, можно поставить приметную ссылку немного ниже объявлений. Добавить, чу чуть акварельного фона, копировать / вставить значок Twitter из библиотеки (рассматривалось в шаге 24). Ввести текст,"Follow Us" или что-то похожее на это. Вложить все перечисленные слои в группу с названием "Twitter".

Шаг 28 . Вкладки на боковой панели

Применить прямоугольник с закругленными углами , нарисовать прямоугольник белый  с 1px серой (# 979797) обводкой, немного ниже блока "Twitter". Теперь нарисовать три прямоугольника поменьше после них, они будут вкладки. Нужно нарисовать небольшой белый прямоугольник между одной из вкладок, а также фон для активной вкладки.

Шаг 29. Добавление текста  на вкладках

Необходимо добавить названия вкладок, применяя шрифт Futura. После содержания  добавить несколько.

Шаг 30. Футер

Футер получится простым, нужно нарисовать пару случайных акварельных знаков различных  цветов, потом  повторить процесс шагов 8 - 9, сделать несколько  округленных прямоугольников. Под конец, необходимо добавить текст футера, маленький бар навигации и информацию об авторских правах, затем добавить 1px линию, которая используется как разделитель. Можно сделать ь футер, на свое усмотрение.

Больше об этом можно узнать тут:

http://constantin.at.ua/load/grafika_dlja_sajta/sozdaj_akvarelnyj_dizajn_dlja_sajta_v_fotoshop/5-1-0-125

Создание дизайна сайта под разное разрешение

Исходя из статистики разрешений экрана, веб-дизайнеру важно создать  макет сайта и показать заказчику, как он будет иметь вид, используя разные разрешения.

Это очень важно. Если не сделать в начале, то большая вероятность того что после придется потратить больше времени.  Хорошо, если верстальщик профессионал, он может еще на этапе приема работы и изучения ТЗ, сразу сообщить о выявленных проблемах. Представьте себе, какой может возникнуть конфликт с клиентом, если сайт будет сверстан, и только после этого заказчик увидит, что в один экран почти ничего не помещается. Он может сказать, чтобы переделывали. Но за чей счет?

Дизайнер, увлекшись, мог сделать красивым макет страницы,  только в случае если она смотрится целиком. А если взять и примерить ее под часть, которую видно с минимальным разрешением, то получится, что все главное место заняла шапка сайта, а весь контент окажется за пределами видимой части экрана, к которой только есть возможность добраться при помощи скроллинга.

Примите такой совет. Изначально необходимо сделать макет и согласовать его с заказчиком, какой будет иметь вид сайт при минимальном разрешении 1024×768 пикселей и для оптимального разрешения ноутбуков: 1280×1024 и 1280×800 пикселей.

Также необходимо не забыть учесть, что еще часть экрана займет панель задач виндовс, адресная строка браузера, панель закладок и также похожее. Важно помнить и учитывать во время  разработки дизайна сайта.

Дабы рассчитать необходимую область в каждом нужном разрешении, можно использовать  плагин Web Developer (подробнее об этом можно прочесть в таких постах: «Расширения Google Chrome для веб-разработчиков» и «Плагины Firefox для веб-разработчика»).

Ниже, в скобках, отображено значение видимой части экрана некоторых разрешений экрана:

1.  1024×768 (1014×662)

2.  1280×800  (1270×694)

3.  1280×1024 (1270×918)

О разрешении дизайна сайта  больше можно узнать тут:

http://www.fortress-design.com/sozdanie-dizajna-sajta-pod-raznye-razresheniya/

Тестирование дизайна сайта в разных браузерах

Как протестировать сайт на разных браузерах

 Готовый дизайн сайта нужно протестировать  в разных  популярных браузерах, дабы убедиться, что всё выглядит так, как было запланировано. Или, хотя бы, не было реальных глюков и багов, которые приводят к тому, что нету возможности использовать сайт.

   

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

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

 Для установки локальных браузеров требуется время, происходит проблема конфликта версий.  Разные версии Internet Explorer без особых ухищрений не могут существовать друг с другом. К огромному счастью, все-таки существуют способы установить различные версии IE на одном компьютере, а в первой бете IE 8 разработчики сделали, так что можно выбирать каким движком будет, отрисована веб страница (IE 7 или IE 8).

Он лайновые сервисы

 Теперь можно рассмотреть, онлайновые сервисы, которые могут способствовать в тестировании сайтов.

BrowserShots

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

Основной его недостаток в том что  необходимо ждать результат зачастую достаточно  долгое время (бывает что приходится ждать больше часа). При этом, созданные скриншоты будут недоступны через пол часа, поэтому "пойти выпить кофе" не получится и нужно не забыть нажать кнопку "Extend" несколько раз, дабы продлить время доступа на пол часа и получить результат.

 Можно купить платный аккаунт за 15 долларов в месяц, дающий приоритетный доступ.

IE NetRenderer

 Web мастера знают, что больше всего возникает проблем с версткой в IE (в основном, в шестых версиях). Помимо того установка нескольких версий IE на один компьютер без возни  невозможна. Такие проблемы дает возможность частично решить сервис IE NetRenderer.

 Этот сервис умеет делать скриншоты в разных  версиях интернет эксплоуэра (от 5.5 до восьмой беты), работает довольно быстро, а также умеет совмещать скриншоты, созданные в версиях 6 и 7, за счет чего хорошо видно различия. Сервис бесплатный и дополнительно денег пока не просит.

Browsrcamp

Browsrcamp выполняет скриншоты только под браузерами Mac OS X.  Бесплатно можно только протестировать Сафари. Если желаете посмотреть на сайт в других браузерах, то платите денежку ($3 за два дня, $7 за неделю, $19 за месяц и $99 за год использования).

BrowserPool

 Платный сервис BrowserPool, может делать скриншоты во многих ОС и браузерах. Стоимость составляет 29.99 евро в месяц. Можно получить бесплатный тестовый аккаунт.

BROWSERCAM

 Если необходимо часто тестировать работу сайта под разными браузерами, а развертывать локальные версии нету желания или, совсем невозможно, то нужно обратить внимание на BROWSERCAM. Он, тоже, что и выше рассмотренные сервисы, может делать скриншоты под различными браузерами и ОС, но это не главная его возможность, в том, что есть  удаленный доступ (через VNC) к компьютерам с ранее установленными ОС и браузерами, в которых  можно тестировать свой сайт. И не только внешний вид, но и непосредственно полноценную работу. В общем, этот сервис устанавливает, настраивает и поддерживает разные ОС и браузеры. Конечно за деньги.  

 Существует видов тарифных планов, которые стоят от 20 долларов в день (только скриншоты) до 1000 долларов в год (премиум план со всеми возможностями и 10 пользователями). Может показаться что дорого, но админ, который установит и настроит много разных ОС с браузерами обойдется дороже. А еще также  же, надо купить железо и лицензии на платные ОС.

Варианты локальной установки

 В том случае если ни один из перечисленных сервисов не подошел, то нужно установить различные версии браузеров на один или несколько локальных компьютеров.

Установка нескольких версий Internet Explorer на один компьютер

 Вообще это несложно сделать, если знаешь как: скачать специальный дистрибутив с разными версиями IE и следовать  инструкциям.

Использование IETester

IETester — специальный браузер, задача которого тестировать веб-страницы под разными версиями интернет эксплоуэрера.

 Несмотря на статус альфа версии 0.2.2, браузер в действительности работоспособен и очень  подходит для тестирования веб-сайтов.

Настройка конфигураций под виртуальными машинами

 Даже, если были  установлены на  компьютер все необходимые версии браузеров, не смотря на это не получиться протестировать сайты под другими ОС (и под браузерами, которых нет на любимой ОС). Кроме явных способов установки нескольких ОС, параллельно на один компьютер (неудобно вести отладку). Или приобретение специальных компьютеров под разные ОС (дополнительные затраты на железо), есть еще вариант установки ОС, которые работают под управлением виртуальных машин VMWare или Virtual PC.

 Virtual PC бесплатная и немного быстрее, но дает возможность установить только ОС серии  Windows.

 VMWare поддерживает много разных ОС, существует серверная версия, которая весьма практична для средних и крупных фирм, учитывая, что она разрешает запустить виртуальные системы на сервере, и управлять ими с любого компьютера офисной сети, и при этом, не использовать ресурсов локального компьютера. В таком случае, тоже, намного проще поддержка и сопровождение виртуальных систем. Основной недостаток VMWare за него надо платить.

Оригинал статьи размещен на сайте:

http://developerguru.net/post/website-testing-by-various-browsers/

Особенности восприятия цвета посетителями сайта

ВКУС и ЧУВСТВО ЦВЕТА У ВСЕХ РАЗНЫЕ!

Если применяется цветовое изменение, в какой то части страницы сайта (возможно верхней) то это  вызывает разные цветовые ассоциации и влияет на мнения о фирме-владельце сайта.

 Цвет - это ощущение, итог физиологического влияния излучения, которое попадает на сетчатку глаза. В большинстве случаев отношение к цвету имеет только субъективный характер, но многие  посетители сайта связывают цвет с определённым понятием и образом.

Проанализировать процесс восприятия цвета намного сложнее, чем, например, эмоциональное или психологическое состояние человека.

Границы, которые могут предписываться определённым цветам и степени их воздействия на окружающих, очень размыты. Не смотря на это, существуют конкретные закономерности восприятия цвета дизайна сайта посетителями, которые основаны на научных и экспериментальных исследованиях.

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

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

По весу цвета распределяются так:

Различные цвета, которые используют равную площадь и у них одинаковая яркость и насыщенность, в плане восприятия их пользователем, имеют различный уровень влияния.

Цвет оказывает влияние, на нас изменяя наше представление о реальных размерах предметов, цвета которые выглядят тяжелыми, уменьшают размеры. Из одинаковых по размеру фигур самой маленькой кажется красная, потом синяя, она побольше и самой большой - белая. Пример: в трёхцветном французском флаге, который состоит из трёх одинаково великих по ширине полос (синяя, белая и красная), меняют соотношение в пропорции 33:30:37 при установки его на корабли, дабы  на расстоянии полосы выглядели равными.

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

Многим  посетителям сайта нравятся яркие или глубокие тона в отличие от сайта с тёмными тонами.

Посетители часто ассоциируют с  цветовой палитрой сайта свое отношение к  фирме. От выбора палитры сайта во многом может сложиться предварительное отношение к фирме, а также к товарам и услугам, которые предлагаются:

 

                       

               

           

               

               

               

               

В результате исследований выяснилось, что во время рассмотрения различных образцов одиночных цветов с различной яркостью на белом или нейтральном сером фоне, люди, более предпочитают синие тона.

Менее чем другие  нравится зеленовато-желтый цвет.

Несмотря на разные  цвета в основном предпочитают светлые фоны.

Больше люди интересуются резко контрастными глубокими цветами, и теми цветами которые более насыщены и яркие.

      

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

С концентрирование активного цвета в правом верхнем углу страницы сайта приводит в активность композицию, при этом все увеличивается в размере. А концентрация в левом нижнем углу страницы сайта придает иллюзию пассивности и зрительное сжатие, движение назад.

Самую большую разницу имеет слияние черного цвета на жёлтом фоне.  Ухудшение контрастности расположено в таком сочетании: желтый на черном, белый на синем, чёрный на оранжевом, оранжевый на чёрном, чёрный на белом, белый на красном, красный на жёлтом, зелёный на белом, оранжевый на белом, красный на зелёном.

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

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

После образ

После образ это остаточное явление, которое возникает после рассмотрения какого–либо объекта при строго фиксированном взгляде.

Очень яркие объекты (Солнце, пламя огня, вспышка света и т.п.) вызывают достаточно стойкие после - образы.

После образ можно заметить на однородном фоне при устойчивой зрительной фиксации точки, которая неподвижна. После каждого перемещения взгляда после-образ пропадает, а если снова при зрительной фиксации появляется, уже более слабый. Цвет после - образа является  дополнительным к цвету объекта.

Появление в сознании человека зрительного образа происходит с некоторой задержкой в отношении момента влияния света на сетчатую оболочку глаза. Такое время запаздывания называют временем ощущения, и оно колеблется, в пределах от 0,1 до 0,25 сек. Это зависит от яркости объекта. Такая особенность работы глаза человека лежит, в основе непрерывного,  восприятия дискретных быстро чередующихся образов: кино и телевидение.

При последовательной быстро чередующейся смене кадров последовательный образ, появляющийся в мозгу зрителя, не в состоянии заметить затемнение экрана, которое возникает  при смене соседних кадров на киноленте.

Глаз человека также не может уловить "смену кадров" ("дрожание экрана", "мелькание экрана" и т.д.) монитора компьютера, если частота свыше 100 Гц.

Чем сильнее яркость предмета, тем меньше составляет время ощущения. Зрительное ощущение тоже исчезает не сразу после окончания воздействия света.

Зрительное ощущение, остающееся после окончания светового воздействия, называется последовательным образом. 

 

Таблица цветов после - образа

При воздействии на глаз периодической смены света и темноты, зрительное восприятие подобного раздражения имеет зависимость от частоты смены света и темноты. При очень большой частоте, глаз будет воспринимать, свет постоянной яркости. Число прерываний света в секунду, во время которого достигается чувство  неизменной яркости, имеет название  критическая частота прерывания.

Именно такие особенности (инерция зрения) устройства и работы человеческого глаза накладывают конкретное требование к разработке фирменного стиля дизайна сайта, который предназначен для успешного ведения того или иного бизнеса.

Проще добиться воздействия (цветовой ассоциации) на посетителя сайта, используя  меньше цветов при оформлении дизайна сайта.  

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

В профессиональном веб-дизайне, более предпочитаются плавные градиентные рисунки и фоны, в  сравнении с мозаичными фонами и контрастными рисунками.

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

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

Часто посетители сайта имеют одинаковую реакцию на цвет. В первую очередь это  красный, желтый, зеленый и синий цвета. Из перечисленных цветов посетители больше предпочитают синий цвет.

Больше о восприятии цвета можно узнать из этого сайта:

http://www.st-elph.ru/vy-mozhete-sami/vospriyatie-sajta.html

Что такое резиновый дизайн сайта

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

Если применять размеры только в пикселях, то сайт будет "жёстким". Естественно, и в этом случае есть возможность динамического изменения размеров элементов разметки за счет JavaScript, например, по событию window.onResize, но более всего гибко дает возможность менять размеры задействование процентных величин. Сайт, который применяет процентные соотношения размеров width и height вложенных контейнеров относительно контейнера - приёмника имеет название "резиновый".

Преимущественно для создания резинового сайта используется процентная величина – а именно, размер таблиц указывается не в пикселях, а в процентах. При этом, если задать ширину в процентах, то тогда размер сайта будет зависеть от размера экрана. Но нужно будет всё-таки его  подгонять, как  необходимо будет, используя редактирование параметров CSS. Дабы ширина сайта была на весь экран то надо писать 100%, а если только на половину - 50%.

Пользователь не будет знать ширину страницы на экране разработчика. Она зависит от свойств монитора, размеров открытого окна и разрешения экрана.

В общем "резиновая" идея, получается, самая правильная для сайта в Интернете. Она дает возможность браузеру самостоятельно распределять элементы, на экране  учитывая ширину текущего окна, и не приводит к демонстрации горизонтальной линейки протяжки и в узких окнах.

Преимущества резинового сайта.

Главным преимуществом является динамическое изменение размеров сайта. Пропорции элементов разметки не меняются для любого разрешении монитора, и любых манипуляций пользователя используя окно браузера. Дизайнерское решение фактически всегда очень сильно проигрывает, если сайт выставить одновременно в виде таблицы с текстом и графикой, позиционированной по центру или левому краю окна, одновременно  как справа или слева остаются большие поля. Такое происходит, если сайт построен для какого-то "оптимального" разрешения монитора пользователя (возможно 800х600, или 1024х768), а у пользователя установлено большее разрешение. Если во время построения "жесткого" сайта сориентировать его на какое-то "максимальное" разрешение монитора пользователя (например, 1280х1024) то тогда при более низких разрешениях сайт будет иметь горизонтальную полосу прокрутки и "потеряет" часть изображения за правым полем что принципе сведёт на нет все усилия дизайнера.

Используя резиновый сайт такие неприятности фактически исключены. Сайт смотрится одинаково  при любом разрешении монитора пользователя.

Недостатки "резинового" дизайна сайта.

Естественно, применение "резиновых" сайтов имеет и свои минусы. Главной трудностью является то, что контейнер - приёмник не всегда может точно поддерживать заданный размер. Это как раз зависит непосредственно от размера контентного наполнения, включённого в контейнер. Например: нужно разместить рисунок размером 100х80px в ячейку таблицы, у которой ширина выставлена как 5% от общей ширины таблицы, составляющей 100% от ширины клиентской области окна.

Если учесть, что у пользователя разрешение монитора 640х480. При простом подсчёте выясняется, что 5% составляет не больше 32px (практически намного меньше, только это зависит от размеров клиентской области окна браузера и от размеров полей самой страницы, определяемой  в теге "BODY" "/BODY"). Но ячейка будет иметь ширину не менее 100рх, учитывая, что по правилам HTML изображение в ячейке не может сжиматься, а наоборот, сама ячейка увеличивается до размеров изображения.

При этом некоторые элементы, которые находятся в других ячейках, этой же таблицы могут быть скрытыми за правой границей окна (если это рисунки). И появится таже самая горизонтальная полоса прокрутки, или возможно  в других ячейках будет находиться текст, то он может оказаться, очень  сжат по ширине и вытянут по высоте, что ни коем образом не прибавляет привлекательности дизайну и делает хуже юзабилити сайта, в общем. На решение этой проблемы во время  создания "резинового" сайта затрачивается значительно много времени. Примерно создание "резинового" сайта требует в 2-2,5 раза больше времени, чем сделать такой же сайт с "жёстким" дизайном.

Если вам необходимо создать резиновый сайт, основываясь на контейнеры "DIV" или "SPAN", а не на основе таблицы, то тогда нужно больше времени уделить размерам контейнеров и их правильному позиционированию, в противном случае сайт окажется вообще нечитаемым из-за наложения слоёв друг на друга.

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

Основные правила создания резинового сайта.

 Перед тем как делать резиновый сайт, необходимо определить какое минимальное разрешение экрана у посетителей. Обычно по статистике многие юзеры применяют разрешение экрана 1280x1024. Второе место занимает 1024x768,  возможно лучше ровняться на это разрешение. Используя поиск можно самому узнать статистику.

Нужно разработать дизайн сайта, под минимальное разрешение экрана. После того как решите на счет минимального разрешения экрана, стоит разработать дизайн для этой ширины. Важно отметить, что при использовании  разрешения 1024x768,  браузер вмещает только 1000 пикселей. Исходя из этого, необходимо делать все графические элементы конкретно под эту ширину, дабы  сайт имел хороший вид при использовании минимального разрешения экрана.

В таблице для ячеек применяйте в качестве единиц измерения пиксели, по мимо ячеек с информацией сайта. Нужно задать фиксированный размер для всех ячеек, кроме ячейки с содержимым сайта. Необходимо поставить 100% ширину для этой ячейке или не задавать ее вообще.

Когда будет готов сайт его нужно проверить по всем разрешениям экрана.

Эта статья более раскрыта на этом сайте:

http://seoklub.ru/kak_sdelat_rezinovyi_sait.html