assignment.004

Website Wireframes

Website wireframes, like paper prototyping, is a method used by web designers to visually plan out a design of an interface before actually building a website. Wireframes focus on the structure of the website prior to the design of the website. It illustrates the structure of the site and its relationship to its pages while maintaining consistency throughout the inner pages of the site.

Below is a screen cap of Tutcast.com, a website that makes Adobe Photoshop Tutorials.
Prior to coding and design, a wireframe image would look like this.
The wireframe serves as a stable, simple outline of the structure of the website that functions as a base for developers and designers to reference while building a site. In this website, much of the website that fits "above the line" is taken up by web advertisements and very little of the page is reserved for actual Tutcast content. A redesign could involve cutting out most of space reserved for advertisement and structuring a website focusing more on the video content produced.

Wireframes can be produced both digitally (as shown above, created in Adobe Photoshop) or drawn on paper (an example, being paper protoyping as shown in a video in a previous post). One advantage of paper prototyping over computer generated wireframes may be the ability to illustrate and view many "pages" of a website design at once while being able to physically move around, eliminate, or change pages faster than on a computer graphic program. Below, again, shows a website with a wireframe that does not allow users to interact with the prototype.

















A redesign of this website for 21st Floor Associates would need a more interactive wireframe where people can interact with the links at the top of the page and see where each click leads to. The advantage of doing a paper prototype would encourage this interaction.

This wireframe requires a more interactive prototype for more clarity of direction than the simple wireframe can offer. Paper prototyping may offer a way of designing for functionality rather than just for design structure. The limitations of wireframes, however, are becoming less of a problem while technology allows for more user interaction. Programs like Adobe Photoshop, InDesign or other programs available specifically for wireframes are available to modernize the creation of pre-building phases of website design.

Another tool designers use for the web designing process is the use of a Site Map. While site maps act as a sort of table-of-contents for web pages, it is also used as a planning tool that lists the pages of a website in a format that are organized in a hierarchical fashion. It is used to make sure every page within a website is found by both users and search engines, especially when the website involves flash or javascript.

The next step in a web design prototype could be a comprehensive layout - a mock up of exactly what the website would look like including the design. The comprehensive layout, or "comp" applies to any sort of design projects including magazines, books, or advertisements. It would be in the phase where companies could show clients what a project would actually look like visually instead of just functionally.

Graphical User Interfaces (GUI) are allowing people to interact with a computer in more ways than just typing and clicking such as modern touch cell phones or ATM machines. These programs depend on user-centered designs. It is important for these designs to be tailored to the desired functions that the program requires. Users interact with widgets and a model-view-controller allows for a flexible structure so the GUI can be customized by the user.

Related to graphical user interfaces are interfaces for website management that simplify the process in websites that frequently update or change content such as news websites or online shopping sites. Interfaces for website management allow people, other than programmers or developers, to access and manage the website without having to know any code. It works similarly to the user-friendly ways that Blogging websites such as blogger.com work where users can sign into their account and update posts without having to code the site.

All of these tools are useless without the feedback from any typical user. Wireframes, paper prototypes, site maps, and any other tool used for web design planning are made so regular people, particularly a focus group comprised of the people in the target market of the website, can test the comprehensiveness and agreeableness of the website design. These people ultimately decide if a design is useable or not.