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

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

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

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

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

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

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

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

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

Брендинг.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

---

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

Инструменты оценки состояния проектов по разработке Программирование – процесс творческий, и очень часто попытки измерить какие либо параметры проекта рассматриваются как нечто крамольное. Действитель...

Microsoft Volta – еще один конкурент AJAX на платформе .NET Microsoft анонсировала новый инструмент для Web-разработчиков: Microsoft Volta. Volta – это разработка Microsoft Live Labs, в настоящее время пре...

Native Client: одной ногой в офлайне В понедельник в Google Code Blog вышел анонс нового эксперимента веб-гиганта. Технология Native Client призвана ускорить веб-приложения благодаря пр...

Как бы шифрование Одной из функций новых телефонных аппаратов iPhone 3GS является аппаратное шифрование данных, что вроде бы должно создавать у потребителей впечатлен...

Запуск Visual Studio 2010 в России Прошел официальный запуск Visual Studio 2010 и платформы .NET 4.0 в России. Московское мероприятие было одним из первых мероприятий в рамках глобаль...