Application design

What features do we expect from an e-mail client? At a minimum:

  • Login: This helps to gain access to your own account
  • Inbox: This is a list of our e-mails
  • Sent: This is a list of e-mails we've sent in the past
  • Archive: This is a list of e-mails we've disposed of
  • Composer: This helps to write e-mails
  • Search: This helps to find archived e-mails

The final version of the app looks something like this:

Application design

The thread view on the left and messages from the selected thread on the right

What do we need to do to get to this point? Let's sketch out a design:

Application design

The login page is pretty standard. We'll want to validate user input, check the e-mail address, and ensure the password isn't blank, but there really isn't anything out of the ordinary here:

Application design

Here's the main interface for the application. We'll be implementing threaded e-mail; we have a list of threads on the left with an excerpt of the most recent message showing as the description of the thread. The date of the last message is shown on the left-hand side of each thread. On the right-hand side, we show the selected message thread, most recent message last. Each message has its received date on its left. The thread has a Reply button and a dropdown to allow the thread to be tagged, more on this shortly.

At the top of the screen we have a logo (from left to right), an icon for the Contacts section, a search bar, a button to create a new e-mail, and finally, a dropdown to filter threads by tag.

The search bar will cause matching message threads to appear below (in the same style as the Inbox view).

Rather than having separate screens for archived e-mail, sent e-mail, and so on, we make the assumption that Inbox threads are just untagged threads. When they are tagged—either automatically as "sent" or by some other arbitrary tag such as "home" or "work"—then they are removed from the Inbox view, as shown in the following screenshot. This concept is found in many e-mail clients, for example, Gmail.

Application design

When composing new e-mails, it takes place in the right-hand position. As there is no selected thread at this time, the space is clear to be occupied by a panel that contains a combo box to choose a recipient for the e-mail, a basic HTML editor for the e-mail itself, and a Send button.

Replying to an e-mail works in a similar way; the composer panel appears under the messages and allows the user to write a response.

A couple more items to note are that the user will start off with a number of default tags:

  • Draft
  • Archive
  • Spam
  • Work
  • Home

When selecting a tag for a thread, the user can easily add another by typing in the combo box.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset