UX research is the process of gathering and documenting data about a website and how people are using it.
UX research can take on many forms including:
The purpose of UX research is to discover and document problems that exist when a user uses your website.
UX research is often put together by a UX designer using any number of methods and tools outlined above. Alternatively, the research can be provided to the UX designer by their team including a product manager or a dedicated UX research person.
Competitor analysis is the process of using and documenting the experience of a competitor’s website.
Competitor analysis is done to observe and learn how your competition is solving the same problems you have but in a different or better way.
Competitor analysis is often done by a UX designer. Alternatively, competitor analysis can be provided to the UX designer by their team including the business owner, product manager or a dedicated research person.
A user persona is a document that lists key information about a typical user of your website.
The data for a user persona is put together by a UX designer using various methods and tools. Alternatively, the information can be provided to the UX designer by their team including a business owner, product manager or a dedicated research person.
A sitemap is a document that contains a ‘map’ of all pages featured within a website. It is often referred to as the ‘information architecture’.
The purpose of a site map is to document all pages of a website and show how they link together. The second purpose of a sitemap is to define the main and sub-navigation items of the website.
As a UX designer, you will be responsible for mapping out the sitemap based on an existing website. Alternatively, if the website is new you can workshop the sitemap pages with your team including a business owner. client or product manager.
A user flow is a document that maps out the flow or user journey of a user across multiple pages and actions to achieve a set task. For example, buying a product on your website.
The purpose of a user flow is to map out every stage of the journey that a user goes through to complete a task. Additionally, the task of a user flow is to broadly map out the UI elements for each page in the journey.
As a UX designer, you will be responsible for mapping out the user flow based on an existing website or a competitor’s website. If the website is brand new you can workshop the user flow with your team including the business owner and or the product manager or alternative members of your team such as dedicated researchers.
A wireframe is a document that contains a barebones illustration of all the elements contained on a single web page.
The purpose of a wireframe is to document all of the elements that need to be on a web page. For example main navigation, copy, image and page content etc. A wireframe is also used to convey all of the information a UI designer needs to design the final user interface for a web page.
As a UX designer, you will be responsible for mapping out a wireframe based on an existing website or a competitor’s website. If the website is brand new you can workshop the wireframe with your team including the business owner, product manager and a UX copywriter.
Inspiration in the context of UI design is simply the act of viewing other websites to get inspiration and influence for your website design.
A UI design inspiration board allows a UI designer to collate and document inspiration that is relevant to their project. In turn influence and lead design decisions based on references they have collected.
A UI design inspiration board is put together by a UI designer and sometimes the greater product team. It can take many forms including screenshots taken from other websites and apps on the internet or any other digital or real-life products.
Frames are the ‘canvases’ that we set up in Figma for our UI designs. Frames can be any size but most commonly we set up frames in desktop and mobile sizes.
Layout grids are the horizontal and vertical guides we set up in Figma to ensure all elements are consistently lined up within our UI design.
Spacing is the unit of measurement that we use to consistently space and size our UI elements. For example, using multiples of 8, 16, 24 etc. is a good basis for the spacing and sizing of all your UI elements.
Good UI design is about consistency. We set up our frames, layout grids and spacing before we design our UI to ensure everything is consistent and lines up uniformly across all of our UI designs.
Modular design is the process of designing sections of our UI into self-contained boxes or modules.
The purpose of modular design is so that our UI designs can stretch, shrink and stack into several different sizes. Modular design is essential so our UI elements can ‘respond’ to the different sizes and devices your website will be viewed on in the marketplace.
For beginners, it’s best to use just one font for your UI designs. Use just one font that has many different weights. For example, bold, medium, light etc.
For beginners, it’s best to limit your colour usage to just three colours. One colour for your page background. One colour for your typography and icons. And one colour for your accents.
An accent colour is typically a bright or contrasting colour that you use for things such as calls to action and links. The accent colour should be used sparingly in your UI designs.
A call to action is anything that is asking our user to do something, for example, a button or a link.
Buttons on desktop UI designs have 5 states in total: