Why Website Mockup Is Important For Web Design Process
We have earlier wrote that the first stage of any web design process would be the creation of the website wireframe. In this article, we are going to discuss further on the next most important process of the web design process which is the ‘Website Mockup ‘.
What is website mockup
While wireframe represents the blue print of how the website layout will look like, a website mockup will actually be the translation of the wireframe into a real look of the website. In the mockup phase the client will see how the images are used, colours chosen and fonts appearance on their website. From the mockup, clients will be able to determine whether appearance of the eventual website will appeal to them.
Website mockup is normally done by web developers using graphic design software such as photoshop , Microsoft power point or they might even go straight into the coding of HTML/CSS. The clients will be presented with the website mockup in normal PNG,JPEG or PDF files and are expected to make their comments on these mockup until they are satisfied.
Why website mockup should be created.
Some client may wonder why don’t the designer go immediately into implementing the code and skip the mock up phase. Imagine the client is not aware on how the website will look like but was presented with a final design. The client will obviously want changes to be made and this will create waste of time in finalising the look and appearance of the and hence delayed in the project. With the mockup website presented to the client, as the mockup is created using graphic design tools, whatever changes to be made can be easily made and when the client is satisfied, only then the developer will begin the coding process.
What can be done during the mockup phase
During the mockup phase, the client can provide the following input into the design
- Colours Scheme – Some of the colours to decided would be the background colours, navigation bar colours, link colours, buttons colours, sectional colours, side bar colours and footer colours. Normally, the colour chosen would match the overall consistency of the clients other branding colours present in their current print and stationary materials.
- Images – Images to be used will be included in the mockup phase. Some of the images would include slider images, page header images, web contents images, product images ( e commerce store ) , owners images and any other type of images. Often the sizes of these images will be proposed by the designer to the client but nevertheless, the final appearance of the mock up will determine the acceptance of the image sizes.
- Fonts – As there are more than 600 type of fonts available on Google fonts, the various types of fonts can be tested during this phase. Apart from the type of fonts to be used, the sizes of these fonts with respect to the various proposed layouts can also be tested during this phase. Various sizes can be tested for headlines, contents, call to actions, footers or at any other usage of text
- Margins and Spacing – Margins and spacing are often overlook as they are not obvious on screen. But with a mock up created, the margins and spacing can be noticed as to whether they will appeal to the eyes. Poor margins and spacing between sections and rows of contents will definitely show a poorly designed website and can impact site visitors view of the website.
- Contents – Sometimes it is good to also have the text contents be ready during this stage. When the proposed contents are added to the mockup layout, the client will able to see the appearance of the contents. Adjustments can then be made to the number of words, fonts and sizes so that its will be meeting the appearance objectives.
Once the client has signed off on the final designed mockup, the developer would immediately begin the coding process. The next time your developer intends to skip the mock up process, insist for one. This mockup process will definitely get the look of the website you really want to have.