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

Предпосылки к редизайну

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

Старый дизайн нашего сайта Старый дизайн нашего сайта

Новое портфолио

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

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

Общий вид раздела «Работы»> Общий вид раздела «Работы»

На странице собственно работы есть три вкладки: 

  1. Обзор — общая информация о проекте
  2. Процесс — описание процесса разработки, промежуточные варианты, неосуществленные идеи
  3. Галерея — скриншоты и картинки

Где-то на этом этапе у нас возникла оригинальная мысль. Значительная часть работ в нашем портфолио — это веб-сайты. Многие студии показывают свои работы в рамке браузера, чтобы можно было представить себе, как именно будет выглядеть сайт на мониторе. Но мы решили пойти дальше. Сделали так, чтобы можно было увидеть сайт в любом из четырех самых популярных браузеров: Google Chrome, Mozilla Firefox, Internet Explorer и Opera. Причем по умолчанию скриншот отображается именно в том браузере, через который посетитель зашел на наш сайт, а остальные можно выбрать с помощью специальной кнопочки справа.

Вот этот скриншот снят из браузера Google Chrome Вот этот скриншот снят из браузера Google Chrome

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

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

Блог и другие интересные штуки

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

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

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

Много внимания мы уделяли мелочам. Одна из наших любимых мелочей — плашечки внизу страницы. Никакой рабочей функции они не несут, просто развлекают посетителей.

Плашечки Плашечки

Плашечек сейчас уже несколько десятков, точно мы не считали. А с недавних пор появилась особо интересная и очень редкая плашка — «печенька с предсказаниями». Если посетитель приходит на наш сайт часто (или ему просто крупно повезло), он может найти такую печеньку и вытащить из нее доброе пожелание или счастливое предсказание. 

В том же духе мы оформили и раздел «Контакты». Захотелось немножко пошутить. Поклонники серии игр «Heroes of Might and Magic» оценят ;) 

Карта из раздела «Контакты»> Карта из раздела «Контакты»

Продолжение следует…

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