Our graphical interface

Hi there,

This week we’ve finished design our graphical interface!

Unfortunately, since last week I was not able to work with my partner, then we have decided to work separately and integrate our works together after reaching an agreement. My partner is responsible for making this set of figures in the following section by using Pencil.

home_page

Figure 1 The main page

home_page_other_layout

Figure 2 The main page in another layout

As you can see here, the main page consists of a side bar on the left-hand side and the notes on the right-hand side, where we provide the users to apply many different layouts. To make things simple and to reach ergonomics’ goal, we’ve fixed the bar on top of the page. Once the users move their mouse to “Hi Jérôme”, a menu will spontaneously appear (see Figure 1), which enable them easily check their personal profiles and customize the settings. The users also can click the “List1, List2, List3” on the left-hand side to change the list of the presented notes, and meanwhile, the right-hand side will be correspondingly changed. If you forget where the note is, you can click the search bar and type any keywords that you remember no matter what the title, the contents or the tags are.

note_details

Figure 3 Details of the notes.

Clicking on a note will allow the user to review its concrete details, especially its content, tags, sub-notes and reminders. Each part of them can be adjusted by the user as they want.

note_details_add_reminder

Figure 4 the example of reminder

The login/signup is a popup window on the web page to improve the user’s experience by no need to leaving the page. The login window requires the username or email address and the password. The “forget password?” button aims to help user restore the password in case of forgetting. The signup window asks users to type in all the necessary information for sign up process, such as nickname, email address and password. Moreover, we further create a responsive design especially for the mobile users.

As above mentioned, this is our graphical interface. This interface will be consistently improved if we figure out a better solution.

 

Leave a Reply

Your email address will not be published. Required fields are marked *