Pixel Art Class - Intro to Game UI

Heya, Pals. This one is pretty theory-heavy and covers a lot of ground in very light detail because there's a lot of it. Next week we'll go into specifics on techniques for the art side of UI (texturing, animation, colour use, etc). Until then, enjoy!

0:00 Introduction
1:40 Basic UI Components
5:42 Navigation & Input
9:10 Feedback, Affordances & Skeuomorphism
13:23 Examples in Aseprite
19:00 Creating Visual Hierarchy
22:25 Applying Style & Theme
27:06 Animating Button States

----

This video features clips from my stream. Catch it live: Mon, Tues, Thurs and Fri 1-6pm AEST.

Later, pals!

[ThePC]

On the topic of UI: I really love how Aseprite's UI is made of pixel art, lol. It just looks so unique.

[adhdraw]

I am obsessed with what pixel artists/streamers come up with for their screen setup. I straight up said "oh my god" when I saw your border, that looks so cool! Okay, time to pay attention now

[saaqib_]

you are an absolute legend keep doing what you do.

[igrb]

That's the UI/UX crash course I really needed some time ago, i'ts just incredible how you bring together the fundamentals from so much stuff in a understandable and simple video.
Keep it up man, your channel is one of the best things on this entire platform

[MistaSmith]

Things like the splash effect and loading animation are what makes a UI fun to use, I believe. The key value of putting work into animating UI elements.

[alexnoman]

Something to keep in mind: never assume that the button label translated has anywhere close to the same length as the original, always design UI elements to fit a sentence. Especially important when the UI is drawn/ is a sprite sheet.

[clearswitch-mv]

Great video, I can feel the knowledge coursing through my veins.

[dustinferguson]

The first thing I thought of when it came to Skeumorphism is the Pip-Boy in the Fallout series.

Sidenote: I've just started watching your videos and they've been very helpful! Thank you!

[dirtywhitellama]

You know somebody knows what they're doing when they say "this is very rough" and yet it's instantly readable and exactly what you would expect from a polished piece, just short on some refinement and touchup.

[johncormier]

This is a fantastic video. Lots of detail but moving at a very comfortable pace. Thank you!

[loteknomad]

Great introductory video. Would enjoy some additional videos digging deeper into good UI / UX practices.

[rockabluesy]

I work as Front End Dev professionally for years for Web and Mobile apps development, which basically making the UI and experience for the user itself visually. But I have difficulties on applying my skill to pixelart, idk why, it just different. This video is definitely help alot.

[Kasiarzynka]

0:47 "user extermination" "shhh not right now, youtube is watching" makes me wanna go Hiii Twitch! Also I've rediscovered your channel recently since I decided to give pixel art another go and I got to say, I love the style of your videos - lots of substance, clear and comprehensive, teaches principles instead of showing how to replicate things. Thank you for these :D

[HeroG]

Do glad I found your channel I’m loving each video that comes ou, great work!

[ricardolima]

Very interesting and useful. Its nice to see how comfortable you are, when using Aseprite.

[zhulikkulik]

For binary choices like yes/no – please make sure to make them non cyclic. Like if I press right or down – I expect to either see some change, or not see any change if a second option is already selected.
Sometimes it's very hard to understand which button is selected even if the design isn't bad.

[carlosgm]

Thankyou for your videos, you are the best pixel-art teacher

[Holdsworthands]

27:41 OMFG ive been working for a year+ with aseprite and i didnt know that you could do that, ive been copying and pasting, i feel so dumb but now this will really help -_-

[alexandracoffin]

Hi Adam,
I'm new to your channel, but loving it so far!

I was hoping to request a video focusing a bit more on the background elements of your player controls and game window, like the scroll and character containers touched on in this video. I'm working on developing a simple point-and-click adventure that is largely driven by item interaction and the associated dialog box, but I want my console log to have a little bit more "life" to it an cohesiveness with the rest of the game.

[zb]

this was incredibly helpful - thank you!