This document contains examples of wireframes and mockups for common interfaces such as tabs, buttons, fields, checkboxes, dropdowns and more. It also includes mockups for interfaces like Facebook, Gmail, Twitter and other apps.
1. Drop Down: Hyperlink Use this template to create wire frame models of pages. The first five pages contain examples and sample usage. Button Cancel Ok Tab Active Tab Tab Active Tab Tab Tab File Field Browse… Text Field: Default Value | Checkbox Checkbox checked Checkbox checked Radio Option Radio Option 2 Combobox
2. Sample Label: Sample Balloon Tip Please check your user name and password to make sure you entered them correctly. Alabama Alaska Arizona Arkansas California Colorado Places you’ve lived: M T W T F S Su
3. Enter your login information: Forgot Password? Don’t have a login? Sign up… Email: [email_address] Password Login… First Name: Last Name: Zip Code Lookup…
4. Sample Showing How Facebook can be Mocked up Facebook Search: Applications: Photos Groups Events Marketplace More… All Friends > Status Updates Profile Friends Network Inbox Status Recent Everyone More… Joe Smith – Thinks he’s pretty clever Matt Johnson – Is going to the store
5. Sample Showing How Gmail Can be Mockedup Twitter Hi John Smith Currently --------------- Device Updates add device Stats Following 76 Followers 95 Favorites 3 Direct Messages 7 Updates 167 People Invite more Home Find & Follow Settings Help Sign Out What are you doing? 140 Accept new Friend Connection? Joe Smith would like to add you as a friend, would you like to accept? Search Recent Replies Archive Everyone Alex Smith Checking the park in the city and wondering where to walk next. 23 minutes ago from web Alex Smith Checking the park in the city and wondering where to walk next. 23 minutes ago from web Alex Smith Checking the park in the city and wondering where to walk next. 23 minutes ago from web Ignore Accept
6. Estimated Ship Times My location Your location > North America East Coast West Coast Central South America Africa Europe Asia First Class Ground
7. Better Lesson Home Screen Profile | Sign Out Thing to do My Friends My Region My State All News Go Shopping – pick up eggs, milk, cheese and wine Older News > Shopping Call Pay Bills Call Mom Get Flowers Excersise Call Work Walk Dog Get Haircut Call Dad Email Resources To Do People Search Call Mom – She had a question about something on her computer Fix Car – Call the dealer and see if I’m under warenty, get estimates Popular tasks to add Mine My Friends Everyone
8. Edit resource Sign Out Edit this resource Units > Conference Room > Edit Availability: Primary Use: Team meetings and status events, can also be used for demos to clients Time blocks: Home Resources People Search Resource Name: ABC Conf Room Weekly 9-5 30 Minutes Save Resource
9. Sign Out List of resources Title Monthly Usage Availabilily Next Available Conf ABC Conf XYZ Meeting Space Executive Conf Mini-conf 1 Mini-conf 2 Mini-conf 3 Mini-conf 4 Mini-conf 5 Mini-conf 6 90% 70% 60% 42% 31% 5% 2% 2% 1% 0% None None None 3 hours 2 hours 5 hours 6 hours 3 hours 8 hours 8 hours 10/12/2008 10/15/2008 4:00pm 3:00pm Now Now Now Now Now Now Home Resources People Search Add Resource Upcoming Meetings Create a meeting Board Meeting Status Review Morning Review Planning Meeting