Design 101: GUI Design

Hello everyone and welcome to the final Design 101 blog post!

Today I will be talking about GUI design. I will point out now that this is purely about design and I will not being going into anything about programming. I can not help you there. However, some of these tutorials may be helpful to get you started: one two three

When I first started looking into GUI I was totally confused. Professionally I am a print designer so the world of screen graphics was pretty foreign. How was I meant to set things up? What were the rules? How the hell do those slidey bar things work??? What helped me a lot to get started was to actually look through some PSDs of GUI. It gave me an idea of how to lay things out and what would and would not work. So in that field of thought I’m providing some of my own PSDs to give people an idea of how I personally lay things out. This isn’t the one and only way, just the way I happened to do it this particular time. If something works better for you then that is the way you should go. Please note that these are for reference only and you may not use any of the elements in your own work.

In this blog I will be covering specific aspects of design including why you should do custom GUI, different aspects of GUI, design process and actually mocking up the GUI that can then be taken and used to program the GUI. To be clear, I can’t give you a walkthrough on how to design. It’s not one of those things that can be done through paint by numbers. Design is often about following your instincts on what is and isn’t good design. To hone your instincts you need to have good taste. Taste, like skill, is something you can gain through observation. The more you look at good designs and acquaint yourself with how things work, the better your taste will get and the better you will be at being able to make judgement calls.


Design 101: Logo Design

Hi Everyone!

I must apoligise for the huge delay in getting this written up and published. A lot of things have happened in the past 7 months and this blog entry definitely ended up on the backburner. It also went through a couple iterations in that time. So without further ado, let’s get on with it!

Originally I was going to talk about logo design and GUI design at the same time, but the article became quite lengthy. I have decided to split them up and deal with them one at a time. The first part will be about Logo Design.


Design 101: Design Process

Hi everyone!

In this blog I am going to talk about the design process. The design process is a systematic approach to design that helps give structure to the creative practice. This is important for designers and other creative workers because often you have to force creativity in order to do your job. The other reason this process exists is because it will bring out the very best you have to give. This process is one of survival of the fittest, and only the strongest ideas survive. It’s really hard to get the best out of your ideas if you don’t follow this system since we often default to common cliches and stereotypes first and foremost. To get to the creative parts, you often have to push a little further and look at things in a different way.

While I am going through this process as if it was linear, it should be noted that it often isn’t. It isn’t even circular which is what a lot of diagrams will show it as being. As you are going through the steps, you will often revisit the previous ones. When you are doing development you will go back to your ideation. When you are doing refinement you will go back to your research. All of the steps tie into each other pretty closely and if you ever feel like you need to go back, then that too is a part of the process.

Declaimer: I do not always use this process. When I am at work and I’m working on a logo or publication design I definitely do, but since I’m often short on time for my hobby I cut corners when I design for VNs. While I’m pretty familiar with design by this stage I have no doubt that my work would be much stronger if I followed this process.

The brief is basically your guiding star when it comes to design. You should constantly be coming back to it to make sure you are on the right path. It’s a great tool for when you get a bit stuck or when you have to make some choices. A brief is usually an agreement between yourself and a client, but even if you are in an informal team or by yourself it’s a really great idea to jot down a brief at the beginning. A brief may contain the following, which is a good place to start:

-A brief overview of the project (In the case of VNs, this could be a basic plot outline)
-The target audience of the designs (eg: Women, aged between 16 and 23)
-The tone of voice of the project (eg: Friendly, cheerful, old fashioned or serious, futuristic, modern)
-Mandatories (things that MUST be included in the designs)
-Deliverables (a list of things that will eventually be created)

These basic things should tell you the what, how and why of what you are about to do and getting it down in writing will help you focus on it. These can be as detailed as you need them to be and you should definitely feel free to add anything you think is important.

Research, research, research and more research. Research is the key to being a good designer. When I was a student at uni, I used to skimp on my research and I believe my work suffered for it. Now I LOVE doing it because it makes everything that comes after it easier and really gets the creative juices flowing. Research generally comes in two parts. One is to scout out the ‘competition’. If you are making VNs, this means everyone else who is making VNs. I’m not implying that you are competing with them because that depends on your intentions, but they exist in the same space as you and you should be checking out what they are doing. How do people in your genre deal with the design elements? What about people outside of your genre? What works and what doesn’t? Check out other games that aren’t VNs. Lots of games have GUIs or HUDs. Check out what they are doing as well. Basically be a massive sticky beak and collect all the information and samples you can.

The second part is where you research everything else, and this is where your brief is important. What you wrote down for tone of voice for example could be really useful. Let’s say you want to make a futuristic GUI. Go look at space ships, modern architectural design, graphic design, typography, art, anything that links with what you are looking for. You will be surprised about what you can find and what you can then use to get the look you want.

A big part of designing is simply soaking in all these things and starting to understand how visual language works (see my previous post here) so that when you are picking stuff out, you already have a relevant selection to choose from. You don’t have to magically come up with these things yourself, it doesn’t work that way. Just like with art, you want to have a lot of references to work from. And there are a lot of people out there that you can learn from, study what they are doing.

One of my favourite blogs to check out is Graphic Exchange

This is the creative part. I usually actually start this part while I research because things will pop into my head as I look around, so I take notes, make sketches or take a photo.

Ideation is basically where you come up with lots and lots of ideas. The key here is quantity, not quality. While that sounds bad, the premise is that your first ideas are going to be your most cliché ones. That’s okay. They are clichés because they are so common and so everyone tends to share these basic notions (they are also good since you can communicate with them very quickly, but they don’t make for interesting designs). So you should get those out first. Get your bad ideas out as well. It doesn’t matter if you think they are silly or awful, just sketch them down. If you don’t, they have a terrible habit of hanging around, and you never know, there might be a diamond in the rough hiding in there somewhere.

Keep going as far as you can and try and spread your ideas over as many different areas as possible. You want choices here. You want to explore and see what you can come up with. Try not to get your heart set on any particular design because right now you don’t really know which one will be best. Then you can move on to the next step.

Brainstorm! Create mind maps to help explore not only your main concept, but also associated concepts. You can use these different areas to focus and make sure you have a wide range of ideas.
Work on Paper! This is really important. We are a lot more free when we sketch by hand. When you start on the computer you will get caught up in the refinement stage long before you are ready. You need to get your ideas out quickly and paper is the best way to do it. Also, work in ink. You don’t want to be precious with perfectionism. Get messy with them and see where it takes you. Don’t get caught up in anything so that your ideas can flow freely.

This is where you take your best ideas and start to develop them. This is important because you might see some ideas that you thought were awesome totally fail when you actually try to apply them, while others might actually click a lot better than you were expecting. Make lots of sketches to test out what you are doing, try out different layouts and structures. Don’t try to assume you will know what something looks like before you try it out, just try it out. Remember you are trying to push your brain outside of its comfort zones, that’s where the most creative ideas are.

Try not to focus too much on colour and styling just yet. You are trying to cultivate a strong idea, so it’s important the base can stand up for itself without relying too heavily on the pretty elements. If your concept supports a particular colour or you feel something would work really well, make a note of it. Just don’t get in too deep before you are sure that your idea is a strong as it can be.

As you work, you will start weeding out the bad ideas and start focusing in on the good ones. If you have to go back to your ideation sketches, do it. You never know what is hidden there. Eventually you will get to the point where you have between 1-3 designs that you think are pretty awesome and more importantly, you think they will work.

This step is where you start actually putting those designs into practice. Work on your designs and see how they are actually going to function. You might realize one is too impractical, or another is too cluttered. Maybe you can steal ideas from one concept and stick them in another. This is where you should start making decisions on what you want to settle on.

Try out different colours, different styles, different structures. Try testing some of the elements and principles I mentioned in the last blog post. Have fun and be creative while you figure out what best fits your brief. See where your ideas will go.

You will eventually settle on your strongest idea and by this point it should be at a stage where hoping on to the next step should be easy since you’ll know exactly what you are doing since it’s all planned out.

This is the step where you make all the things! You have a design that has been well thought out and developed, now you just have to execute it. The whole point of the design process is that by the time you reach this point, everything should be easy, you should feel very confident about your design because you have looked at other alternatives and picked the strongest and you have a plan. The making of assets is usually pretty easy once you work out the problems and everything should flow from one thing to the next following the logic you have decided on.

And that’s pretty much it. If you have any questions feel free to ask :)

Next time I will go in to some of the technical details of creating logos and GUIs as well as some tips and hints I might have.

Thank you for reading!