Создание корпоративного сайта digital агентства (или web студии)

---

Исходные данные: Существующий дизайн сайта klondike-studio.ru

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

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

Что должно обязательно присутствовать:

• Небольшой текст с позиционированием студии, а также не забываем о SEO;
• Портфолио, достижения, статусы сертифицированного агентства, лого партнёров и т. п.
• Новости компании и статьи из корпоративного блога;
• Агрегация активности в социальных сетях;
• Большая зелёная кнопка «заказать».

Технологии: Сайт должен быть адаптивным, принимаем во внимание не только отображение на мобильных устройствах, но и задумываемся о х4 экранах. Должны использоваться последние технологии HTML5 и CSS3, FLASH.

Разобьём работы по созданию сайта на следующие шаги:

0. Ответ на вопросы пользователя!
1. Проектирование структуры блоков, особенностей работы элементов на разных разрешениях;
2. Проектирование интерфейса;
3. Реализация интерфейса на адаптивном CSS фреймворке;
4. Отрисовка интерфейса — дизайн;
5. Конечная сборка.

0. Ответ на вопрос пользователя

Давайте подумаем о том, что наш потенциальный клиент хочет увидеть на сайте агентства и вообще кто он?

Немного о нас: Студия работает 5 лет, и мы всё ещё не лидеры рынка. Наш клиент это представитель среднего бизнеса — владелец ресторана, фитнес клуба, клиники, салона красоты или юридического бюро и ещё чего подобного. Потенциальному клиенту нас посоветовали, совет дал другой наш клиент или интернет ресурс партнёра — всевозможный рейтинги и пузомерки. Потому нашей задачей является сказать о том, кто мы (позиционирование), и что мы сможем решить задачу, которую перед нами поставят.

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

Новости и статьи атрибут информационных ресурсов: так как у нас уже ведётся социальная активность, есть новости компании, есть информация которую мы хотим донести, информационный блок тоже надо сделать.

В ИТОГЕ: Сгруппируем вопрос потенциального клиента по схеме: КТО? ЧТО? КАК?

1. Проектирование структуры блоков, особенностей работы элементов на разных разрешениях.

Так как адаптивные интерфейсы достаточно сложны, сначала распределим информацию по классической схеме, т. е. при разрешении 1024 пиксела.

Так как контента для главной у нас много, соответственно разделим вопросы из нулевого пункта на три экрана по 800 пикселей, тем самым у нас получилось разрешение макета 1024 на 2400.

Теперь подумаем на перёд об адаптивной составляющей, что произойдёт на мобильных устройствах и на больших Х4 мониторах. Самым простым решением будет разделить экран на две колонки. На маленьких разрешениях блоки встанут друг под друга в одну колонку, а на больших станет 3 колонки.

Дальше каждому блоку придумываем назначение, и у нас получится готовая структура.

2. Проектирование интерфейса

2.1. Прорабатываем каждый блок структуры.

Обязательно используем только реальный контент, конечные размеры с текстами, конечные картинки.

Опишем отдельно каждый блок:

ПЕРВЫЙ БЛОК «КТО?»

• Соответственно шапка стандартно, пункты горизонтального меню, логотип, телефон;
• Текст о компании обязательно надо писать;
• А вот «пузомерку» можно совместить с основными услугами, это хорошее решение, так как два блока соответствуют друг другу.

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

Также надо поставить туда людей. В сфере интернет маркетинга продажу всегда делают люди с высоким эмоциональным интеллектом, это либо руководитель компании, либо лидеры внутри компании. Соответственно клиент будет работать или работает именно с ними — их фото и ставим.

ВТОРОЙ БЛОК ЧТО?

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

Без портфолио некуда, обязательно предусматриваем портфолио, логотипы клиентов и т. п.

В конце этого блока можно ставить «большую зелёную кнопку». Клиент уже изучил кто и что делают и надо его мотивировать на заказ. Это должен быть мега крутой flash — здесь мы показываем на что мы способны, тем более flash нам надо тоже продавать:)

БЛОК КАК?

В этом блоке уже можно читать новости, и это наверно не для новых клиентов, вернее не для всех.

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

Ну и соответственно подвал — не расписываю, всё более менее стандартно и попроще, чем в остальных моментах.

В ИТОГЕ:

2.2. Переходим непосредственно к проектированию интерфеса.

Для этого используют программы для проектирования интерфейса — в идеале это Photoshop, так как дизайнеру потом будет удобно раскрашивать интерфейс, профессионалы обычно пользуются Axure, а я его не знаю и использую что проще некуда — Pencil.

Не окончательный вариант, думаю, что именно это картинку несколько раз придётся поменять — пока оставляю вариант № 1.

3. Реализация интерфейса на адаптивном CSS фреймворке.

Тут в дело должен вступить программист, накидать структуру блоков и т. п. Задача программиста выглядит так:

• В соответствии с проектом интерфейса собрать структуру блоков на адаптивном фреймворке.
• Подумать над использованием плюшек HTML5 И CSS3.
• Предусмотреть всё нюансы и сложности дальнейшего внедрения.
• Сразу поставить все технические элементы, которые в дизайне меняться не будут.

Тут первая часть статьи закончена, ждём результат.

Обязательно пишите ваше мнение тут!