What features do we expect from an e-mail client? At a minimum:
The final version of the app looks something like this:
What do we need to do to get to this point? Let's sketch out a 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:
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.
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:
When selecting a tag for a thread, the user can easily add another by typing in the combo box.