skip to Main Content

UX Design: What do User Experience Designers 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

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.

Wireframes

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.

Barry Reynolds

Barry Reynolds is a director at WP Design with many years of experience in web design, WordPress development and digital marketing.

Related Posts

About the Author

Leave a Reply

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

Barry Reynolds

Barry Reynolds is a director at WP Design with many years of experience in web design, WordPress development and digital marketing.

BEST Anti Spam Plugins for WordPress

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

read more

UI Design: What does a User Interface Designer Do?

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

read more

Best Free WordPress Themes for Writers & Authors

If you’re looking for a WordPress blog theme for your website, and they are all free, then you can find…

read more

SEO Copywriting: Write for People to Increase Google Ranking

If you run a small online business and want to stand a good chance at ranking well in searches, you…

read more

BEST WordPress Security Plugins

This article looks at the BEST WordPress Security Plugins for including: Sucuri / Anti-Malware Security / iThemes Security. We will…

read more

Illustration in Web Design: How & Why to Use Illustrations in a Website

Why do we use illustrations in web design? The Skills of the illustrator can shine through and be appreciated more…

read more

London Web Design & Development Degrees & Courses

A career in digital media is a rewarding and challenging profession covering many disciplines including web design, web development, illustration,…

read more

Photography in Web Design: How Images Improve your Website

Photographs can have a dramatic impact on your website design and brand identity. They can be used in image galleries…

read more

BEST SEO Plugins for WordPress

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

read more

BEST Image Compression Plugins for WordPress

Uncompressed and oversized images can have a major impact on your website speed. Image optimizer plugins for WordPress can help…

read more