Основы веб-дизайна

- Сокращение производственного  цикла по базовым изделиям  на 30%;

- Уменьшение складских  площадей на 25%;

- Увеличение оборачиваемости средств в расчётах на 30%;

- Увеличение оборачиваемости  ТМЗ на 65%;

- Увеличение количества  поставок точно в срок на 80%.

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

 

2. Основы Web-дизайна

2.1. Что такое Web-дизайн

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

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

Пять областей охватывают основные аспекты Web-дизайна.

• Содержимое. Сюда входят форма и организация содержимого сайта. Возможный диапазон — от того, как написан текст до того, как он организован, представлен и структурирован с помощью технологии разметки, такой как HTML.
• Зрительные образы. Это относится к компоновке экранного пространства на сайте. Эта компоновка обычно создается с помощью HTML, CSS или даже Flash и может включать графические элементы, выполняющие функции украшения или навигации. Визуальная сторона сайта — это наиболее очевидный аспект Web-дизайна, но не единственная, и не самая важная, сторона дисциплины.
• Технология. Хотя применение разнообразных базовых Web-технологий вроде HTML или CSS попадает в эту категорию, под технологией в этом контексте чаще подразумеваются различные интерактивные элементы сайта, в особенности созданные с использованием программных методов.Это могут быть элементы в диапазоне от языков сценариев, работающих на стороне клиента, наподобие JavaScript, до серверных приложений, таких как Java-сервлеты, PHP-сценарии.
• Доставка. Скорость и безотказность доставки сайта по сети Internet или внутренней корпоративной сети связаны с применяемым аппаратным программным обеспечением и задействованной сетевой архитектурой.
• Назначение. Причина, по которой сайт существует, часто связанная с экономическими вопросами, вероятно, является наиболее важной частью Web-дизайна. Этот элемент следует учитывать при принятии любых решений, затрагивающих другие области. Конечно, степень, в которой каждая сторона Web-дизайна оказывает воздействие на сайт, может изменяться в зависимости от типа создаваемого сайта. Личная домашняя страничка обычно не связана с экономическими соображениями, характерными для Internet-магазина. Внутренняя сеть производственной компании может не попадать под влияние соображений, связанных с визуальным представлением, важных для общедоступного Web-сайта, рекламирующего остросюжетный фильм. Строго говоря, значение выражения "Web-дизайн" кажется расплывчатым; в нашем исследовании мы должны принимать это обстоятельство во внимание, но в то же время выдвигать идеи, достаточно лаконичные для того, чтобы дизайнер мог все время держать их в памяти. Мы начнем с отвлеченных определений, чтобы в последствии выйти на конкретику.

2.2. Основные элементы Web-страницы

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

Непосредственно под  заголовком документа, как правило, располагается пространство, отведенное для размещения рекламного баннера. Включение баннера именно в верхнюю часть web-страницы в большинстве случаев является обязательным условием регистрации сайта в службах баннерного обмена - системах, рекламирующих созданный вами ресурс в обмен на показ на страницах вашего сайта рекламы других участников баннерообменной сети. Стандартный размер баннеров, публикуемых под заголовком документа, составляет обычно 468x60 точек. Если вы используете статический принцип компоновки страницы, ширина заголовка вашего документа будет составлять приблизительно 640 пикселов: это значение обусловлено, прежде всего, необходимостью обеспечить корректное отображение документа на мониторах с экранным разрешением 640x480 точек и избежать появления горизонтально полосы прокрутки, затрудняющей его просмотр. Очевидно, что ширина баннера в этом случае будет значительно меньше ширины заголовка, благодаря чему в той части страницы, где вы планируете отвести место под рекламу, образуется незанятое пространство, которое можно заполнить логотипом компании-владельца данного сайта или ссылкой на сервер, осуществляющий web-хостинг. Разумеется, логотип необходим далеко не всегда: как правило, он включается в состав web-страницы лишь в случае, если сайт имеет коммерческую направленность.  
             Основную часть документа занимает так называемое текстовое поле - участок, где и размещается смысловое наполнение страницы: содержательный информационный текст и иллюстрации. Перечисленные элементы еще называют "контент" (от англ, content - содержание). Расположение текстового поля зависит в первую очередь от того, каким образом web-дизайнер разместит остальные элементы документа.  
             Следующей обязательной составляющей частью web-страницы являются элементы навигации - гиперссылки, связывающие данный документ с другими разделами сайта. Элементы навигации могут быть выполнены в виде текстовых строк, графических объектов, то есть кнопок, либо активных компонентов, на- пример Java-апплетов. Последние представляют собой те же кнопки, которые, в отличие от своих "традиционных" сестер, умеют реагировать на движения мыши, выполняя при наведении на них курсора какие-либо несложные действия (включение подсветки, создание эффекта "нажатия", изменение формы и т. д.).

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

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

 

2.3. Функции заголовка

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

Заголовки выполняют  важную функцию на веб-странице. Во-первых, они показывают важность раздела, к  которому относятся. Чем больше заголовок и его «вес», тем более он значимый. Вспомните, что в газетах и журналах передовицы набраны крупным шрифтом, тем самым, привлекая к ним внимание и говоря: «вот это надо читать обязательно». Во-вторых, с помощью различных заголовков легко регулировать размер текста. Чем выше уровень заголовка, тем больше размер шрифта. Самым верхним уровнем является уровень 1 (<h1>), а самым нижним — уровень 6 (<h6>). И, в-третьих, поисковики добавляют рейтинг тексту, если он находится внутри тега заголовка. Это важно для раскрутки сайта и для его занятия первых строк выдачи результата в поисковой системе по ключевым словам.

 

Следуйте цели. 

Хороший заголовок отражает содержание сайта. Все остальное тоже должно соответствовать ожиданиям и отражаться в Заголовке. Поэтому Заголовок должен отражать содержание, цель и идею сайта.

Заголовок должен привлекать внимание пользователя и "заставлять" остаться на сайте. 

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

Заголовок должен вписаться в общий стиль. 

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

Заголовки не всегда должны быть с картинками. 

Не все заголовки должны быть с фотографиями и картинками. Иногда слова более важны.

Беспорядочный заголовок делает сайт ещё более  беспорядочным. 

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

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

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

Продумайте "Индивидуальность сайта". 

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