1. Web design
Designing your site – structure and content
Web design

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. Example site diagram
Web design

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. 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. 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. 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. 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. 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. Text formatting
• Use foreground and background colours that give a good contrast
Web design

11. Text formatting
• Use plain backgrounds or very subtle patterns
• Intense patterns break the ability to follow the text
Web design

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. Text formatting
Web design

14. Text formatting
Web design

15. Working with layout
Web design

16. Web design

17. Web design

18. Web design

19. Web design

20. Web design

21. Web design

22. Web design

23. Web design

24. Web design

25. Web design

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. 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. 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. 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. CSS example
p{
font-family: Arial, Helvetica;
color: #ff0000;
}
h1{
font-size: 2em;
background: transparent url(image.gif)
}
Web design

31. CSS Classes
HTML
<h2 class=“bob”>heading text</h2>
<p class=“bob”>some text</p>
CSS
.bob{
color: #0f0;
}
Web design

32. CSS ID
HTML
<h1 id=“page-title”>Some text</h1>
CSS
h1#page-title{
text-transform: uppercase;
}
Web design

33. CSS Selector
HTML
<div id=“content”>
<p>Some text</p>
</div>
CSS
#content p{
margin: 10px 15px 30px 15px;
}
Web design

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. Web design

36. CSS in WordPress
• Appearance ... Edit CSS
• Will work in ‘preview’ with hosted WordPress
• Look at example from existing theme
Web design