2159
Ру-канал про игровые интерфейсы, UX для игр и всего, что с ними связано! Youtube| https://www.youtube.com/@gameui-uxcommunity5919 Discord | Game UI/UX Russian Edition https://discord.gg/2F85fPxuab
Пиарю потому что могу, что вы мне сделаете (ч.2) =)
У участника чата вышла игра. Давайте же отсыпем человеку лайков! (и поиграем, если понравилось)
https://store.steampowered.com/app/2059170/Quasimorph/
________________________
Lana
🕹 Всем ЧЕТВЕРГА! 🕹
И это значит -- сегодня у нас ЗАКЛЮЧИТЕЛЬНЫЙ СТРИМ ЧЕЛЛЕНДЖА!
20:00 по Мск. Дискорд
Приходите, приносите себя и свои работы, не важно на какой стадии вы остановились!
Поболтаем, посмотрим что получилось, что было легко и что сложно.
Ну и конечно решим, быть ли БАТТЛПАССу 2? (спустя перерыв).
___________________
Lana
Запись встречи с этого четверга: https://youtu.be/hk1FSoRFA_g
Сейчас стадия полишинга ваших работ, поэтому уже пора финализировать ваши инвентари. Если вы делаете предыдущие этапы, то тоже не стесняйтесь их показывать. Если что-то не получается или не знаете что и как делать дальше, спрашивайте.
Не забывайте делиться процессом работы, итоговыми результатами стейджей в чате телеграмма, дискорде и своих социальных сетях с тегами #uiuxbattlepass #gameuiuxchallenge
За помощью по любым вопросам, даже которые могут показаться вам глупыми, не стесняйтесь обращаться:
Чат| https://t.me/joinchat/IFeejlAvb5q52Ol7YRSjdw
Discord | https://discord.gg/2F85fPxuab
_______________________
Shvets Dmitry
Уже через 5 минут в рамках нашего батлпасса начнется лекция от @alenaeres про то, как создавать графику для своих интерфейсов!
Присоединяйтесь к прослушиванию полезной информации в нашем дискорде https://discord.gg/2F85fPxuab
______________
Dmitry Shvets
Напоминалка!
Сегодня в 20:00 стрим.
Приносите себя и свои крутые проекты.
Видео с этого четверга: https://youtu.be/R775lw23Rec
К следующему четвергу нужно подготовить (хотя возможно этап снова растянется на 2 недели):
- сделать концепт графики на одном экране (обязательно выбрать экран с наибольшим количеством элементов, чтобы по максимуму охватить графикой элементы)
- начать составлять UI-kit
Если вы использовали компоненты в фигме по максимуму, то при добавлении графики у вас в почти во всех прототипах заменятся элементы.
Не забывайте делиться процессом работы, итоговыми результатами стейджей в чате телеграмма, дискорде и своих социальных сетях с тегами #uiuxbattlepass #gameuiuxchallenge
За помощью по любым вопросам, даже которые могут показаться вам глупыми, не стесняйтесь обращаться:
Чат| https://t.me/joinchat/IFeejlAvb5q52Ol7YRSjdw
Discord | https://discord.gg/2F85fPxuab
_______________________
Shvets Dmitry
Всем привет от Kira Sayko — нашего ментора и участника комьюнити!
Кира участвует в нашем UI/UX BATTLEPASS challenge
и начала делать вот такой шикарный документ
🔥ГАЙДЛАЙНы ДЛЯ РАЗНЫХ ПЛАТФОРМ 🔥
Поскольку основной Кирин опыт — это консоли, она накидала разной информации для них.
И, если вам есть что добавить, по любой из платформ, то файл доступен для редактирования, давайте попробуем сделать коллективную методичку (можно потом в пдф какое превратить или что-то такое).
Особой структуры документа пока нет, кроме того, что разные платформы — на разных страницах.
#uiuxbattlepass #gameuiuxchallenge #guidelines
________________________
Kira Sayko & Lana
Напоминалка: СТРИМ В 20:00 по МСК.
ТО есть через 10 мин.
К следующему четвергу нужно подготовить (хотя возможно этап растянется на 2 недели, посмотрим):
- всевозможные взаимодействия с вашим инвентарем, которые может совершить игрок
- заанимировать эти взаимодействия в фигме (задание со звездочкой)
Настоятельно рекомендую использовать компоненты по максимуму, если вы еще этого не делаете, прежде чем начинать показывать варианты взаимодействия пользователя с инвентарем (конечно если вы любите боль и страдания, то можете пропустить этот совет).
Не забывайте делиться процессом работы, итоговыми результатами стейджей в чате телеграмма, дискорде и своих социальных сетях с тегами #uiuxbattlepass #gameuiuxchallenge
За помощью по любым вопросам, даже которые могут показаться вам глупыми, не стесняйтесь обращаться:
Чат| https://t.me/joinchat/IFeejlAvb5q52Ol7YRSjdw
Discord | https://discord.gg/2F85fPxuab
______________________________
Shvets Dmitry
Всем привет!
Сегодня в 20:00 по Мск
состоится второй стрим
🕹 UI/UX Battlepass Challenge! 🕹
В соответствующем разделе дискорда # uiux-battlepass
уже даже есть несколько ссылок на прогресс работы.
Скидывайте свой прогресс в чат или в дискорд!
Или просто приходите обсудить и послушать.
(Менторы - вас мы ждём особенно ^^)
Правила всё те же: зашли в войс, встали на мьют.
Вопросы: в чат созвона или во второй части стрима, по очереди вслух.
#uiuxbattlepass #gameuiuxchallenge
ТГ канал /channel/gameuiux
Discord: https://discord.gg/2F85fPxuab
________________________
Lana
Атенсьон!
🕹🕹 ВИДЕО со встречи 13.07 🕹🕹
UI/UX Battlepass challenge | 1st call!
(Лайк, шер, репост во имя пресвятого UX'a!)
Отчёт: было 53 человека!
ЭТО ОФИГЕННО.
СПАСИБО ВСЕМ КТО ПРИШЁЛ!
И до встречи в следующий четверг.
P.S. в дискорде #uiux-battlepass Дима уже выложил свой фигма файл, можно смотреть.
Комьюнити просило, комьюнити получило!!!
Мы решили запустить наш первый тестовый челлендж
🔥 UI/UX BATTLEPASS 🔥
▪️КТО: ведущий этого баттлпасса — Дмитрий Швец @d1mson_afk, менторы и все участники комьюнити по желанию
▪️ЧТО: разрабатываем ИГРОВОЙ ИНВЕНТАРЬ
▪️КАК: встреча раз в неделю, ЧЕТВЕРГ 20:00-21:00 по Мск.
На встречах мы будем обсуждать пайплайн создания игрового интерфейса на примере Диминого процесса работы или на примере одной из работ участников баттлпасса. Если кому-то понадобится доп.фидбек или обсуждение, всегда можно продолжить общение в дискорде или в чате канала, это очень приветствуется
*(канал в дискорде будет создан).
———————————————————————
BATTLEPASS STAGES:
🔸1 RESEARCH▫️Определение стилистики, платформы, поиск референсов, общее флоу игрока
🔸2 WIREFRAMES▫️Как упрощать работу с помощью FIGMA при прототипировании, создание первого экрана
🔸3 USERFLOW▫️Проработка флоу, поиск корнеркейсов
🔸4 UI CONCEPT ART▫️Коцепт графики одного окна
🔸5 UI KIT▫️Поиск основных элементов для создания UI кита, сборка базового UI кита
🔸6 POLISHING▫️Правка UI элементов во флоу
🔸7 PORTFOLIO CASE▫️Финализация работы, оформление
Если вам понравится, вы можете также стримить в другие дни (например суббота вечер) и делиться своим процессом!
Можем даже попробовать делать подборки раз в неделю.
Если будете делиться работами с челленджа, пишите хештеги: #uiuxbattlepass #gameuiuxchallenge
Первая встреча: 13.07.23, 20:00 по мск, дискорд.
Что нужно: подумайте и выберите платформу для которой вы бы хотели делать инвентарь, жанр и стилистику. Выберите референсы 3-5 штук https://www.gameuidatabase.com и да прибудет с вами сила!
МЕНТОРАМ: если вы хотите поучаствовать в разборах пишите Дмитрию или админу.
_____________
Lana
🕹Про дизайн контроллелов полезное!🕹
——————
Спасибо за ссылку Irish Pippin
https://gamedesignframework.net/designing-game-controls/
🕹Святой (ну или почти уже святой) Edd Coats (автор Game UI Database) сделал ещё одну офигенную штуку:
Introducing PadCrafter!
"Create multiple variations of gamepad layouts across different modes and platforms, and solve button-related UX problems with ease.
No registration required, and sharing your work is as simple as copying the URL from your browser!"
https://twitter.com/EddCoates/status/1650847194163957766
Всем, кто (как я) спрашивал про разные раскладки, вот оно наша счастье!
______________
Lana
🔥 Пост фанатства Fernando Forero 🔥
Фернандо выложил свою разработку подарочных открыток в стили DIABLO.
https://www.behance.net/gallery/168872477/DIABLO-TEAM-2022-HOLIDAY-GIFT
И это, по моему мнению, просто офигительная работа с образом:
паттерн, который начинался как снежинка, превращается в узор как будто кровь по венам бежит. Восторг!
Ну и цветовая гамма, как всегда, просто ванлав.
Да, я предвзята, а что вы мне сделаете ^^
#inspiration
________________________
Lana
К этому четвергу нужно подготовить:
- UI-kit (если вы все делали через компоненты в фигме, то результат уже должен быть близок к финальному, если нет, то нужно на оставшиеся экраны раскинуть графику в рамках этой и следующей недели).
Видео c прекрасной презентации о том, как можно подходить к разработке графики интерфейса от @alenaeres можно посмотреть по ссылке
https://youtu.be/Ii-osaLT0vM
Не забывайте делиться процессом работы, итоговыми результатами стейджей в чате телеграмма, дискорде и своих социальных сетях с тегами #uiuxbattlepass #gameuiuxchallenge
За помощью по любым вопросам, даже которые могут показаться вам глупыми, не стесняйтесь обращаться:
Чат| https://t.me/joinchat/IFeejlAvb5q52Ol7YRSjdw
Discord | https://discord.gg/2F85fPxuab
______________
Dmitry Shvets
Запись встречи с этого четверга: https://youtu.be/wM9Sv_8NblI
Стадию концепта интерфейса мы продлеваем ещё на 1 неделю, так что у вас будет время доделать то, что вы не успели сделать, а также послушать подход Алены к разработке графики для интерфейсов.
Не забывайте делиться процессом работы, итоговыми результатами стейджей в чате телеграмма, дискорде и своих социальных сетях с тегами #uiuxbattlepass #gameuiuxchallenge
За помощью по любым вопросам, даже которые могут показаться вам глупыми, не стесняйтесь обращаться:
Чат| https://t.me/joinchat/IFeejlAvb5q52Ol7YRSjdw
Discord | https://discord.gg/2F85fPxuab
_______________________
Shvets Dmitry
🔸🕹ВСТРЕЧА КОМЬЮНИТИ🕹
В субботу вечером, 12го августа в Москве состоится встреча нашего комьюнити в баре.
Более подробная информация о месте и времени будет позднее. Предварительное время около 18:00.
🔸Если вы планируете прийти -- напишите в ЛС @d1mson_afk
______________________
Shvets Dmitry
Напоминалка: СТРИМ СЕГОДНЯ В 20:00 по мск.
Желаю вам классного стрима! Вспоминайте вопросы с прошлого четверга, задавайте новые.
—————
Lana
Всем доброго времени суток)
К четвергу у нас остается та же задача на прототипирование userflow по результатам голосования, чтобы было больше времени на допиливание экранов и вариантов взаимодействия.
К сожалению последний стрим записался без картинки (но зато меня было слышно🙃), поэтому в этот четверг будет краткий пересказ предыдущего.
Из хороших моментов со встречи на прошлой неделе Kira Sayko предложила всем, кто хочет фидбэков или просто похвастаться, закидывать свои ссылки на фигму в общую таблицу, чтобы никто не потерялся и все получили свой фидбэк.
https://docs.google.com/spreadsheets/d/1-GseiZQ1E1CeeooilQXPJQiFDQKtTinPEXpwpxp2msQ/edit?usp=sharing
__________________________
Shvets Dmitry
Всех с понедельником!
Часто спрашивают, а что же использовать в качестве фонов/задников для UI/UX проектов в своих портфолио. Если нет времени или сил рисовать своё, а чужую коммерческую работу не очень хочется брать.
Предлагаю для вас ссылки с бесплатными ресурсами для того, чтобы сделать проекты в вашем портфолио ещё сочнее и краше.
- Unsplash - склад с огромным количеством потрясающих фотографий для свободоного использования. Главное - не забывать давать ссылки на авторов работ, благо на страничке каждого фото при загрузке всплывает удобная и ёмкая ссылка.
- Mixamo - коллекция заригенных моделей персонажей и целой библиотеки анимаций для них. Можно скачать модели с анимациями и без, а также загружать и анимировать собственные риги, если хочется. Нужна регистрация либо логин через гугл или другой сторонний ресурс. Бесценно для быстрых мокапов в связке с Blender.
- Sketchfab - раз уж речь зашла о 3D, то и на Sketchfab есть много бесплатных моделей с лицензией Creative Commons вплоть до CC0 (что по сути синонимично public domain). Туда же часто выкладывают в открытый доступ фотограмметрию всяких музеев и исторически важных мест - а это уже готовый production value для ваших UI мокапов.
- Blender Market - кладезь прекрасных готовых материалов для Блендера, платных и бесплатных. От низкополигональных ферм до генераторов городов - здесь можно найти почти всё, что угодно.
- DaFont - ну, DaFont в представлении, наверное и не нуждается, но на всякий случай - это склад с самыми разными шрифтами, в том числе бесплатными для любого или частного использования.
- Freesound - если вы надумаете ещё и анимировать свои презентации, то Freesound - отличный ресурс для добычи аудио.
На этом пока всё, хорошей недели и мира вам.
Арви
🕹 UI/UX BATTLEPASS | STAGE 2 🕹
ВИДЕО со встречи 20.07
____________________________
Ведущий челленджа: Дмитрий Швец.
Модератор: Lana O'Way
Менторы: участники комьюнити
#uiuxbattlepass #gameuiuxchallenge
Пример того, что нужно сделать в рамках второго этапа UI/UX battlepass (к четвергу):
- набросать блоковую структуру окна
- добавить элементы, которые вы обозначили в техническом задании для себя
- подобрать картинки и иконки из интернета (или заложить под них место)
Ссылка на фигму
Не забывайте делиться процессом работы, итоговыми результатами стейджей, а также задавать вопросы (если что-то не знается или не получается) в чате телеграмма, дискорде и своих социальных сетях с тегами #uiuxbattlepass #gameuiuxchallenge
ТГ канал /channel/gameuiux
Discord: https://discord.gg/2F85fPxuab
____________________________
Dmitry Shvets
UI/UX Battlepass: Stage 2
На этом этапе необходимо:
1. составить себе задачу, по которой вы будете делать интерфейс (пример описан в конце поста, можно усложнять/дополнять или придумывать свою задачу).
2. Сделать первый вайрфрейм окна инвентаря (желательно, чтобы окончательный результат был в фигме и с компонентами, чтобы было в дальнейшем меньше работы)
Процессом работы можно (и нужно) делиться в чатике тг, дискорда, а также в своих соц сетях (не забывайте теги #uiuxbattlepass #gameuiuxchallenge)
___________________________________
Пример задачи, которую можно себе поставить на челенж.
Для простого варианта будет достаточно:
Платформа: mobile (iOS)
Минимальное разрешение - Iphone 7 (1334×750)
Стилистика: si-fi
- информация о предмете (название/описание)
- наличие фильтров сортировки предметов
- заполненные/пустые слоты
- нотификация новых предметов
Для усложнения можно добавить следующие функции инвентаря:
- Фильтры (категории предметов)
- Редкость предметов
- Описание предмета (статы/цена)
- Возможность экипировки предметов (надеть/снять)
- Количество предметов
- Счетчик валют
- Поп-апы/ховеры с информацией
- Прочность предмета
- Персонаж (если делаем лодаут)
- Слоты персонажа (экипированный/залоченый/открытый)
Также можно придумать различные другие функции инвентаря, главное рассчитывайте свои силы, чтобы челленж был в радость, а не в тяжесть:)
_______________________
Dmitry Shvets
🕹UI/UX Battlepass | Общие правила:
▪️ Voice RUS — тут будут проходить основные стримы по четвергам;
Вы также можете стримить свой прогресс, встречаться в дискорде и обсуждать работы и в другие дни. Это приветствуется!
▪️ Youtubegameui-uxcommunity5919"> Game UI-UX Community — сюда мы будем их выкладывать;
▪️Это наши хэштеги — #uiuxbattlepass #gameuiuxchallenge Куда постить: да куда хотите. Любая удобная вам соц.сеть;
▪️Прогресс работы Димы и обсуждение работ — будут здесь uiux-battlepass discord или в чате ТГ канала. Обязательно присылайте и показывайте ваши работы, если получится — мы будем делать подборки и постить в основной канал.
Также, если ваш прототип будет в Figma, участники могут оставлять комментарии прямо там.
Это будет наиболее удобным способом коммуникации.
‼️ПРИМЕЧАНИЕ‼️
• Первая половина стрима: прогресс ведущего и обсуждение этапа. Зашли на стрим — тут же встали на мьют.
Вторая половина стрима — вопросы, обсуждение и разбор работ участников, сколько успеем. Включаем микро и обсуждаем.
Мы попробуем первый раз с включенными у всех микро и надеемся на понимание и культурное поведение. Комментарии к стриму оставляем в bla-bla-voice.
• Фидбек должен быть по запросу и ТОЛЬКО по теме. Если вы попросили фидбек, держите в уме, что люди будут комментировать то, что видят. Да, даже не законченное. Комментирующие — то же самое, помните, что это процесс работы. Будьте вежливы.
• И стримы и комментарии: без оскорблений, политических или религиозных высказываний. За нарушение — бан.
▪️Если у вас остались вопросы — будем рады ответить.
Мы надеемся на веселье и классную движуху! И главное — всё зависит от комьюнити =) Будьте активными и общайтесь, и всё получится!
GL HF
_____________
Lana
Как не разводить бардак в дизайне: Собираем UI-kit
Александр Шульгин подготовил универсальные советы о том, что такое UI-кит, зачем он нужен, в чём его отличие от дизайн-системы, а также о том, на каком этапе и как его нужно создавать.
Главные советы по оформлению UI-кита:
• Всё, что встречается больше одного раза, должно быть оформлено в компонент
• В блок с цветом нужно добавить все цвета и их оттенки, а также градацию серого, тени и полупрозрачные элементы
• Для цветов и их оттенков важно использовать стили, чтобы не пришлось каждый раз вводить HEX-код. Для обозначения градации оттенков можно использовать числа в названиях стилей. Например, от 0 до 100, где 100 — самый тёмный, а 0 — самый светлый
• Для тёмной темы важно правильно оформить градацию оттенков, которая будет инвертированной. Если в светлой теме самый темный оттенок будет называться 100, то в тёмной — 0
• В блок с типографикой необходимо добавить все виды текста: заголовок, основной текст, сноски и прочее. Для каждого вида текста нужно задать следующие показатели: шрифт, начертание, размер, высота строки
• В блоке с иконками должны быть все иконки из интерфейса. Для каждой иконки важно сделать подложку размером с контейнер иконки
• Если у иконки на какой-то странице меняется цвет и размер, то нужно занести этот вариант иконки в UI-kit как новый элемент
• Кнопки, контроллеры, чекбоксы и другие элементы управления размещаются в одном блоке. При этом для них важно отрисовать все возможные состояния
• Каждый инпут, в который вводят определенный тип данных, нужно сделать компонентами, а также отрисовать для них все возможные состояния. Это же правило относится и к дропдаунам
• Сложносоставные компоненты нужно сделать максимально гибкими. В Figma для этого используются фреймы и автолейауты
• Хедер нужно делать отдельным цельным компонентом, у которого должны быть отрисованы разные состояния
_________________
Материал из Журналуса
#полезности
Интересности:
Роадмап, или путеводная звезда знаний в области UX-design. Здесь содержится хорошее объяснение многих концептов.
https://roadmap.sh/ux-design
И такая же тема, только для дизайн систем.
https://roadmap.sh/design-system
Пользуйтесь на здоровье!
Ваша Alena Eres
Всем пятницы!
🔸ПРО ПОРТФОЛИО, КЕЙСЫ и ВСЁ СОПУТСТВУЮЩЕЕ🔸
Как вы знаете, ваш админ вписалась в неожиданную движуху: меня позвали помочь с организацией UX/UI части, для THU Career Camp, 2023 spring edition.
Про это будет отдельный пост-фоллоу ап. =)
Но сегодня не об этом.
А про вечное-больное: ПОРТФОЛИО.
Во второй день один из спикеров ALEX TOKMAKCHIEV
______________
(Senior UX on Hytale. Previously UI/UX Lead at Creative Assembly on Total War.
Proud member @WeCanFixItInUI)
______________
в своём выступлении
"Understanding UI, UX, and UR roles in Games"
поделился довольно неожиданной мыслью.
Что мы часто советуем, когда у человека нет портфолио? Да, мы говорим -- ну возьми имеющиеся скрины из любимой (или целевой) игры и сделай свой вариант.
Очень частый ответ.
И не то чтобы он не правильный. Просто есть нюансы.
И вот что говорит Алекс: делая просто обрисовку или редизайн уже имеющегося скрина вы
- не знаете лимитов, которые были у команды
- у вас нет их даты по игрокам, тестов
- у вас нет знаний о технических ограничениях
🔸То есть обобщая: ВЫ ВНЕ КОНТЕКСТА ФИЧИ.
🔹И интереснее, если вы вместо этого попробуете придумать НОВУЮ ФИЧУ.
И сделаете скрины в стиле вашей целевой игры.
Если вы исследуете UI арт -- сделайте арт кейс.
Если вы дизайнер -- можно затащить полноценный кейс-стади, с гипотезами, проверками, выводами. И конечно скринами.
Придумайте фичу, которой в игре НЕТ, возможно даже и не будет.
Обоснуйте её.
Сделайте полноценный дизайн.
Тут зависит от вас. Вы можете попробовать замэтчить что-то подходящее, упороться в игровые форумы и вычитать что игроки давно просят то-то и то-то, и попробовать реализовать. А можете просто сказать "а что если..." и забацать в шутане режим визуальной новеллы =)
Или, например, чтобы остаться в рамках меты игры ситbбилделера -- сделать область которой ещё нет в игре.
Имхо, можно пойти дальше: это даже на арт може экстраполировать.
Пример: вам очень нравится мультфильм Клаус.
Что мы делаем, чтобы показать что
а) мы можем в заданный стиль
б) мы умеем думать
- рисуем что-то похожее, но допустим другой регион, не представленный в мультфильме, допустим Тропики. Всё тот же вопрос "А что если...?" =)
______________
В общем, это мысль мне очень понравилась.
Продумаю в следующий раз как бы так извернуться.
И, хоть лекции с конференции закрытые, Алекс, святой человек, обещал выложить полностью свою презентацию. Я постараюсь пошарить!
______________
Одно из его прошлых выступлений
https://youtu.be/p7SlpT2GFGs
https://bento.me/atokmakchiev
https://twitter.com/atokmakchiev
______________
Lana