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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Плашечки

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

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

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

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

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