Rita Bilbro Technology Consultant, ITCS East Carolina University
Course for new Web site designersGood precursor to CommonSpot trainingTopics of Discussion:Purpose & Web page componentsPlanning & effective designImage editing for the WebExamples of Web design softwareFile Transfer Protocol (FTP)Sneak Preview of CommonSpotImages in CommonSpotWeb design help
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.
HeaderOrganization name/title of pageCan link this back to home pageEliminates confusion as to what page visitors are on
GraphicsUse high quality images that complement your messageCompress images for faster downloadingBe selective with number; dont overwhelm readers
Navigation MenuLinks to other pages in siteUsually on left side of page (some exceptions)Be consistent with navigation placement
Content Hook your readers, and hook them fastWrite in clear, concise sentences and phrasesLimit vertical scrolling; never force readers to scroll horizontally
Hyperlinks Dont overuse or your readers wont know where you want them to goOverusing will disrupt flow of contentValidate links frequently broken links ruin a sites credibility
Footer Include contact info here: department/individuals name, location, e-mail address, phone numberDate of page revision example: last updated: 09.07.2005
Ask yourself the 5 Ws 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?
Get your thoughts flowingCluster like information togetherBreak content down into individual Web pagesDecide where to connect which pages with linksDecide if subdirectories will utilized, and how manyCreate a storyboard for each Web page
Naming FilesNo spaces or symbolsDont use all CAPSDescriptive and shortRemember everyone will see your file names
Before PublishingReview all pages for misspellings and grammatical errors Test in different browsers: Internet Explorer, Netscape, Firefox, Safari, etc.Test on different computers and laptops
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)
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 imagesUniversity Publications (252-328-6037)continued
You can create web pages with these and other software programs: Dreamweaver Netscape Composer (free with Netscape Browser download)Microsoft Word, Publisher, PowerPoint, etc.
What is CommonSpot? Content management system How is using it to build websites different than HTML?No Web Design software neededNo need FTP files to a serverReduced aesthetic design control
Im taking over an existing website. What should I do? Find out if CommonSpot is being used. If its not being used, decide whether youre going to continue updating your site using a tool like Dreamweaver or convert it to CommonSpot. If CommonSpot will be used, register for training.
How do I get started with CommonSpot?
Steps: Attend CommonSpot training (Register via OneStop)Meet with your Directory AdministratorSubmit a support request for access to your siteDevelop your website
Images/Banners for CommonSpot http://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.
Help Resources
ITCS Web Publishing Site: www.ecu.edu/cs-itcs/webpublishing.cfmITCS Tutorial Library: www.ecu.edu/cs-itcs/tutorials.cfmIT Help Desk, 328-9866Walk-in Help Desk Austin 103, 328-5401
ITCS TrainingNew to Web DesignInstructor: Jennifer Raby*ITCS TrainingNew to Web DesignInstructor: Jennifer Raby*ITCS TrainingNew to Web DesignInstructor: Jennifer Raby*ITCS TrainingNew to Web DesignInstructor: Jennifer Raby*
