Новый дизайн сайта любимой фирмы

Ольга Колодезная
Дизайнер-мизантроп

Зачем веб-студии нужен сайт? :)

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

Итак, наступает момент, в который мы смотрим на сайт и думаем «Мдааа, пора менять».


oldsite_830.png


Этот дизайн продержался чуть больше двух лет и перестал нравиться дизайнеру почти сразу же после внедрения, а где-то года через полтора и директору. Что в нем было «плохого»?

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

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

С чего начинаем?

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

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

  1. Страница ограничена по ширине, все остальное место на экране занято фоновым изображением. Довольно большая шапка обычно занята тематической картинкой, логотипом и названием сайта. Главное меню сайта - горизонтальное. Страница разделена на левую колонку и часть для основного текста страницы. В левой колонке можно вывести дополнительное меню и различную вспомогательную информацию.
  2. Самая заметная часть сайта – большая и красочная шапка, чаще всего плавно перетекающая в основной фон страницы. Обычно такой фон занимает всю ширину экрана, а вот блок с основным текстом и меню зафиксирован по ширине.
  3. «Полосатая разметка» - здесь основная идея в том, чтобы разбить весь сайт на разумные горизонтальные блоки, при этом фон блоков можно растянуть на всю ширину экрана, а текст зафиксировать или тянуть в зависимости от ситуации.

В результате останавливаемся на последнем варианте, сразу обозначаем плюсы этого решения:

  • нет необходимости делать сложную шапку или фон, для которых нужно искать подходящую графику или нанимать иллюстратора;
  • можно удобно организовать вывод подразделов на странице в виде «полос»;
  • можно сделать дизайн лучше ориентированным на планшеты, не потеряв в удобстве на широкоформатных мониторах;

и попутно формулируем минусы, чтобы встретить их в полной готовности:

нужно придумать изящный способ вывести меню второго уровня;

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

Где найти вдохновение?

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

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

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

Как добавить сайту индивидуальности?

И вот теперь мы, наконец, добрались до демонстрации потенциальным клиентам самых актуальных плюшек и того факта, что именно мы - отличная веб-студия.

Сайт начинается с шапки

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

Самая большая ценность в нашей работе – завершенные проекты.

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

Больше котиков

Ой, т.е. социального компонента. Нам кажется, что хорошей идей было бы показать студию не абстракцией на мониторе, а реальной командой живых людей. С этой целью на сайте появились разделы «Блоги» и «Наглядно». Мы не боимся показать себя и надеемся, что это оценят клиенты и потенциальные сотрудники.

А еще мы добавили «лайки», какой же сайт обойдется без «лайков» в 2013 году. Если вам нравится эта статья, поставьте лайк, а если не нравится, просто ничего не делайте, и я больше не буду мучиться и что-то писать.

Что у нас плохого?

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

  • Проблема навигации, с которой мы столкнулись на старом сайте, доставила немало трудностей и в этой попытке. Задача стояла следующая: показать внутреннее меню каждого из трех направлений так, чтобы не использовать выпадающее (потому что они не нравятся техдиру), не делать классическое меню сбоку (потому что это убивает всю идею «полосатого сайта»), и при этом сохранить цветовое решение шапки (потому что дизайнер же не совсем задаром получает свою зарплату). В ходе многочисленных попыток остановились на том, что меню разделов появляется в виде второй строки, а основные направления становятся кнопками. Дизайнер остался доволен внешним видом и функциональностью, а тот маленький факт, что количество пунктов меню теперь строго ограничено, никому не смог испортить радости от завершенного дизайна.
  • Много сил было потрачено и на раздел «Семинары». С одной стороны это большой пласт материала, который стоит показать, но с другой, как сделать раздел интересным и не занимающим ужасно много времени при подготовке публикации? Как объединить самые разные мероприятия? Было решено, что принцип «больше котиков» выручит нас и в этом случае: каждое мероприятие обязательно фотографируется, публикация фотографий не занимает много времени, а для посетителя окинуть взглядом несколько фото намного приятнее, чем пытаться читать много текста. К тому же такой формат оставляет возможность размещения текста о конкретном мероприятии, и коллеги обещают написать его хотя к грядущим событиям :)

Сколько можно писать?

А это собственно и все, у студии «Лол» есть новый сайт, на сайте есть несколько полезных фишек и забавных плюшек. Мы, разработчики, сайтом довольны, теперь главное, чтобы его оценили наши будущие клиенты - приходите к нам за сайтами! Или просто поставьте лайк ;)


Коротко:       @LOL_web

Наглядно:

@lol.khv: Фото с бизнес - дня :) Всем спасибо за положительные эмоции )

Наглядно:

@lol.khv: С дистанцией 4,2км справились без труда. Уже готовимся к Зелёному марафону в следующем году. Атмосфера на дистанции была очень дружеская. Огромное спасибо Сбербанку за такое мероприятия, а так же поздравляем победителей

Наглядно:

@lol.khv: Итак, наш Бизнес-день начался :) и мы решили провести для вас дополнительный конкурс на наш сертификат на услуги хостинга.
Что нужно сделать:
1)Подписаться на наш аккаунт @lol.khv
2) Сфотографироваться на нашем бизнес-дне на фоне пресс-волла и выложить фото в ваш профиль с тегом #Lolkhv до 13:00
Победитель будет определён случайным образом

Наглядно:

@lol.khv: Сегодня у нашей Даши День Рождения :)
Дарья - наш инженер-программист ⭐

Желаем добиваться всех своих целей, улыбок и счастья

Наглядно:

@lol.khv: А еще завтра сотрудники нашей компании бегут Зеленый марафон :) Мероприятие будет проходить на набережной. Мы будем с нашим флагом) Приходите поболеть и пообщаться ☺️

Наглядно:

@lol.khv: Проводим семинар по развитию бизнеса

Наглядно:

@i_karpovich: #bitrixconf

Наглядно:

@i_karpovich: Коллеги удивили :)

Наглядно:

@i_karpovich: А знаете ли вы, сколько всякой полезной офисной мелочи помещается в одну такую коробку? :)

Наглядно:

@i_karpovich: Игрушки. Надо же чем-то в обед в офисе заниматься :)

LOL на facebook: