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

avatar
  Subscribe  
Notify of

Barry Reynolds

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

Niche Keywords: Find Keywords for your Industry Website

A great way to get your site to rank for the searches you want it to appear for is to…

read more

BEST Review Plugins for WordPress

This article looks at the BEST Review Plugins for WordPress including: WP Review / WP Product Review / WordPress Business…

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

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

Increase Average Time on Page and Reduce Bounce Rate

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

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

BEST Contact Form Plugins for WordPress

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

read more

London Web Design Events: State of the Browser 2019

About The State of The Browser 2019 event London Web Standards hold a monthly meetup on the 3rd Monday of…

read more

London WordPress Events: WordPress London Meetup

WordPress London is a group on the meetup.com website with monthly meetups held on the last Thursday of the month.…

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…

read more
WP Design