Part Two

Create a Wireframe

A wireframe is an expansion on your sitemap. It is more detailed, and will provide a visual guide of what a user can expect to see on a page and what functions are available (i.e. contact forms, buttons). A wireframe does not show any content, it will just show the space the content may need and how the content will be organised. (See examples below).

Using the image below as a guide, draw wireframes for all the pages you have included on your site map. You may do this digitally or you may draw this by hand. Some free digital wireframing programs include :

https://www.lucidchart.com https://www.invisionapp.com/ https://moqups.com/

Part One

Sitemapping

You are a UX designer and you have just been asked to develop a website for a business. It could be a local business, a brand you like, or you might choose to make one up.

Next you have to determine what pages the site will include. A sitemap helps you visualise the structure of a website before you build it and is essentially a flow chart of all of your website’s pages

Using the image below as a guide, draw a sitemap for the website you are going to create. You may do this digitally or you may draw this by hand.

Part Three

Reflection

Explain why you made the UX choices you did within your design. You can use phrases like ‘user flow’, ‘accessibility’ and ‘user experience’ when describing your design.

What is a UX Designer?

UX means, ‘user experience’. UX designers look at the functionality and usability of an app or website. (See right).

A user’s experience of an app or website is completely determined by how they interact with it.

UX designers work on the structure of the website. They solve problems like: Is it hard to navigate through particular web pages? Does the website feel clunky or bare? Are there any pages, buttons or other elements missing? Can I find what I am looking for?

DOWNLOAD TEMPLATE