The data gathering phase consists of finding out what the specifications of the website are. Examples are function, user audience and content.
The actual designing takes place in the design phase. Designing means more than just graphical design, but also signifies designing the information structure, interaction model, content and more. The design phase results in prototypes which are tested in the testing phase.
When all is finished, the product is delivered and implemented in the implementation phase.

At a first glance it might seem that this process is strictly linear, but this is not the case. It is indeed possible to follow a path in which one starts with gathering data, then designs the product, tests it and finally implements it. This linear structure, however, does not do good to the quality of the final product. The reason for this is that the experience that is gained during the development process is not used within that same process. No intermittent testing takes place and all specifications must be fixed and unchanging during the whole process.

A preferable structure is the iterative workflow. In this case, the different phases are performed multiple times. The four stages of development are then not only part of the overall product development, but are also performed for each part of the whole and take place on different scales. For example, the same four steps can be distinguished in the design phase. Small parts of a design can be ‘quickly’ realised for testing purposes and then changed if necessary. In the iterative structure, frequent testing can bring experience which is in turn used in the development of the same product, thus increasing quality. This makes the iterative workflow preferable to the linear form.

Now for adding some nuance. As was said earlier, Directiondesign is a design agency that develops websites. In our field of work an iterative process structure is limited to the design and testing phases. The reason for this is that when you are designing a website, there is little to no room for changing specifications that were set in advance, like the characteristics of the user audience that is to be reached, or a different function for the website, or a sudden change in identity of the client company (even though the latter can actually be part of the development process if it is also part of the original scope).
All these aspects are defined in the first stage of the development process. As they all contribute to the design and are reflected in it, changing them while the design phase is in progress would result in a much longer development time. The consequences these changes might have could seriously frustrate the designer as previously done work may be rendered useless and will increase the cost for the client, considering the time it takes to design a website which has constantly changing specifications.

In website design, having fixed specifications before going into the design phase is a good thing.

Concluding, a word about the nature of the model we present here. What can be seen and read here is an interactive model based on design theory and personal experience. The aim of the info-graphic is not to proclaim the methods it describes are the only way to do it. Design Switch's goal is to give insight into Directiondesign's methods and processes, for both (potential) clients and colleagues.

DATA GATHERING

The first step in developing a website is finding out what the specifications of the desired product are. These specifications consist of a number of different aspects.

• Functional Description
  A website must have a function and a goal. Most websites even have more than one. You will need to know these functions and goals before designing the website.
  
  First of all, it is important to know what the function and goal of the website will be. This will be reflected in all aspects of the design.
  A website may for example be informational, promotional, commercial, educational. In addition to these, other types of functions may be described. Each website will have one or more main functions. These functions should be well known before design of the website is commenced.
  More often than not, a website will have more than one function. In this case, it can be helpful to prioritise these functions, in order to formulate a communication direction. This can act as a guideline for the interaction design and information structure.
  Describing the functions and goals of the website also means considering how people will use it and what tasks they will (want to) perform. Knowing what users will do when visiting the site will help in designing an efficient interface.
  
  
• User Requirements
  A website aims at a certain user audience, which has specific characteristics, such as age, geography, experience and (sub)culture. These characteristics should be known, as well as how people will use the website (i.e. what tasks they will perform).
  
  Next, there is a user audience which has its own specific set of characteristics.
  These characteristics are of great importance in the design of a website.
  Aspects such as age, computer experience and skill, geographical location, (sub)culture and physical or mental constraints can be important for the design of the website.
  In addition, technical demands can exist that influence design decisions. Examples are screen resolution, processor speed and bandwidth.

  Here is a short list of important user audience characteristics:

  • Computer skill and experience
    The users of the website will have a certain amount of experiences and skills with the computer and the Internet. This will have consequences for the ease with which they will understand or learn to use an interface and therefore widens or narrows the range of possibilities the designer has in developing an interaction model.
  • Geography and culture
    Because the World Wide Web is worldwide, people that visit the website are going to be in different locations and perhaps different cultures. Apart from language differences, cultures can have characteristics the designer would easily look past, like symbols that are regarded as offensive in certain cultures. Also, typographical design and visual lay-out can be influenced by the direction in which people read (menu left and content right may be ineffective for people who read from right to left).
  • Age
    Apart from possible relations between age and computer skills, it may mean you have to consider font size and tone of voice.
  • Physical and mental capabilities
    This is related to website accessibility. Users with a physical or mental disability may want to or need to use the website, in which case the design must have taken this into account. There are terrible examples of websites for people with Parkinson’s disease, which use small buttons for navigation.
  • Subculture
    Within a culture it is usually possible to distinguish certain subcultures. This refers to groups of people who share certain characteristics. Subcultures may differ in interests, linguistic usage, visual styles, use of symbols, semantics, attitude to life and world view. All these characteristics have a possible influence on the website design.

• Content Specifications
  Content for a website consists not only of textual content, but content of any type. This can be photography, video, audio, graphs or any other medium. Content may be fixed up front or may be specifically designed for the website during development. Be sure to get as much information as possible up front and make clear agreements on content delivery during development.
  
  Naturally, each website will have certain content. This comprises more than just textual information. It is content of any type of medium, be it graphs, photography, video or audio.
  All or part of the content may be given before the design phase starts, but it is also possible that selection or creation of content is done as part of the design process. Content may also be specifically developed for the website.
  When working in a team, defining content specifications will take place in consultation with the other team members. In this case, the designer will often give guidelines as to how the content should be shaped (e.g. dimensions of graphics, length of texts, characteristics of audio). The amount and types of content that is selected or created by the designer depends on the size of the project and team.
  
  
• Branding and Identity
  A company's identity is not only important for the graphical style guide, but is reflected in all aspects of the website: concept, interaction design, information structure, content, visual design and usability. The identity is what tells people who they are dealing with.
  
  When developing a website, the company it is developed for will mostly want to keep to a certain style and identity. This identity can de used to define a style guide, which consists of graphical guidelines such as color usage, fonts and logographic elements. It is also possible that developing an identity is part of the design process and is not set beforehand.
  Branding is important in web design as it gives the user information about the nature of the company. The identity does not, however, only have consequences for the visual design, but is reflected in every aspect of the website: the concept, content, information structure, graphic design, interaction design and even usability. All of these aspects tell the users who they are looking at and interacting with.
  
  
• Technical Preferences
  The user requirements can bring along certain technical barriers, such as bandwidth or screensize, but the client may also have preferences or demands. Be sure to know what freedoms you have in technical choices.
  
  Finally, technical demands or preferences may exist which are not a consequence of user characteristics. It may be demanded that a specific technique is used or not used to create the site, because the company prefers or dislikes a specific technical solution. For example, you can be told not to use Flash but only plain HTML because your client has bad experiences with Flash or a server might not support the use of PHP.
  When the technical specifications are based on the client’s preference you may be able to persuade him to let you choose your own methods, but it may also be a matter of time or money. There are many possible cases in which technical conditions are fixed.
  
  
• Design direction
  
  When all relevant data has been gathered, it can be used to formulate a design direction. This is not a graphical style guide, but a conceptual guideline which states the relevance and priority of each dataset for this specific project.
  The design direction can be helpful in establishing the aspects of the website which need most consideration in and are most relevant to the design process.
  

DESIGN PHASE

When all relevant data has been gathered, the product design can commence. In the design phase we can distinguish various parts on which the designer can focus. User requirements are especially important to consider during the design phase.

• Concept
  The concept is the basis of the whole design. It is a global description of all facets of the website, which is based upon the data that was gathered in the first phase.
  
  The basis of all web design is the concept. It is developed based upon the data that was previously gathered. Most consideration when developing a concept for a website deserve the goal and function of the site, the user requirements and the corporate identity of the client.
  
  The concept is not really a characteristic or feature of the website. It is the basic idea, the direction to go, the overall description of the whole product. All other characteristics are based on this idea: the graphical style, the interaction design, the information structure, the content, the technical choices, everything. Without a concept, there is no design.

  When developing a concept, user requirements are important, but the importance can vary. Different user characteristics can have different priorities, and these priorities are in turn different for each project. Consider them for each specific project , because what works in one case can be disastrous in the next, even with similar user audiences.
  

• Content
  Content consists of all media present on the website. It can exist in the form of text, images, video, audio, graphs or any media, which provides information.
  
  Textual information is not the only form of content imaginable. Content consists of all media present on the website. Take note however: content differs from visual design. The difference has a lot to do with the function of the elements. Content is in direct communication with the user, giving him or her information. Design on the other hand has a more supportive function and often serves to give access to the content. For example, a photo which works to clarify a textual article is considered to be content, while the same photo when used in a purely esthetical fashion (say, as a background image) would be considered part of the design.

  As said earlier, it is possible that all content for the website is given and fixed before the design phase starts. Often this is not the case however, and the designer is responsible for creating at least part of the content. The amount depends on the nature of the project and the size of the development team. In a team with specialists in other areas, each specialist will be responsible for the content related to their field of work. In this case, the designer can give directions as to the nature of the different sorts of content, such as image size and colour depth, length of texts or quality of sound effects.

• Infostructure (Information Structure)
  How the information is structured must comply with the characteristics and goals of the user audience. It is in close relation to the visual design and interaction model.
  
  The way the information presented in a website is structured often reflects the internal structure of the company that owns the website. More important to the user than the business structure however, are his expectations. The information structure should be designed, based upon what users expect to find.
  This structure influences how and when information is presented and should therefore be related to the user and his goals. He may have a greater interest in certain parts of the information than in others, he may have very specific computer skills or lack of them or he may have a physical disability which is important when designing the information structure.

  It should be noted that information structure has a close relationship with visual design and interaction design. The interaction gives access to the information and the visual design defines the location and form of the information.

• Design (Audio-visual Design)
  Design gives information form. It can can be either functional or esthetical, but on the Internet these two forms tend to merge. Not only branding and identity, but also interaction possibilities are visualised by the design.

  Design for press is not as broad as design for the Internet, which is more versatile with respect to technical possibilities and types of content. Therefore, the traditional term “design” includes more than just graphical design when used in a multi-medial context.

  Within design, we can distinguish a functional and an esthetical form. Functional design bridges form and content of a website, while esthetical design has a mainly visual function. On the Internet however, these two forms tend to become more and more entangled and a distinction becomes increasingly hard to make, especially for the user.

  Design gives shape to information. Good design enhances the usability of an interaction model by making the interactive elements self-explanatory. The designer’s options to achieve this are dictated by user characteristics such as experience and skill, but also geography and subculture. These last two categories can allow or disallow the use of certain symbols to give elements meaning.

  Geography can also influence the lay-out of a website. In the development of the World Wide Web, a convention has arisen to place a menu at the left or top of the screen and the content at the right or bottom. Most likely, this has to do with the direction in which we read (left to right and top to bottom). This is not a standard for all cultures though. Perhaps an inverted lay-out would work better for Asian and Arabic cultures, for example.
  However, the so called ‘inverted L lay-out’ (described above) is not the only lay-out imaginable and should not be used just because it’s a convention. With the right use of the right design elements, the eye can be drawn in other directions than the one in which we read.

• Interaction Model (Interaction design)
  Interaction is communication. The complexity should depend on user characteristics such as skill and experience. Several rules apply to achieve basic usability.
  
  The Internet makes different forms of interaction possible. Interaction is the most direct form of communication with the user and can be used in a very effective manner to attract users, but can evenly effectively scare them off. The complexity of the interaction should depend on various user characteristics. Examples are the skills and experience users have with the computer, their willingness and ability to learn and their physical and mental capabilities.

  The interaction model probably has the greatest impact on usability. Therefore, care should be taken when designing interaction and certain principal rules should be followed to ensure that the website does not become unusable. First of all, a navigational model should not take long to learn and should be self-explanatory. This does not mean you cannot be innovative in design. The complexity of the design can vary with the user audience.
  Second, navigation should be efficient. Minimize the number of mouse clicks needed and do not rely on the memory of the users. To achieve low memory demands, use conventions that everyone knows or make it intuitive in use. In lay-out, the Gestalt principles can be helpful to make the relation between navigational elements and content clear.
  
  Another rule is to always keep clear what the purpose of the website is. What can one find there, what can be done there and who is the site made for?
  Also, show the user where he or she is located in the structure of the site and provide easy means of returning to previous locations. An extension of this rule is to show what the user has done, where he has come from and what else he can do. A possible way to achieve this is to use blue and underlined hyperlinks which turn purple when clicked. This is a convention most Internet users will understand, but that does not mean it is the only way or even the best way to do it. As long as it is self-explanatory, other options are available to you.

  The interaction design has consequences for many other parts of the design. Because of the possibility of interaction it sets different constraints for the visual design than in non-interactive media. Furthermore, it dictates to some extent what technical options you do or don’t have to achieve your goal and it can extensively influence the information structure and content presentation.

• Technique (Technical Design)
  Technical realisation is one of the pillars of designing a website, but should not be the designer's sole viewpoint. Technical restrictions can follow from user characteristics.
  
  Seen as how every designer has his or her own specialty, it is very well possible for the technical design to be the starting point in the design process. However, it is essential for the quality that all different parts of the design process take part in the development of the product. How these parts are balanced depends on the function and user audience of the product.
  Technical possibilities and limitations are important to take into account during the design phase, because they can have consequences for all parts of the design. The designer needs to be aware of this, but not let himself be led only by the technical design.

  In design, technical specifications can be a result of user audience characteristics. The most important issues to consider are the following:

  Screen resolution
  Size of monitors and specs of graphics processing units can influence the maximal size that the content of a website can have without the need for scrolling. Screen resolutions can vary from 640 x 480 pixels to 1280 x 1024 or more. When a user needs to use scrollbars to see all of the content, the accessibility of the website is lowered. To ensure this is not the case, assume a small screen size.

  Bandwidth
  When viewing a website, people will have to wait for it to load before they can access it. The time it takes to load depends on the size of the website and the speed of the user’s modem and Internet connection. There are several “tricks” to prevent long loading times, such as loading in parts, where a specific part of the website is only loaded when it is accessed. Also, the file size of images and other content should be kept small to keep down loading time.
  Furthermore it is always a good idea to implement a so called ‘preloader’, which is something that keeps the visitors busy while the website is loading. Preferably, the preloader also provides feedback on the loading progress.
  Try to adjust the size of the website, and with that the loading time, to fit the average bandwidth of the user audience.

  Processor speed
  Different technical solutions make different demands on the processor of the user’s computer. An example of processor speed demanding techniques is scripted animation in Flash. The processor has to calculate changes in shape and location. The speed with which this happens depends on the speed of the processor and the amount of other tasks it is performing. Many animations at the same time will create a greater risk for hitches in the animation.
  In the case of great demands on the processor, the speed of user interface feedback can even be in danger, which in turn can result in impatience and ultimately users leaving the website.

  Browsers
  For navigation over the Internet, a variety of browsers can be used. Among the most popular browsers are Internet Explorer, Netscape Navigator and Mozilla. There are many other browsers and on top of that, different versions of each browser. Each browser and browser version has its own specific characteristics which can be important for the technical realisation of the website.

  System and platform
  PC, Macintosh, Windows, Mac OS, Unix, Linux, …
  Users can have different systems and different platforms on which they work. Compatibility between platforms is growing ever better, but in some cases you might need to consider certain system and platform specifications when designing a website. Try to always test your design on as many different platforms as you can.

  Plug-ins
  Some techniques require specific plug-ins. Examples are the Flash, Shockwave, Quicktime and Virtools plug-ins. If you want to utilise a technique that demands a plug-in, check the penetration rate of this plug-in in the user audience. The Flash plug-in for example has an overall penetration rate of 98 The Quicktime plug-in is also relatively widespread, but even is it is, provide an easy way to get the plug-in for those that don’t already have it. Also consider the fact that people not having it need to go through the trouble of downloading and installing it, just to view your website. If they don’t know it’s worth the hassle, chances are they will leave.

TESTING PHASE

Prototypes are tested in this phase. Testing generates experience that can be used in the same development cycle to increase product quality. Testing is closely related to the design phase, in which small scale testing always takes place. This phase only applies to prototypes though.

Testing is the third phase in the development cycle. In this phase a prototype or the final product is tested. In this last case, it should be the last time tests are performed before implementation. The reason for this is that in a normal development cycle, the testing phase is performed multiple times on prototypes, to draw conclusions on the functionality and usability of the product. After it is tested, changes are proposed and the prototype returns to the design phase for further adjustments and elimination of problems that were discovered. Therefore, the testing phase has consequences for the usability of the product, for when this is found insufficient, changes will be made to increase the usability.

Testing does however also take place during the design phase. Every judgement, every consideration of a made choice is in fact a test. This is an integral part of designing a product and therefore these kinds of 'tests' are not seperated into a single phase. The testing phase as it is defined here applies to the testing of actual prototypes, which are a predefined intermediate versions of a product.

It does however show the tight relationship between designing and testing a product. In webdesign, these are the only two phases of the development process that are performed iteratively. By iterating through these two phases, experience is gained and re-used within the development cycle, thus increasing the overall quality of the final product. This is not the case when the entire process is performed in a linear fashion (see also the overall process description).

IMPLEMENTATION

The final step to completion of a website is the implementation. Implementing a website can signify as little as uploading the files, but it can also mean installing software on a server, inputting definite information, implementing a database, setting up a forum or even other, more complex activities. This all depends on the nature of the website and it's technical specs.

The implementation phase is the final chapter in the development of a product. In webdesign, implementation often consists of little more than uploading files to a server when dealing with small scale projects.

In case of larger projects, in which for example a backend is part of the website, implementation may mean more than a simple upload action. Implementation of certain techniques might be necessary before the website can function. You may for example have to implement a database or certain software, or perhaps set up a forum. There is a wide range of possible activities involved in implementing a website. The exact nature varies per project and depends mostly on the technical specifications of the product.