New to Web Design Seminar

1. Rita BilbroTechnology Consultant, ITCSEast Carolina University New to Web Design Seminar

2. New to Web Design Seminar • Course for new Web site designers • Good precursor to CommonSpot training • Topics of Discussion: • Purpose & Web page components • Planning & effective design • Image editing for the Web • Examples of Web design software • File Transfer Protocol (FTP) • Sneak Preview of CommonSpot • Images in CommonSpot • Web design help

3. Header Graphics Content Footer Links Purpose of a Web Site • A Web site is a very effective way to communicate information to a broad audience. • Goal as a Web designer: Fit all of the pieces together, without losing the message in the design.

4. Web Page Components Header • Organization name/title of page • Can link this back to home page • Eliminates confusion as to what page visitors are on

5. Web Page Components Graphics • Use high quality images that complement your message • Compress images for faster downloading • Be selective with number; don’t overwhelm readers

6. Web Page Components Navigation Menu • Links to other pages in site • Usually on left side of page (some exceptions) • Be consistent with navigation placement

7. Web Page Components Content • Hook your readers, and hook them fast • Write in clear, concise sentences and phrases • Limit vertical scrolling; never force readers to scroll horizontally

8. Web Page Components Hyperlinks • Don’t overuse or your readers won’t know where you want them to go • Overusing will disrupt flow of content • Validate links frequently – broken links ruin a site’s credibility

9. Web Page Components Footer • Include contact info here: department/individual’s name, location, e-mail address, phone number • Date of page revision –example: “last updated: 09.07.2005”

10. Planning a Web Site Ask yourself the 5 W’s of Web Design before you begin: • Why am I creating this Web site? • What messages do I want to convey? What types of content do I wish to include? • Who will view my Web site? Who is my audience? • When or how frequently do I need to update my Web site? • Where will I host my Web site and store backup files? Where will information be located on the Web site and individual pages?

11. Planning a Web Site Get your thoughts flowing • Cluster like information together • Break content down into individual Web pages • Decide where to connect which pages with links • Decide if subdirectories will utilized, and how many • Create a storyboard for each Web page

12. Effective Web Site Design Naming Files • No spaces or symbols • Don’t use all CAPS • Descriptive and short • Remember everyone will see your file names

13. Effective Web Site Design Before Publishing • Review all pages for misspellings and grammatical errors • Test in different browsers: Internet Explorer, Netscape, Firefox, Safari, etc. • Test on different computers and laptops

14. Effective Web Site Design Pitfalls to avoid: • Using too few or too many images. • Busy background images that make content difficult to read. • Not enough contrast between font color and background color. • Harsh contrast between font color and background color. • Non-standard fonts (Verdana, Arial, Times New Roman are most universal) • Leading visitors in unsatisfying circles. • Pages with too much information (excessive scrolling) • Too many Web pages (information difficult to find)

15. ……continued Image Editing for the Web Where to find graphics • ITCS Web Publishing Site: www.ecu.edu/cs-itcs/webpublishing.cfm • Microsoft Clip Gallery: http://office.microsoft.com/clipart • http://www.istockphoto.com – not free of charge, but contains more than 274,000 royalty-free photographs, digital images • University Publications (252-328-6037)

16. Image Editing for the Web • Only relevant graphics. • Set resolution at 72 dpi (dots per inch) • Cropped/resized to fit the destination (especially important with CommonSpot) • <50K webpage, caching for ease of downloading • Software: Microsoft Office Picture Manager, Adobe Photoshop, and more available online.

17. Web Design Software You can create web pages with these and other software programs: • Dreamweaver • Netscape Composer (free with Netscape Browser download) • Microsoft Word, Publisher, PowerPoint, etc.

18. CommonSpot • What is CommonSpot? • Content management system • How is using it to build websites different than HTML? • No Web Design software needed • No need FTP files to a server • Reduced aesthetic design control

19. CommonSpot I’m taking over an existing website. What should I do? • Find out if CommonSpot is being used. • If it’s not being used, decide whether you’re going to continue updating your site using a tool like Dreamweaver or convert it to CommonSpot. • If CommonSpot will be used, register for training.

20. CommonSpot How do I get started with CommonSpot? Steps: • Attend CommonSpot training (Register via OneStop) • Meet with your Directory Administrator • Submit a support request for access to your site • Develop your website

21. Images in CommonSpot • Images/Banners for CommonSpothttp://www.ecu.edu/cs-ecu/websiteimages_new.cfm • You can create your own banners using departmental photographs and an image editing software. • Keep images 770 pixels wide. Image height is flexible.

22. Web Design Help Help Resources • ITCS Web Publishing Site: www.ecu.edu/cs-itcs/webpublishing.cfm • ITCS Tutorial Library:www.ecu.edu/cs-itcs/tutorials.cfm • IT Help Desk, 328-9866 • Walk-in Help DeskAustin 103, 328-5401