Характеристика дизайна веб-ресурса

Размещено на http://www.allbest.ru/

Введение

Условия эффективного использования цвета в создании веб-сайта.
Для начала следует отметить, что в русском языке понятие «веб-сайт» не совсем правильное. Лучше говорить просто «сайт». В английском языке используется уточнение «веб», так как слово «сайт» в их языке может обозначать место, участок, площадка, местоположение, местонахождение, строительная площадка, положение. В русском же языке это слово заимствованное и однозначно обозначает совокупность электронных документов (файлов) частного лица или организации в компьютерной сети, объединённая под одним адресом (доменным именем или IP-адресом).



1. Что такое веб-дизайн

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

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

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

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

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



2. Формулировка задачи веб-дизайна

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

Этапы проектирования:

2.1 Дизайн основной и типовых страниц сайта

Начинается работа с создания дизайна, обычно в графическом редакторе. Дизайнер создает один или несколько вариантов дизайна, в соответствии с техническим заданием. При этом отдельно создаётся дизайн главной страницы, и дизайны типовых страниц (например: статьи, новости, каталог продукции). Собственно «дизайн страницы» представляет собой графический файл, слоеный рисунок, состоящий из наиболее мелких картинок-слоев элементов общего рисунка. При этом дизайнер должен учитывать ограничения стандартов html (не создавать дизайн, который затем не сможет быть реализован стандартными средствами html). Исключение составляет Flash-дизайн. Количество эскизов и порядок их предоставления оговаривается с проект-менеджером. Так же менеджер проекта осуществляет контроль сроков. В больших веб-студиях в процессе участвует арт-директор, который контролирует качество графики. Этап также заканчивается утверждением эскиза заказчиком.

2.2 HTML-верстка

Утверждённый дизайн передаётся html-верстальщику, который «нарезает» графическую картинку на отдельные рисунки, из которых впоследствии складывает html-страницу. В результате создаётся код, который можно просматривать с помощью браузера. А типовые страницы впоследствии будут использоваться как шаблоны. В небольших студиях, html-кодированием занимается дизайнер, создавший макет сайта.

2.3 Программирование

Далее готовые HTML-файлы передают программисту. Программирование сайта может осуществляться как «с нуля», так и на основе CMS -- системы управления сайтом. Веб-разработчики часто называют CMS «движком». В случае с CMS надо сказать, что сама «CMS» в некотором смысле это готовый сайт состоящий из заменяемых частей. «Программист» -- в данном случае правильно будет назвать его просто специалистом по CMS, должен заменить стандартный шаблон, поставлявшийся с CMS, на оригинальный шаблон. Этот оригинальный шаблон он и должен создать на основе исходного «веб-дизайна». При программировании сайта специалисту назначаются контрольные точки сроков.

2.4 Завершающим этапом разработки сайта под ключ является конечно же тестирование

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

2.5 Размещение сайта в Интернет

Файлы сайта размещают на сервере провайдера и производят нужные настройки. На этом этапе сайт пока закрыт для посетителей.

2.6 Наполнение контентом и публикация

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

2.7 Внутренняя SEO-оптимизация

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



2.8 Внешняя SEO-оптимизация

Сводится, как правило, к построению структуры входящих ссылок. Это собственно и есть раскрутка. К разработке сайта внешняя SEO-оптимизация не имеет отношения. Поскольку SEO-оптимизация это разновидность шаманизма -- она как магия, классифицируется на «белую» и «черную» -такую, после которой сайт за две недели попадает в топ, а потом в бан. Настоящая белая SEO оптимизация это трудоемкий и долгий процесс, стоимость которого может в несколько раз превышать расходы на создание сайта.

2.9 Сдача проекта

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



3. Процесс и результат

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

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

Конечным продуктом работы веб-дизайнера является дизайн-макет: картинка, представляющая предполагаемый будущий внешний вид страниц сайта, размером приблизительно 960х640 px (пикселей) -- размер, соответствующий среднему стандарту, связанный с необходимостью дальнейшей привязки к разным разрешениям экрана монитора. Картинка эта является многослойной, где, на усмотрение дизайнера, почти каждая деталь -- отдельный слой, приложенный к другим слоям-картинкам, за счёт чего может легко выполняться доработка, замена, перекомпоновку и другие задачи. В зависимости от идеи и целей макет может включать фотографии, сложные коллажи, иллюстрации, текстовые слои, уникальные иконки.

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

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



4. Выбор правильного сочетания цветов

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



5. Цветовая теория: основные принципы. Умение сочетать цвета

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

Рассмотрим цветовой круг.

Немного истории: цветовой круг изобрел Исаак Ньютон. Обосновав теорию света и цветов в 1666г. Именно она легла в основу становления и развития современной оптики, малой и составной частью которой является web-дизайн. Ньютон при помощи трёхгранной стеклянной призмы разложил белый свет на семь цветов (в спектр), тем самым доказав его сложность (явление дисперсии), открыл хроматическую аберрацию.

Цветовой круг является непременным атрибутом многих дизайнеров и художников по всему миру. Это идеальное доказательства теории, что гениальное всегда просто. Круг позволяет выбрать цвета, которые гармонировали бы вместе. Он состоит из 6 основных цветов: красный, оранжевый, желтый, зеленый, синий, фиолетовый и дополнительных цветов.

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

Основные цвета

Есть три основных цвета: красный (# ff0000 в HTML или # F00 в CSS), желтый (# FFFF00 в HTML или # ff0 в CSS) и голубой (# 0000FF в HTML или # 00f в CSS). Нельзя их получить путем смешивания других цветов. Дополнительные цвета могут быть сформированы путем объединения этих трех цветов.

Составные цвета

Есть также три основных: оранжевый (# ff9900 в HTML или # F90 в CSS), зеленый (# 00FF00 в HTML или # 0f0 в CSS) и фиолетовый (# FF00FF в HTML или # f0f в CSS). Вы можете получить их путем смешивания красного и желтого(оранжевого), желтого и синего (зеленый) и синего и красного (фиолетовый).

Третичные цвета

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

Дополнительные цвета

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

Аналогичные цвета

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



6. Цвета в разных культурах: символизм

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

Давайте выясним, какое значение имеют цвета в различных культурах:

Красный

Китай: цвет невесты, удачи, торжества

Индия: чистота

Южная Африка: траурные цвета

Восток: радость (в сочетании с белым)

Запад: возбуждение, любовь, страсть

США: рождество (с зеленым), день святого Валентина (с белым)

Иврит: жертва, грех

Япония: жизнь

Христианство: жертва, страсть, любовь

Фэн-шуй: Янь, огонь, удача, уважение, защита, живучесть, деньги, признание

Голубой

Европа: успокоение

Иран: траур, цвет неба и духовность

Китай: бессмертие

Индуизм: цвет Кришны

Иудаизм: святость

Христианство: цвет Христа

Католицизм: цвета одежды Марии

Ближний Восток: защита

В мире: цвет безопасности

Фэн-шуй: Инь, вода, спокойствие, любовь, исцеление, релаксация, доверие, приключения

Запад: печаль, депрессия

Желтый

Европа: счастье, надежда, радость, трусость в опасностях, слабость

Азия: цвет имперского

Египет: траур

Япония: мужество

Индия: торговцы

Буддизм: мудрость

Фэн-шуй: Янь, Земля, благоприятный, солнечные лучи, тепло, движение

Оранжевый

Европа: осень, урожай, творчество

Ирландия: протестанты (религиозные)

США: Хэллоуин (с черным), дешевые товары

Индуизм: шафран (персиковый оранжевый) священный цвет

Фэн-шуй: Янь, Земля, цели, усиливает концентрацию

Коричневый

Колумбия: препятствие продажам

Австралийские аборигены: цвета земли, торжественное охра

Фэн-шуй: Янь, Земля, промышленность

Зеленый

Япония: жизнь

Ислам: надежда, добродетель

Ирландия: символ всей страны

Европа / США: весна, новое рождение, День Святого Патрика, Рождество (с красным)

США: деньги

Индия: Ислам

Фэн-шуй: Инь, дерево, исцеление, здоровье, успокаивающее

Фиолетовый

Таиланд: траур (вдовы)

Католицизм: смерть, траур, распятие

Фэн-шуй: Инь, цвет физического и психического исцеления

Белый

Европа: брак, ангелы, врачи, больница, мир

Япония: траур, белая гвоздика символизирует смерть

Китай: траур, смерть,

Индия: несчастья

Восток: похороны

Фэн-шуй: Янь, металл, смерть, призраки, траур, равновесие, уверенность

Черный

Европа: траур, похороны, смерть, бунт, спокойствие

Таиланд: несчастье, зло

Иудаизм: несчастье, зло

Австралийские аборигены: цвет людей

Фэн-шуй: Инь, вода, деньги, успех в карьере, доход, стабильность, эмоциональная защита, сила



7. Значение цветов какие чувства может вызвать каждый цвет

Красный. В основном связан с азартом, смелостью и желанием. Красный цвет любви, силы, энергии, лидерства и волнения. Это сильный цвет, и вы должны знать о некоторых его негативных эмоциях: опасность, тревога.

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

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

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

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

Зеленый. Цвет гармонии, природы, исцеления, жизни, питания и здоровья. Кроме того, часто связан с деньгами.

Коричневый. Цвет релаксации и уверенности. Коричневый означает приземленность, природу, долговечность, комфорт, надежность.

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

Розовый. Выражает нежность, романтичность, женственность, пассивность, привязанность, воспитание, слабость.

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

Белый связан с чистотой, простотой, свежестью, добротой, невинностью.

Выбрать основной цвет для сайта -- не слишком сложно, но вот с дополнительными цветами или альтернативами иногда приходится потрудиться. Веб-инструменты для подбора цвета способны значительно упростить задачу. Они помогут подобрать подходящий цвет или, при необходимости, предложат целую палитру. AdobeKuler, Colr.org, ColorSchemer и другие инструменты в GoogleModules по тегам «rgb», «web colors».



8. Цветовые теории

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

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

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

Современный дизайнер не испытывает затруднений с нахождением того или иного цвета -- доступны все. Именно тут возникает вопрос: какие выбрать? Многие специально формализуют доступные им цветовые модели математически, беря за основу некоторые цифровые показатели. Скажем, черно-белую шкалу (256 градаций) можно разбить на 20 градаций, при этом у зрителя остается впечатление «полной» гаммы.

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



9. Ошибки

В мире веб дизайнеров одной из главных ошибок при проектировании дизайна сайта является некорректное использование цветовой гаммы. Плохо подобранная цветовая палитра свидетельствует о непрофессиональности веб-дизайнера.

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

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

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



Выводы

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

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

Можно найти дополнительные цветовые схемы приобщаясь чаще к природе.

Размещено на Allbest.ru

...