Anyone who designs websites for a living, or who has built their own website, has faced the need to design and build a banner for the homepage (and for the rest of the site, usually). Banners can play a vital role in the success of the website.
There are two stages to the process, the design and the construction. This article is about using Fireworks MX (or later) to accomplish the task. It focuses more on the technical aspects than the aesthetic. It uses a real-world client project as the basis for the design.
The importance of the banner
When you load a web page for the first time, the page banner is immediately visible in your browser window. It's usually the first thing any visitor sees. And that makes it very important. Recent research indicates that people make up their minds about a website within 50 milliseconds of it opening: that's one twentieth of a second. A news article in Nature reports on this work: see Web users judge sites in the blink of an eye (http://www.nature.com/news/2006/060109/full/060109-13.html ).
The Nature article says in part: "The lasting effect of first impressions is known to psychologists as the 'halo effect': if you can snare people with an attractive design, they are more likely to overlook other minor faults with the site, and may rate its actual content … more favourably."
So building a good banner is a very important step in the designing of a website, and an ugly one can be a disaster. What constitutes "ugly" can be a matter of debate, but there's no mistaking an amateurish banner.
There are a number of factors that need to be considered in designing a banner. These include aesthetic elements such as:
- the colour scheme
- the graphic elements
- the wording and fonts
And then there are the technical aspects. Poor graphics look ugly. Badly blended images and jaggy text or badly chosen fonts suggest an amateurish design. A large slow loading image file irritates everyone.
Some people like Flash for banners or complete Flash home pages. They can be great eye-candy, but does the visitor want to sit and watch it unfold? Probably not - it depends of the site. As the Nature article goes on to say, "for a typical commercial website, 60% of the traffic comes from search engine results". It's a simple matter to use the back button to get back to the list of search engine results and go off to another site. Your client won't thank you if this happens with your design.
Personally, I don't use Flash for or in an introductory page because it's easy to irritate some visitors before they get into the site. I also try to keep the graphic load times down as far as possible. I want the visitor to see what they're getting as quickly as possible, and to please them with what they see. Lofty goals, and not easy to achieve.
Obviously there's a balance to be struck between the intricacy (and beauty!) of a page design, the size of the graphics used to achieve the design, and the resultant download time. A total of 50KB is a good rule of thumb these days for total entry page content file size - graphics, code and text.
Tip: If you design websites for commercial return, it's worth maintaining a phone dial-up ISP account as well as your normal high speed connection. When you have designed an uploaded a prototype page, disconnect from your ASL or cable Internet connection and connect via dial up modem. View the site via dial up and see how quickly it loads. This can give you a nasty surprise sometimes.