I am working on my Capstone project for the Bootstrap 4 course on Coursera. To get the credit certificate, I need to design a web application by myself, from Ideation

The Previous Story – Stage 1

• Ideation for a Reading APP

Stage 2 – UI Design and Prototyping

Visual Demonstration

This is a video recorded using an embedded function of Adobe XD.

Table of Contents

• UI Design and Prototyping
  • Table of Contents
  • 1. Introduction
  • 2. User Interface Design and Prototyping
    • User Interface
      • Pages
        • Index Page
        • Read Page
        • Peer Around Page
        • About Page
      • Prototype
  • 3. Navigation Structure
  • 4. References

1. Introduction

This is an app that encourages people to read more books and making more friends. Although online, it encourages people to go out to meet interesting people people around them otherwise they don’t know. By reading books and meeting new people, they expand their knowledge and friend circle, and more importantly, gradually come to recognize who they are and where they are from. It is peer to peer web application.

2. User Interface Design and Prototyping

I used Adobe XD to design the UI. To be honest, it is really easy to learn and makes me desired to use it to design more.

User Interface

I impelemented the design of four pages, the index page, read page, peer around page and the about page. The read page and the peer around are served as the main function pages of the website. People can find books they want to read and peer around them via these 2 pages.

Pages

Index Page

Read Page

Peer Around Page

About Page

Prototype

Each button of the navigation bar on each of the page are activated by connecting them using the wire. The navigation bar and the flow of the application are clearly demonstrated by using the magical wires.

3. Navigation Structure

As I have demonstrated in the following screenshot, the navigation bar is the main navigation structure of the application. And more links will be added into the index page and the read and peer around page, so that the users can easily click on what they want and get their alter ego.

4. References

1. I chose Adobe XD as my tool from https://creativebloq.com/wireframes/top-wireframing-tools-11121302
2. Learned XD Tutorials here: https://helpx.adobe.com/xd/tutorials.html

Next Stage …

In the next stage, I will go further in the prototyping stage and develop the app and deploy it on a server.