1 / 22

New to Web Design Seminar

Rita Bilbro Technology Consultant, ITCS East Carolina University. New to Web Design Seminar. 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

kolton
Download Presentation

New to Web Design Seminar

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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

More Related