skip to Main Content

UX Design: What does London User UX Designer Do?

What Is Wireframing

User Experience Design, also known as UX design, is the process used to determine the experience your website visitors will have when they interact with your website.

The tools used for UX design include wireframes and a sitemap in order to create the structure for the contents within your website.


Sitemap for UX DesignUX design may be used for the creation of a department store. Decisions are made for which floor and area within that floor that products should be placed. Electrical goods, clothing, and kitchenware are typically on separate floors.

Male and Female clothes will be in separate areas and shoes, underwear and coats will again be separated. You may notice that the shoe department is next to the suit department as these are often purchased together.

Similarly, websites pages are grouped together with page contents and links to further information flowing within the website. How well this works will depend upon the thought given to website users experience whilst visiting your website.


Designer desk with website wireframe sketches. Flat lay

A wireframe is produced after a web designer has discussed the functionality requirements of a website with the client and created a provisional sitemap.

One of the most notable aspects of a wireframe is the fact they do not contain images, illustrations or design elements. They are simply black and white line drawings that outline the placement of different design elements and features such as image gallery WordPress plugins. They also help designers identify key conversion areas which contact forms and call to action buttons can be placed.

A wireframe is created to show the structural placing of different elements, without the actual design features getting in the way. A builder wouldn't construct a house without a structural drawing, as a web designer should not build a website without a wireframe.

Benefits of wireframing

Wireframing has several key benefits for both web designers and their clients. Below we have outlined some of the most obvious benefits that also explain why wireframing is such an important process.

Whereas sitemaps tend to be quite conceptual, wireframes provide concrete evidence of the visual process you have in mind for your project. Even without all of the colours and design work, they provide web designers with something tangible that they can show their clients, to ensure they are happy and on the same page as each other.

As experienced WordPress developers, we don't expect our clients to understand what every WordPress feature is or what it does. Rather than trying to explain it with words, a great alternative is to include it in the wireframe.

Wireframing specific features such as WordPress sliders, review plugins or how contact forms will appear throughout the website can help clients to understand how they function. Instead of focusing solely on how their site will look, wireframing can help clients to understand the importance of its functionality.

Leading on nicely from our previous point - wireframing can be used to find out which features work and which don't work for a particular website. Every element and feature of a website should serve a purpose and provide value to the user.

If from looking at the wireframe you and the client decide that the feature will not assist in converting users in any way, you can simply take it out.

Whether you own a website yourself or design them for a living, you should understand the importance of effective navigation. One of the great things about wireframing is that it allows the web designer to test the site's navigational elements. If the process is found to be too complex or it simply doesn't work, they have chance to go back to the drawing board and make changes, without having to worry about altering any visual or design elements.

Although many web designers see wireframing as an additional step that adds time to the process, it can actually end up saving them a significant amount of time. All aspects of creating a website, from developing it's features to creating the content become much easier if you have a good wireframe in place. It will ensure that everyone from the design team and agency, as well as the client, is on the same page, avoiding delays and hold-ups that can pro-long the website build.

There is a wide range of software and tools that web designers can use to create structural wireframes for their client work. Some of the most popular ones include:

UX Pin for UX Design

InVision Studio for UX Design

Adobe XD for UX Design

Sketch for UX Design

Different approaches to wireframing

When it comes to making a wireframe, different web designers will take different approaches. It will all depend on how you work and the processes that bring out your strengths. For example, some designers find it useful to create a sketch, then a wireframe, then the visual design.

Whereas other designers prefer creating a wireframe, then an interactive prototype, then the visuals, then the code. There really is no right or wrong way to approach wireframing, it's just about finding what works for you and allows you to achieve the best results for your clients.

About WP Design

We’re a London web design and WordPress development agency that creates innovative websites and effective digital marketing campaigns to help London businesses grow. Our address is: WP Design, 20 Jerusalem Passage, Farringdon, London EC1V 4JP.
Call: 020 7193 0938 to request a quotation.

Web Design in London | WordPress Agency in London | E-Commerce Agency in London | Internet Marketing Service

About the Author

Barry Reynolds

Barry Reynolds is a London based web designer and WordPress developer that creates innovative websites and effective digital marketing campaigns to help London businesses grow.

Related Posts

This Post Has 0 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

Barry Reynolds

Barry Reynolds is a London based web designer and WordPress developer that creates innovative websites and effective digital marketing campaigns to help London businesses grow.

Increase WordPress Performance for Your London Website Users

Do you get a lot of traffic to your WordPress website but find that your bounce rate is high and…

read more

BEST Paid Web Directories For SEO

This article looks at the BEST paid web directories for SEO including DMOZ Directory, BOTW Directory, Jasmine Web Directory, Joeant, Family…

read more

Anti Spam Plugins for London WordPress websites

This article looks at the BEST Anti Spam Plugins for WordPress including: Elementor / WP Bakery / Divi Builder /…

read more

BEST Social Media WordPress Plugins for London Websites

This article looks at the BEST Social Media Sharing Plugins for WordPress including: Sharethis / AddThis / Easy Social Share…

read more

Web Design Glossary - Dictionary of Web Design Terms & Definitions

Gain an understanding of common terms used by web designers from our web design glossary. A Accessibility Accordian Animated text…

read more

BEST Contact Form WordPress Plugins for London Business Websites

I'm always looking for ways to improve a website, increase new visitors and generate sales leads. One of the best…

read more

BEST SEO WordPress Plugins for Local London SEO

This article looks at the BEST SEO Plugins for WordPress including - Yoast SEO / All-in-One SEO Pack / Squirrly…

read more

UI Design: What does a London UI Designer Do?

When it comes to designing your website, the smallest things can make the biggest difference to the overall user experience…

read more

Increase Time On Your Website From London Visitors

High bounce rate can be caused by a number of different factors, such as users not being able to access…

read more

Marketing Glossary - Dictionary of Marketing Terms & Definitions

Gain an understanding of common terms used by marketers from our marketing glossary. A Advertising A/B Testing Analytics B Business-to-Consumer…

read more
mobile phone icon
Back To Top