Всем привет! Уж скоро полгода моей работе в компании Nival, но самые тёплые отношения с моей старой профессией, веб-дизайном, и работой над игровыми фан-сайтами никуда не делись. Поэтому сегодня я вам хочу похвастаться своей новой работой на этом поприще. Как вы могли догадаться, речь пойдёт о редизайне фан-сайта .
Вообще редизайн штука не менее сложная, чем дизайн сайта с нуля. С одной стороны, когда есть какие-то наработки проще. С другой стороны - есть масса нюансов, которые нужно учесть. Старый дизайн создавался в 2008-ом году. Широкоформатные экраны только начинали маячить на далёком-далёком горизонте. Примерно тем же самым занимался и широкополосный безлимитный интернет. Поэтому старый дизайн делался в расчёте на разрешение экрана 1024х768, ну, максимум 1280х960. Все художества концентрировались в шапке, а у интерфейса помимо красоты была задача весить поменьше. Так что полупрозрачные .png и огромные фоновые полотна были, так сказать, persona no grata.
Но время не стоит на месте. Мониторы расширялись, разрешение росло, ну, и интернет не отставал. Боковые чёрные полосы становились всё шире, сайт сдавливал черепную коробку. Учитывая, что релиз вроде бы не за самыми дальними горами, мы решили освежить дизайн. И вот тут встаёт первый вопрос:
Как сделать правильный редизайн фан-сайтаБыло
Нужно ли делать новый дизайн с нуля?
Иногда - да. Особенно если дизайну реально много лет. Или если его рисовал какой-то криворукий ушлёпок. Лично я перерисовал почти все свои старые дизайны. Некоторые и по несколько раз :) Но в нашем случае отзывы посетителей и "независимых экспертов" показали, что всё не так плохо, как могло бы быть. Так что если вы надумаете переделывать дизайн вашего сайта, то тоже хорошенько задумайтесь на этот счёт. Полный редизайн необязательно пойдёт на пользу. Во-первых, с непривычки вашим постоянным посетителям может стать сложно в нём ориентироваться. Во-вторых, новый дизайн вам может нарисовать какой-нибудь другой криворукий ушлёпок. Так что если рисуете не вы сами - посмотрите портфолио потенциального дизайнера. Если собираетесь делать сами - спросите окружающих, считают ли они, что вы способны сделать хотя бы не хуже, чем было :)
От чего избавляться?
Второй важный вопрос, который надо решить. Если вы решили сохранять преемственность, то нужно понять в первую очередь от чего отказываться. Ломать - не строить. В нашем случае сразу было понятно, что надо убирать нафиг огромные чёрные полосы, занимавшие чуть ли не 2/3 экрана при разрешении FullHD. Времена "резиновых" сайтов тоже ушли давно. Умные люди выяснили, что лучше всего информация воспринимается с зоны шириной примерно с лист А4. Это примерно соответствует разрешению 1280х960. Волевым решением было постановлено, что отныне минимальным поддерживаемым разрешением будет 1280 по ширине. Совместимость с IE6 тоже была проигнорирована. Надо заставлять людей выходить из пещер и менять шкуры на что-то посовременнее :) Да простят меня неандертальцы. До кучи было решено убрать из дизайна частично лишние завитушки-финтифлюшки и осветлить центральный фон.
Что оставлять?
Теперь нужно подумать, что стоит оставить однозначно. Логотип, подсказывает Адмирал Ясен Пень. Вполне удачные боковые блоки. Ставшие традиционными фигурки ангела и демона тоже будут в тему. Та же ситуация с некоторыми другими узнаваемыми элементами.
Как сделать правильный редизайн фан-сайтаМысли сделать редизайн были и раньше. Но получалось не очень.
Последние приготовления
Время приступать к работе. Находим старый исходник... да-да, старые исходники нужно обязательно хранить, холить и лелеять. Никогда не знаешь, когда может пригодиться. Не знаю, как у других дизайнеров, когда они заглядывают в собственные исходник многолетней давности, но я поперхнулся. Около 40 минут заняло наведение порядка. Выкинуть мусорные слои, назвать по-нормальному используемые, сгруппировать по папкам. Это очень важно. Всегда поддерживайте ваш исходник в порядке. Это сильно упростит вам работу с дизайном с over9000 слоёв. А также убережёт от проклятий верстальщика, которому вы потом отправите своё творчество. При подготовке дизайна очень важно не забывать про расстановку начальных направляющих. Это поможет вам избежать асимметрии, там где нужна симметрия, не даст вылезти за зоны видимости под минимальное разрешение и т.д.
Just do it!
Если ваш исходник больше не напоминает парижское метро, то самое время двигаться дальше. Сначала выкинули всё неактуальное, затем раздвинули на свои места всё актуальное. Помните, я говорил про полупрозрачные png? Были по-человечески вырезаны боковые текстуры полотнища. Теперь это можно и нужно делать. Теперь, когда основная разметка готова, время сделать основной арт. Спасибо художникам Близзард, этого добра в интернетах, хоть пруд пруди. После недолгих поисков были выбраны арты с трубарбом и демонами. Противостояние, фигли. Морда лица Diablo, который стоит за всем этим, осталась на своём месте в центре. Даже крупнее стала :) Дальше дорабатываем нюансы. Поменял фигурки демона и ангела местами, чтобы они были каждый на стороне своих героев. Косметические правки эффектов на пунктах меню. Зону под социальные сети лучше выдвинуть отдельно. Чуть позже туда добавятся ещё ВКонтакте и Facebook. Поиск давно пора было вытащить из бокового блока, где его фиг увидишь, на более видное место. Вот как-то так.
Лёгкий марафет
Конечно, же новый дизайн до вёрстки проходит свой премьерный показ, в него вносятся мелкие правки. Например, сделать благополучно забытый стиль hover для кнопок меню, бросить блики на меню, осветлить центральную текстуру, чтобы глазам полегче было. Немного стоит укрупнить шрифт. Ведь на больших разрешениях он кажется мельче. Всё, можно верстать. Когда результат уже казалось бы готов, отличной идее будет потестировать новый дизайн где-нибудь прежде, чем установить на основной домен сайта. Наверняка вылезут баги вёрстки. В нашем случае это был слишком заметный стык одной из текстур ещё пара мелочей. Ну вот и всё. Дизайн готов к употреблению.
Как сделать правильный редизайн фан-сайтаПриготовьтесь выслушивать хвалебные речи, но и критику тоже. Нет в мире ничего идеального. И вполне возможно, что ещё через несколько лет ваше нынешнее творение морально устареет и будет казаться вам полным УГ. Что ж, будет повод для очередного редизайна :)
