Дизайн карточной игры космической тематики и сайта для скачивания ее актуального билда

Blitz

Задача

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

На главной у них просто скриншот игрового поля и несколько строк текста:

А также три одинаковые страницы с архивом игры для разных операционных систем:

Так как это стартап, то на первом этапе на сайте решили не делать разделы с описанием игры, каким-то видосиками, скриншотами и прочим контентом. Пока есть необходимость просто в удобном скачивании билда игры:

Решение

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

Во-вторых, предложил три раздела для разных операционок оформить в одном блоке, а не на разных страницах. И цветовое кодирование можно замутить: винда — синий цвет, макось — сиреневый, линукс — зеленый. В жизни ведь все так, да?

Видео-презентация

Включайте звук — с ним веселее =)

Все сразу понравилось и даже правок не было. Вместо них поступило предложение переделать дизайн самой игры:

Сначала показалось, что я не осилю ведь далеко не иллюстратор я: космический корабль буду неделю рисовать... А оказалось, что корабли как раз-таки готовы, а вот с игровым интерфейсом все как-то не очень у программистов вышло.

С удовольствием займусь игрой!

Дизайн игры

Включайте звук — с ним веселее =)

Предложил поделить интерфейс на две части (примерно 1 к 2) и провести это деление через все доигровые экраны. После долгих раздумий все-таки отказался от 3D менюшки по этой причине. А сам экран оформил в стиле сайта: планеты, звезды, корабли.

В экране настроек наоборот решил добавить объемный космический корабль в ангаре:

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

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

  • Синий цвет (вместо желтого) — для кораблей. Это основная часть карт, поэтому хорошо будет смотреться на синем космическом интерфейсе.
  • Красный (вместо голубого) — для боевых заклинаний: огонь, сила. мощь, взрывы и т.д.
  • Черный (вместо красного) — для апгрейдов. Как в мастерской: все руки и одежда черные от грязи и масла.
  • Ну и зеленый оставляем для ресурсов.

Детальный просмотр по клику правой кнопкой мыши в попапе:

Идея деления экрана на 1 к 2 отлично подошла ко всем экранам. И апгрейды не стали исключением: слева показываем список, а справа выбранный корабль, его характеристики и ветку апгрейдов:

Экрана для апгрейдов флагманов не было вовсе. Сделал по аналогии, но с другим списком, чтобы подчеркнуть их:

Экран выбора колоды: слева список лидеров, справа выбор флагмана, колоды и яркая заметная кнопка PLAY прямо в центре экрана (а раньше ее попробуй еще найди).

Все доигровые экраны очень понравились. Настолько, что предложили мне переделать и игровой интерфейс:

С удовольствием подтюнил и его:

Адаптируется на планшетах

Отзыв заказчика

Реальный проект от заказчика на бирже Weblancer

Другие сайты

Кстати, подписывайтесь на ютубчик :)

Поговорим о дизайне на фрилансе в видео-формате
  • Скачайте и заполните бриф

    Вопросов совсем немного, потерпите, пожалуйста)

  • Напишите письмо на почту

    Обычно я отвечаю сразу, если не сплю или не за рулем.

  • Я работаю через Веблансер

    Отниму у вас 3-4 минуты. Потом в процессе расскажу :)