Previous Tip  |  Next Tip  |  Index (recent)   |  Design Tips   | [Bill's Home]

My Design Tips

My design pages are meant to give some hints and tips for your designs. The following are just a few examples of recent design tips. I've been adding a few new design pages. Some highlights are:

- The latest Design Tip
- Merchiston Campus Deep Zoom
- Diffie-Hellman Secret Key Exchange
- Router emulator
- UNIX networking emulator
- Cisco switch emulator on a PDA
- Emulating a Cisco switch
- Creating an emulator
- Importing graphics into Flash
- To hexademical, and beyond
- Art ... eh?
- Video streaming
- Documents for a PDA/Pocket PC
- Graphical content for a PDA/Pocket PC
- The 100th design tip
-... more Java (threads)
-... more Flash for Pocket PC
-Java for Pocket PC
-Flash Movies for Pocket PC
-Photograph to Pocket PC
-Flash and WWW pages of the past
-Designing for PDAs
-Synchronising audio with pictures
-Always make revisions
-From academic material to WWW pages
-Reuse as as-it-is
-Flash and Director
-Who needs Object-oriented methods
-XML and who wants to be a Network-aire
-User interaction
-Drag and stay
-Flash and Binary numbers

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. Part of the problem can be that they are not 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.

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.

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.

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.

 

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.

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.

 

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 reliance 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.

 

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.

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.

 

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 views 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.

 

DiaryFrom 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 a guitar, and converts it into the image given on the right-hand side. In fact the guitar in this image is my own.

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 truly excellent product.

 

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.

 

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.

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.

 

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.