Сайт издательства

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

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

Арт‑директор спрашивает: «Зачем на сайте, который призван как можно сильнее конвертировать посетителей в заявки, делать такую непривычную штуку, как обратный скрол?».

Понимаем, что придумали ерунду. Обратный скрол может у кого‑нибудь заглючить. Нестандартный дизайн навредит делу.

Придумываем заменить ракету на бомбу, которая не летит в стратосферу, а падает вниз и взрывает игровые чарты:

Объясняем на странице, как сделать крутую «бомбу» с нами:

Собираем страницу сверху донизу:

Арт‑директор говорит, что страница выглядит аляповато, а подход грубый. Развели веселье, но не хватает тонкости. Такой дизайн зашёл бы в 2010 году, но не сейчас.

Договариваемся, что на странице надо успокоить типографику и спецэффекты, а ещё накидать отсылок и намёков на жанры игр.

Появляется идея с кубиком, который клёво выглядит, но непонятно, что означает:

Придумываем складывать главные хиты как в тетрисе:

Страница собралась, но её смысл пока непонятен.

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

Думаем над другими отсылками к играм. А ещё арт‑директор предлагает писать текст на странице на всю ширину, чтобы выглядело более по‑мобильному.

Идея есть, конструкция страницы есть. Собираем макет к показу клиенту:

Принимаемся за страницу игр:

Игры будут добавляться, поэтому важно изобрести вёрстку, с которой не придётся пересобирать страницу заново с появлением новой игры.

Придумываем раскладывать игры по жанрам. Каждый жанр оформляем в своём стиле, чтобы страница выглядела наряднее. Полезное действие — помочь разработчикам увидеть разнообразие жанров игр, которые готово выпускать издательство, и сильнее поверить, что в Сэйгеймсе любят игры, а не просто зарабатывать деньги.

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

На этаже с кирпичной стеной было много пиксельных объектов в стиле старых игр, что слабо относится к современным мобильным играм. Появилась идея сделать пиксельные декорации с воротами, а поверх поставить современные объекты вместо пиксельных.

На мобиле от стены остаётся только решётка:

К концу второй недели файл в Фигме выглядит нарядно:

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

Клиент принимает доработки, и мы со спокойной душой готовимся к вёрстке.

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

Параллельно с вёрсткой доделываем иллюстрации для главной страницы и анимируем элементы:

Моделируем:

Эволюция сэйпушки:

Эволюция этажа со стеной и роботом:

Докручиваем вёрстку, внедряем текст, который получили от клиента, отлаживаем анимацию. Настраиваем связь домена клиента с сервером бюро и отлаживаем быстродействие сайта. Открываемся по плану.

День открытия сайта совпадает с днём публикации пресс‑релиза и выступления клиента на игровой конференции, в которой было объявлено о программе по привлечению разработчиков. Заявки начинают прилетать буквально с первых минут работы сайта.

Посмотрите сайт ещё раз: saygames.by