If you're a corporate with cash to burn, get a team - either full time, or a group of reliable freelancers who share your vision on the look and feel of the site. It's absolutely useless to start building a Web site expecting any decent response if your art is tacky or poorly done. If you have experience with computer graphics - read on. There are some elements you will need to understand about the Web before you get going.
It's got to be a looker!
If you've got a site, people will explore it if it has a gripping aesthetic. Take time thinking about the image you want your site to reflect. Have a look at www.electradesign.com, www.MSN.com and www.Gemini.org.uk. All three rely heavily on their look and feel, yet all three say something quite different about their content and the personality of the company or organisation they represent.
If you are from a company that has an esoteric or mystic theme using images or titles that may not be obvious, remember not to leave your visitors hanging for clues as to what your art means. The spot.com (www.spot.com) is a perfect example of a site which uses rich graphics to represent its various sections, but uses completely irrelevant icons leaving the user bewildered and on his way out.
Whatever graphic style you choose, make sure its personality is consistent and clear. It is a design tragedy when you log onto a site to find a mishmash of design styles all competing with one another for attention.
With Gemini, I wanted to create a dark, but sophisticated feel which would be easy to work with. The graphics stick to a set protocol that preserves the whole site's integrity. Once a user has logged onto the site I wanted them to take away a feel for Gemini and the style it represents.
Similarly last week's Web site of the week, Cafeherpe.com, has its own upbeat style that lightens the distressing text it hosts.
In writing, one of the first rules you learn is never to mix your metaphors.
The same applies to page layout and design. Keep the look of your icons and headings of the same ilk unless you want to create distinct boundaries within the site.
Guide the folks and they'll come home.
Before you get down to laying out pages and importing snazzy graphics, think about the areas you want to have within the site and whether or not you have the manpower to support them. When I first planned Gemini, it had three more areas on the navigation bar, including a news area.
After about a month, I realised that with a team of four, providing news would be too demanding and dropped it until we have the resources.
The areas should provide easy routes to their contents so if your site has an area called products, it should then have a sub-route dividing the products into their various criteria. If necessary provide another route to refine the searching even further.
Many sites employ a search engine within the site. If the site is large this obviously has enormous benefits, but if the site is well controlled and well designed, one shouldn't be necessary. It's very easy to rely on it to do all the work for you. Get the design how you want it and then put the search engine in.
Get the right gear ...
This may sound like an advert, but if you are really serious about getting the best results from your graphics you would be foolish not to use Adobe's PhotoShop. The product is now in its fourth version and gives you everything you need to create stunning graphics. Obviously if you currently use one of the other manipulation programs, stick to what you're comfortable with.
But time and again PhotoShop has excelled in VNU's testing and is considered the best on the market. Version 4, due to be released this quarter, contains some very useful Web-specific updates such as gif89a export and progressive JPEG.
Adobe Illustrator or Freelance Graphics from Macromedia are a must if you are designing a site that will be using vector graphics - that is simple, solid colour images that need scaling ability. Vector graphics are especially suited to graphs and charts. The size of a vector graphic can be changed without losing image quality and they are particularly useful for budding animators who can make images grow and shrink without having to employ several files - simply reduce or enlarge the original and save the frame.
Don't scrimp on this and buy a handheld scanner - quality images are cool and a flatbed scanner will give you excellent results. Most scanners come with a twain device that tweaks the scanner's settings on different textures. Get used to the results you get with those settings and apply them to your scans.
A tip: if you are scanning a glossy surface, make sure you have your monitor set at 24-bit colour. Otherwise your images will look grainy.
The monitor can only display at 72dpi, so it's no good scanning at 300dpi expecting to get super-clear results. Scan at 100dpi, then reduce the quality to 72dpi when cropping.
Learn your formats - or lose visitors.
There is still a massive audience out there with access slower than 28,800bps, with a very small audience using leased line or ISDN access, so making sure your site is trim enough to get to the slower audience is imperative.
Colour check your palette. The Web uses the 216-colour 'browser-safe' palette. If you don't know what that is, look at www.lynda.com /hex.html and download the safe palettes there. If you don't and you create images in the normal palettes available on your image manipulation software, you will cause dithering. Dithering is memory intensive and so images will take longer to download. This is one area where you can say - don't argue, do it.
GIF and GIF89a:
GIF is a CompuServe technology that uses a clever compression technique to squash simple images into tiny data files. It can only display up to 256 colours at once, so GIF designs are usually bright and precise (see www.viz.com) with cartoon-like images. Images with large areas of colour or blocks of colour are perfect for the GIF format.
GIF is commonly used for animation because the files are so small. The GIF type preferred for animation is called GIF89a which allows the user to remove a main colour from the image, therefore reducing the overall file size. For example, on several Gemini headings the original images contain no black. Instead the black area has been made transparent allowing the black background to show through, thus reducing the overall image size.
Unfortunately GIF is not suitable for graphics where shading or special effects (such as background lighting or glow) are needed. This type of manipulation breaks colours down into spliced blocks or shades that require more than the 256 colours GIF supports.
Interlaced GIFs, which are slightly larger than non-interlaced versions, allow the visitor to see a blocky representation of the final version as the image downloads. It could be argued that the visitor wants to see the final image downloaded in one go - this is your choice.
This is the format to start with if you are working with rich colours or photographs. JPEG uses a compression technique to display images and is capable of progressive download. This means when an image is called from the server, a ghost is sent first, to give the user an idea of what it looks like, and as it downloads, the image becomes richer. Progressive download will usually add a couple of Kb to an image, but the effect is worth having.
The quality of a JPEG can also be scaled, giving the designer ultimate control of how large an image is. PhotoShop gives the user a scale from 1 to 5. 5 being the highest quality.
Generally a small to medium 3x5 cm photographic image at 72dpi, should be saved at medium to low quality to give you an image size of about 7Kb.
Compare Gemini's navigation bar, which was saved at various qualities to achieve the best looking tightly compressed JPEG result.
I have seen several books that say GIFs should be used for graphics on the Web. While HTML supports GIF, the format will make high quality photographic images larger - and you don't want to do that.
Lay your tables, ladies and gentlemen.
On all three of the Web design programs we looked at - Adobe's Pagemill, Microsoft's FrontPage and SoftQuad's HotMetal Pro, there are fairly sophisticated tools for laying out your pages using tables.
The tables are exactly the same as the ones found on Word or Word Pro and are by far the best way of making your text and graphics look their best. It's worth taking your time getting used to adding and removing tables within your page and learning how to control them properly. According to Microsoft's FrontPage whiz Matt Dexter, tables should be used to lock text into a set box around images, rather than relying on leading or spacing techniques. This is quite different to professional layout programs such as QuarkXPress or PageMaker which gives the operator absolute control of how and where an image or word should appear. Remember HTML is very immature and has none of the sophistication offered in the traditional publishing world. It is coming, but slowly.
Once you have located your image or text on the editing screen, check to see how it looks in your browser and don't be surprised if it doesn't look the same. Any adjustments should be made at this stage, along with any quirks your software setup may have.
Graphics should be given space within a page, so don't crowd them with text. Once you have laid the image, select its properties and make sure there is a space of at least 5 pixels on the horizontal and vertical borders.
If the text suddenly flips under the graphic (and you want it at the side), rather than using a table, experiment with increasing the vertical border.
What about animation - don't I need that?
The first thing to note about animation is that it's gonna cost you. The techniques used in animation are very specialised and time consuming. If you want to have animation included on your site, get someone in who is skilled at computer animation, preferably with GIF Construction Set (www.mindworkshop.com/ alchemy/callus.html) or Director from Macro-media (www.macromedia.com). Director is an awesome program with seemingly endless routines to achieve various levels of sophistication. Indeed, the program has its own programming language to bring special effects to your end work.
For CD-ROM development, Director is best, and has limited competition.
But on the Web, where simple is best, GIF Construction Set is the de facto, using GIF images placed in frames to show movement. Director also makes animations far too large for the Internet and needs an accessory called After Burner (downloadable from the Macromedia site) to compress the files.
If you want to work with an ActiveX control, try Futurewave from www.futurewave.com, but remember ActiveX will not work on Navigator until the next major release - scheduled Q1 next year.
FrontPage 97 and the forthcoming PageMill 2.0 from Adobe both include simple menu commands to insert animations, thus negating the need for any HTML programming.
Go to NYTSYN.com to see how the New York Times uses animation to impress its advertisers. Or if you really want to know how far you can go with ActiveX, try www.msn.com for really impressive work.
Of course animation is relatively bulky and will add to the overall size of your page, so balancing the need for bright lights with speed must be carefully considered. Speak to your ISP and find out how long a page of say 50Kb would take to load from its server at 12pm. Depending on the technology they use at the back end, this will vary enormously on a 28,800bps modem, but it will give you an idea of how long a page with a couple of small animations and a few images will take to download.
Personally I think any more than a single, static frame on any site is a nightmare, both for the design team and for the visitor. Forward and reverse navigation is tricky, and knowing where you are in a large site is thrown out the window - just so the page looks cool.
During the Site Developers conference in San Jose last month, several speakers referred to frames as unnecessary and awkward. Having used them, I would agree. But frames may give your site a certain function that makes them worth the trouble. At our www.vnu.co.uk, frames are abundant, but one of them, the banner at the bottom, displays adverts on a revolving barrel which adds movement and consistency throughout the site. Advertisers may be an important commercial consideration, but look at different ways of enticing them.
In a word, frames are a pain. They did look trendy when they first appeared, but, until some of the navigational glitches are worked out, I would not recommend them.
The Web is not a toy and before you get cracking on your own site, you need to sit down and brainstorm not only your requirements, but those of your potential audience. Your ISP will be able to help you, if not - change your ISP.
As discussed in the first part of this feature, a good relationship with your ISP is a necessity. Most teams have an animator, a Java programmer and a layout expert so, if your own team doesn't have the expertise, your ISP should be able to help.
Keep your goals in mind and don't let your imagination run away with the site's promises. If you promise news every day, you must deliver it every day.
Keep the design simple, clear and use a style that represents the organisation properly. Avoid complex or esoteric icons or maps that may mean something to you, but nothing to the visitor. Above all make navigating the site easy. Colour code your sections if necessary and always provide routes to the top of the page and home. Good luck.
Electravision: hot tips for hot Web sites
Lisa Lopuck is the creative director and co-founder of Electravision (www.electrastudios.com), an online entertainment design firm in San Francisco.
She gave a speech at the site builder's conference in San Jose and has kindly put together some tips for this article.
If the end user has an 8-bit, 256 colour monitor, then the default browser palette (of 256 colours) takes over and remaps all images within the browser window. There is a different default browser palette for Macintosh and Windows, so it's tricky to anticipate what your images will look like on different machines.
Of these two palettes, 216 colours are shared. Therefore, these 216 colours will not dither on the Web. (Dithering occurs when the colour you are using is not native to the browser palette. To make the colour, two or more similar colours are kind of mixed.) You cannot avoid dithering on photographic-quality images. You can, however, avoid it on flat colour areas such as solid colour backgrounds and typography.
- TIP: When building your Web pages in PhotoShop, you can load the browser palette into the "Colour Swatches" palette (available from the PhotoShop "Windows: Palettes" menu), and then use the colours in the palette to fill your flat colour areas.
GIF vs. JPEG
The two file formats to consider for Web graphics are the GIF (Graphics Interchange Format) and the JPEG (Joint Photographic Experts Group). Generally, JPEG should only be used for photographic-quality images and NOT for flat colour graphics such as typography and cartoons/illustrations. The GIF format does not introduce noise like JPEG does. Thus it is considered a "loss less" format. However, the GIF format only works for images that have been reduced into an 8 bit (or less) colour palette.
Whenever you reduce an image from 24-bit (millions of colours) to 8-bit (256 colours), you will see dithering simply because you have a limited set of colours to emulate millions of colours. The GIF format is recommended because most images contain both typography and photography. In addition, most end users have only the 8 bit colour monitors. Therefore, by saving your image in an 8-bit GIF format, you can ensure your image will look the same on all machines.
- TIP: I recommend using the Apple System palette because it is 90% of the browser palette. It is built into PhotoShop, and so it is easy to access from the "Mode: Index Colour" menu. Using this palette ensures your image will look consistent on all machines - with a 10% dithering (which is hardly noticeable).
Another problem people often overlook is the limited screen space you have to work with. The most common end user monitor is the 13" 640 x 480 pixel display. When you take into account the browser's interface, you really are left with 600 x 400 pixels to work with if the users stretch their browser windows to the edge of their screens. Therefore, it is important to keep the most important information contained within this space.
Lisa Lopuck's Worst Web sites:
The user interface and information design of the HarperCollins Web site is a good example of what NOT to do. The visual design is nice, but trying to navigate the site is a nightmare. You would think the most important feature of a publisher's Web site is to showcase an entire catalogue of their books and make them available for sale on-line. Not only is the site poorly organised so it is impossible to find a book simply by its title, navigation is cryptic and inconsistent.
This site was well received in the US, but Europeans who visited the site were a little more sceptical. The reason for this, as I found in the ensuing discussionat the conference, was that Europeans wanted to have a reason for the animation.
At first glance, the foxhome Web site seems to feature flashy animation for animation's sake - and this is what they reacted against. They went on to suggest that Shockwave should be used as a functional mini-application to enhance the meaning or message.
However, in this case, the company is a flashy entertainment company (Twentieth Century Fox) that requires a flashy Web site - animated, full of sound, and so on. Just imagine the alternative - going to the Web site of a high profile entertainment company such as Paramount, Columbia-TriStar, or Fox and getting a sparse, highly functional Web site.
In this case, the design - complete with gratuitous sound and animation - is absolutely what the client was looking for.
Cotton seedling freezes to death as Chang'e-4 shuts down for the Moon's 14-day lunar night
Fortnite easily out-earns PUBG, Assassin's Creed Odyssey and Red Dead Redemption 2 in 2018
Meteor showers as a service will be visible for about 100 kilometres in all directions
Saturn's rings only formed in the past 100 million years, suggests analysis of Cassini space probe data
New findings contradict conventional belief that Saturn's rings were formed along with the planet about 4.5 billion years ago