Современный дизайн web сайта. Часть 1

Веб разработка - Веб разработка

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

1. Какой именно сайт нам нужен?

Уясним, какой тип web сайта Вам необходим?

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

Хорошо, значит вы хотите сделать свой сайт. Чему же он будет посвящен? Берем лист бумаги, или открываем любой текстовый редактор, и изображаем несколько идей, что именно будет на Вашем сайте, в каком количестве, формате и т.д. Схематично разбиваем страницу сайта на блоки, каждый из которых будет нести свою смысловую нагрузку. К примеру, если Вы делаете сайт, где выкладываете своё портфолио, Вам так же понадобится страница контактов и возможно секция новостей.

Будет ли ваш web сайт «расти»?

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

Брендинг.

Что насчет темы и бренда?

Определение: Логотип – стильный графический образ, максимально и универсально абстрагированный до символа и адаптированный к среде применения согласно принципам разумного проектирования. (Клюев М.).

Запоминаемость – гарантия качества и индивидуализация. Надо помнить главное правило маркетинга и рекламы – люди покупают не продукт, а эмоции! Если руководствоваться этим правилом, логотип – это не просто отличие от других, это, прежде всего, Ваша история, репутация, качество продукции или услуг. Вы заметили, что это никак не связано с материальным представлением о товаре или услуге? Вспомните логотипы «Нокиа», «Гугл», «БМВ». Они относительно просты и в них нет магического символа успеха. Запоминаемость этих знаков подкрепляется опытом и качеством. Хотя «Google» является приятным исключением из общемировой практики.

Для кого я делаю сайт?

Если Вы делаете сайт по продаже швейцарских часов или элитных автомобилей – Вам наверняка не стоит заботится о том, как Ваш web сайт будет выглядеть на малом разрешении экрана и насколько он будет «тяжелым» (в плане объема в Mb). Ведь, как правило, ваши потенциальные посетители будут люди достаточно обеспеченные и, соответственно использовать высокоскоростной интернет и мониторы с большой диагональю.

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

2. Как будем располагать блоки сайта?

Есть три стандартных схем расположения элементов страницы:
а) расположение в одну колонку

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

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

б) расположение в две колонки:

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

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

в) расположение в три колонки:

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

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

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

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

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

 

---

Читайте:
Аватары и психология Еще 6 причин оформить сайт в виде блога 4 причины оформить сайт в виде блога Правило юзабилити №1 – будьте проще 10 правил PHP-мастеров

Язык C#: от Microsoft для разработчиков В последнее время внимание сообщества специалистов IT-индустрии приковано к новой инициативе компании Microsoft -- .NET. Однако в своем восприятии э...

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

Adobe и Nokia объявили о создании фонда Open Screen Project на 10 млн. Новый фонд должен укорить создание мультимедийного мобильного контента, приложений и сервисов На Всемирном конгрессе мобильной связи GSMA компани...

Microsoft анонсировала новые технологии для веб-разработчиков Компания Microsoft объявила о том, что на ежегодной технологической конференции для веб-разработчиков и дизайнеров MIX 09 в Лас-Вегасе анонсировала ...

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