Ready, study, code!

Today, we have finally started the development of Augabis! As the time begins to lack a little, we have decided to use the famous framework Symfony 3, since we have currently some courses about it, and since it seems to fit perfectly with the project.

Our Platine professor has organised too a meeting with students at ESAAT (École Supérieure Arts Appliqués et Textile), in order to give us the opportunity to get tips about the design of the mocks-up presented by Yucheng last week. They gave us many very useful advises to improve both our general design and our graphical identity:

  • One of the most important is the main colour: red is a very bad idea for an application for managing ToDos, as this is a stressing colour. A more relaxing colour as blue or green is really important. If you come often on this site through the home page, you may have noticed the background of Augabis’ logo has switched to blue-green. This should be the new main colour of the Web application, instead of the previous red. The logo will also be adapted in consequence in a few time.
  • On the main list, a note should not exceed about 50 to 80 characters in width and 2 or 3 lines in height. If a note is too long, we have to cut it.
  • The list layout we proposed will finally not be implemented, as it does not allow to meet with the previous observation.
  • The logo should not display at the same time the check box and the title Augabis, because this gives twice the same information. So, we have decided to display only the check box 🙂

We would like to thank the students at ESAAT for their really interesting hints on our design!

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.