Every firm is bound to have some or the other process they follow when designing their website. They may be using a professional approach by using wireframes, mock-ups and prototyping or they may be even have a more freelance approach by getting down to providing the design right away. On the other hand there are also those who do not stick to the rules and stray away from the crowd to do something different. In doing so it is likely that they have even discovered several new and innovative methods of going about the design.

Thus though there are several good Web Design practices that have been tried and tested and even well documented at times they just don’t work for you and seeking an alternative might be the best option. The article give insight into the process of using mock-ups and at the same time helps you decide if you require an alternative process.

Tips while implementing your Mock-ups:

It is quite common for clients to demand a Mock-up of their website design prior to making any decisions on the final design layout. In fact several firms have included the creation of mock-ups as a must as a part of their Design and Development process which includes creating wireframes and prototypes.

• Getting started with the design: It is necessary to make sure all the images, logos and hierarchical matter has been sorted out prior to completing the mock-up. If necessary, you should also organize discussions with the stake holders.

• Wireframe importance: The wireframe of a project acts as a very good guideline to the mock-up. It is less about the visual design and more about the frame of the project and helps clarify the flow early.

• Establishing clear focus: The wireframe can help in the initial stages however it necessary to maintain focus on the chosen flow of the project

• The Competition: Get a brief look at the competition to help you get even more motivated and consider a different perspective.

Alternative Design process – I

This design process gives more importance to Mock-ups that it does to prototyping. Thus the process that starts with the making of the Wireframe moves onto the development of the mock-up and then goes straight into development. Since the prototyping task is skipped, the mock-up of the website is one of the most important documents that is referred throughout the project.

The entire process is described here in brief:

• Create a sketch: The first step of the project is essentially sketching the basic idea and elements to be included in the project. This also may involve creating a rough design of some kind. This is closely followed by creating the wireframe of the project which is essentially formalizing the rough ideas to give shape to the project in the early stages.

• Mock-ups: Next comes the mock-up of the project. This involves creating high fidelity mock-up (Hi-Fi Mock-up) of the project which is highly important since the prototype is not implemented. Hence the mock-up is in fact required to be pixel perfect. If anyone has a highly demanding client, they will understand how important it is to create a pixel perfect mock-up.

• The final stage – Development: Development of the project is the final stage that comes after the mock-up is has been finalized by the client. This the time to start the process of actually building the website. The process of development is usually carried out in two stages. The first stage is to create the HTML page using CSS and JavaScript. Once this is perfected it is used to create a template for the dynamic website that is being developed.

This specific alternative doesn’t include the prototyping process. That said prototyping is considered quite a effective process that also inspires creativity. Hence if you do choose to opt for this process it cannot hurt to also make a quick prototype of the project.

Alternative Design process – II

This second alternative design process lays extra stress prototyping but also includes the other stages of the design process. The unique feature of this process is that includes early integration of functionality. Hence this is process will be more suited to the designers who have a fair idea of the coding site of the project besides designing in HTML. Thus if the project is technically complicated this is as good approach to take.

The process is described here in brief:

• Wireframe: The first process of this project is creating the wireframe. The wireframe includes the basic ideas and structure and is far from the final output.

• Low Fidelity Mock-up: The next phase is to create a mock-up however the keyword here is “Low-Fi”. Having this makes a lot of sense; since it saves the time spent on the design intricacies. The mock-up at this stages is more about the interaction and functionality.

• High Fidelity Mock-up: One of the main purposes creating a mock-up is to design the visuals. This process can build on the Low Fidelity mock-up by adding more interactive elements and visuals as they are developed. This process also includes creating a fairly Low-Fi prototype which when combined with the High Fidelity Mock-up can be transformed into a High Fidelity Prototype.

• Testing and Bug Solving: This method also includes the testing of the functionality. Besides which once tested it is also perfected further. The usability test is conducted at every stage of the design and hence all the potential problems can be dealt with right at the start. This is a big advantage of this method.

Conclusion:

Alakmalak is web development company and hasn’t always had the same design method. However over the years they have grown to adapt several standard methods and processes. There are now several great wireframe tools available that makes this process even more easy.

Thus it is not surprising that they crossed the magical figure of having developed 2000 websites a long time ago. Besides which those clients which happen to be from all across the globe really appreciate the design and development work and continue to remain our clients.

• How to use mockups in the UX design process
• Web Design good practices - Using Mock-ups in the UX design process