Visual Web Development: Grayscreen Modeling
An emerging best-practice in web development is that of “grayscreen prototyping.” In its simplest form, it is the creation of a readily modified form or model of the planned website. This prototyping takes place after site flow analysis and process mapping, so that the initial understanding of the site is captured. Grayscreens are a preferable method over paper based techniques or wireframes, in that they present a more dynamic means in testing out the potential site’s pathways.
Grayscreen prototyping has the benefit of having the client more actively involved in the process of developing the website. The prototype is presented in a user-friendly, clickable form, providing the client with hands-on experience with the future flow and architecture of the website. Additionally, with the prototype being “gray”, the customer is not distracted by visual content and can focus fully on the flow and structure of the website.
Another advantage of this form of prototyping is that the number of design change rounds are reduced significantly. When clients have a better idea upfront of what the site will look like, their changes and additions are more specific and better formulated. This enables designers to more readily translate that input into the form and functionality the client desires.
The Visual Web Designer Architecture Step
After the flow and information framework has been established, we move on to the important phase of determining the look and feel of the site. Here we work with the client to concentrate on the visual web design, to ensure the organization’s image and branding is working well with the framework of the site. The objective is to help visually guide visitors to make contact. We delve into the different visual web development elements such as fonts, images, colors and textures, looking to add visual depth to the site.
Depending upon the client’s needs, we create a single template or a series of mock-ups of what the site could look like, then test out a number of iterations for input and approval. After two or three revisions the desired look and feel is achieved, and we proceed to the actual creation of content.