Websites are an important marketing tool, but to live up to its full potential, it must be done well. You have now completed your wireframe, and you’re wondering: What is a mockup in web design?
When creating a website, there are certain steps that should be followed. The first step is the create the wireframe. Your wireframe is the skeleton of your website, a lot of the times it is sketched by hand. It will provide you and your client with a general overview of what the website is going to look like.
After you have an idea of what you want your website to look like, you are ready to create the mockup. Ideally, your mockup is going to be as similar to the final product as possible. It will essentially be a design of what you want each page to look like, and how you want the navigation to flow. The mockup will look like screenshots of the final product.
There are tools out there that are specifically designed to guide your mockup building process. One such example is Moqups. This type of software allows you to work on your both your wireframe and mockup.
Because it is cloud-based, it is possible to work on it as a remote team. Anyone who has been given access to the mockup can make changes in real time.
Depending on personal preference, rather than use software specifically for mockups, some prefer to use graphic design software like Sketch or Photoshop. These tools really allow you to explore specific color, font and design options that really allow your creativity to flow.
One of the downsides of using a graphic design software is that you may have difficulty transferring the exact look you created when you start coding your website.
Alternatively, you may choose to go straight to coding for your mockup. However, if coding is not one of your strong points, this would not be the ideal choice. Those who understand code very well may find it less time consuming to go straight to coding rather than use one of the software mentioned above.
By creating a mockup with coding, you will avoid having a difficulty matching colors, fonts and visual effects created by your design tools. While it can be easy to attain a flashy design with tools such as Photoshop, finding the coding to match this can be time-consuming and sometimes impossible.
If you would like a visual explanation of how to create a sketch and mockup, Kyle from RoboSquidTV provides you with a detailed video tutorial.
According to Tenterfield Web Design, who does Web Design in Tenterfield Australia, a mockup is what the designer will use to ensure they are reflecting what the client had in mind for their website. This gives the client the opportunity to request changes on the layout, font, color, or overall design before the website is created.
The designer may feel that creating a mockup up is a waste of time, but in the end, it could save time. Imagine having done all that coding, and you show the client or your boss the website and they want something completely different.
If you have a mockup, any changes will already have been requested before the coding has begun. As Nick Pettit notes in his Treehouse blog: “I’m always eager to dig into code right away, but that can be an expensive waste of time if the design needs to change dramatically”.
The mockup is possibly the most important step in the website design process. This is where the look of the website will come to life. After you have created the mockup, you are ready to work on the prototype which will lead to the launch of your website.
Tags: Mockup, web design