User Experience (UX) is the consideration of the many aspects of a user’s interactions with a website or app.

The UX Designer uses a site map, wireframes and user testing to identify the most intuitive, efficient and enjoyable experience for the user. The wireframes are eventually rendered into a mockup.

Site map: A graphical outline of all the pages of a website which will be accessible to the users. These pages are represented in a hierarchical fashion with a tree-diagram. The map also suggests the site’s navigation.

Wireframes: Simple sketches of the site’s content and functionality. They are often rendered in black & white and without the final content (text or images). A wireframe should answer the following questions:

  • What content will be displayed on each page?
  • How will the layout of the page present the content so it can be easily understood?
  • How will the layout of the page enhance the navigation to make it user friendly?
  • What type of media will be included on each page?

Site maps and wireframes can be hand drawn or created with Adobe Illustrator or a dedicated software (i.e: Balsamiq).

The client should sign off on the site map and wireframes before proceeding to the next step.

Mockups: Once they have been approved, the wireframes are rendered into a mockup – a full preview of what the website or app will look like. Color, typography, images etc… are included, but the content is rendered as a static image. Mockups are usually created in Adobe Photoshop

With the rise of responsive design, the UX designer often has to provide multiple wireframes and mockups for each page. Responsive Design is a design approach aimed at crafting sites to provide an optimal viewing experience–easy reading and navigation with a minimum of resizing, panning, and scrolling–across a wide range of devices (i.e: mobile phones, tablets, desktop monitors).

– Anna Pinkas