Web designDesigning your site – structure and content                                              Web design
Designing the site•   Content is the first thing•   Brainstorm, group and organise content as it relates.•   These form se...
Example site diagram                       Web design
Designing the site• Decide on the look and feel of the site   – Fonts   – Colours   – Graphic style   – Writing style   – ...
Writing content• Be succinct   – Probably half what you would write for paper• Write so that people can ‘scan’ read   – Re...
What is ‘scanable’ text?• Good headings Lorem ipsum dolor sit amet, consectetuer                 Heading adipiscing elit. ...
What is ‘scanable’ text?• Use of lists  Lorem ipsum dolor sit amet, consectetuer                 • Lorem ipsum dolor sit a...
Organise content• Put like content on the same page• Split pages per topic• Make the links between pages obvious   – “clic...
Prioritise the content you write• Introduce concepts/                    topics at the beginning of the page   – Let peopl...
Text formatting• Use foreground and background colours that give a good contrast                                          ...
Text formatting• Use plain backgrounds or very subtle patterns• Intense patterns break the ability to follow the text     ...
Text formatting• Text not too small• Use left justification, not centred   – helps the eye find the start of the line, esp...
Text formatting                  Web design
Text formatting                  Web design
Working with layout                      Web design
Web design
Web design
Web design
Web design
Web design
Web design
Web design
Web design
Web design
Web design
Altering the site design•   Wordpress themes•   Thousands available, some free, some cheap•   Great for basic structure, l...
Altering site layout• Widgets and widget areas• Link to other services or offer up content from site• Can download many mo...
Cascading Style Sheets• Rules defining appearance   • Blocks/                                      containers• Apply to ob...
CSS ctd• General   – A obj of a specific type      ny ect• Targeted   – Class – more than one obj                         ...
CSS examplep{  font-family: Arial, Helvetica;  color: #ff0000;}h1{  font-size: 2em;  background: transparent url(image.gif...
CSS ClassesHTML  <h2 class=“bob”>heading text</h2>  <p class=“bob”>some text</p>CSS   .bob{      color:   #0f0;  }        ...
CSS IDHTML  <h1 id=“page-title”>Some text</h1>CSS   h1#page-title{     text-transform: uppercase;   }                     ...
CSS SelectorHTML  <div id=“content”>     <p>Some text</p>  </div>CSS#content p{  margin: 10px 15px 30px 15px;}            ...
Tools to work with•   Firefox web browser•   A on – Firebug      dd•   Can edit pages live and see amends•   See where to ...
Web design
CSS in WordPress• Appearance ... Edit CSS• Will work in ‘preview’ with hosted WordPress• Look at example from existing the...
Upcoming SlideShare
Loading in …5
×

Jsm2003 02-with-narration

134 views
122 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
134
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Jsm2003 02-with-narration

  1. 1. Web designDesigning your site – structure and content Web design
  2. 2. Designing the site• Content is the first thing• Brainstorm, group and organise content as it relates.• These form sections, pages of the site• Site diagram helps you to plan and build site Web design
  3. 3. Example site diagram Web design
  4. 4. Designing the site• Decide on the look and feel of the site – Fonts – Colours – Graphic style – Writing style – Suitable for your audience Web design
  5. 5. Writing content• Be succinct – Probably half what you would write for paper• Write so that people can ‘scan’ read – Reading from screen is slower – People pick out key words, phrases, etc• Use links well Web design
  6. 6. What is ‘scanable’ text?• Good headings Lorem ipsum dolor sit amet, consectetuer Heading adipiscing elit. Duis sollicitudin iaculis urna. Lorem ipsum dolor sit amet, consectetuer Suspendisse mi erat, sollicitudin et, vehicula sit adipiscing elit. Duis sollicitudin iaculis urna. amet, hendrerit sit amet, ipsum. In hac habitasse Suspendisse mi erat, sollicitudin et, vehicula sit platea dictumst. Morbi sed pede et dolor hendrerit amet, hendrerit sit amet, ipsum. vehicula. Curabitur sed augue. Vestibulum ligula. Vivamus nec diam vel pede posuere dapibus. Heading Pellentesque eget ligula vitae neque suscipit In hac habitasse platea dictumst. Morbi sed pede pharetra. Proin cursus. Donec gravida est sit amet et dolor hendrerit vehicula. Curabitur sed augue. lorem consectetuer semper. Mauris imperdiet odio Vestibulum ligula. Vivamus nec diam vel pede non ligula. Fusce imperdiet arcu eu risus sollicitudin posuere dapibus. mollis. Sed in lorem ac nunc tempus tempus. Nullam eu nisi. Heading Pellentesque eget ligula vitae neque suscipit pharetra. Proin cursus. Donec gravida est sit amet lorem consectetuer semper. Heading Mauris imperdiet odio non ligula. Fusce imperdiet arcu eu risus sollicitudin mollis. Sed in lorem ac nunc tempus tempus. Nullam eu nisi. Web design
  7. 7. What is ‘scanable’ text?• Use of lists Lorem ipsum dolor sit amet, consectetuer • Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis sollicitudin iaculis urna. adipiscing elit. Duis sollicitudin iaculis urna. Suspendisse mi erat, sollicitudin et, vehicula sit Suspendisse mi erat, sollicitudin et, vehicula sit amet, hendrerit sit amet, ipsum. In hac habitasse amet, hendrerit sit amet, ipsum. platea dictumst. Morbi sed pede et dolor hendrerit • In hac habitasse platea dictumst. vehicula. Curabitur sed augue. Vestibulum ligula. Vivamus nec diam vel pede posuere dapibus. • Morbi sed pede et dolor hendrerit vehicula. Pellentesque eget ligula vitae neque suscipit • Curabitur sed augue. pharetra. Proin cursus. Donec gravida est sit amet lorem consectetuer semper. Mauris imperdiet odio • Vestibulum ligula. non ligula. Fusce imperdiet arcu eu risus sollicitudin • Vivamus nec diam vel pede posuere dapibus. mollis. Sed in lorem ac nunc tempus tempus. Nullam eu nisi. • Pellentesque eget ligula vitae neque suscipit pharetra. Proin cursus. Donec gravida est sit amet lorem consectetuer semper. • Mauris imperdiet odio non ligula. Fusce imperdiet arcu eu risus sollicitudin mollis. Sed in lorem ac nunc tempus tempus. Nullam eu nisi. Web design
  8. 8. Organise content• Put like content on the same page• Split pages per topic• Make the links between pages obvious – “click here to go to page 2” – “Read more about A Turing’s early work” lan  Web design
  9. 9. Prioritise the content you write• Introduce concepts/ topics at the beginning of the page – Let people know what they are going to read• Re-confirm with headings in the page – Can then jump ahead to points of interest Web design
  10. 10. Text formatting• Use foreground and background colours that give a good contrast Web design
  11. 11. Text formatting• Use plain backgrounds or very subtle patterns• Intense patterns break the ability to follow the text Web design
  12. 12. Text formatting• Text not too small• Use left justification, not centred – helps the eye find the start of the line, especially with lots of text• Line length approx 1 0 words max• Whitespace around text very useful Web design
  13. 13. Text formatting Web design
  14. 14. Text formatting Web design
  15. 15. Working with layout Web design
  16. 16. Web design
  17. 17. Web design
  18. 18. Web design
  19. 19. Web design
  20. 20. Web design
  21. 21. Web design
  22. 22. Web design
  23. 23. Web design
  24. 24. Web design
  25. 25. Web design
  26. 26. Altering the site design• Wordpress themes• Thousands available, some free, some cheap• Great for basic structure, layout etc• Can then tweak design with colours, images etc• CSS Web design
  27. 27. Altering site layout• Widgets and widget areas• Link to other services or offer up content from site• Can download many more for free Web design
  28. 28. Cascading Style Sheets• Rules defining appearance • Blocks/ containers• Apply to obj ects on the – Divs page – Table cells • Content – Headings – Paragraph – List – Image Web design
  29. 29. CSS ctd• General – A obj of a specific type ny ect• Targeted – Class – more than one obj ect – ID – only one obj ect Web design
  30. 30. CSS examplep{ font-family: Arial, Helvetica; color: #ff0000;}h1{ font-size: 2em; background: transparent url(image.gif)} Web design
  31. 31. CSS ClassesHTML <h2 class=“bob”>heading text</h2> <p class=“bob”>some text</p>CSS .bob{ color: #0f0; } Web design
  32. 32. CSS IDHTML <h1 id=“page-title”>Some text</h1>CSS h1#page-title{ text-transform: uppercase; } Web design
  33. 33. CSS SelectorHTML <div id=“content”> <p>Some text</p> </div>CSS#content p{ margin: 10px 15px 30px 15px;} Web design
  34. 34. Tools to work with• Firefox web browser• A on – Firebug dd• Can edit pages live and see amends• See where to make edits in CSS files Web design
  35. 35. Web design
  36. 36. CSS in WordPress• Appearance ... Edit CSS• Will work in ‘preview’ with hosted WordPress• Look at example from existing theme Web design

×