Офтоп Николай Кучерюк
5 312

В свете недавних событий редизайна Steam выкладываю свой старый концепт

Всем привет.

В закладки

Решил я как-то сделать своё видение десктопной версии Steam на mac os. Хотя у дизайна нет привязки с оси, но не суть. Зачем спросите? Ну по профессии я UI\UX дизайнер, решил размяться. Отдых у меня по вечерам такой:)

Сделал пару экранов, успокоился и забил. Подумал "а, потом когда нибудь выложу на беханас". При это подтолкнули меня к отрисовке концепта отчасти слухи витавшие уже тогда, в 2018, в воздухе. В воде, в земле... :)

А тут бац! И первые официальные дизайны подъехали. Ну и я не смог устоять дабы не хайпануть на теме:) Тем более работа давно готова и лежит без дела.

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

Хорош трепаться:)

Это главный экран. В данном виде у него правая панель с активностями открыта.
Эта тоже главнй экран, но правая панель скрыта. Насколько важен этот функционал скрытия? на 2 из 5:)
Это выпадающее меню
Это активности пользователя
Библиотека
Ну и так, немного UI под конец:)

Получилось что-то такое:)

Материал опубликован пользователем. Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Николай Кучерюк", "author_type": "self", "tags": [], "comments": 88, "likes": 122, "favorites": 16, "is_advertisement": false, "subsite_label": "flood", "id": 43834, "is_wide": false, "is_ugc": true, "date": "Fri, 22 Mar 2019 07:33:17 +0300" }
{ "id": 43834, "author_id": 111543, "diff_limit": 1000, "urls": {"diff":"\/comments\/43834\/get","add":"\/comments\/43834\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/43834"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 64955, "last_count_and_date": null }

88 комментариев 88 комм.

Популярные

По порядку

Написать комментарий...
72

Не ну ради RDR2 я готов поставить себе любой дизайн в стиме.

Ответить
0

ЕГС надо ставить ради рдр2 (:

Ответить
4

Выпадающее меню слишком бросается в глаза

Ответить
92

Выпадающее меню слишком ВЫПАДАЕТ из всего стиля.

Ответить

Комментарий удален

10

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

P.s На самом деле я безработный бомж который даже предзаказ bloodlines2 не могу сделать

Ответить
7

если они такое сделают, я бесплатно доделаю этот скин и выложу в сеть)

Ответить
4

пфф, ДАЖЕ Блудлайнс 2 не можешь предзакать ))
Я сто гривен на Watch_Dogs 2 по скидке сейчас не могу себе позволить ахаххаха

Ответить
2

Я ведь нищий из рашки, чего уж тут греха тоить.

А если серьезно, то...
Ну, позволить то я ее себе могу, ибо 1500р это вообще не деньги, но не прямо сейчас, ибо есть в данный момент вещи поважнее, а хотелось просто прям сейчас предзаказать.
У меня просто с головой не хорошо, видимо и если я не куплю игра сразу, если захотелось мне ее купить, а буду там думать, читать обзоры и т.п, то я ее в 90% вообще не куплю.
Таким образом у меня 400+ игр в списке желаемого лежат.

Ответить
1

Ну вот да, есть такое дело .
Особенно про "если сейчас не купить\предзаказать , то потом не факт что вообще захочется " ахахах
Меня так порой бывает люто влечёт к чему-то, прям вот уже и предзаказ висит и чуть-ли не календари жадно рву в надежде что день выхода скоро настанет, а потом чего-то интерес может пропасть. Хотя, Ты ж вообще-то чуть о другом говорил))

Ответить
2

А у нас она стоит 299 руб., но я смотрю на неё, и вообще покупать не хочется. Не знаю, почему. Вроде, хотел поиграть, когда игра вышла. А сейчас – как представишь, что надо будет там бегать, несколько десятков часов тратить, выкраивать время – да ну её. Причём первая часть мне зашла, но прошло уже лет 5.

Ответить
0

По-идее почти одинаково стоит =)

Я сам даже не знаю как это внятно объяснить, но меня вроде даже прям на стадии трейлеров игра не интересовала, когда она вышла не интересовала , когда первые скидки погнали не интересовала, а буквально неделю назад в прямом смысле слова на ровном месте ВНЕЗАПНО мне почему-то стало хотеться в неё поиграть )))

Ответить
0

Там редизайн библиотеки на HTML5 будет, так что сомневаюсь, честно говоря

Ответить
6

"слухи витавшие уже тогда, в 2018"...
Ох уж этот далекий 2018, как молоды мы были.

Ответить
3

Что-то выпадающее меню белое как-то не в тему совсем, Стим то весь тёмный

Ответить
2

дабы добиться контрастности. ибо меню это другая сущность страницы, оно должно выделяться и акцент на себя перебирать раз юзер решил им воспользоваться)

Ответить
7

Угу и в ночи глаз резать будет. Тот же Discord меню делает ещё более тёмным - и контраст и не выбивается из дизайна.

Ответить
2

В динамике она уже будет на себя брать акцент, но ты ее тут сделал очень уж выбивающейся из общей концепции

Ответить
0

есть смысл сделать ее темней, но пофиг) может в другой раз

Ответить
1

UX, который мы заслужили

Ответить
4

Вроде выглядит секси =)
Теперь лето жду не только ради третьего сезона "Очень Странные Дела", но и ради обновы стима :))

Ответить
3

Скин бы такой сейчас пока новый дизайн не вышел.

Ответить
1

Вот ты и попался. Вопрос немного не по теме. Автор, подскажи плез литературу или ресурсы по UX/UI. Пишу всякие программульки, но интерфейс там как у куска говна. Последнее время просто начал сидеть на Pinterest и смотреть примеры интерфейса там.

Ответить
3

%)) http://johnydes.pro/aboutme вот намоем сайте книги советую прочитать, все они есть на русском. сорян что одной картинкой, на то были причины)

хабру читай, там много полезного по юи

сайты изучай, беханс полюби)

https://bureau.ru/bb/soviet/ вот тут просто дофигища полезного. для начала хватит)

Ответить
2

От рыбака рыбаку)

- Тайтлы большими буквами и с увеличенным расстоянием между буквами везде и повсюду. Зачем? Дурацко выглядит. (в выпадалке тоже)
- Белая выпадалка тоже стремная. Понятно что контраст все дела. Ну не так же. Даже #000 выглядел бы лучше.
- Вообще с типографикой какой-то косяк. Все прыгает и скачет.

Или в оригинале все так же было? Не помню че то.

Ответить
0

1000 людей 1000 мнений)

Ответить
0

Есть такое. Но белую выпадалку все равно не прощу:)

Ответить
0

да я уже себе не простил) все про нее высказались

Ответить
0

А как кстати рисуются десктопники? Никогда не приходилось делать еще. Тоже колонки, сетки, все дела? Тут же наверное не бутстрап история. Как это вообще все, как адаптируется?)

Ответить
0

сетки колонки все дела) все также)

Ответить
2

Клементина это запомнит XD

Ответить
1

Верхняя плажка мне прям нравится, давно ее надо переработать, а то она реально как с бородатых годов как уё*ище выглядит.
А вот за такую библиотеку я бы тебя ушатал (凸ಠ益ಠ)凸

Ответить
1

воу воу воу) что за агрессия? почему сразу ушатал, чем так сильно библиотека не понравилась?

Ответить
1

я что обязан объяснять?
Как человек имеющий библиотеку больше 200+ игр, могу сказать что рыться на странице отображающей только 16 игр это полный пиздец. (︶︹︺) а у тебя я даже настройки за внешний вид не увидел

Так что в таком режиме куда лучше, когда ты можешь сам расфасовать что куда и влезает больше

Ответить
0

новый анонсированный интерфейс меня тоже в сомнение вводит, что мне делать со своей 2к библиотекой, если конечно там будет удобный фильтр, то вопросов нет

Ответить
1

Лист с играми сбоку никуда не делся, плюс добавят новые фильтры по жанрам

Ответить
0

не обязан, но за объяснение спасибо

Ответить
1

Я возможно тебя расстрою, видно что ты считаешь дизайн крутым, но он достаточно тривиальный. Плитки? Да. Сетка? Тоже да. Такое придумать — нужно, конечно, скилл иметь, но это максимум средняя работа, есть куда расти, быть смелее.

Ответить
1

да не расстроишь) все верно говоришь, и плитки и сетки. классика. так смысл и был освежить и чутка улучшить текущий дизайн а не переосмыслить его заново. куда всегда есть расти)

Ответить
0

Хотя есть брать mobile first, там вообще минимализм надо делать. Раньше попроще было :)

Ответить
0

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

Ответить
1

Не самое лучшее решение для отображения библиотеки, даже текущий список воспринимается проще, в новом UI они наконецто добавили хоть какую то возможность катологизации это плюс, про то что визуально они всё сделали на двоечку я сейчас опущу но тут изменения чисто чтобы визуально нормально смотрелось, UX стал однозначно хуже, список тегов наверху тоже неудобный глазами преодолеть пол экрана чтобы просмотреть 5-6 тегов так себе опять же в текущем это лучше сделано. В общем визуально 7/10, UX 2/10 миша давай по новой.)

upd. когда откроешь белую менюху на темном фоне в ночи 300 раз обматеришь того кто её сделал за то что она тебя ослепила.)

Ответить
1

Из того что видел по редизайну стима у этого чувака самое адекватное https://www.behance.net/gallery/77394441/Steam-The-Ultimate-Online-Game-Platform-Concept

Ответить
1

http://rendom.net/steam3/

https://youtu.be/eitpJs0Wy3g

Вот этот концепт мне больше всего нравится

Ответить
0

ну да, вполне годно

Ответить
0

Дело любителя, конечно, но лично мне немного глаз режут бесконечные углы

Ответить
0

да, и обилие плашек. плашка на плашке)

Ответить
0

а вот в динамике он намного лучше смотрится чем в статике)

Ответить
0

Ужасный интерфейс. В таком найти нужную игру превращается в тяжёлое испытание.

Ответить
1

Выглядит прикольно, за труд плюсую, но вопрос как это всё будет выглядеть на маленьком экране? У меня некоторые сомнения есть, что всё не влезет если открывать не в фуллскрин

Ответить
0

Извини, братан, но хватит уже на -720р сидеть. Технологии идут вперед, надо догонять

Ответить
0

да вопрос скорее к адаптиву а не к качеству разрешения)

Ответить
0

А, ладно, понял

Ответить
0

Речь не об этом

Ответить
0

дааа, адаптива тут прорабатывать не меньше чем десктоп, согласен)

Ответить
0

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

Ответить
1

Молодец, провидец, а я в 2011 предсказал появление Новой Москвы, войну с Украиной и Крым.
Го на битву экстрасенсов?

Ответить
0

а при чем здесь провидец?)

Ответить
1

Классный дизайн, мне очень нравится
Про плашку тебе сказали. Про библиотеку - у людей большие библиотеки, и неудобно в таких плитках ориентироваться, если все не рассортировать в отделы. И ещё людям нравится открывающийся хаб справа, где показывается сколько ты провел времени в игре, ачивки и последние новости
Ты, наверное, сам в стиме используешь дизайн сетки, а не подробно?) Я вот да, поэтому твой дизайн смотрится идеально
Многие сейчас таким скином пользуются
https://imgur.com/a/55GSP
Максимально похож на текущий дизайн, так же много информации вмещает, но гармонично смотрится на последней винде

Ответить
0

да, я юзаю дизайн сетки) спс за отзыв)

Ответить
1

выглядит неплохо, но выпадающее меню слишком контрастирует.

Ответить
0

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

Ответить
0

нууууу, хз) всегда все можно улучшить. а так спасибо за отзыв)

Ответить
1

Улучшать-то можно до бесконечности. Но твой дизайн все равно намного лучше того, что показали велв.

Ответить
0

Чем?)
И не надо говорить, чем у валв. Х)

Ответить
0

Чем у валв Х)

Ну как минимум аккуратностью

Ответить
0

Ах ты сучка, я же просил х))
Ну, это как-то субъективно очень. Я конечно валв интерфейс смотрел с телефона (ну такое), и чего-то ужасного там не нашёл. Хотя подробнее посмотреть оч интересно

Ответить
1

Ну, обсуждая дизайн мы в любом случае утыкаемся в субъективщину.

Ответить
0

Что правда, то правда)

Ответить
0

Сколько у тебя на это ушло времени?

Ответить
1

не помню точно. неделька примерно, по вечерам делал

Ответить
1

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

Ответить
1

Мне кажется, это работает по-другому. Я сейчас сам изучаю ui/ux, и вот очень важно показывать свои дела другим людям. Так будешь знать, что исправить и в каком направлении двигаться

Ответить
0

да ладно, все свои))

Ответить
0

Вот-вот,ну ох*енно же смотрится верхний бар,который Вольво почему-то не додумались изменить в своем варианте.
Да и в целом очень гармонично так выглядит.

Ответить
0

Недостаточно уделил внимания ачивментам.

Ответить
0

Список слева так и не довёл до ума?

Ответить
0

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

Ответить
0

1) "..событий редизайна..", серьезно?
2) Не берусь судить с позиции профи - я не разработчик интерфейсов, но с позиции рядового пользователя норм. Всяко лучше, чем есть сейчас. Единственное, хотелось бы знать, как вы видите этот дизайн при других пропорциях экрана. И что побудило вас сделать такое светлое выпадающее меню на общем темном фоне =)

Ответить
0

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

Ответить
0

1) Ну, так не говорится. Оборот "в свете определенных/последних/недавних/... событий" предполагает, что события, о которых идёт речь, либо хорошо известны либо неизвестны и автор предпочел бы это так и оставить. Так что либо "в свете событий" либо "в свете редизайна".

Ответить
0

спс, учту)

Ответить
0

Отличная идея с окошком активностей, люди гаснуть хоть что-то писать туда)

Ответить
0

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "clmf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fjog" } } }, { "id": 10, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "clmf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-250597-0", "render_to": "inpage_VI-250597-0-1134314964", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=clmf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudo", "p2": "ftjf" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fzvc" } } } ]
EA анонсировала DLC для DLC
для аддона для спин-оффа
Подписаться на push-уведомления