Дизайны Sonic SCANF: с 2010 до наших дней

Всем привет, я Mackzwellz . Я уже некоторое время занимаюсь на Sonic SCANF визуальной составляющей. Ко многому из того, что вы видите или видели, приложил руку и я в том числе.

Я решил написать этот пост потому, что увидел, как прохладно приняли новый дизайн пользователи. Да, разумеется, лично я (как и многие, участвовавшие в разработке) не ожидал, что его так неожиданно и скоро выпустят в свет. Тем не менее, в визуальном плане он почти готов, и осталось лишь походить по разделам и допилить до ума всякие недоделанные штуки, или вообще кое-что переделать, например, галерею. Всё это и последние, финальные штрихи-доработки ещё займёт какое-то время, но, будем надеяться, все будут удовлетворены.

Я хочу поделиться своей историей, рассказать о том, как и почему я пришёл на СКАНФ, как и что делал, показать почти всё то, что осталось за кадром. А за кадром остались концепты, зарисовки, макеты — фотошопные или уже свёрстанные, браузерные.

Прежде, правда хочу извиниться перед пользователями и разработчиками. Достаточно задержек и недоработок произошли и по моей вине — я ленивый и склонный к прокрастинации человек, иногда страдающий от недостатка заинтересованности и мотивированности. Но по слухам, людям нравится, что я иногда делал и делаю, поэтому я до сих пор здесь. На данный момент я должен сканфу фон в стиле Sonic Generations, который готов где-то на 2/3. Shame on me.

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

2010-2011

Давным-давно дизайн СКАНФа был вот таким: http://info.sonicscanf.org/wiki/images/archive/e/e3/20100816214700%21Sonic_SCANF.png
Я увидел шапку, она мне понравилась, но показалась пресной, и на волне вдохновения сделал свой вариант: https://www.dropbox.com/s/avuqdmfpc6gqelk/0%20%5B11%20jan%5D%20scanflogo.png?dl=0
Много позже я показал его Некиту , и он, как мне кажется, сказал что-то вроде: "Неплохо, только у нас уже новый дизайн. Не хочешь взглянуть, чем мы сейчас заняты?". Я с радостью согласился.

В 2010 сканфовцы были вплотную заняты переводом Sonic Chronicles на русский язык. Я немножко помог с графикой и переводом, и мы каким-то чудом зарелизили и перевод и дизайн в новогоднюю ночь 2011-го. Сам дизайн делала Bluetooth, в готовом виде в новогоднюю ночь он выглядел вот так: http://info.sonicscanf.org/wiki/images/archive/e/e3/20120919135809%21Sonic_SCANF.png
В новом году Некит задался целью создать адаптированную для мобильных версию СКАНФа, а заодно добавить новых фич на основной сайт. Были планы раскрутить наш IRC-канал и привлечь туда посетителей, а также сделать интерфейс для Scanfonic'а, нашего IRC-бота, которым можно было бы пользоваться и через ICQ-протокол. Это отражено в первом концепте мобильной версии сайта (ниже, слева).
Последовавший (после ещё пары дублей) второй концепт (справа) уже более похож на что-то стоящее по тем временам.

На этом разработка мобильной версии (для меня) закончилась, и взор мой был обращён в сторону сайта, где тоже нужно было что-то делать. Следующий концепт (№3) — первое предложение по реализации раздела загрузок. Картинка, иконки и текст мои, но стоящего мало. Далее я сделал несколько бигбаров для подписей, чтобы пользователи других форумов могли поддержать СКАНФ, а также новый логотип, у которого были и альтернативные варианты: https://www.dropbox.com/s/hpnzq3m48mnuo1g/%5B11%20jul%5D%20scanfventurelogo_bonus.png?dl=0

Концепт под номером 4 — это проба придумать что-то своё, оригинальное в качестве возможного будущего дизайна, который должен будет прийти на смену дизайну Bluetooth . Был раскритикован за посредственную реализацию, отсутствие дизайна собственно блоков, да и вообще подошёл бы больше туристической фирме, чем сайту о Сонике. Зато ярко и солнечно!
Концепт номер пять выглядит довольно громоздко и непрактично, фиксированная ширина, и ладно бы облачка на фоне, но облачка в меню… Другие идеи мне, однако, не очень нравились, да и не было их, но “что-нибудь придумали бы”. Его зимний брат — №6 — продолжает и укрепляет традицию “несерьёзных комментариев”, на которые уходило зачастую больше созидательных сил, чем на сам дизайн. Траву и Angel Island на фоне, я, по-моему, рисовал в Paint Tool SAI, потому что настраивать кисточки в фотошопе никогда не умел.
Взамен фиксированной ширины я намеревался предложить пользователям крышесносящий, красивый, проработанный, атмосферный фон, на который можно было бы смотреть часами, забыв о контенте. Моё желание натолкнулось на сложности реализации и отсутствие умений и навыков не только рисования, но в особенности — терпения и трудолюбия. А также сайт — это всё же контент, а не фон… Но составить примерное впечатление о моём замысле вам поможет концепт №7: https://www.dropbox.com/s/lw4npfqpqbt4wka/7%20%5B11%20dec%5D%20scanfghz_prebeta_3dbackground.png?dl=0

В концепте №8 отразилось моё понимание того, что крутой “перспективный” фон сделать ни силёнок, ни времени, ни желания не хватит, и я на скоряк склепал фон на тематику моего любимого Грин Хилла: https://www.dropbox.com/s/t44n990ucfylpk0/8%20%5B11%20dec%5D%20scanfghzbeta_altlogo_flatback.png?dl=0
Всё в том же декабре месяце, поняв по отзывам, что с этой идеей дизайна дело никуда не пойдёт, меня посещает идея удариться в другую крайность, и я реализовываю концепт с графикой из Marble Garden из Sonic 3 на сегу сначала в фотошопе (№9), а затем и частично в браузере (№10).

2012

Однако понимая, что пиксельная графика — это также слишком радикально, я пытаюсь объединить свою страсть к шашкам с инновационно-классическим, и, препарировав тогдашний дизайн сканфа, в браузере набрасываю примерно то, что вижу у себя в голове. Неподходящая шапка в подарок (концепт №11).
Параллельно делаются макеты в фотошопе (№12 и 13) не без помощи Некита и Хелиаса , наблюдавших за процессом через join.me (в скайпе тогда экран нельзя было показывать, по-моему), появляется плохо реализованный концепт неплохой шапки (№14), а также поступают предложения от других желающий помочь с дизайном (№15, концепт ShadowHD): https://www.dropbox.com/s/cs18vkdny3o39wm/15%20%5B12%20mar%5D%20ShadowHD%27s%20Hot%20Scanf%20Concept.png?dl=0
В концепте №16 я показываю своё желание воззвать к фанатам-старичкам посредством шапки, где по мере сил и возможностей воспроизвожу сцену из начала Sonic 3, а также по-прежнему ужасные стили надписи Sonic SCANF. И, наконец, мы приходим к чему-то в концепте №17. Примерно так выглядел в самом начале дизайн, который я почему-то назвал Sonic SCANF Refix и который до сих пор можно включить на форуме. Оставалось лишь сделать шапку, которую я склепал из двух-трёх скриншотов Sonic Generations, а остальное вы и сами видели. https://www.dropbox.com/s/n4jsc5m4zpkf1uc/17%20%5B12%20apr%5D%20%20browser_refix1.2.png?dl=0

Концепт №18 — ещё один альтернативный вариант дизайна от Mefiresu , известного своим хаком-конверсией STH360DX для Sonic Adventure DX. https://www.dropbox.com/s/7u3oln92gq999kz/18%20%5B12%20oct%5D%20Mephiles%27s%20ProstoScanf.png?dl=0
Refix-дизайн мы выпустили 16 апреля 2012 года.
А ещё у нас сохранился рабочий макет с кривой шапкой и парой интересных вещей: http://misc.sonicscanf.org/refix2/index.html

2013

В начале года появляется немного классический, довольно приятный тёмно-синий макет от Bluetooth , который мог вдохнуть в сайт немного свежести, но показался многим слишком уж тёмным: https://www.dropbox.com/s/w47tn6v9wjo3rvb/22%20%5B13%20mid%5D%20QuantumScanf.png?dl=0

После этого мы приступаем к планированию нового дизайна — чем раньше начнёшь, тем больше времени будет на эксперименты, и его оказалось более чем достаточно. Теперь нам помогает в этом Arcieo , вот один из его последних концептов (уже с середины года): https://www.dropbox.com/s/2y69b88siwpdx3u/21%20%5B13%20jun%5D%20Arcieo%27s%20BlueScanf%20prototype6.8.png?dl=0
Здесь впервые появляется и реализуется на уровне макета идея блока обновлений и мини-новостей.
На волне его макетов меня посещает идея реализовать кое-что своё, лёгкое, но функциональное, удобное. Результатом становятся макеты номер 19 и 20: https://www.dropbox.com/s/f9isj6zl5zf9s0a/19%20%5B13%20mar%5D%20scanf2k13_mackz%2Barcieo_old_beta.png?dl=0

Отсутствие отзывов и предложений по-поводу моих последних макетов, а также энтузиазма в отношении макетов Арсио , хоть там и были интересные идеи, побуждает меня начать сначала. Результатом начинаний является, как и раньше, макет с пустой шапкой, красивым фоном и отсутствием дизайна блоков контента — концепты номер 23 и 24: https://www.dropbox.com/s/6ptv7guz3qmrkxp/24%20%5B13%20aug%5D%202k13%20scanf%20rebirth%20design%20mockup%20copy3.png?dl=0

Мучительно пытаясь придумать ещё что-то новое, я нахожу в гугле красивый фон, на котором есть шашки (шахматная клетка), к которым я питаю слабость со времён Грин Хилла, немного меняю оттенки синего соответственно, ввожу жёлтый цвет и ТРЕУГОЛЬНИЧКИ, от которых мы избавлялись впоследствии целый год: https://www.dropbox.com/s/ahb82k3qfqtm5j7/25%20%5B13%20sep%5D%202k13%20scanf%20rebirth%20updates.png?dl=0
Позже меня утихомиривают остальные участники и комментаторы, и мы в итоге останавливаемся на концепте 27: https://www.dropbox.com/s/aizfcub4i3ogmfo/27%20%5B13%20sep%5D%20rebirth%20browser.png?dl=0

Ближе к концу 2013 свою помощь в редизайне предлагает Rive , знакомый, в отличие от меня, с работами дизайнеров Apple, Microsoft и Google. С этого момента у нас появляется две линейки макетов — его и мои, и мы обмениваемся идеями и решениями, продолжая реализовывать своё видение нового дизайна. Сложность заключалась в том, что видения были достаточно туманными, и приходилось больше пробовать и смотреть, как оно будет смотреться, чем просто делать всё так, как тебе представлялось.
Кульминацией моей линейки в итоге стал макет №30 — в меру тёмный, насыщенный и отполированный. Недоставало только соников в шапке, но это было поправимо: https://www.dropbox.com/s/3h81udclw6i6gik/30%20%5B13%20nov%2C%20m%5D%202k13%20scanf%20rebirth%20%E2%80%93%20cleaned%20up%20and%20Rive%27d.png?dl=0
Rive же, попробовав преобразовать мой макет согласно своим идеям, вскоре пошёл своим путём и с нуля реализовал свой вариант, в несколько изменённом и доработанном виде ставший тем дизайном, который вы видите на сайте сейчас: https://www.dropbox.com/s/qq9azuf5sfz0492/32%20%5B13%20dec%2C%20full%20r%5D%20SCANF%202K13%20Super%20shapka%20idea%202.png?dl=0

2014

Тем временем я игрался с макетом в браузере, пытаясь как-то избежать появления соников в шапке и заодно добавить “резиновости” макету. Результатом была попытка перенести меню в область шапки, отголоски который вы видите и сегодня: https://www.dropbox.com/s/kmy3go9gmyn1ngt/33%20%5B14%20jan%5D%20rebirth%20browser%20-%20eto%20pizdec%20koroche%20a%20ne%20verstka.png?dl=0
Ещё от безысходности я намудрил один интересный макет, который также остался как без проработанной области блоков контента, так и без особого успеха среди публики. В конце концов, у нас уже был почти готовый дизайн: https://www.dropbox.com/s/f31ta0ynjp8aonv/34%20%5B14%20feb%2C%20m%5D%20scanf%20modern%20mockup%201920.png?dl=0
Мою идею, однако, в некотором роде поддержал Quale Colbys , добавив макету насыщенности и попробовав придать немного другой вид блокам контента: https://www.dropbox.com/s/ed9i8k0y66il9m7/36%20%5B14%20feb%5D%20scanf%20modern%20mockup%20colbys.png?dl=0

Райв продолжал развивать свой вариант (№37), а я — пытаться сделать что-то с шапкой сайта. Как вариант — перемешать всё, как в концепте №38.
В итоге Некитом был реализован в браузере вариант безо всякого безумия, зато с обновлениями: https://www.dropbox.com/s/b18e5avnsg2ovm0/40%20%5B14%20mar%5D%20browser%20-%202k14%20scanf%20rebirth%20pre-rive.png?dl=0

В свежих макетах Райв сменил оттенки синего на более спокойные, а также сделал иконки для верхней панели. Макет приобрёл более завершённый вид, из общей картины выбивались лишь кнопки с треугольничками: https://www.dropbox.com/s/b908ctkhvi1uoei/41%20%5B14%20mar%5D%20SCANF%202014%20top%20panel%20before%20I%20changed%20font%20sizes.png?dl=0
А финальным аккордом моей безысходности стал вариант с лого, выровненным по центру, а также “флажки” вместо треугольничков (концепт №42).

Райв же, не теряя времени даром, продолжал развивать свои идеи. Поменяв шапку, он также решил на время вернуться к градиентам, от которых мы старались избавиться, и сделать макет более контрастным — вдруг всё же будет смотреться? Судите сами, вот концепт: https://www.dropbox.com/s/s7pp8bden6i3ypu/44%20%5B14%20mar%2C%20r%2Bm%5D%20SCANF%202014%20colors%20gradiented%20%2B25%20CONTRAST%20-25%20BRIGHTNESS.png?dl=0
Кроме этого, появилась идея сделать выезжающее меню со свежими новостями, как на многих новостных сайтах, чтобы, сидя в других разделах, можно было проверить, нет ли чего нового на сониковской сцене, не уходя со страницы. Также впоследствии была реализована и выдача обсуждаемых тем с форума. Один из первых концептов: https://www.dropbox.com/s/3vb2wx1z8e3zngl/45%20%5B14%20apr%2C%20r%2Bc%5D%20SCANF%20menu%20colbystyle.png?dl=0

Основное нововведение следующих концептов — отказ от фона и границ в заголовках, чтобы сделать сам шрифт больше и виднее, а то и на заголовки-то не очень похоже. Играясь с уже реализованным макетом в браузере, я случайно убрал шапку и мне даже понравилось, заскринил: https://www.dropbox.com/s/jca9s84337kv2ai/47%20%5B14%20jul%5D%20rivescanf%20noheader%20edition.png?dl=0
Ничего не напоминает? : )
Последний на данном этапе концепт нового дизайна покажет вам наш фон из Sonic Generations, который я никак не могу перевести в вектор и доработать, а также пару идей, которые мы ещё планируем реализовать: https://www.dropbox.com/s/rwvukfqtypz6oyn/48%20%5B14%20aug%5D%20SCANF%202014%20experiments%20current.png?dl=0

Заключение

Что ж, надеюсь, эта экскурсия в дизайн нашего сайта не показалась вам слишком скучной или излишне растянутой. Я постарался как можно более кратко и в то же время полно отразить то, чем занимался я и другие люди, работавшие над дизайном, показать путь, который мы прошли, последовательность проб и ошибок, а также поделиться теми идеями, от которых мы отказались, но которые вы сможете разглядеть, улучшить, преобразовать и реализовать для себя и по-своему. Или вы просто можете сообщить, что вам понравилось и показалось интересным, или “было бы круто, если бы”. Нам правда важно знать.

Если вам по какой-то причине нужны исходники тех или иных макетов, или вам интересно, как была сделана та или иная штука, постучитесь ко мне в IRC или в личку на форуме. Если это связано с теми макетами, которые делал я, я с радостью вам отвечу. Авторов других макетов вам стоит спросить лично.
Ждём ваших отзывов в комментариях и в теме на форуме !

P.S.: в папке в дропбоксе также лежат варианты бигбаров для форумных подписей.
А вот те, что и в самом деле использовались: