Блог фрилансера - сайты под ключ

Дизайн web сайта

Просмотров: 8312Комментарии: 0
ВебмастеруПолезное

  

Создаем современный дизайн web сайта. (часть 1-я)

создание сайтов web 2.0

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

    Отступление: я не буду затрагивать каждую деталь создания сайта, предполагая, что Вы имеете базовое представление о работе в Photoshop.

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

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

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

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

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

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

     Брендинг.

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

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

    (Клюев М.).

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

логотипы компаний

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

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

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

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

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

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

дизайн сайта компании

Плюсы:

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

Минусы:

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

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

дизайн сайта компании

Плюсы:

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

Минусы:

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

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

дизайн сайта компании

Плюсы:

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

Минусы:

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

     г) Другие варианты расположения блоков:

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

дизайн сайта компании

Итак, подведем краткие итоги:

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

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

Источник: web дизайнер сайтов Евгений Мирошниченко, mirash.ru

Оставьте комментарий!

grin LOL cheese smile wink smirk rolleyes confused surprised big surprise tongue laugh tongue rolleye tongue wink raspberry blank stare long face ohh grrr gulp oh oh downer red face sick shut eye hmmm mad angry zipper kiss shock cool smile cool smirk cool grin cool hmm cool mad cool cheese vampire snake excaim question


Комментарий будет опубликован после проверки

     

  

(обязательно)