1. Creating Web Sites An introduction to the basics

2. Creating web sites is…

3. Step One: Content

4. Brainstorm Your Objective

5. Step One: Content Brainstorm Your Objective – What do you want to accomplish?

6. Step One: Content Brainstorm Your Objective – What do you want to accomplish? – How can you make your site unique, special and useful?

7. Step One: Content Brainstorm Your Objective – What do you want to accomplish? – How can you make your site unique, special and useful? – What elements and features do you want on your site?

8. Step One: Content Brainstorm Your Objective – What do you want to accomplish? – How can you make your site unique, special and useful? – What elements and features do you want on your site? – What potential problems do you see between you and your goal?

9. Step One: Content (cont.) Research Your Target Group

10. Step One: Content (cont.) Research Your Target Group – Find out about your potential audience

11. Step One: Content (cont.) Research Your Target Group – Find out about your potential audience – Talk to them!

12. Step One: Content (cont.) Research Your Target Group – Find out about your potential audience – Talk to them! – Continue to get feedback from them throughout the design process

13. Step One: Content (cont.) Research Your Target Group – Find out about your potential audience – Talk to them! – Continue to get feedback from them throughout the design process – Make revisions

14. Step Two: Programming

15. HTML is tedious, but not complex

16. Step Two: Programming HTML is tedious, but not complex Learn how it works

17. Step Two: Programming HTML is tedious, but not complex Learn how it works View  Page Source

18. Step Two: Programming HTML is tedious, but not complex Learn how it works View  Page Source When using an HTML editor, always check the code before publishing

19. “Ugly” HTML from an HTML editor This is really small text that turns red and then black again.

20. “Clean” HTML created by hand This is really small text that turns red and then black again

21. Step Two: Programming (cont.) Program for multiple browsers

22. Step Two: Programming (cont.) Program for multiple browsers Program for non-graphical users

23. Step Two: Programming (cont.) Program for multiple browsers Program for non-graphical users Avoid using frames

24. Step Two: Programming (cont.) Program for multiple browsers Program for non-graphical users Avoid using frames Use 3.x HTML for highest accessibility

25. Step Two: Programming (cont.) Program for multiple browsers Program for non-graphical users Avoid using frames Use 3.x HTML for highest accessibility The Bottom Line: Bad design can prevent users from accessing your web site.

26. Step Three: Presentation

27. Make sketches of your site

28. Step Three: Presentation Make sketches of your site Make flowcharts of your site

29. Step Three: Presentation Make sketches of your site Make flowcharts of your site Keep it simple and streamlined

30. Step Three: Presentation Make sketches of your site Make flowcharts of your site Keep it simple and streamlined Rule of thumb: 30 seconds on 28.8 connection

31. Step Three: Presentation Make sketches of your site Make flowcharts of your site Keep it simple and streamlined Rule of thumb: 30 seconds on 28.8 connection Use “browser-safe” colors

32. Step Three: Presentation (cont.) Context is everything!

33. Step Three: Presentation (cont.) Context is everything! NO: blinking text

34. Step Three: Presentation (cont.) Context is everything! NO: blinking text NO: moving parts (except for multimedia)

35. Step Three: Presentation (cont.) Context is everything! NO: blinking text NO: moving parts (except for multimedia) NO: music

36. Step Four: Style

37. Add your own personality

38. Step Four: Style Add your own personality Give it a signature look with subtle use of matching graphics and fonts

39. Step Four: Style Add your own personality Give it a signature look with subtle use of matching graphics and fonts Change and update the content

40. Practice, Practice, Practice! Links on the handout can be found on the web at: http://www.seemore.mi.org/webpages/ Enjoy!