+1 проект в мое портфолио! Ура. В этом посте я расскажу о процессе создания сайта http://suteam.ru
Финальный макет главной страницы:
Street Union - это команда молодых ребят, активно занимающихся паркуром, боевыми искусствами, акробатикой, танцами и прочими прыганьями. Они снимаются в кино в качестве дублеров-каскадеров, принимают участие в мюзиклах концертах звезд на подтанцовках, проводят соревнования по трикингу. На одном из них я даже побывал и сделал такое фото.
Летающий Илья Поздняков:
Мне было интересно с ними работать, потому что мы близки по духу, плюс, я очень уважаю их за мастерство. Всегда приятно иметь дело с теми, кого по-настоящему уважаешь. Я рад, что этот выстраданный проект наконец увидел свет.
Техзадание решает
Когда я приступил к Suteam.ru, я коренным образом пересмотрел методику своей работы над сайтами. Всегда довольно проблематично понять, чего хочет заказчик, но в этот раз я начал с обстоятельной встречи, на которой мы детальнейшим образом прописали техническое задание. Мы прописали, какие сайты нравятся, какие не нравятся, я вытребовал все комментарии о том, что именно нравится или не нравится в подобных сайтах. Прописали структуру каждой страницы, какие блоки на страницах, что в них, составил список всех текстов, фото и видео, которые должны были наполнить его. Не всякий заказчик способен вытерпеть такие пытки, но это очень яркий показатель качества заказчика. Если работа тормозится уже на стадии написания техзадания, то может быть, ну его в баню, такой проект? Никогда не надо иметь дела с заказчиками, которые не понимают, чего они хотят, даже если это может принести много денег. Есть риск не получить ничего и нарваться на мозгоеблю.
Чего хотел заказчик
Заказчик хотел сайт с бандитским стилем, но не про «наколи-мне-кольщик-купола», урбан, но не про «дома-небоскребы-на-фоне», «гориллаз-стайл, но не так клоунски», «13-й район», вызывающе, но не слишком ярко. Мультяшкам места на сайте не нашлось, зато присутствует тема графити и мрачности.
Эволюция главной страницы
Внизу: Один из ранних макетов, неудачный: еще нет полицейской ленты, слишком большой шрифт навигации, но есть намек на желтый цвет в меню, еще есть коллаж из дисциплин, грязь и неуместные татуировки.
Дней на пять я засел только за один макет главной страницы, пытая поисковые системы запросами о бандитских группировках MS13 и CosaNostra. Макет у меня долго не получался, но финальным вариантом я остался почти доволен.
Внизу: Обратите внимание на этого почтенного господина. Фото очень колоритное. Волею случая найденный на просторах сети, мущино пережил все невзгоды правок главной страницы и поныне лбом подпирает там слайдшоу.
Внизу: Промежуточный вариант макета, близкий к финалу. Банальный ариал в полицейской ленте не нравится, удачно подобранные писающие мужики уехали влево, новостная лента стала больше, появился слайдер. Не нравится, как стоит слайдер, он слишком большой и загораживает весь “атмосферный фон”. Обратите внимание на рыбный текст новостей, который я взял из Яндекс.Новостей.
Внизу: Полицейская лента появилась не сразу, и стала той идеей, которая придала сайту его изюминку и укрепила бандитскую тематику. Заказчику она сразу понравилась.
Эволюция заголовков
Заказчик отверг первоначальный элемент оформления заголовков. Он выглядел так:
И действительно, что-то было в нем от Need For Speed и прочих игр-гонок.
Без всякой подложки заголовки смотрелись грустно, поэтому в результате долгих поисков я подложил под заголовок повторяющуюся полупрозрачную строчку:
Я зеркально отразил ее, чтобы не слишком была читабельна. Шрифт - Boston Traffic .
Долго не мог подобрать шрифт для заголовков, в результате остановился на Play, который взял из библиотеки Google Web Fonts. Те избранные, кто имеет установленный на компьютере шрифт Europe, увидят в заголовках его. Жаль, что Europe отсутствует в библиотеке Google, его рубленные формы больше подходят под этот дизайн.
Издевательств над заголовком мне показалось мало, поэтому я отыскал вот эту фотографию:
Сделал ей цветокоррекцию, отразил по вертикали и вставил под текстовый блок.
В результате получилось вот что:
Второй моей находкой стали текстуры стен тюрьмы Алькатрас. Заказчик бурно прореагировал: «Мужик, это то что надо, по этим стенам видно, что на них писали и убивали».
Также где можно я обыгрывал фото от самих Street Union. Вообще, надо сказать, что фотографии всегда являются одним из сильнейших выразительных средств в дизайне, а многие сайтостроители ими пренебрегают. Из фотографий, вкупе с удачно подобранными шрифтами легче всего вытянуть то, что станет ощущением сайта, его стилем.
История подвала и шапки
Внизу: подвал одного из первых макетов
Еще версия:
Решили, что кровяка в подвале - это слишком жестко, одних бандитов из MS13 там хватит. Поэтому вместо кровяки использовал один из логотипов Street Union, который мне подогнал предыдущий дизайнер проекта.
Этот огромный хорошо отфотошопленный кусок вообще сильно скрасил мне жизнь:
Пригодился он и в шапке, где без него было пустовато:
Внизу: В противовес к полицейской ленте в подвале сайта на всех страницах кроме главной есть еще один декоративный элемент - колючая проволока. Получился непроизвольный смысловой контраст - сверху копы, снизу бандиты.
Идею использования ее в дизайне я подсмотрел в одной из фотографий, которые мне дали сами Street Union.
Дизайнерам будет полезна пара ссылок:
jQuery-cлайдшоу для главной страницы этот.
Дропдаун-меню для полицейской ленты отсюда.
Самой трудоемкой частью сайта стал раздел Команда, в котором представлены анкеты всех участников команды, их фото и видео. Теперь каждый участник команды может использовать ссылку на свою страницу в качестве своего портфолио для съемок в кино и поиска работы каскадером, танцором и тд. Собрать все анкеты и фото до сих пор не получилось, поскольку связаться с каждым и вытребовать все необходимое - настоящая проблема.
Summary
Стрит Юнион получился именно таким, каким я хотел. Осознание этого приносит большую радость. Ради таких проектов я занимаюсь веб-дизайном и не теряюсь в обыденности кодинга.
Я подустал делать сайты в одиночку и ищу верстальщика, который мог бы меня рузгрузить и умел делать валидную xHTML-верстку. Плачу деньгами и опытом.
Кстати, про опыт. Также я провожу индивидуальные уроки по веб-дизайну. Пишите на почту. sasha.okunev @ gмэйл сom.
Подписывайтесь на мой твиттер: http://twitter.com/okunev
В качестве бонуса к этому посту я выкладываю вдохновившие меня картинки, которые я насохранял в процессе поиска стиля сайта:
Обложка фильма 28 Days Later:
Рандомная картинка про трикинг c одной обрезанной и одной пересвеченной ногой:
Прекрасное фото от заказчика
Фото, которое я хотел, да не использовал.
Ну и на сладкое: красавцы-пацаны из латиноамериканской группировки MS13, у которых средняя продолжительность жизни 25 лет.
