S3 wireframe diagrams
- 1. S3 Web Development Wireframe Design
- 2. What are wireframes? Quick sketches / outlines of page layouts o Show navigation and content elements Used in the early stages of the design phase of website development Often done using pencil & paper
- 3. Why are wireframes used? Careful design and planning is done to ensure finished sites meet user / client needs Wireframes allow agreement on best page designs before any significant time is spent on building pages Aim is to build the pages and site correctly first time, with no need for changes o No wasted time, effort or resources
- 4. Wireframe Content Shows where the main content and navigation elements could appear o Company logo o Search bar o Page titles o Breadcrumbs o Page content o Navigation menu o Header / Footer / Sidebar o Hyperlinks Wireframes do not use – o Chosen fonts or colours o Actual text or images
- 5. Good Wireframes Should include enough detail for someone else to fully understand the ideas shown o The ideas shown in wireframes may be “tested” with clients or users / personas before further development work is done o Development team will discuss and refine wireframes Should be quick o Developers should be prepared to change or replace their wireframes if clients or team don’t agree with plans o Easier to throw away work that did not take a lot of time
- 6. Wireframe Elements - Page An outline representing the browser window should be added Give the page name in the title bar
- 7. Wireframe Elements - Text • Areas of text should be drawn with borders • Sometimes, general headings and dummy text are used for illustration • Section headings and descriptions help to understand the page layout
- 8. Wireframe Elements - Media • For images, use a box with a cross through it • Name the image to be used • Identify the graphics file format to be used • For video, use a plain box • Name the file to be used • Identify the video file format to be used • Represent the media window controls • For audio, show media controls • Name the audio file • Identify the file format
- 9. Wireframe Elements - Navigation • Hyperlinks should be shown with underlining • Naming links helps show site structure • If breadcrumbs are used, show the page name & path • Row of boxes for navigation bar options
- 10. Wireframe Elements - Input • Form inputs on wireframes should look like the elements to be used • Show labels that will be used for elements Text input boxes Checkbo x Radio buttons