Кредитные карты и карты рассрочки по онлайн Мгновенные займы на карту или наличными Динамика курса криптовалют Кредитный калькулятор онлайн

Веб-дизайн

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

В данной статье мы подробно рассмотрим "дизайн для монитора", а именно веб-дизайн, основы которого покоятся на следующих китах:


1. "Юзабилити" (функциональность)

Любой интерфейс должен быть простым и понятным, а веб-дизайн красивым - будь то телефон или вебсайт и выполнять свои прямые функции - доставлять посетителя туда, куда он хочет и не мешать восприятию основной информации. Чтобы посетитель не заблудился, система навигации по сайту должна быть тщательно продумана и максимально упрощена. Всегда оставляйте для посетителя возможность перехода на каждую страничку публикации. Принцип: максимум - 2 клика мышкой и ты в нужном месте. Обычно принято делать карту сайта и форму поиска для больших сайтов, содержащих большое количество информации. Не забывайте, что любой сайт это реклама! - (даже если Вы рекламируете себя или свою собаку). А реклама должна работать!

2. Компоновка (композиция)

Для начала вам нужна концепция устройства сайта. Концепция и воплощение сайта зависит от его предназначения:

информационный (СМИ)
сайт-визитка (небольшая компания)
корпоративный сайт (много разделов, несколько языков)
интернет-магазин (интернет-коммерция)
специфический (развлекательный, рекламный)
Какой веб-дизайн предпочесть "резиновый" или "жесткий" решать Вам. Резиновый (с размером ячеек заданных в процентах) более универсальный, гибкий, вмещает больше информации. Жесткий (с размером ячеек заданных в пикселях) ведет себя более предсказуемо и позволяет воплотить оригинальный веб-дизайн. При задании ширины таблицы в процентах будьте готовы к тому, что на разных разрешениях мониторов ваши странички будут выглядеть по-разному, расползаясь на 17" и скукоживаясь на 11-12" мониторах лептопов. При этом текст может значительно изменять свои блоковые соотношения, а графика - уползать с предназначенного ей места. Для опытных веб-мастеров управлять этим не составляет труда, но новички могут изрядно помучиться. В лучшем случае - они просто не подозревают, что на больших мониторах их страничка просто разваливается на части.

При расположении нужно учесть пропорции блоков полагаясь на правило золотого сечения. Затем нужно определить предназначение каждого блока и его размеры. Размеры отдельных блоков сильно зависят от общей таблицы и своего предназначения. Часто в качестве модульного размера для ширин колон употребляются стандартные размеры баннеров (не значит, что ширина колонки будет именно 88 или 468 пикселов, но какой-то принцип привязки к этим модулям будет присутствовать). Наиболее часто употребляемые стандарты баннеров - 468х60, 88х31, 125х125 (западный стандарт, при котором высота может изменяться), 100х100 (стандарт, используемый в российской баннерной системе ВВ2). Есть и другие, менее распространенные стандарты веб-дизайна.

3. Типографика (читабельность)

Интернет-технологии накладывают специфические ограничения в веб-дизайне на использование шрифтов в оформлении WEB-документов. B частности межплатформенный характер Интернета не позволяет однозначно определять шрифт для вывода "тела" текстового документа на экран монитора клиента. Применение HTML тега не есть панацея для решения этой проблемы. На клиентской машине просто может не оказаться нужного шрифта, а замена его другим, выбранным системой по умолчанию, приведет к появлению нечитаемого документа. Поэтому считается правилом хорошего тона не применять вышеобозначенный тег при проектировании WEB-документов. Указанная проблема еще ждет своего корректного решения, которое, возможно, появится в скором будущем.

Одним из показателей удобочитаемости является ширина строки документа. С появлением мониторов поддерживающих большое разрешение экрана стало возможно "укладывать" в одну строку до нескольких сотен знаков, однако строка "идеальной ширины" должна умещать порядка 50-70 знаков. При их большем количестве скорость чтения замедляется и утомляемость наступает значительно быстрее. Часто контраст снижают например используют темно-серый на белом фоне, чтобы резкий контраст не утомлял посетителя. Большие тексты стоит делать покрупнее (Text size 2 и выше). Боже вас упаси - делать слабоконтрастные сочетания шрифта и фона: например, желтый на белом.

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

Шрифт - в пределах публикации он должен иметь одинаковые характеристики - такие, как гарнитура (начертание), кегль (высота), цвет.

"Ошибки в правописании" - одна из самых главных ошибок в веб-дизайне. Пользователи не любят грамматических ошибок, если на Вашем сайте множество ошибок, то пользователи могут перестать ходить на ваш сайт. Если у вас плохо с грамматикой, то хотя бы проверяйте правописание в word`e, а еще лучше - дружите с орфографическим словарем.

 

4. Цвет (восприятие)

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

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

Графическое оформление сайта - во-первых, оно должно укладываться в общую цветовую схему; во-вторых, Вы должны продумать общую концепцию графического оформления. Все графические элементы веб-дизайна сайта можно разделить на два больших класса: рисованные и фотореалистичные. Постарайтесь не смешивать эти два типа в оформлении. Кроме этого, в случае, если Вы используете на сайте фотографии в качестве иллюстраций, то перед использованием обработайте их - сделайте в случае необходимости тоновую и цветовую коррекцию, кадрирование, выберите примерный размер фотографий в публикации, найдите способ обработать края фотографии. А потом используйте данное оформление по всей публикации. И всегда пишите пояснения к фотографиям в параметре ALT тэга IMG - это будет восприниматься как подпись к фотографии и, кроме того, избавит пользователя от ожидания в случае, если его не интересует данная страничка.

Стандартные схемы.

«Престижные», золото, серебро, темно-серый, черный. Их задача - передать солидность, уверенность, стабильность и высокую стоимость.

«Пастельные», нежные бежевые, розовые, голубоватые... Женственные, мягкие, расслабляющие...

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

«Природные», близкие к естественным органическим, природным компонентам..

Как вариант использования цвета - «Растяжки»... Обычно тональные оттенки одного цвета, и как акцент - более активный цвет.

Нестандартные сочетания.

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

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

5. Тестирование (работа над ошибками)

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

P.S. Технология


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

 

Добавить комментарий

Защитный код
Обновить



World Programs
0.1791