App: My game is ugly. Advice on making it less ugly

Question

Following is the main screen you see when you start the app.

After touch, you get directed to the two options. You can either start from the last puzzle you solved or select from the list

This is the screen you will see if you select the second option

This is the game screenshots

Option open

GameExplanation : you move the Tetris shaped blocks to make certain pattern. I tried to make it nice and clean but instead I get an impression that this looks just plain lack of anything at all. I sincerely fear that this blunt look will destroy the first impression.

Ty everyone I am taking everyone's advice and editing a bit by a bit. when app starts, letters and the tetris blocks are all not organized. As the blur effect runs down, correct image shows up.

• trying to not use one-channeled-simple-color; mix more than one color.
• use pastel tones.
• re-scale images for higher quality.

Answer 1

A simple piece to make your Tetris puzzle look better is to go with the original design scheme tetris used:

Seperate the 7 colours that you will use (these don't need to stay close to the originals at all but may help with attracting those that recognize it's classic colour scheme.) Giving yourself a colour pallette before you have even made your set of shapes can really help and if you are going for the tetris shapes then you only need 7 colours for them.

You can use the fact that the tetrominos are actually 4 squares adjacent to each other instead of one solid shape if you prefer. This will make your design look more diverse but it can lend itself to many different design choices. You can make each segment into a square with bezel, rounding, inset or a border:

You can still apply these effects and styles to a solid tetromino shape and get different effects from it. I know from chat that you use Paint.NET so here are some useful plugins to get you started:

• Bevel Plugin
• Border Plugin
• Rounded Rectangle 1
• Rounded Rectangle 2

You could also play with segment shapes so instead of a square, do a circle or octagon and that way your background can play a larger part (giving gaps between the shapes will reveal what background you use.)

Ultimately, play around with your design and use some clean up techniques like the others mentioned: my personal favourite being the anti-aliasing. One of the best resources I found you can find here in this Stack Overflow question and here in this blog post that gives you many options. This will quickly ensure a lot of your display looks crisp and un-pixelated which I think is the main source of your issue.

To ensure you keep your apps "ugliness" scale to an all time low do 3 core things:

• Decide on a colour pallete: whatever colours you choose, pastel, solid, bevelled or otherwise - stick with it
• Use anti-aliasing: also called multisampling to make sure jagged edges from transparent or high contrast pixels are smoothed
• Create high resolution images: scaling an image up from a low resolution to higher almost always produces a lower quality. It doesn't matter how simple you make the design, however, use the highest resolution you can whilst being mindful of your resources budget. No need for your tetronimo to be 1920 x 1080 and 1.3Meg, but no harm in making it bigger than 10 x 10.

As an example of what you can acheive with a few minutes in Paint.NET or Photoshop, here is my example:

Where you go from there is completely up to you!

Answer 2

First of all: I'm no designer either, my games usually consist of "programmer art". ;)

Probably the quickest escape, congusbongus already noted in the comments:

• Get a designer. However, this most likely will cost you some money unless you know someone or got someone really interested in the game, etc.

But apart from that, there are some simple things you can try out on your own without having you to be some huge or awesome designer:

• Even if you want a "clean" look, avoid using pure colors, essentially any color consisting only of one component (like red but no blue or green) at full (or nearly full) intensity.

  If you're using any of the classic 16-color-display colors (like bright red or green), you'll automatically get some look that is often considered cheap or "too retro" (I'd say Windows 3.x shareware style). This also applies to using default greys: Don't do it. You'll get some rather boring and stale look rather fast.

  Just have a look at Windows 8's new UI: Many don't like it, I agree partially, but they got one thing right: colors!

  Here's a quick mockup where I simply changed some colors and I think it looks a lot better already:

  

• Don't do clean shapes. This really depends on your actual design and what you've got in mind, but you don't always have to use unicolored shapes to get a clean look. You could just add a slight texture, some highlights, and/or drop shadows to get something look more complex or not just that simple without overcomplicating things. For example, I picked the T shape, added some texture and a slight bevel and drop shadow:

  

  On a second thought, I'd agree it might look a bit too dark/dirty, but that would be just nother setting with the color slider.

• Use antialiasing. Looking clean is one thing, looking pixelized "I only got two colors" is something different.

• Avoid pixelization, unless it's your specific art style. This is similar to my previous point about antialiasing, however you should keep it minimal. Especially your fonts look blurry and pixelated, not clean or properly antialiased. This is most likely some upscaling issue with the font drawing.

• Add fluff: How about making the shapes a bit "gooey", e.g. let their outlines flow a bit when touched. Or how about black outlines that look like they're drawn with crayons or pencils? This will create a different, not so 100% clean look, but it might get you something more unique than "just another Win8 style app". Just make sure it's something you can notice in a screenshot as well! I agree with Boreal Games on adding "juice". But make sure it's more than just some touch feedback or (sound) effect you can't really show off in screenshots (I really hate screenshots on app stores with added in fingers or hands as they always feel photoshopped, even if they only added that hand).

Answer 3

A minimal color scheme can look great, and your color choices themselves are perfectly fine. However, you should make the graphics look sharper and cleaner. They're upscaled, which looks pretty bad. Create your graphics at a higher resolution than you need and then shrink them based on the device resolution.

In terms of making a UI more interesting, you should try and juice it up. Juice is anything that you add to a game to make it look or sound more fun while never changing the core gameplay. To explain better, watch a quick presentation on juice. Some easy ways of doing this are adding sound effects, screen shaking, and particles when you tap something. You'll make a user feel like they are a god in your little world by turning their finger into a ten ton pillar.

Answer 4

advice I had as a UI designer/developer a very long time ago is to design/develop in black and white, add colour only for emphasis. I've seen so many bits of software over the years that were destroyed by a theme, skin or graphics that the developer probably thought was a good idea at the time, but that looked pretty awful to anyone with a small amount of aesthetic judgement.

The other tip I would give is to make sure all of your bitmap assets are scaled correctly, with filtering and/or use anti-aliasing. The final rule is to design "sets", so that all of your assets have a similar aesthetic.

If you apply those 3 it's hard to go wrong :).

(Another quick tip: If you're going to use gradient fills, make them as subtle as possible).