Improved splash screen design

Question

The splash screen at the moment for my application is far from catching, but I'm no graphic designer and apart from the fact it looks bland and boring, I can't really work out what I need to do in order to make it look more appealing and modern.

I've tried to change the background to an image, but that seems to make it look quite busy - and I've tried changing the font and position of the logo but I've never been able to come up with much better.

Any ideas? And also in general, what principles should be followed in order to create a good splash screen? I've found articles about designing various other things such as icons, logos and so on but never found anything referencing splash screens in particular.

Answer 1

With all the good answers so far on alignment, composition and font choice I would only like to add that Logo and Font should work together in the same way, no matter if you use it in a splash screen or on a business card. The text is part of the logo.

What you saw in the suggestions so far is usage of whitespace to give the logo a place to "rest" in, while your first attempt uses up all the available space. Take advantage of the available space to bring order to your composition instead of filling it out completely. This should make it stand out more, even though the elements are smaller.

And just for the fun of it, here is my version:

Answer 2

The first trick to being a good designer is to actually see what you you are looking at and then verbalize it in some manner. This takes practice.

The second trick is to have good building blocks for your design.

The third trick is to move your components around until they work. For something as simple as this, you can literally print it out, cut out the three items and then move them around in a square until you like it.

As to the first trick, obvious things I see are:

) the bird is essentially pointing, make the bird look to the center of the image, not the edge (unless when composited, the bird is looking at something you want to highlight)

) the logo is coming out of the bird's rear end. AVOID.

As to the second trick:

) The logo does not read like a logo. If you have a logo, use it. If you don't, get one.

As to the 3rd trick:

) Center the logo at top; move the bird to the center vertically and to the right horizontally

Answer 3

THe suggestions from others are good.

You don't need "loading..." a splash screen implies that aspect.

Your current layout has absolutely no balance to it. Nothing is aligned. Everything is pushed to the edges of the rectangle. The eye bounces all over the place while looking at it.

A good test is to close your eyes.... then open them and look.. what's the first thing you see. Do it again.. what's the second. Repeat. And then note where your eye must be to see those items.

As has already been posted the bird is simply placed horribly. It leads the users eye off to the lower left corner giving a downward left sense of motion.

In fact looking at the image in its entirety the eye moves from center top, downward left, then right. The "logo" is in a dead area and the eye is never lead to its position.

In most cases, you want to avoid ANY sense of a downward left motion. Psychologically, upward right conveys a sense of joy, happiness, and pleasure. Downward left conveys a sense of depression, melancholy, or sadness.

If you merely simplify things... center it all and stack it. The bird looks at the logo and due to how the text is read left to right, it leads more to a swinging downward left then upward right motion for the viewer.

The text for the "logo" is exceptionally uninspiring. What is that Times New Roman Italic? If you want to brand the software (or company) you need to do a bit more than simply choose a font. A straightforward font is never remembered for a brand. And if the font can be immediately identified as a common font, it's even worse. While I don't think the appearance is bad in your image. I would hesitate to call it a logo in any sense of the word.

Answer 4

I don't think that you really need the "Loading..."-text. Depending on how long the splashscreen is visible that is.

I also should consider changing the font for "Quelea". Though not that different from what you have. And maybe move the bird a little to the right.

Answer 5

Rather than just giving you an answer specific to this situation, let me get you to think like a designer for a bit. Design should be functional first, then beautiful second, so let's think about function:

1) Question everything. What is a splash screen? Why does it exist? What do you want the user to get out of the splash screen? What do you want to accomplish with it?

2) Look at the best. Big companies who spend a lot of money on software make some nice splash screens. Read about Adobe's here and look at a showcase of iOS splash screens here for some inspiration.

From there, maybe we can answer some questions. Ideally for the user, the splash screen doesn't exist. It's a barrier between me and the software I want to use. Netscape used to have a splash screen; I'm glad Firefox doesn't today.

But if it must exist, its main purpose is to show the user that the application is loading. To that end, I think it's nice to see what is loading. Adobe and Office do this, so I get a sense of progress. There's something comforting about a subtle spinning wheel, flashing dots after "loading", or a real progress bar - it's assuring me that things are moving towards the goal. However, if you look at how people do it, they don't make the "Loading" text and info the most emphasized part! Strange, right? But it makes sense. The user doesn't have to have his face beat in with the fact that the software's not loaded yet, and the software company has a great window to create and emphasize the brand.

So, from a functional standpoint, you've now come to the realization that this screen should 1) be there for as little time as possible, 2) plug your brand, and 3) show that it's loading but don't overwhelm the user with it.

Now, with those goals in mind, make it look good. Scott and KMSTR have shown some solutions. Both handle the logo and brand name well enough, though I prefer how KMSTR keeps the loading text for reasons I talked about above. The better you can make the whole thing look, the more you can distract the user from the fact that the software hasn't loaded yet!

Answer 6

If load time takes more than the 2-3 seconds you mentioned (future upgrades maybe?) show the user what's happening, eg the modules of your program as they load (in small type).

If you don't have anything to say ("loading" doesn't count) just display your branding. I'd lose the big blue box and use an alpha channel to clip out the symbol and word mark with a subtle shadow to avoid competing with desktop wallpaper.