game interface design

Learning Graphic Design On Your Own

A Quick Note…

Everyone learns differently. Some people like to ask questions in class, others like to watch videos that they can pause and replay, and even more people could prefer to just tinker and see what happens (I’m personally a tinkerer). The first thing you should do when learning on your own (so probably online or through books) is to do some research and know how you like to learn.

So, let’s start with… what even is “Graphic Design”?

Let’s get this straight… graphic designers aren’t fine artists. They are problem solvers, visual communicators, and sometimes curators of information in an aesthetically pleasing way. We organize information and try to make the world an easier-to-understand and more beautiful place. Of course, there are other fields like advertising where we communicate to customers why they should buy certain products. Or there are User Interface/Experience designers that will develop websites and video game interfaces and design how you interact with it. Look into graphic design and see what field you want to be in. What do you want to do with graphic design?

Fun fact, the google definition says: “the art or skill of combining text and pictures in advertisements, magazines, or books.” and to that, I’d like to say we do SO MUCH MORE.

Now that you know what you’re doing…Here’s the VERY BRIEF process!
(I may make individual posts for each step later on)

  1. Learn the basics
    1. Typography, how to use the basic principles of line, shape, color, and so on is usually for everyone no matter your field.
    2. Basics like composition are also very important. If you’re into editorial then typographic spreads will be more of your focus. If you’re in web design then seeing how websites are typically laid out will be a thing to look into. Basic typography, color theory, and principles still apply!
    3. Basics and principles are a google search (or a book) away! Everyone talks about these things ALL the time.
  2. Look up inspiration and develop an “eye” for design
    1. Follow design blogs! Follow other designers! On all of your social media! (There are so many Tumblr blogs and Instagram accounts solely dedicated to graphic design curation).
  3. Look into the big names of the industry
    1. Why were they remembered? Everyone else in the field probably remembers them for that, too.
    2. What was so great about them? Apply what you learn to your own work!
    3. If they’re well known, they probably have at least decent work to get inspired from!
  4. Research is done… time to do some work!
    1. If you’re just starting out, there are some things you’re probably not used to. Doing things by hand with sharpie markers on paper will definitely help train your eye and mind to think more about communication, not pretty things. 
    2. Abstract things down into simple shapes. Then try communicating that same object with fewer shapes. Maybe only lines? Geometric style? Play around with communication! This is key when you get into icons, logos, and other visuals that require a more minimal look. 
    3. Remember, you make information more easily accessible. The best logos are easy to remember because they are simple and effective. Your work may one day need that kind of punch!
  5. The jump from traditional to digital
    1. It’s time to learn about your program(s) of choice… my biggest piece of advice would be to just mess with it. Learning on your own by trying to make something is one of the best ways to train your mind and body on how to use the programs.
    2. Try every tool. Try making basic shapes. Then make basic objects with those shapes. Then try making a person or something more complicated. Try to test every tool to see what you’d use it for!
    3. Don’t know anything or how to do something? Google it! If you’re asking there’s probably 5+ different YouTube videos, 3+ articles, and 100+ tutorials on how to do it.
  6. Let’s work on projects!
    1. Now that you’re familiar with the history, principles, other designers, and the programs… just keep on making stuff!
    2. Making your own projects (make your own website, business cards, a flyer for a club, a T-Shirt, and so on…) is my biggest recommendation on how to learn graphic design. Actually applying everything you’ve learned will make you think in a problem-solving way! Also sharing things that you’ve made that actually matter is way more fun than sharing a fancy circle you made with no context. (You can say “look at this T-Shirt I made!” instead of “look at this weird circle I made!”)
  7. Get feedback from designers and non-designers
    1. Once you’ve made stuff… ask everyone! Non-designers will give you a client’s perspective of your work. A designer’s perspective will help you grow as a designer and they may see things that you and your average person wouldn’t have noticed. (you’re always free to ask me if you’d like!)
    2. Please remember to not take feedback personally (unless they’re being rude, then just ignore them). You’re learning and growing and there’s always room for improvement. A lot of feedback is not a bad thing!
  8. Stay determined!
    1. Being a designer isn’t easy. That T-Shirt you made that took you a couple days? Someone could say they don’t get it. Other designers could say there was a better way to execute your idea. Another person may even say it looks like something else!
    2. When you design you have to expect to make revisions, rethinking, and making more revisions until it’s at a good enough place to publish. But no matter what, you have to remember that it’s not about PERFECTION. It’s about getting it DONE and learning to grow. No one is perfect, and it’s mostly subjective, so just take the criticism you agree with and don’t apply what you disagree with. As a designer, you should know what’s right, wrong, or what you should consider bringing up to other designers.
    3. KEEP MAKING MORE STUFF! You can even remake older stuff as you go on! Just keep going!

That’s my super brief process!

Now honestly, I could’ve gotten down into the nitty gritty details of each step, but this is basically how I’d suggest going about it if you want to get a head start before getting into college, or you want to just learn on your own.

If you guys have any additional questions or want me to go more in-depth about anything, feel free to let me know! :)

2

Hey guys, I’m almost done with the skill menus. These were a pain because of the huge amount of information that skills contain, and the skill menu was probably the worst part of the GUI in EBF4.

I think I managed to make things much cleaner this time, with skills neatly sorted by type, and the upgrade window clearly showing you exactly what is changing. Also there’s no penalty for moving extra skills between players this time.

Some of the UI work I did for my thesis, Fallen Road, an adventure exploration rpg I developed concept work for.

The top video is a snippet of the title screen I created, to show off the swipe animation on the title.

I also developed energy bars for the two main characters, showing how the interface would interact in-game. The player uses energy with specific actions, and the bar will go down consequently, but when the player uses up the bar, the character will pause and have to talk a tiny breather before they can preform certain actions again. For instance, Seng (the lion guardian) will expend energy when flying as he pushes his wings to gain height, so during flight the player has to balance how high they want to go with the amount of energy they have in their bar.

The last icon is a dig spot indicator. Hidden throughout the desert are areas with hidden treasures that, if the player digs with Seng, can be uncovered and sold at pawn shops, used to decorate wells, or equipped.

youtube

I can’t help but think of this episode, whenever I see Persona 5’s awesome UI design.  ^u^  I normally hate turn-based combat (after failing to enjoy Dragon Quest’s, FF6’s, & FF7’s combat), but if that Persona 5 music is playing and that graphic design is on screen, I don’t think I mind anymore.  And that’s really amazing to me! *o* I’m actually excited to play turn-based!  O.O!  And I love seeing all the memes of everyone slapping the Persona 5 battle UI on everything!  LOL  Who knew a UI system would look so good, we’d want to put it on EVERYTHING?  ^o^  

I’ve finished the new forge menu!
A big addition is that captured foes must now be used to upgrade some equips!
(A fan suggested this a few days ago and I of course had to do it)

So not only are foes killed for food and items, they’re also melted down (presumably while still alive) to be used as crafting materials.

Capturing tough monsters more than once would be a chore, so I’m sticking to easy/medium foes for this. Some NPCs will also ask for them in side-quests.

Another notable feature is that equips don’t start with all of their special effects, so it’s like EBF3 again. You’ll have to upgrade stuff at least a little bit to see what it does.

4

Heya heya! So I’ve been really busy with more projects lately and right now it’s my only day off before I have to essentially camp out in the labs again (and either sleep in the building or in my car. Jeez it can get really cold :/). And because of that, I haven’t been able to do any personal/pony work so I’ve decided to go ahead and upload this, since you guys seemed to actually like it.

If you remember, I posted up earlier the concept art for a game idea I played with for a project in my Game Aesthetics class, and this is our second project in said class. This project called for us to either make another game concept or use the previous concept we’ve used and create the concept art for the User Interface for it. Once again, I chose my previous game idea of the frozen Egypt thing, and this is what I came up with.

So the first image is of a very rough gameplay simulation. Since the class seemed to think it was a side-scrolling platformer I went ahead and ran with that, although the game wouldn’t be a sidescroller if it ever came to fruition. Anyway, the HUD in the game would be made so it wouldn’t be intrusive to the player but still present in case the player ever needed to see what’s happening without pausing. To all of the basic necessities, all you have to do is press, say, select on a PS3 controller, otherwise your health and magic meter will only show up if you take damage or replenish them.

So this is how the health system would work: in the bottom right hand corner of the top image is your Sun Disk and red bar. The Sun Disk is a gift from the Goddess Sekhmet, and it’s installed in Batal’s collar and essentially acts as a shield because it’s the barrier that protects you from the harsh cold of the now-frozen Egypt, as well as damage taken from enemies and other means (example: falling from high ground). If the sun disk’s fire dies, then your shield will be gone, and when that happens you are vulnerable to both attacks and the cold weather. Being short haired, Batal’s red bar essentially acts as a timing meter for you to find shelter from the cold or some Solar Energy orbs to restore your sun disk before you essentially freeze to death. If you freeze or your health is completely taken out and you have no more of your nine lives left, you get a game over screen (seen in the last image provided).

The second and third images are concept works of the pause menu, which if animated, the scroll with “drop” onto the screen and roll itself out so you can see the contents within. The pause menu can be accessed by pressing the “Start” button and exited the say way, and contains your general menu (the 2nd image), your skills menu (third image), your options, and your map. The skills menus contain two separate skill trees: the Blessings skill tree and the Abilities skill tree. The Blessings skill tree are abilities you obtain from the blessings of the Gods. As you rescue them from their imprisonment they will bless you with a new ability that will help you along your journey. For example, the god of the Nile, Sobek, will grant you waterproof fur, which will allow you to swim in waters without immediately freezing to death for a short amount of time.

The Abilities skill tree is for general skills that you learn along the way as well as powering up skills you already have, such as the power behind your slash attack or just how high you can jump without the help of a blessing from the gods or something.

The last image of this set is the concept for the death screen if you get Game Over. If that happens, Batal will collapse and the world around them (the cat has no set gender) will fade to black. Anubis will then fade into existence from the darkness and pick Batal up with his magic, which forms a very faint Ankh symbol as Batal floats before him. The player will then choose their option. If Continue is chosen, Anubis will cocoon Batal in bandages before freeing him, which will revive him and allow the player to start at closest Anubis alter there is. If you choose “Load Game”, Anubis will wave his hands and you will disappear momentarily before another loading screen pops up and you are taken back to the save point you choose. If you choose “Quit”, then Anubis will speak his disappointment of your hesitance to continue your journey to save Egypt before proceeding to mummify you and send you into one of his tombs.

—–

WHEW! I thought a lot about how the interface would work but I’m no expert, so it could definitely use some polishing. That said, I think it isn’t too bad for a mock-up of the game. Which brings me to my next question.


If I were to actually go about making this into a real, playable game, would anyone actually be interested in playing it? More so, would anyone be interested in helping me work on it if I went about recruiting folks?