Why I still use mockups when designing for web

Designing for the web like all design work involves structure and process. When starting your project with a web designer will want to gather information. They will use this information to research and plan out the structure of your pages. Their focus will be to design a site that suits your target audience and their needs. The design has to flow while also giving the user the information they are visiting the site for. A front end designer will take care of the look and feel while also thinking about the usability of the pages.

What is a mockup?

Well, it’s a mockup or a plan of a website before the sites built with code. The mockup will be an overview of how the page will look. It will provide the colour and font styles. The placement of images, content and graphical elements. Also all the UI elements eg: buttons & forms will be placed with the user in mind. A lot of the time the mockup is a static image. A static image will not show hover effects on buttons or sliders. It will show the placement of these elements and how they work in the page.

The mockup helps the designer layout the websites content logically, hierarchically and also shows functionality. It takes into account the user flow and how the user will interact with the page. By having this clear image of the web page layout the client can make changes to the design before the website starts development.

Why design a mockup?

Having a clear picture of the web page design reduces development time. I spend time mapping out the design using a program like XD or photoshop. When I do this I can plan how I want to develop each element. I can see if the design is functional. It allows the viewer to see if everything is working together aesthetically. Is the spacing right in the sections? Do the fonts work well together? Is the design sending the right message to the target audience?

A bit of background

Years ago when I learnt to code WordPress themes I would design up the site in Photoshop. I provided the client with two options for their home and an inside page (about). I supplied these designs to the client as a static image. They would look them over and see if this was the direction they wanted to go.

Why Photoshop and not illustrator? I tried illustrator and fireworks, but preferred photoshop. As I was already working in pixel format, I knew that the elements were the right dimensions I would need for the website. These days I have moved over to Adobe XD. This new tool in Adobe’s offering is great for mocking up designs and prototyping. I could start nerding out over all the bits that are great but, that’s it’s own post.

Have page builders stopped designers mocking up sites

I have found in the last few years with the rise of page builders, like divi and elementor, designers are jumping straight into building. They have their favourite themes, or elements already set and they build out a site.

Everyone has their process, and I am not criticising other’s ways of doing. But this post is about why I still start with a mockup.

I don’t like using heavy themes that come with a lot of pre-built styles. I find them bloated and not necessary. I prefer to use a boilerplate (basic) starter for WordPress. Custom building my sites to suit each client. I also don’t want the theme to dictate my layouts.

The development process

When I first started with website design and development I had to learn to code. This involved customising themes with html, css and php. I found clients wanted to be able to edit their sites easily and page builders started to become popular. I started using Elementor around 2017 and found it a great tool. It provided clients with an all on page view of their content and layout. The page builder helped to speed up development. It took away the need to write extra functions or theme pages to display special content.

I am always looking for ways to streamline my process. I aim to use less plugins to achieve the desired outcomes a site needs. Currently I am looking at Oxygen builder. I plan to use this to develop my WordPress sites. But at present I may continue using Elementor on certain sites for the time being.

So back to the mockup and why I still use it

I recently worked on a project that was pure HTML & CSS for a platform. Before I started writing the code, I had a visual that showed me the structure of my page. This gave me a reference for my colours, fonts and sizes and breakdown of sections. I was able to show this to the client and get sign off before coding it. In this instance, I was not using a page builder or a theme. Without this I would have been flying blind when it came time to write the code. By showing a client the mockup they have an expectation of understanding of how it would look and work. It makes the process smoother for me and my clients.

#webdesign #development #wordpress #UX #UI #XD #photoshop