Purpose
The purpose of wireframes is to allow a UI Designer to "sketch" out the who, what, where, and how of various areas of a web site or web application. Wireframes should be drawn in black and white without any embellishments, allowing the UI Designer and his/her audience to place their focus on: (1) user roles, (2) workflow, (3) data elements, (4) usability, and (5) actions. Look and feel is NOT the concern. It is intended to be a sketch of the user interface so that other members of the project team can begin planning and/or implementing their pieces.
How to Get Started
1. Users: Who are the users?
2. Workflow: What's the general workflow?
3. Data: What type of information do the users need to be able to view and/or enter?
4. Actions: What type of actions do the users need to be able to take?
Examples
1. Users: Employee, Manager
2. Workflow: (1) User selects action to go to page, (2) system displays page, (3) user enters values on page, (4) user saves work and exits. This page is not submitted to another user.
3. Data: User can select/enter Client, Project, Task, Phase, Resource, Start Time, End Time, and Description. The Duration, Rate, and Total should be read-only, as they are values that are calculated/pulled.
4. Actions: User can select the View and Date for the timesheet. User can add and remove rows.
This example of graphic design is for the wireframe above -- much more refined than the wireframe it was born out of. This is the look and feel that the finished product should have. The emphasis here is on (1) fonts, (2) colors, (3) shapes, (4) positioning, (5) overall aesthetic. The graphic design for a software system should be done by a professional web Graphic Designer who has strong skills in CSS. In this way, they design exactly what they themselves will carry out in the CSS file, and keeps them from designing the impossible.