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
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
- Pages
- User Interface
- 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
![](https://i1.wp.com/fenghe.us/wp-content/uploads/2019/09/image-23.png?fit=640%2C362&ssl=1)
Read Page
![](https://i2.wp.com/fenghe.us/wp-content/uploads/2019/09/image-24.png?fit=640%2C361&ssl=1)
Peer Around Page
![](https://i0.wp.com/fenghe.us/wp-content/uploads/2019/09/image-25.png?fit=640%2C360&ssl=1)
About Page
![](https://i2.wp.com/fenghe.us/wp-content/uploads/2019/09/image-26.png?fit=640%2C361&ssl=1)
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.
![](https://i1.wp.com/fenghe.us/wp-content/uploads/2019/09/image-27.png?fit=640%2C564&ssl=1)
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.
![](https://i1.wp.com/fenghe.us/wp-content/uploads/2019/09/image-28.png?fit=640%2C564&ssl=1)
4. References
- I chose Adobe XD as my tool from https://creativebloq.com/wireframes/top-wireframing-tools-11121302
- 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.