I started putting design tips on my WWW pages of the Past page, and I've been told that some of them were very helpful in other people's design, so I've created these pages. They're a bit rough-and-ready, but they may give you a few ideas. You won't find any tips on how to use Flash or Dreamweaver, or Director, as they are intended to be generic tips which can be incorporated into any WWW-based design. They include:

	Index v. Alpha transparency. An important differentiation in transparency is the difference between index and alpha transparency. If you choose the right one you will be able to use the graphic as it was intended.
	Adding opacity to a background image. A key tool in designing good-looking graphics is opacity, which can be used to blend graphic content into the background.
	Bullets. Bullet points are one of the best ways in any form of presentation to express the main points and key classifications. In this tip I've outlined some of the basic graphics you can use to enhance the presentation of your bulleted list. The standard bulleted list tags in HTML (such as <LI>) do not really work very well (especially in Netscape), so most of the time it is better to produce your own bulleted list with a table.
	Graphic file format and bandwidth. The GIF file format is excellent as producing WWW graphics, and can be engineered so that it can use a limited palette size. This allows for reduced file sizes.
	Mouse-over events for layers. I personally dislike layers, as they can cause more problems than they are worth, especially related to their actual position on the screen, but I know how powerful they can be. I've created this tip to show how mouse-over events can be used with layers.
	Paint strokes. This tip shows how you can integrate a basic paint stroke with text, to produce an eye-catching graphic.
	Focal-point graphics. A key to any WWW page is to have focal points which draw the eye. It is important that these should be pleasurable on the eye, thus this tip shows how you can integrate artistic-looking with a WWW page.
	Seasonal graphics. This tip shows how WWW pages can be enhanced with up-to-date graphics. A good example is the usage of Christmas graphics.
	Distorting graphics. A use effect to make graphics more interesting is to distort or skew them, and then change their transparency. This tip shows how this can be achieved.
	Producing sharp graphics. Which is the best package to produce graphics? Personally, most of the time, I really don't care, as I just want to create a graphic element in as quick a way as possible. So I typically use PowerPoint to draft the image, and then, if required, I'll import it into Fireworks if I need to enhance it, typically to manipulate parts of it. This tip shows the difference in the output between PowerPoint and Fireworks.
	Lines in tables. Tables are difficult things to design with at the best of times, but how is it possible to get lines in any part of the table, rather than the whole table? This tip gives one solution.
	Message boxes. Pop-up window boxes can be useful, especially if you wish to spawn a new window. The design tip shows how you can spawn in new Window by reacting to events in the page (such as mouse-over, or mouse-down events). This is expanded to show how you can bar usage of the menu bar, and also of the right-click menu option. These are useful when you wish to stop a user from printing a WWW page, or copying and pasting any of its content.
	Cutting-objects from a background. Often you have objects that you want to extract from a background. Simple objects are easy to extract as the magic wand can be used to select them, but photographs are complex images which are difficult to extract, so this hints gives some of the techniques that I use. They may not be very professional, but they produce reasonable results.
	Dynamic HTML. Dynamic HTML can be a useful tool in any designers toolbox, but you must be careful not to over do it, as it can become annoying after a while.
	Scaling graphics for text. When a graphic is scaled down, the resolution of the text is often reduced so that it cannot be read.
	Creating icons for program files. There is an art to creating icons, and I'll try and give you some pointers towards creating them. In many cases they can add a little bit of polish to the programs/media content that you've created.
	Pencil first, package later. I get asked many times what package I use, and my answer is typically the same: anything I can get my hands on. The key to design is not the package, but the content. Unfortunately (or fortunately) there has never been a computer package that can properly encapsulate design ideas. The best tool of this is a pencil and paper. If you start with a package, you're never going to properly investigate your ideas, and find out which one works. It's really the same argument as reading a book against reading text from a computer screen. Books are one of the most portable devices ever created, and you can virtually move from any part of the content to any other part, in a matter of seconds.
	From sketch to graphic. A key element of producing graphics is to be able to draft them on paper, and then convert them into a digital form. This article takes a simple hand-drawn graphic, and converts it into a usable form in a WWW page.
	From photo to graphic. Often it is difficult to get the exact images that you want from standard clip-art and image files. This article takes a photograph of aguitar, and converts it into the image given on the right-hand side. In fact the guitar in this image is my own.
	Setting up a photo. This article builds on the previous article, and shows how it is possible to setup a photograph so that it can be easily converted into a graphic. I've used my guitar, again, and I've shown the difference between the two photographs.
	Converting a photo into a graphic. This article shows how you can take a photograph of an object, and modify it for your own functionality. I've used the Radox bottle as it is one of the best design objects around. It has a beautiful colour, and is extremely soothing to look at when you're soaking in the bath. I hope that the makers of Radox do not mind me using a picture of their product in order to teach a principle of design. All I can say in my defence is that I think it is an example of first-class design, which is backed-up with a truely excellent product.
	To matte or not to matte. Transparent graphics often do not blend into the background, as they do not have a transistion colour between the graphic and the background. A matte colour tries to approximate of the background, and inserts a thin line around the graphic of the matte colour, and then leaves the rest as a transparent background.
	Filters on photographs. Photographs can be easily converted intoartistic looking drawings using filter effect. You eye is typically drawn to smooth changes in objects. For example I've taken a picture of a church, and then got rid of the background, added a blur to it, and finally added a dry brush effect. I've also shown how different photographs look with a filter.
	NOS Sam. It is important to be unique on the WWW, as standard images can be easily stopped. This article shows how easy it is to take a hand-drawn image, and convert it to a simple graphic. So, welcome to NOS Sam. This graphic was produced by drawing a rough graphic, scanning it in, and then colouring it in with a vector graphics program.
	CNDS Mac. This article expands on the previous article and shows how it is possible to use a vector painting package to produce unique graphics, which can enhance the look of a WWW page, and give it a unique feeling.
	My favouriate art. The WWW has created new design techniques, especially in the layout and presentation of information. For the first time designers can properly use color, text, images, and all sorts of content to produce the required effect. One important thing is that most pages on the WWW are dull and boring, and do not entice viewers to stay and observe them for their beauty. What is required is stimulation of the mind, and the best place to look for this is in the paintings of the past.
	Posters. The WWW has moved the presentation of information from textural to graphical, and pages must now have strong graphical images so that the can attract the user to read the textural information. Thus a good skill is to be able to design a poster, which can be included as part of a WWW page, or used as a poster in marketing information.
	Logo's. I need to create a simple logo for the Distributed Systems and Mobile Agents research group, so I've draft a few example. First we could try the idea of a robber, which, of course, has links with agents.
	Animating agents. Animation adds interest to a page, but should not be overdone. It provides a natural focus, if it is designed correctly. As much as possible the graphics in the animation should be smooth, and fade in and out, so that they are gentle on the eye.
	Tracing designs . As a child we were introduced to the joys of tracing drawings. In the digital world we can do the same, but the one thing that you should avoid is allowing a drawing package to trace an image for you. In most cases it will either over elaborate the image or under elaborate it.
	Merchiston Castle. Edinburgh is such a beautiful place to work and live, and, at Napier, we are extremely lucky to based in one of the nicest parts of the city. In fact our main campus is in the birthplace of John Napier, the inventor of the logarithms. The campus itself has been built around the original residence of John Napier (Merchiston Castle). It is so stimulating to come into work every day and pass this historical building, that I've decided to try and portray it in the following images.
	Logo mania. Humans are extremely visually-driven, and the human brain is automatically drawn towards images. Unfortunately there is a fine line between the things that are attractive to the eye, and things that are not. Also some people are attracted by one thing, and others to another. So let's experiment with a few basic ideas, and try and determine things that look good in graphics.
	Animating the alien. Macromedia Flash is one of the most amazing packages ever produced, and has carved out a particular niche in the market. There isn't any package which come near it for its ease-of-use, and its integration with the WWW. Thus let's see how easy it is to create a basic animation with our alien. First we can cut-out its eyes and hands (or suction pads).
	Experiment with designs. It is impossible to ever get a design correct with the first draft. That's why a pencil and rubber are much better tools than a pen and correction fluid. So it's important when designing digital graphics that you can easily try out different colours, textures and ideas. So let's try with our scary skeleton. First we have two basic designs. The changes I've made are to put a glow around the main text in the first graphic, but a drop-shadow in the second one.
	Hail XML. The Future King of the WWW. As you've maybe seen from my research, I have a great interest in reconfigurability and reuse in software components. The future of this, for the WWW, is in XML, which will provide the platform for the creation of generic components which can be configured using XML. For example the following is an example of a WWW component that I've designed to read the SWF files that I have created over the years.
	Showing text where to go. The human eye is well used to viewing horizontal and vertical text, but when placed against a curved graphic it can often seem a little disconnected. Thus a good design technique is to be able to place text around a set path.
	Fade-in, fade-out. Macromedia Flash has very few rivals. It is one of the best packages for quickly creating a fade-in, and fade-out animated graphic. For the following I've created an initial image with a 100% alpha, and then create a motion tweening effect with a 0% alpha at the end. This will create a fade-out. The other image can be faded-in using the opposite effect.
	So you want program? It often takes software developers a while to get used to Macromedia Flash or Director. The reason for this is that the package was initially developed around stages, movies, and lots of other acting terms. This makes the environment difficult as the terms are new to software developers. Another problem is that software developers are used to creating code, which is executed, and run on the system. In Macromedia there has, in the past, been a great relance on tweening, and scripting, which differs from code writing. These problems have now been overcome with Flash 5 which allows proper code to be written. Also with Flash MX the terms are started to become more focused on software development, such as the usage of components.
	Moving objects with the mouse. There is a great move towards interactive exercises which are rich in graphical content. Thus a good skill is to be able to pick up objects with the mouse and place them at other points in the content. Flash easily achieves this with its mouse events.
	Reuse, again, and again, and again. I'm sorry that I keep bring the subject of reuse up again, and again, but I cannot stress the importance of it. Obviously WWW pages can be designed using PHP or ASP, so that content can be repeated across several pages, but this makes the pages dependent on the WWW server software. It also makes it dependent on the server being present, which sometimes make proper testing difficult. Thus good old JavaScript is one the best ways to create reusable content which server independent.
	Is it Art? As a technical person I have been trained to believe that there is a correct answer to everything. Unfortunately in Art there is not. I have tried to understand the elements of Art that make something pleasing and stimulating to the eye, and what does not. As an engineer or a computer scientist I would have tried to generate a formula which defined the probability that someone would like a piece of Art. Unfortunately I cannot. In fact I cannot even determine what I like. So let's investigate a few different images, and decide if they work, or not.
	Diary I've shown a few examples of XML, but one of the best is to use it to create a diary, which contains its content in XML. For this I've designed a template which integrates pages, such as CV pages and contact details, into a single integrated package.
	Radox, again I've received some good feedback on the Radox bottle graphic, so here's another version of it, done in Flash. It's a bit boring, but effective. This effect is easily achieved as the lower layer (on Layer 1) contains the cnds@napier graphic. The top graphic (on Layer 2) starts with a 100% alpha, which is then changed to 0% after a few frames. To show simple the design is, I've included a screen shot from Flash.
	Masks in Flash Flash has many powerful masking effects that can add interest to graphics. The best way to implement the mask is to create a shape which will be used as the mask on a separate layer, which is placed above the layer to which the mask will be applied to. In this example I've placed a copy of the skull graphic on the lowest layer. This graphic has a negative value for its brightness, thus it is much darker than the original graphic. The mask area is then applied to the normal graphic, and wherever the mask appears the area which the mask covers will appear. Everything else will be from the lowest layer. The mask layer can be easily animated using tweening. In this case I have applied a motion tween, along with a shape tween, so that the spotlight appears to become larger as it moves over the graphic.
	Research group poster It is often difficult to attract graduates to apply for a PhD, so I'm working on a poster to promote the Distributed Systems and Mobile Agents research group. Past of the problem is that it is not advertised and promoted well enough. We've all seen the excellent recruitment campaigns for graduate recruitment, but academia often does try to complete against this. Thus I've drafted a few ideas here, to see which one works best. You must remember that the large corporations have professional graphic designs, and large advertising budgets, so my attempt will be no where near as good as there, but lets makes a first attempt with one of our previous graphics.
	Enhancing WWW designs This article shows a few little tips to enhance WWW designs.
	Guiding the eye The usage of colour intrigues me, especially when it is abstracted. I think that the abstraction part is due to my experience in designing and developing computer programs and electronic circuits, as there is normally a stage of the design process which involves abstracting the system in a diagrammatic form. Another key element is to be able to abstract the system in different forms of abstraction, from high-level forms, down to low-level, detailed representations.
	Reusable, XML-based components This is a brilliant tip that I've just discovered, and expands on the reuse theme. I've been experimenting with creating generic components in Flash, and I've developed a simple method of creating components which are identical, but can be changed using XML.
	Enhancing the contrast on text The technique of inserting different colours of text around a graphic is a good one, as was shown in one of the previous design tips. So I've used this to enhance the Distributed Systems and Mobile Agents graphic.
	Just another reuse graphic I've just finished writing a paper on reuse, and the usage of XML in developing WWW I've quickly produced a graphic for a reuse paper, and if you're interested. For this I've skewed the a Windows page to give it the effect of floating in space. This was achieved in Fireworks by simply inserting a screen shot, and selecting Transform-Distort.
	Scalable WWW pages The previous design tip was a little boring, so let's try and focus on some graphics design, again. I've got to produce a new WWW site for my Mastering Computing book, so I've drafted a banner graphic. For this I wanted to keep it simple, and I've sketch a few ideas. One thing I've noticed is that there are two g's at the end of each of the words, so I'm going to try and use it to enhance the graphics.
	Don't dismiss SWF You should never forget the usage of SWF as a graphics format in WWW pages. I use it quite often, especially in creating external graphic files which Flash can read. It is also especially good for merging a graphic into whatever colour of background you have. For example here's an example of a SWF graphic with a green background.

Coming soon:

	Integrating Window's screen shots.
	Backing-up previous designs.
	Producing cut-out graphics.
	Integrating reusable JavaScript.
	Making layouts consistent.
	Re-usable components.
	Static v. dynamic content.
	Using matte.

In general I would advise the following as tips for design and developing for the WWW:

	Experiment and innovate. Your site will never move on and develop if you do not experiment with new ideas and try to innovate new ones.
	Observe and appraise. A key in any WWW design is to observe good and bad content from other pages. Often developers are able to spot bad design, and can be negative in their assessments. It is important to overcome this negative attitude and be positive, and try identify good design elements.
	Prototype and investigate. Few people know what really works in WWW design, as there are so many variables, so develop small prototypes of your work, and appraise them over time. Sometime a design can seem good for a while, but then it looses its appeal, so make sure that you prototype first, and implement later.
	Create unique content. Everyone uses the same tools, the same libraries, and the same clipart, so users can typically spot content that has been taken from these libraries. To overcome this, develop libraries of your own content, such as original graphics, buttons, banners, and so on. It is important, though, to observe good design, which your can copy and refine.
	Organise and focus. A well designed site must be scalable, and allows new content to be easily added. Thus develop a strong structure to your site, which mirrors the organisation of your content. A good method is to create sub-sites, which each have an index page of their own. This makes it easier to create a main index page, and devolve the content onto these sub-sites. New pages are then added to the sub-sites. As much as possible keep the main index page simple.
	Scale and layout. A key to good layout is to scale all the elements and lay them out in an easy-to-use, and easy-to-view way.
	Re-design, and then refine. WWW pages can often look dated after they have used the same design for a time. It is thus important to occasionally redesign the pages, and then refine them over time. As much as possible the new design should meet any future objectives of the site. If the design is well though-out, the evolution of the design will reduce in its workload over time. An important consideration is how the new design is integrated into the complete site. If the site is well organised, and structured into sub-sites, it is easier to integrate, as each sub-site can be integrated one-at-a time. Any problems with the new design can be caught at an easly stage, and all the sub-sites can have the updates integrated into them.

Also I also would recommend to:

	Avoid wizards and templates. Once wizards and templates are used it is often difficult to undo them, as they can add lots of extra code that make future development difficult. Anyway, everyone else has the same templates and wizards so it does not leave much room for your own style.
	Avoid server-side includes, as much as possible. If possible WWW pages should be as portable as possible, so always use client-side includes (such as JavaScript) before you use server-side includes (such as PHP and ASP). In fact the plainer the HTML, the better.