Логин или E-Mail:
Пароль:

Дизайны 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.: в папке в дропбоксе также лежат варианты бигбаров для форумных подписей.
А вот те, что и в самом деле использовались:



18 комментариев

  • Rive
  • 11 января 2015 г. 21:58
Mackzwellz, я, честно, тоже великий лентяй и прокрастинатор, так что мы с тобой просто идеальная пара
  • NeKit
  • 11 января 2015 г. 22:05
Скорее уж трио. В концепте №36 — вся “суть”.
  • Arcieo
  • 11 января 2015 г. 22:16
Ну, если интересно, энтузиазм пропал не сразу и концепт представлен не последний. Вот последний (с прошлой шапкой и мне лень вставлять текст, так что да) - http://i64.fastpic.ru/big/2015/0111/21/d10e9f05978976abbd5ef15858599d21.png
Ты удивляешься тому, что новый дизайн “приняли так прохладно”? Это примитивное убожество? Пфф, да юзеры должны были забросать дизайнеров гнилыми помидорами, а не “принять так прохладно”! Просто слов нет.

P.S. Без шапки дизайн стал совсем уныл. Г-ди, даже я смог бы лучше.
Отредактировано: 12 января 2015 г. 8:56
  • E-467619
  • 12 января 2015 г. 9:59
Прям целая история дизайнов.

Новый дизайн нормальный. Пилите дальше. А Филька что-то уж насчёт дизайна погорячился.
  • KiryTF
  • 12 января 2015 г. 11:36
Довольно занимательно. Люблю узнавать всякие закулисные штуки. Побольше бы таких статей.

Давно хотел сваять какой-нибудь праздничный дизайн, да никак руки не доходили, а теперь еще и комп сломался. Но после прочтения всего того выше, решил, что при возможности попытаюсь сделать. Скилл то есть. Хотя врядли займусь. Прокрастинация, все дела.. с:
  • Rive
  • 12 января 2015 г. 11:51
Emerald Phil, ой да с тобой всё давно было понятно. Если ты можешь — вперёд и с песней иди разрабатывай, кто тебя держит. На словах ты Лев Толстой, а на деле пень простой.
  • Спид
  • 12 января 2015 г. 13:41
Хорошая статья, держите плю… а, черт, у нас же тут не форум. Ну да ладно. Хотя я не согласен с тем, что вы такие прям ленивцы (:

А Филу предлагаю, раз он так хвалится, сделать свой макет дизайна сайта и показать нам. Ты же можешь, нет? :>
  • RAD
  • 12 января 2015 г. 13:53
ВЕРНИТЕ ПРЕДЫДУЩУЮ ОБОЛОЧКУ!!! Зачем вы убрали картинку и красивые кнопочки? ЗАЧЕМ?!!!
2013 был лучший :(
Отредактировано: 12 января 2015 г. 13:55
Юзеры помидорами не забросают, ибо более чем половине сайта нравится новый дизайн. А вот шапку возвращать нужно, да
  • Kaoma777
  • 12 января 2015 г. 15:18
О_О Я хочу их все назад!!
Много же я тем пропустила, пока не была зарегана.
Rive, SpeedTH, не можете ответить и поэтому отмазываетесь шаблонным “сделай лучше”? Но попробую, да.
Ну ты попробуй.
Афигеть шапки были!Супер!Дали много полезной информации.Читала на одном дыхании.
P.S.По вашему тексту только документальный фильм снимать не иначе.
Про необходимость шапки - присоединяюсь к уже написавшим по этому поводу. А вот про новый дизайн… Не могу сказать, что он мне не нравится, но с минимализмом немного переборщили. Я, конечно, понимаю, что простота и лаконичность - наше все, но все же было бы лучше (по моему скромному мнению) добавить ещё чуть-чуть деталей каких-нибудь, например, тени для надписей или небольшой переход цвета (от более глубокого к более светлому), или, может быть добавить третий цвет (желтый, допустим), или, наконец приделать к заголовкам маленькие картинки в сониковском стиле (те же колечки, скажем). Разумеется, не нужно пихать все из того, что я перечислила, но добавить что-нибудь было бы неплохо. А то так с первого взгляда как-то и непонятно, на какой сайт попали.
  • Red TF
  • 12 января 2015 г. 17:53
Спасибо комментатору выше, мы рассмотрим ваше предложение.
  • SwalloW
  • 12 января 2015 г. 18:10
А нельзя каждому пользователю ставить понравившуюся шапку?

  • Borus
  • 15 января 2015 г. 18:35
Очень рад, что вы добавили адаптивность.
Отредактировано: 15 января 2015 г. 18:36