Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

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.

Quelea splash screen

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.

share|improve this question
1  
Is this a mobile app? How is the splash screen used? How long does it display for? The best splash screen is none at all. Can you remove it completely? –  Marc Edwards Oct 3 '12 at 0:23
    
@MarcEdwards It's a desktop app - the splash screen is shown for about 5 seconds on the average machine while the application is loading. I could just remove it, but I'd quite like some consistent visual indication that it's loading up rather than just sitting there! –  berry120 Oct 3 '12 at 0:51
    
5 seconds seems quite long as a load time. Are there ways you could optimise that, even if the loading finishes on another thread after the main app has finished? –  Marc Edwards Oct 3 '12 at 8:44
    
@MarcEdwards I've just timed it again and it's actually more like 2-3 seconds - there's more optimisation I could do but I've already had to try pretty hard to get it down to that! –  berry120 Oct 3 '12 at 9:03
    
If there is any chance at all of a human-perceptible load delay, I think it is still better to flash it on the screen quickly rather than leave the screen in an undefined state (provided the act of placing it does not incur significant overhead). Is there a good reason not to leave the "Loading . . ." as a localized string? –  horatio Oct 3 '12 at 16:36
add comment

6 Answers 6

up vote 4 down vote accepted

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:

enter image description here

share|improve this answer
add comment

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

share|improve this answer
add comment

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.

esplash

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.

share|improve this answer
1  
I think your placement for the bird is good. It points directly at the first letter of the logo. The common font thing is debatable: if I had to guess, about 3000% of corporate logos are set in helvetica! (And emotional impact of slanted orthogonals makes me sad, so no comment on that) :) –  horatio Oct 2 '12 at 21:23
    
Thanks for those points - appreciated! By the logo I meant the bird rather than the text, but I agree the text needs some work as well. The whole thing is just for an open source project that I've cobbled together, and I'm pretty much the sole active developer so the visual aspect of things hasn't had much of a mention! Do you think it needs anything besides the bird and logo? It still looks a bit bland to me, but I don't want to end up cluttering things up... –  berry120 Oct 2 '12 at 21:57
2  
In reality.... "Bland" is often far more professional. The more you attempt to ad elements the more cluttered and les professional it will appear. –  Scott Oct 2 '12 at 22:55
    
@horatio - true, I think the difference is, between logos that are set in a common font like Helvetica, and logos like this that have just been typed in a common font then dropped on the page. If any thought or care went in to the weighting and kerning of the letters in Quelea, it doesn't show. –  user568458 Oct 3 '12 at 10:33
add comment

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.

share|improve this answer
add comment

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!

share|improve this answer
add comment

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.