Methodology explained - Part II design
2006.06.25 21:36
In the second phase, of a 5 phase process for developing any project, we start working on the design of the site. The design will incorporate much more than just how the site will ultimately look. The design refers to the structural integrity of the information architecture as well as the aesthetics of the visual design. In order to develop an appropriately immersive experience to solve my client’s problem we begin, as they say, at the beginning.
Per the project’s requirements we have an answer, meaning what we hope the site to accomplish, but now we have to define the question…how to engage the visitor to the site to gain the insight we are offering and convert them to the task(s) assigned? When the project has been defined with all of the requirements are laid out and tasks have been assigned, the next phase is to design the site. This design process will incorporate many steps but the most important are: card sort, flowchart, wireframes and the creative conceptual development.
I had previously mentioned iPragma’s XSort, a great piece of software designed to aid in running a card sort, which can be used in this first step of the design phase. If you have never participated in a card sort, it is exactly as its name sounds; sorting cards. Originally using note-cards, you would label all of the sections and elements of the site and have volunteers organize these cards into a logical assemblage of sections/subsections to create an interactive process. Through multiple rounds patterns begin to emerge on the most logical flow for the site will present itself. XSort allows this to be done all on the Mac, and track some more information during the process. Both are valid means to perform this task, with advantages for each.
With all of the insight we obtain from the card sort, we create a flowchart for the site. This site will be the blueprint for the site and has to be vetted to insure that it will guide our user along a logical path to complete the project’s requirements. Other items are also added to the flow of the site; boilerplate items like privacy policies, terms & conditions, etc.
When the flowchart has been accepted by all parties, we then move on to the wireframe of the pages. Now I am sure you may be asking, when do you actually draw anything? The visual design of any site is of great importance to the success of the site, but so is the information architecture and these steps are followed in order to create a visually appealing and user-centric site that meets the client’s goals. The wireframes allow us to place all of the information on the page to structure the and balance the page(s). Defining primary sell spaces, as well as secondary and tertiary messages that support the project’s requirements as well as are in line with the brand messaging of the client.
Up ‘til now we have “spoken” about the site in broad strokes. There has been due diligence to insure the site will allow the user to be in control of their visit, while also getting our client’s message across. Now we get to the visual design of the site. There are many things to consider when design a site, most important are brand standards. Clients spend a lot of time and money cultivating the proper image for their company and the website is an adjunct to this message. Inasmuch, it must maintain consistency with the other marketing and advertising the company is using in order to maintain the same message regardless of where it is coming from.
These standards are usually codified in a style guide and are instrumental in maintaining the visual identity of the client’s brand. Once we familiarize ourselves with these manuals we are prepared to develop the visual front-end for the site. These designs always start out with pencil and paper in a thumbnail version and slowly graduate to full-blown Photoshop comps. We normally do one round of initial comps and two rounds of revisions to get to the level of detail needed for any project; although it can be more involved depending upon the complexity of the site.
Once the designs are reviewed and approved we would then begin the programming of the site. But that is another day.
Per the project’s requirements we have an answer, meaning what we hope the site to accomplish, but now we have to define the question…how to engage the visitor to the site to gain the insight we are offering and convert them to the task(s) assigned? When the project has been defined with all of the requirements are laid out and tasks have been assigned, the next phase is to design the site. This design process will incorporate many steps but the most important are: card sort, flowchart, wireframes and the creative conceptual development.
I had previously mentioned iPragma’s XSort, a great piece of software designed to aid in running a card sort, which can be used in this first step of the design phase. If you have never participated in a card sort, it is exactly as its name sounds; sorting cards. Originally using note-cards, you would label all of the sections and elements of the site and have volunteers organize these cards into a logical assemblage of sections/subsections to create an interactive process. Through multiple rounds patterns begin to emerge on the most logical flow for the site will present itself. XSort allows this to be done all on the Mac, and track some more information during the process. Both are valid means to perform this task, with advantages for each.
With all of the insight we obtain from the card sort, we create a flowchart for the site. This site will be the blueprint for the site and has to be vetted to insure that it will guide our user along a logical path to complete the project’s requirements. Other items are also added to the flow of the site; boilerplate items like privacy policies, terms & conditions, etc.
When the flowchart has been accepted by all parties, we then move on to the wireframe of the pages. Now I am sure you may be asking, when do you actually draw anything? The visual design of any site is of great importance to the success of the site, but so is the information architecture and these steps are followed in order to create a visually appealing and user-centric site that meets the client’s goals. The wireframes allow us to place all of the information on the page to structure the and balance the page(s). Defining primary sell spaces, as well as secondary and tertiary messages that support the project’s requirements as well as are in line with the brand messaging of the client.
Up ‘til now we have “spoken” about the site in broad strokes. There has been due diligence to insure the site will allow the user to be in control of their visit, while also getting our client’s message across. Now we get to the visual design of the site. There are many things to consider when design a site, most important are brand standards. Clients spend a lot of time and money cultivating the proper image for their company and the website is an adjunct to this message. Inasmuch, it must maintain consistency with the other marketing and advertising the company is using in order to maintain the same message regardless of where it is coming from.
These standards are usually codified in a style guide and are instrumental in maintaining the visual identity of the client’s brand. Once we familiarize ourselves with these manuals we are prepared to develop the visual front-end for the site. These designs always start out with pencil and paper in a thumbnail version and slowly graduate to full-blown Photoshop comps. We normally do one round of initial comps and two rounds of revisions to get to the level of detail needed for any project; although it can be more involved depending upon the complexity of the site.
Once the designs are reviewed and approved we would then begin the programming of the site. But that is another day.