Офтоп
Danny Dan
7177

Исправляем типографику в Steam

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

В закладки
Аудио

Предисловие

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

Текущие проблемы

При регулярной работе с интерфейсом Steam становится очевидно, что необходим полный редизайн архитектуры приложения. Однако зачастую даже самое простое применение базовых правил типографики может повысить скорость и удобство работы в системе. Для начала разберём основные и самые явные проблемы текущего дизайна Steam.

Нет никакой системности в элементах управления, а общая контрастность текста слишком низкая, это попросту неудобно читать

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

​И еще разберемся с кашей справа сверху: приведем ее к привычному по многим другим приложениям виду

Посмотрим на список игр
Здесь полная каша: кнопки и иконки малого того, что разного размера, так еще и разного стиля. Унифицируем все кнопки и иконки, а настройки фильтрации и сортировки прячем под единой кнопкой:

Мне было лень искать все иконки для всех игр или ачивок, поэтому пусть будут цветные квадратики

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

​А еще заменим звездочку в качестве избранного на сердечко, ведь мы же люди, а значит игра может попасть в самое сердечко

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

Работа с текстом и консистентность — наше все, позволяет решать многие проблемы без масштабного редизайна

Результат

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

Напишите в комментариях — стало лучше или нет? Я не касался здесь (только если чуть-чуть) UX, так как его проектирование займет год исследований и понимания глубинных проблем и решений. Короче, напиши мне, норм или не?

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

Написать
{ "author_name": "Danny Dan", "author_type": "self", "tags": [], "comments": 202, "likes": 114, "favorites": 88, "is_advertisement": false, "subsite_label": "flood", "id": 101155, "is_wide": false, "is_ugc": true, "date": "Fri, 07 Feb 2020 18:41:08 +0300", "is_special": false }
0
{ "id": 101155, "author_id": 20096, "diff_limit": 1000, "urls": {"diff":"\/comments\/101155\/get","add":"\/comments\/101155\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/101155"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 64955, "last_count_and_date": null }
202 комментария
Популярные
По порядку
Написать комментарий...
93

Имхо, стало только хуже. Зачем делать контрастный цвет текста на редкоюзаемых кнопках? (Воркшоп и прочее) Теперь вместо одной большой кнопки плей, выделяются другие. Кнопкам сверху ты убрал капслок, зачем? Это основный кнопки, в чем магия сделать их менее заметными? Так же с синей кнопкой инсталл/плей.

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

Ответить
10

В чем магия капслока? 
То же с Play, огромная выделяющаяся кнопка на сером фоне. 

Ответить
9

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

Ответить
30

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

А когда слово набрано капсом — они все имеют одинаковое пятно, так как выносные элементы отсутствуют, и человеку требуется больше времени, чтобы понять, что написано.

Ответить
13

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

Ответить
3

Не смотри на товары или сервисы для геймеров — хороший дизайн нужно искать не в них. Так же как нет хорошего дизайна в товарах, например, Razer (можете минусовать), там как раз вот все такое же вот — для геймеров, т.е. кричащее.

Ответить
17

Понятие "хороший дизайн" - это настолько вкусовщина, что тут какие-либо споры вообще неуместны. А загонять дизайн в какие-то рамки настольных учебников для выпускников дизайнерских ВУЗов - это вообще извращение.  

Ответить
2

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

Ответить
1

Текст с нижним регистром выглядит как текст, а не кнопка и тем более её название

Сервисом пользуются 97 млн пользователей. И никто не догадывается что это кнопки. Во дураки создатели, да? 

Ответить
0

Это не кнопки, а текстовые ссылки. Кнопка – текст в рамке, контрастной относительно фона.

Ответить
1

Тут рядом уже сказали, что это все же кнопки, но суть то не в этом. Кнопки это или ссылки - не важно. Суть в том, что 97 млн пользователей без проблем понимают что это кликабельный элемент и дополнительное выделение капсом не нужно.

Ответить
0

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

Ответить
12

PLAY / Play game
INSTALL / Install game
Простите, но под функционал "кнопки" для запука игры 1 слово капсом подходит больше.

Тоже касаемо текста в категориях. Ты сделал его ярче и меньше, не знаю каковы стали твои помыслы, но читаться стало только хуже.
Единственное, что есть хорошего в твоем посте - изменение кнопки "коллекции" ибо она изначально не настолько интуитивна и текстом действительно становится понятнее.

Ответить
4

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

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

Ответить
7

Капс используют только кликбейтеры на Ютубе.
Нормальные люди используют обычные правила написания или хотя бы делают это опциональным и выносят в настройки.

Ответить
1

Простите, а кто рекомендует? Это наоборот моветон считается

Ответить
0

Ребята не шарят просто, но и не должны.

Ответить
1

Да ладно что не шарят. Но нести ахинею с умным видом постеснялись бы хоть. 

Ответить
0

Прочитанное считается более трудным к прочтению, только и всего. Кто рекомендует использовать капс для заголовков и кнопок?

Ответить
–2

кто

Замечательный вопрос, как будто я записывал этих людей. Первый же гайдлайн из гугла https://blog.prototypr.io/all-caps-on-ui-good-or-bad-2570f14dc457

Ответить
0

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

Ответить
0

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

Ответить
0

Вот это аргумент)) 

Ответить
4

С точки зрения дизайна может быть, не шарю, но за столько лет все уже наизусть знают че там наверху капсом написано, смысла менять, не вижу. Твои исправления вообще ненужные, ну кроме home и collections.
Открою секрет: нужно приложить больше усилий, чтобы прочитать слово, набранное капслоком

И поэтому ты ИНСТАЛЛ поменял на Инсталл Гейм, добавив второе слово, вроде как теперь меньше усилий, чтоб прочитать слово, но на кой черт ты добавил еще одно? Чтоб уровнять шансы для ИНСТАЛЛ что ли?

Ответить
0

Чтобы кнопка такого же размера вышла и не потеряла в заметности в сравнении.) 

Ответить
0

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

Ответить
0

Если элементы, которые выделяют капсом, не предназначены для прочтения, то их нужно заменять иконками. Ты не находишь это странным — писать на элементе текст, который не предназначен для прочтения. А для чего тогда текст предназначен?

Ответить
1

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

Я не нахожу это странным, это делается повсеместно. Ты не сможешь заменить все важные элементы точными по смыслу иконками. Просто представь как у тебя будет выглядеть иконки вместо всего существующего капса. Вот я не могу представить иконки вместо этого текста. Они не смогут передать смысл каждого элемента в составе группы.

Ответить
0

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

Ответить
0

Челик прошел курсы по дизайну в ютубе за 3дня и возомнил себя богом. У меня просто фейспалмы от этого... редизайна

Ответить
1

Вот кстати да. Капс и не капс явно разделяют интерфейс стима и игр (хотя сверху совсем основные функции тоже написаны не капсом).
Разделы и функции магазина написаны капсом, а названия игр, ачивки, новости, обновления, карточки и тд - обычным текстом.

Ответить
1

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

Кнопка плэй никуда не делась, а все кнопки, имеющие отношение к игре, теперь стоят рядом. Если я хочу поиграть в игру — очевидно, где это сделать. А если я хочу удалить игру — я почему-то должен идти в самый правый угол и искать это действие там. Почему? По акцентам так же очевидно, какие из этих кнопок второстепенные.

Про капслок сверху снизу уже писал — если коротко, то он усложняет читаемость верхнего меню.

Ответить
3

Я с тобой согласен во всем, кроме контрастного цвета. Из-за него каша получается, страничка перегружена и взгляду не куда цепляться. Даже прием с уменьшением размера не исправит ситуации, этого недостаточно. 

Ответить
–1

Плюсую, хуета.

Ответить
41

 ​А еще заменим звездочку в качестве избранного на сердечко

Ага, и испортим семантику, ведь теперь люди будут думать, что ставят лайк игре, а не добавляют её в избранное.
 настройки фильтрации и сортировки прячем под единой кнопкой

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

Где-то я уже видел этот ю а й к и т. Чем текущая кнопка "скачать" (которая синяя) хуже той, что ты сделал? Она как-то даже получше, чем твой бутстрап-стайл.

На твоём скриншоте такая же каша, как и сейчас в стиме. Это субъективный взгляд со стороны. Мне кажется, у приложения стима не со шрифтами проблема, а с композицией всего вообще.

Ответить
–3

1. И в чем же существенная разница между избранным и лайком? Чем список лайков не равен списку избранного? Почему то, что я поставил лайк игре не равно тому, что я выделяю эту игру и добавляю ее в некий отдельный список?
2. Я перенес все родственные элементы (фильтрация и сортировка) в одно подменю, они и так были, но два разных по размещению, но одинаковых по сути.
3. Юай-кит это же не уникальная штука, особенно сегодня. Юай-кит — централизованное хранение элементов интерфейса, только и всего.

Ответить
4

1. У тебя лайки в вк, инстаграме потом образуют какой-то отдельный список лайкнутых постов?

Ответить
1

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

Ответить
–1

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

Да и ещё пример, дтф. Есть плюс к посту — по сути лайк, есть закладки. То что тебе понравилось =/ то что ты хотел бы у себя сохранить

Ответить
3

Список лайкнутого был еще при царе Горохе
Можно даже отфильтровать - видео, пост, фото

Ответить
2

Добро пожаловать, в Инстаграме: Настройки — Аккаунт — Список понравившихся публикаций.

Закладки в Инстаграме это аналог коллекций в Стиме, это не избранное.

Ответить
3

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

Ответить
1

У Стима уже есть лайки в виде положительных отзывов, поэтому никто его с сердечком не перепутает.

Ответить
27

Текущий вариант интерфейса лучше. Вот например набранные капсом слова. Неправильно так делать, говорит нам Тёма Лебедев? Но открыв лаунчер даже новичок сразу поймет, что главное в программе - МАГАЗИН, БИБЛИОТЕКА. УСТАНОВИТЬ.

Как же много дизайнеров которые шлёпают одинаковые, под копирку интерфейсы на беханс и дрибл, но они не работают в том же Steam.

Ответить
0

Магазин, Библиотека, Установить новичок видимо не поймет)

Ответить
6

Визуальные акценты.

Ответить
1

Визуальные акценты достигаются 1. размерностью 2. цветом 3. контрастностью
Не капсом) Капс усложняет чтение.

Ответить
6

Не стена текста же капсом написана. Кому как, конечно, но проблем с чтением одного слова капсом точно нет.

Ответить
8

Я поддержу. Я хоть и васян и вообще "недизайнер", но никаких проблем в капсе в пределах коротких слов/заголовков не вижу, а конкретно в текущем дизайне совершенно не напрягает капс.

Ответить
2

Это разновидность дизайнеров, которые ничего сложнее "uikit", типа того что автор выше выложил, не делали никогда в жизни. И в коллективной разработке дизайн-систем не учавствовали. Единственное их портфолио — кучка работ несуществующих нынче проектов.

Ответить
1

Да в принципе особой разницы нет, что так, что этак эти кнопки сделаны самым огромным шрифтом в программе, их в любом случае видно

Ответить
20

С большинством согласен (особенно про добавить воздуха списку игр), но верхний бар навигации мне больше текущий нравится

Ответить
9

А меня всегда мучал вопрос - нахуя там вообще два бара навигации.

Ответить
24

Один - для монстров, другой - для людей

Ответить
1

Отголосок хардкорного виндового прошлого

Ответить
0

Да, меня тоже.

Ответить
15

Бар навигации - минус. Зачем делать неважные элементы управления больше, а важные - меньше? Магазин и прочее куда чаще используются, чем настройки и т.д., а проблема с читаемостью, имхо, надуманна.
Список игр - минус. Во-первых, пропали кнопки быстрой фильтрации по готовым к запуску и недавней активностью. Во-вторых, "воздух" не нужен, категории заметно разделяют список игры. В-третьих, иконки заменяем просто на цветные квадраты? Тогда в чем их смысл?
Управление игрой: плюс/минус. Сдвинуть нижние кнопки может было бы и неплохо, чтобы вместить туда что-нибудь еще, но вот что-то лишнее к самой важной кнопкой в библиотеке "ИГРАТЬ" добавлять не стоит. Но тут это визуально мало на что влияет.

Ответить
2

>В-третьих, иконки заменяем просто на цветные квадраты? Тогда в чем их смысл?

Написано же - лень было искать иконки игр:) Но это напоминает дизайнеров которые текст рыбу вставляют везде в макете и выходит не очень) А подобрать верный контент материал - им лень. Тут та же история.

Ответить
0

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

Ответить
2

Я думал, что она не потихоньку прекращается, а давно прекратилась у любого адекватного человека.

Ответить
0

Я делаю все элементы управления удобными и очевидными для понимания. В категориях нарушено правило близости — от названия категории одинаковое расстояние вниз и вверх, это очень грубое и очевидное нарушение, именно поэтому категории сложно читать и понимать, где происходит разделение. Иконки и цветные квадраты — мне было лень тратить столько времени на поиск и выравнивание всех иконок :(

Ответить
2

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

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

Ответить
–1

Смотри, когда ты создаешь категории — список будет разрастаться. Это логично и понятно, потому что ты увеличиваешь количество информации, ты добавляешь что-то куда-то — оно не может стать меньше.

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

Ответить
0

И как в твоем варианте будет выглядеть свернутый список? 

Ответить
1

Точно так же, только с бОльшими отступами и лучшим контрастом) Ну и читабельность тоже будет повыше.

Ответить
0

 лучше дать списку разрастись, но при этом усилить визуальное разделение категорий.

Так вот я и спрашиваю: зачем, если и так все видно?

Ответить
13

Было по-васянски и с душой, стало корпоративно и скучно. Я против таких редизайнов.

Ответить
3

В мысли про душевное васянство что-то есть)

Ответить
4

Иконку выпадающего списка добавляешь в меню, но убираешь у выпадающего списка профиля? Почему?

Ответить
24

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

Ответить
3

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

Ответить
3

Когда-то ты поймёшь, что идеальный дизайн должен быть интересным и развлекать людей, а не только быть удобным

Ответить
11

Игры должны быть интересными и развлекать людей. А доступ к ним должен быть максимально быстрым и с минимумом препятствий.

Ответить
–3

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

Ответить
0

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

Ответить
0

Если для тебя нормально - это значит уныло, то да

Ответить
0

Как измерить нормально или не нормально, или уныло или не уныло? Я могу измерить количество кликов, и понять, что стало быстрее. Как измерить стало более уныло или менее уныло?

Ответить
0

Дизайн должен выполнять задачу. И в зависимости от условий может возникнуть необходимость в том числе и развлекать.

Ответить
2

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

Ответить
0

А вот это уже моя невнимательность, там, конечно же, нужна иконка :(

Ответить
10

Имхо, на экранах представлен не "редизайн", а крик души человека которого просто раздражает uppercase в шрифтах. Извините. 

Ответить
0

Почему раздражает? Апперкейс просто и банально не работает, тут ничего личного 

Ответить
6

Почему он не работает?

Ответить
0

Очевидно — у слов набранных строчными буквами уникальные пятна благодаря выносным элементам, а у слов, набранных капсом все пятна одинаковые, так как выносных элементов нет. Мозг считывает слова очень и очень (реально очень) и разные пятна помогают ему делать это быстрее. А капслок мешает делать это быстрее, хотя конечно в России издревле считается, что самое главное нужно набрать капсом и тогда точно все прочитают :)

Ответить
7

"Уникальные пятна" ускоряют скорость прочтения, но не акцентируют внимание на нужных местах, поэтому не советуют использовать uppercase на очень длинных словах/строках. Именно из-за правильной "геометрической" формы пятна советуют использовать uppercase для разделения глав, разделов меню, иэрархически основных элементов списков и т.п 

Ответить
0

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

Ответить
4

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

Ответить
0

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

Ответить
4

Если у вас в основных аргументах Facebook и ВК, тогда я снимаю эту тему с обсуждения :)

Ответить
0

Можете привести свои?

Ответить
1

Он точно не в тренде...

Ответить
4

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

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

Ответить
0

Если придать динамику сцены фотограф может только завалив горизонт — это же проблема, нет?

Ответить
2

Мозг считывает слова очень и очень (реально очень)

Гранату.
 хотя конечно в России издревле считается

Приплетаю_Россию.jpeg

Ответить
0

Это важно, мы все росли в среде, где дизайна долгое время не было, в отличии от Европы или США. Примеров различий очень много, и это играет роль в восприятии.

Ответить
2

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

Ответить
0

КАК БУДТО ЧТО-ТО ПЛОХОЕ. 
КАПС ВЕДЬ ТАК УДОБНО ЧИТАТЬ, НЕ ПРАВДА ЛИ?

Ответить
7

И иконки так и будут скучными и одноцветными?

Ответить
2

Да и обои скучные

Ответить
–1

ЕГС не сразу строился

Ответить
1

Зато покупался, лол.

Ответить
6

@Danny Dan
У тебя приоритетность элементов интерфейса нарушена вся. начиная от нелепого укрупнения неважных элементов и заканчивая выделением цветом не тех заголовков которые нужно. Любой UI в таких сложных сервисах рисуют опираясь на анализ UX. 

Ответить
1

А шо именно он укрупнил? Я прост за сегодня так задолбался на работе ,что уже в глаза долблюсь. И что именно выделил "не того"? 
Не докопаться ради спрашиваю, реально  интересно.

Ответить
5

Дико кайфую от больших надписей "STORE", "LIBRARY", так что...

Ответить
0

Принимается.

Ответить
4

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

А по поводу макета, мне в целом нравится, стало гораздо чище и глаза не разбегаются. Разве что, я бы оставил кнопки сортировки по дате запуска и установленных игр. Мне кажется их не спроста вынесли в нынешнем дизайне, ими все время пользуются.

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

Ответить
2

Лично я никого не оскорблял, но немного странно читать фразу "Короче, напиши мне, норм или не?", но не увидеть при этом даже голосовалку.

P.S. Лично мне дизайн автора не понравился.

Ответить
1

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

Ответить
4

Вечно дизайнеры придумывают новые проблемы из воздуха, лишь бы им давали работу.

Ответить
0

Потому что работу никто не дает просто так, ее нужно брать, это очевидно.

Ответить
0

Проблема в том, что сейчас дизайнером быть не сложно от слова совсем. Берете Figma, Illustrator, Sketch и заходите на Behance+Dribble. Вот и вся теоретическая основа. Поэтому многие компании требуют знания HTML и CSS как минимум. 

Ответить
0

Это проблема? Если только для посредственных дизайнеров, потому что не получится просто так взять Фигму, про Иллюстратор я вообще молчу, вы работали в нём вообще? И так же — выучить теорию по бихансу и дрибблу не выйдет.

Ответить
0

Да, во всех поработал. Иллюстратор лучший на мой взгляд.
Что значит не получится? Они одинаковые по логике работы, просто где-то инструментов меньше. Интернет завален туториалами под любой вопрос.
Берете и повторяете дизайн с Behance, внося свои идеи. Рано или поздно начнете чувствовать где должен быть какой элемент, а где нет.

Ответить
0

Лучший для чего? Одинаковые по логике работы? Иллюстратор сделан для работы с принтом, Фигма сделана для работы с экранами, они совершенно разные. Иллюстратор это софт на машине, Фигма это браузерное приложение, благодаря которому можно собрать дизайн с помощью токенов.

Так можно, да, а где тут проблема то?

Ответить
0

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

Проблема в том, что программисту нужно 2 месяца, чтобы стать дизайнером. А чтобы наоборот, надо 2 года. Хотя базу можно и за полгода усвоить.

Ответить
0

А проблема то тут в чем?

Ответить
0

Дизайнеры сейчас не нужны сами по себе. То же будет потом со многими областями, когда нейросети их заменят.

Ответить
0

Это супер большой диалог, про то кто кого заменит и когда. Я недавно буквально с подругой общался и у них на работе дизайнеры им за деньги нарисовали логотипы, которые выдаёт бесплатный конструктор логотипов. Нейросеть и мл заменят самых бездарных дизайнеров, я не спорю. Как стать бездарным дизайнером? Взять фигму и за 2 месяца накопировать примеров с дриббла, а потом тут же продавать свой труд. Таких заменят, да.

Ответить
1

Так 99% дизайнеров ничего своего не создают. А тот редкий 1% у всех на слуху.
Я понимаю, что человеку который старался придумывал что-то сам - такое слышать не приятно. Но это правда, более того, это заказчику не нужно, реальная задача дизайнера это UX. То есть ему надо пересмотреть ту хрень, что ему заказали с точки зрения пользователя и сделать так, чтобы люди не уходили в чужой продукт.
Ну кстати, если обучить нейросеть на Be и Dr, она сделает лучший интерфейс, чем 50-70% портфолио.

Ответить
–1

Ты используешь популистский приём с 99% и 1%, реальных цифр, чтобы такое заявлять, у тебя ведь нет. Дизайн это не всегда UX.

Ответить
0

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

Ответить
4

По-моему, у тебя плохо читаются категории. Старый список игр мне больше нравится

Ответить
4

Выглядит симпатично. 

Ответить
4

не, оригинальный вариант мне больше нравится, сори

Ответить
3

плохой дизайн, бездумно испорчены все наработки стима по UX, а UI Посредственный

очень толстый тролинг короче этими макетами очень тупого человека

Ответить
3

Не нравится, что нельзя расширить список игр чтобы названия влезали полностью. 

Ответить
0

А если мышку навести?

Ответить
4

Понятное дело, просто хотелось бы регулировать ширину списка.

Ответить
3

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

Ответить
1

ага, как у Кармака в 95)))

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

Ответить
3

И в чем разница?! Оба разрешения - 16/9 - широкоформатники. Только первое FullHD, а второе HD (разное число пикселей), но соотношение сторон у них одинаковое. Учи матчасть. 
1920/1080=16/9
1366/768=16/9

Ответить
0

Тут вопрос не в соотношении сторон, а в размере контента. Размер шрифта одинаковый для любых размеров экранов, то есть что на 1920 что на 1366 размер шрифта будет 16, и, соответственно, ширина списка игр будет одинаковая.

Пропорционально уменьшать элементы на меньших экранах — полный бред и, очевидно, так никто и не делает. А значит, что даже если мы на фуллхд увеличим по ширине список игр, чтобы туда влезало больше, то на 1366 этот список игр вообще весь экран закроет.

Ответить
0

Тебе человек ответил. 
Сейчас почти у всех широкоформатники.

твое заявление изначально неверно и основано только на твоем ошибочном опыте. 

Ответить
0

 приоритет в дизайне отдается всегда второму по популярности разрешению

Почему так? И это только к разрешению применимо или ещё где-то так же?

Ответить
1

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

Ответить
0

Понял, спасибо.
Про "от меньшего к большему" в вёрстке когда-то слышал

Ответить
1

Как пишут в комментариях к некоторым профилям в стиме

К Р А С U B O

Ответить
4

У тебя там слово, которое автор поста не сможет прочитать

Ответить
0

Лойс за шутку)

Ответить
2

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

Скорее Используем базовые правила типографики для редизайна Steam

Ответить
2

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

Ответить
2

Ну не знаю. Вроде и вещи правильные в основном написаны, но  дизайн твой выглядит как-то неряшливо. Оригинал кажется лучше структурированным и скомпонованным.
Да и некоторые  решения очень странные. Зачем свечение у кнопки Play? Зачем делать видимыми Post Message и кнопку смайлов по дефолту? Почему изменил хорошо читаемое "x of x" на забор в виде "x/x"? 

Ответить
2

Чувак, офигенно) реально стало намного лучше с минимумом изменений) но десктоп и ещё относительно обновленный. Стим вообще стремный из-за того, что там можно найти элементы и из 2020 и из 2008 на одной странице, если это всё в порядке привести то и ux на самом деле нормальный)

Ответить
1

Мало того, что новый интерфейс уродский, так он ещё и дико тормознутый. И самое главное, никто не возмущается, всем норм.

Ответить
2

Хз, у меня не тормозит. 

Ответить
0

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

Ответить
1

Правда зачем эти коллекции, хз даже

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

В смысле у меня вот 600 игр на аккаунте. Разумеется примерно 120 штук из списка уже пройдено. Еще примерно 50 штук тех, которые я хотел бы поиграть вот СКОРО, еще 100 которые хотел бы поиграть по настроению, еще 50 стратегий, которые я просматриваю вне очереди, по настроению... и так далее. 

Очень удобно когда библиотеку по таким вот "спискам" можно раскидать.

Ответить
1

Только со шрифтами согласен, а от всего остального просто тошнит, десктоп приложению сделали мобильный интерфейс с ui ассетами за 5$.

Ответить
1

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

Ответить
–3

Тесновато немного, но в целом без треша вроде капса повсюду, лойс!

Ответить
3

Ну не знаю. Тут помимо тестноты ещё и везде дико контрастные цвета, так что глаза просто разбегаются и не знаешь, на что смотреть.

Ответить
1

Комментарий удален по просьбе пользователя

Ответить
0

Звучит как комплимент, ведь важно, чтобы дизайн был современным. А нужен какой, несовременный?

Ответить
1

Комментарий удален по просьбе пользователя

Ответить
0

Как и не равно плохое, не так ли? Современное это всего лишь согласованное со временем, в котором что-то находится.

Ответить
0

Комментарий удален по просьбе пользователя

Ответить
0

Если ты ищешь плохое в современном дизайне или ты готов к тому, что все плохое — так и будет, ты найдёшь. Загугли неоморфизм, скоро заживем, будет едрить как весело.

Ответить
0

Комментарий удален по просьбе пользователя

Ответить
0

Ты фокусируешься не на том. Значки используются одни и те же только по одной причине: они работают. Точка.

Ответить