The following series of responsive wireframes are designed around different user interactions common in interactive digital products. They show how the different components are laid out for mobile, tablet, and desktop users.

Log-in & Sign-up Wireframes

The wireframe is divided into two sections, the top for logging-in, and the bottom for signing-up. In the Log-in section, the username and password text boxes are vertically aligned for mobile to maximise screen use. The sign-up section is vertically aligned for mobile, split into two columns for tablet, and three columns for desktop in order to better serve the design affordances of each device. The sign-up section has a checkbox for subscribing to a newsletter, allowing for further engagement between the user and product.
Key:

1: Navigation Menu
2: Logo / Link to Homepage
3: User Profile Icon
4: Username Text Box
5: Password Text Box
6: Login Button
7: Sign-up Section Title
8: Sign-up Form
9: Date / Birthday Input Field
10: Agreement and Newsletter Checkboxes
11: Sign-up Button

Home / Landing Page Wireframes:

The home / landing page is centered around a large photo/video display and a call to action. The display photo/video gives a preview of the product and generates interest in it. That interest is then used to prompt the user to answer the call to action laid on top of the display photo / video. A call to action can be a link to purchase a product, make a donation, or start a free trial. The wireframe also includes a number of secondary interactions that the user could engage with in addition to the call to action such as a summary of the product and a newsletter subscription form.
Key:

1: Navigation Menu
2: Logo / Link to Homepage
3: Display Image / Video
4: Call To Action
5: Summary Title/ Link to About Page
6: Summary Text / Link to About Page
7: Latest News Title / Link Article or Post
8: Latest News Text / Link Article or Post
9: Latest News Thumbnail / Link Article or Post
10: Newsletter Subscription Form
11: Newsletter Subscription Button
12: Social Media Links
13: Contact Info
14: Search Bar

Post / Article Wireframes:

In this wireframe a post / article is mainly a combination of text, images, and image descriptions. They come together in a one column layout for mobile, two columns for tablet, and three columns for desktop to better serve the design affordances of each device. A share / social media button is given prominence by being placed on the top right corner to encourage users to share the product’s content with their friends. A sidebar of related articles / posts is moved to the bottom for mobile and tablet to better utilize screen space and in keeping with mobile design best practices.
Key:

1: Navigation Menu
2: Logo / Link to Homepage
3: Share / Social media button
4: Title
5: Image
6: Image Description
7: Related Posts Section
8: Related Post Title and Link
9: Related Post Thumbnail and Link
10: Search Bar
11: Text

Post List / Article Feed Wireframes

A thumbnail, title, and short description represent each item in the list / feed and and link to their respective article / post. The title and description are horizontally aligned to the thumbnail in desktop and vertically aligned to the thumbnail in mobile and tablet in accordance with the design affordances of each device and in keeping with mobile best practices. The Load More button keeps the screen from getting cluttered and minimizes a page’s loading time.
Key:

1: Navigation Menu
2: Logo / Link to Homepage
3: List / Feed Title
4: Post / Article Thumbnail and Link
5: Post / Article Title and Link
6: Post / Article Summary or Description and Link
7: Load More Button
8: Search Bar

Image Gallery Wireframes

A media gallery in where a user can move through a gallery by clicking on a thumbnail, arrows, or swiping left and right in for touch enabled devices. A share / social media button is given prominence by being placed on the top right corner to encourage users to share photos with their friends. The title, description, arrows and thumbnails are horizontally aligned with the image for desktop and vertically aligned with the image for mobile and tablet to make the best use of screen space.
Key:

1: Navigation Menu
2: Logo / Link to Homepage
3: Share / Social media button
4: Title
5: Image
6: Previous Image
7: Next Image
8: Image Description
9: Thumbnails

Sitemap and User Flow

These diagrams were part of the redesign of CRG Gallery’s website which I did in 2016. For more about the technologies used for the redesigned website, please visit the Development page.
This sitemap shows the overall layout of the website and all of the different web pages in it, and the hierarchy that these webpages follow and how they are linked to one another.


This user flow shows the desired primary and secondary functions for two different user profiles, one profile for first time users and another profile for recurring users.

Paper Prototypes / Wireframes