Creating Web Sites An introduction to the basics

Creating web sites is…

Step One: Content

Brainstorm Your Objective

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

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

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?

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?

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

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

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

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

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

Step Two: Programming

HTML is tedious, but not complex

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

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

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

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

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

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

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

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

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

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.

Step Three: Presentation

Make sketches of your site

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

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

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

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

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

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

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

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

Step Four: Style

Add your own personality

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

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

Practice, Practice, Practice! Links on the handout can be found on the web at: Enjoy!