WINTERSANDS: Дизайн

Вернемся в прошлое к тому, что уже готово – этот пост о том, как недизайнеры принимали дизайнерские решения и стали чуть взрослее (но не слишком).

Как все могло быть​
Как все могло быть​

ЛОГОТИПЫ БЕЗ АРТЕМИЯ ТАТЬЯНЫЧА ¯ \_(ツ)_/¯

В комментарии к первому посту нас спросили – что значит название нашей студии, WHA’EVER STUDIOS? ‘Wha’ever’ – это чилловое написание слова ‘whatever’, у которого есть два значения: «все, что угодно» и «да все равно!» (универсальный ответ здорового пофигиста). Над логотипом мы думали от этого слова.

​От очевидного к кое-чему поинтереснее
​От очевидного к кое-чему поинтереснее

Мы начали со второго значения слова ‘wha’ever’, но потом ушли в первое. Все, что угодно – это про безграничные возможности и творчество. Внутри куба на нашем логотипе целая вселенная, но он открыт и к чему-то извне!

Плод труда Ami, с которого началось наше сотрудничество​
Плод труда Ami, с которого началось наше сотрудничество​
WINTERSANDS: Дизайн

С логотипом игры было в каком-то смысле сложнее, потому что он тоже должен был отражать нашу главную установку: это фэнтези, но без вензелей. Госзаказ на это по счастливому и случайному стечению обстоятельств выполнила дизайнер из Сингапура Ванесса. Мы не знаем ее фамилии, но из-за приглянувшегося ей русского слова «осетр», какое-то время она фигурировала в нашей истории как «Осетр» Ванесса.

​Даже не будем показывать, что было <b>до</b> предложений Ванессы. Вот там был полный осетр.
​Даже не будем показывать, что было до предложений Ванессы. Вот там был полный осетр.

ЕСЛИ НЕ COMIC SANS

Шрифт логотипа, который мы выбрали, называется Tommaso, - и мы решили использовать его и в больших заголовках, в том числе в меню.

Как и Дон Томмасо в сериале «Молодой Папа», наш Tommaso оказался не тем, что мы ожидали​.
Как и Дон Томмасо в сериале «Молодой Папа», наш Tommaso оказался не тем, что мы ожидали​.

Оказалось, что шрифт Tommaso не существует в кириллице. И что нельзя просто взять и нарисовать его без спец. подготовки (typography – это отдельный вид искусства). Для шрифтов используются специальные программы и форматы, и чтобы буквы не прыгали, нужно строить их архитектурно точно. В итоге мы сделали это, но это была работа Виктора Франкенштейна: собрать из кусков латиницы кириллицу (буква «ф» - две «р»). Было волнительно, потому что у каждой буквы своя ширина (буква «ж» - жесть), и все буквы по-разному сочетаются из-за расстояния между их крайними элементами.

Оно живое!​
Оно живое!​

А лицензию на английский шрифт мы купили. И на второй шрифт, который используем в диалогах – TT Drugs. Как настоящие взрослые люди!

Как быстро они растут :’^)​
Как быстро они растут :’^)​

ПЯТЬ ЭЛЕМЕНТОВ

Интерфейс игры - это конструктор, и комбинаций элементов очень много. Все должно по отдельности быть классно и оригинально, и гармонично сочетаться в одном окне. Так, надо выбрать, как будут выглядеть:

  • панель главного меню (и расстояние между кнопками!)
  • кнопки (так, чтобы они были узнаваемыми, и играющий не гадал, что случится, если нажать)
  • панель диалога (чтобы все было видно, читабельно и понятно, кто говорит)
  • иконка глав. героя/героини (в анфас или нет? будет ли она мигать, или это жутковато?)
  • меню выбора действия/реплики (иногда оно загораживает собеседника!)
​И это еще не все курсоры...
​И это еще не все курсоры...

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

WINTERSANDS: Дизайн

Больше всего мы намучились с главным меню – вы можете увидеть разницу по первому мему в посте. С тех давних пор поменялось почти все, даже иконка Агаты больше не смотрит на играющего симметрично в анфас. Когда ты не дизайнер, с одной стороны, хочется уже утвердить что-то и пойти дальше, а с другой, не останавливаться на «это норм», потому что вдруг за углом есть «оно самое»?

СОХРАНИТЬ, НАСТРОИТЬ, ПОЛЮБОВАТЬСЯ

Со временем становится легче. Так, непринужденно пришла мысль на фоне остальных трех меню («Загрузить» / «Галерея» / «Настройки») нарисовать остальных трех Хранителей. Во всех меню присутствовали свои нюансы и варианты реализации. Вот, например, меню «Настроек»:

​Вариант с текстом
​Вариант с текстом
​Вариант с картинками
​Вариант с картинками

Как ни странно, но боль доставил только один незаметный элемент – окошки, в которые играющие будут что-то сохранять в меню «Сохранить» / «Загрузить» и в которых будут лежать постеры в меню «Галерея». Нам не хотелось, чтобы они выделялись и перекрывали картинку своего меню, поэтому в итоге мы вырезали их из нее же и сделали прозрачными.

WINTERSANDS: Дизайн
WINTERSANDS: Дизайн

Демо мы сделали, но точка не поставлена, и по мере того, как мы набираемся опыта и вкуса, мы можем решить что-то изменить. Так, для мобильной версии мы поправили пикселящие крохотные кнопки из ПК-версии, и они уже не выглядят как кнопки из 90-х.

​Этот гештальт закрыт!<br />
​Этот гештальт закрыт!

К тому же, вопросы на «что-то задизайнить» продолжают возникать: от логотипов двух Городов из сюжета игры до задника открыток, которые мы однажды напечатаем по WINTERSANDS. Сталкиваться с такими задачами больше не страшно, потому что игра от них становится только лучше, и потому, что в уже сделанном часто есть половина ответа (есть идея – на нее всегда найдется икеа).

Например, половина ответа на вопрос о том, где взять фоны для игры, уже есть в этом. Но об этом в следующем посте!

А еще мы писали:

99
2 комментария

Иллюстрации приятные! по интерфейсу - почему не пойдете проверенным путем, собирая его из привычных элементов в едином стиле просто? так скорее всего будет меньше когнитивных ошибок, да и игрокам будет привычнее.

1
Ответить

Спасибо!) Тут речь идет не о функциональном дизайне интерфейса, а именно о визуальном дизайне отдельных его элементов.
То есть вопросов с тем, что должно быть в ui и как работать не возникало (а во многом было изначально продиктовано спецификой жанра). Оставалось решить как все это должно выглядеть.

2
Ответить