Your SlideShare is downloading. ×
0
Ramjee Ganti http://sodidi.blogspot.com Wireframing your Website
<ul><li>“ Change is the only Constant ” </li></ul>
<ul><li>&quot;If you fail to plan, you plan to fail&quot; </li></ul>
<ul><li>In web design ,  wireframes  are a basic visual guide used to suggest the layout and placement of fundamental desi...
<ul><li>Wireframes also allow for the development of variations of a layout to maintain design  consistency throughout you...
Sitemap before Wireframe
Create the Wireframe
Add Content
Layout the Page
Is that It? <ul><li>Not Yet! </li></ul>
<ul><li>Real people don’t understand wireframes </li></ul>
<ul><li>Visual affordances, such as color and underlining links are key to using a site, and these cues make a significant...
Visual Cues <ul><li>Color, which identifies hyperlinks and focuses the user’s attention on an element of the page </li></u...
 
 
?
Sources <ul><li>http://www.alistapart.com/articles/avoidedgecases/ </li></ul><ul><li>http://www.boxesandarrows.com/view/re...
Upcoming SlideShare
Loading in...5
×

Wireframing

2,946

Published on

Wire Framing a Website

Published in: Business, Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,946
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
108
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Transcript of "Wireframing"

  1. 1. Ramjee Ganti http://sodidi.blogspot.com Wireframing your Website
  2. 2. <ul><li>“ Change is the only Constant ” </li></ul>
  3. 3. <ul><li>&quot;If you fail to plan, you plan to fail&quot; </li></ul>
  4. 4. <ul><li>In web design , wireframes are a basic visual guide used to suggest the layout and placement of fundamental design elements in the interface design </li></ul>
  5. 5. <ul><li>Wireframes also allow for the development of variations of a layout to maintain design consistency throughout your site. </li></ul><ul><li>Act as a communication tool to clients and stakeholders. </li></ul><ul><li>Helps to define the positioning of global and secondary levels of navigation in a prominent and intuitive position. </li></ul>
  6. 6. Sitemap before Wireframe
  7. 7. Create the Wireframe
  8. 8. Add Content
  9. 9. Layout the Page
  10. 10. Is that It? <ul><li>Not Yet! </li></ul>
  11. 11. <ul><li>Real people don’t understand wireframes </li></ul>
  12. 12. <ul><li>Visual affordances, such as color and underlining links are key to using a site, and these cues make a significant difference in a usability test. </li></ul>
  13. 13. Visual Cues <ul><li>Color, which identifies hyperlinks and focuses the user’s attention on an element of the page </li></ul><ul><li>Branding, which confirms that the user knows where they are </li></ul><ul><li>Recognizable web page elements, such as forms and search fields </li></ul><ul><li>“ Content,” such as account numbers or product names, which allows experienced users to focus on how they would really use the page, instead of interpreting “lorem ipsum” </li></ul>
  14. 16. ?
  15. 17. Sources <ul><li>http://www.alistapart.com/articles/avoidedgecases/ </li></ul><ul><li>http://www.boxesandarrows.com/view/real_wireframes </li></ul><ul><li>http://www.sitepoint.com/article/wire-frame-your-site </li></ul>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×