HomeDesignTemplates & Themes → Visual Prototyping

Visual Prototyping

Visual Prototyping

Design is a very subjective matter. One person's opinion will be quite different from another's. Thus, the visual prototyping phase of the project is very important. Very early on in the project, the visual prototype shows clients what the website will eventually look like, even before any website code is written!

 

Wireframe to Visual Prototype

We know...

  • The homepage, arguably the most judged aspect of the website, should create an impact within the first few seconds to ensure that the user stays!
  • In those precious few judgmental seconds, the user should be able to easily "get" what the website is there for and intuitively know how to use its intended functionality without having to pause and think!
  • The homepage should be correctly positioned to attract its targeted audience. This means, if you want to reach out directly to consumers, do not create a B2B site; or if you want to solicit an enquiry from the user, do not bury the enquiry form somewhere deep within the website!

A visual prototype is an exact visual representation of how the website homepage will appear in the browser. The basis for creating a visual prototype is from the wireframe mockup.

A wireframe, as shown below, broadly defines the various components of the webpage, mainly the layout. However, a wireframe is not capable of showing the individual styles of these components.

Styling the component from the wireframe results in a visual prototype. We use tools like Photoshop to convert a wireframe into the visual prototype.

Visual prototyping includes selecting the website's color combination, graphic icons, fonts and look of individual components such as menus, tabs, buttons, headings and forms. The components from the wireframe are added as a separate layer to the visual prototype during its styling so that it can be quickly re-used when HTML code is being written.

wireframe
 

To see the visual prototype of the wireframe shown above, click the "Toggle" button. You will need to have Javascript enabled in your browser to see it in action.

We can quickly go through several iterations on the wireframe mockups of the homepage to ensure complete client satisfaction. The mockups can show components in different layouts as requested by the client. We term this as the "design concept stage of prototyping". During this stage, we receive continuous client feedback and add all the fine detail to the shortlisted wireframe.

Once the client approves the wireframe, visual prototyping begins.

Virtualize your business processes!

Here's music to your ears: Our thorough knowledge of integrating CMSs such as Drupal, with application frameworks like CakePHP, can help you take the risk out of choosing and implementing a CMS solution for your website.