Решил рассказать вам о том, как создаются новые сайты под заказ. Скорее даже как делаю их именно я! Возможно даже это станет целой серией постов «Как создать дизайн сайта», а так же раскрою некоторые вопросы вёрстки и создания полноценного ресурса в сети на основе получившегося макета.

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

Прошлый дизайн выглядел так:

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

В: Вебмастер, З: Заказчик

В: – Что Вы хотели бы получить в результате?
З: – Не знаю. Хороший сайт.
В: – Как он должен выглядеть?
З: – На твой вкус.
В: – Функционал какой?
З: – Ну просто, что бы работал. Только надо прайс вывести как-то.

Очень часто бывает даже хуже, в результате чего приходится работать «вслепую». Как основу решил использовать собсвенную разработку CMS, которая пока не доступна для скачивания массам, потому как не доработана. Вот как раз и доработаю!

Макет сайта

Так как особенных указаний не последовало, я решил перенести все функциональные элементы страницы со старого сайта в новый дизайн:

- Логотип
- Главное меню
- Контакты
- Описание компании
- Вывод последних новостей и акций
- Статистика в виде счётчика Liveinternet, копирайт

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

- Список клиентов

В последний момент приходит идея разместить яркую красочную кнопку типа «Сделать заказ!». Размещу ка я ещё сразу после вступительного текста о компании. Возможно, увеличит число звонков.

- Кнопка заказа

Некоторые дизайнеры предпочитают на главной странице сайта размещать форму для обратной связи или для заказа. Лично мне кажется, что это является некоторым навязыванием услуг, что может вызвать негатив. Моя логика такова: если человеку интересно, он позвонит по указанному телефону или зайдёт на страницу «Контакты» для заполнения формы связи. Кстати, её можно сделать в виде плавно появляющейся формы поверх страницы с затемнением фона! Вот будет красотища!

- Ссылка для перехода на форум обратной связи

Вот и выяснили то, что касается функционала. Теперь необходимо решить, в каком цвете будет наш сайт. Обычно даже самый молчаливый заказчик высказывает своё пожелание по поводу основного цвета сайта: белый, синий, красный, тёмный. В этот раз решение принял я – синий и светло синий! Говорят, что цвета в веб-дизайне значат многое, а «синий — это мирный, успокаивающий цвет, наводящий на мысли о солидности и опыте, внушающий доверие». Вот как!

Первым делом создаём новый слой в Adobe Photoshop (я использую старую версию CS2, потому как 4-ка или даже CS5 на ноутбуке сильно тормозит. ПК использую редко), заливаем голубым (как основу-оттенок синего) и создаём максимально насыщенные и симпатичные градиенты. Меню в виде картинок, контакты, логотипы и другие графические элементы для сайта создаются постепенно и подстраиваются под фон.

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

Вбиваем поисковую фразу «калькулятор иконка», выбираем нужный фон и жмём искать:

Далее выбирается необходимое изображение и изменяется так, как это требует конкретный случай:

Или так:

Через 1-2 дня получается уже что-то более сформированное и единое:

Первым «оценьщиком» моего очередного творения становится моя девушка. Затем несколько друзей из ICQ, которые хоть как-то связаны с Интернетом: верстальщики, программисты, оптимизаторы. Дизайнеров просить оценить макеты – дело неблагородное, потому как здесь каждый при своём мнении и со своим вкусом.

Очень часто приходится создавать несколько вариантов для заказчика, причём это не усложняет жизнь дизайна, а значительно её упрощает. Не верите? Идея в том, что бы предоставить вначале заказчику выбор между сложным основным вариантов, над которым ты работал всё время с начала заказа и простой балванкой, которая была набросана на страницу за 20-30 минут. Это не значит, что второй вариант будет выглядеть плохо или кустарно, он просто проще и легче в плане отрисовки элементов и их количества на странице. Заказчик, получая сразу несколько вариантов выбирает первый и указывает, что необходимо подправить по его мнению. В случае же, если вы показываете только 1 вариант макета, человек критикует его полностью и очень часто бракует совсем.

Конечно же, это не 100% вариант и иногда он даёт сбой: заказчик отвергает сразу 2 предложения либо принимаем более простой вариант. Но у меня такое было всего несколько раз.

Подписывайтесь на RSS ленту, потом напишу про остальные шаги! А пока можете посмотреть мои другие работы.

-

Прочитайте пост про покупки интернет-сайтов на блоге, посвященном SEO.

Опубликовано в разделе: Дизайн Метки: Photoshop