We need HTML designs for 3 screens of our application. Looking to create the gloss of an iPhone App and the sleek modern feel of web 2.0 / social application or dashboard. Eventually, it will need to be coded into HTML.
The application - Sellingly - "runs" inside Microsoft Outlook, but don't let that fool you. All that means is that a mini web browser is embedded in Outlook to load the content from a webpage.
The mock-ups provided below are to show you the elements required, NOT THE LAYOUT. I would much rather see original designs that make room for every element than I would see a cleaned up version of these designs.
The application is very text-heavy. As such, I'd love to see great, small icons and graphic detail to help bring it to life.
For ease, I'll call the screens by A/B/C from here on out. You can see the position of all 3 in the file "sellingly_3windows"
A) The Main window: Seen in Sellingly_main and Sellingly_main_v2
B) The Message Window: Seen in Sellingly_Template
C) The Modal Window: Seen in Sellingly_bulk
Height: 600px minimum, but it will grow.
Scroll bars: Element only, not entire screen
Windows Title Bar: Only visible in rare situations, but since it is sometimes, app designed title bar should go on the bottom.
This is the main screen users will interact with, and thus should be the "center" of your designs.
- Visible when reading an e-mail of a known contact
- The top 1/4 of the page displays information about the sender of the e-mail
- One unlear element is the "phone/person" icons I used. These are meant to be buttons that can be pressed to tell the app that though no e-mail has arrive, you have spoken with the contact either on the phone or in person.
- The history items (sent/received/phone) are meant to be in a table.
- Visible when reading an e-mail of an unknown contact
- The top 1/4 of the page displays a few options to start tracking the user and/or get company information.
In both states, and arguably the most important element of the page, there lower 3/4 displays who is scheduled to be contacted and when. It is broken down into time ranges (overdue, today, tomorrow, upcoming and everyone) and each list would display the people in that range. I used a vertical accordion to display this, but as you can see in my v2 mock-up, I'm open to different layouts. In #1 I display the people to be contacted today, and in #2, I display the upcoming contacts. In this case, there is an extra column since I need to display when they should be contacted.
Same dimensions as A)
Height: 600px minimum
Scroll bars: OK
Windows Title Bar: Always visible
This screen is a modal window
The screen needs to display a list of contacts who are going to be e-mail, a selector where templates can be chose, an option to create a new template and a preview/edit screen to see and modify the selected template.
I'm attaching my logo, as well as an early working prototype (screenshots). The prototypes should not be considered for design or elements, but rather only used to understand where they screens will appear. I really want to see UNIQUE designs. I'll choose the designers who show the most originality and work with them in the final round to produce something great.
Good luck to everyone.