Leverage Your Online Presence The Web Design Process Duane Dixon – HSPVA -- Susan Boone - Westside High School -- Houston I.S.D. TechSPAN ‘09
You can create the look, feel, and navigation for Web sites using HTML, as well as a number of computer graphics programs. Start by planning…then revise some more. So you want to have a web site? Now What?
Design
Brainstorming Work with key individuals at your campus to get ideas about what content should be on the web. Determine WHO is responsible for gathering the information and creating the text and collecting images.
Assigning Groups… Team Roles: “Buzz Words” for developers –Project manager –Documenter –Designer It doesn’t matter what you CALL these individuals, but it REALLY matters that they exist. Otherwise, you may be the ONE person that ‘does it all’….
PROTOTYPES Three prototypes used in Web design 1. Site Map – text-based outline of the entire Web site. 2.Storyboard – graphical representation of the entire Web site that shows the navigational structure and page hierarchy. 3.Wireframe – diagrammatic representation of each page in the Web site. Placement of various elements on the page should be represented with simple drawings.
Planning the Content Work from the sitemap and wireframe to develop content.
Initial Design Templates… –Free sites –Problem Solving –Trouble Shooting CSS Style Sheets… –Work with code –Plan
Feedback All of the people involved in providing content needs to check to make sure the team is headed in the right direction.
Iterate
Build the HTML Dreamweaver Notepad (Templates)
CSS ???? Really cool Style sheets add a lot of flexibility. Many available CSS style sheets that are available
Present to Administration Be sure to include the administration in the development phase. Get feedback from them AGAIN until the site is completed.
TEST When refining a Web site, what techniques should be used? Heuristic – problem solving Think Aloud – work in teams (pairs) and go through the entire site and discuss and record comments Usability Studies – use various tools to track data collected from the Web site
Launch If the website is stored on the HISD server…check to make sure the guidelines for the district have been followed.
How To Request a Department Web Site on the Portal To request a department Web site on the HISD Portal, contact Marcy Spears, Portal Services Supervisor. She will meet with you to discuss your site and assist you through the process of organizing the site. Training will be provided by the HISD Help Desk monthly for site managers and content contributors.Marcy Spears
School Web Site Guidelines Guidelines and standards covered here are intended to ensure appropriate content/use of HISD school Web sites as to: – Process – Protocol/Responsibility – Content – Requirements – Publishing Guidelines
Web Monkey Webmonkey is a free, public resource for web developers. Builders, designers write the articles, tutorials, code snippets and other contributions.
The World Wide Web Consortium (W3C) develops interoperable technologies (specifications, guidelines, software, and tools) to lead the Web to its full potential. W3C is a forum for information, commerce, communication, and collective understanding. On this page, you'll find W3C news, links to W3C technologies and ways to get involved. New visitors can find help in Finding Your Way at W3C. We encourage organizations to learn more about W3C and about W3C Membership.W3C newsW3C technologiesget involvedFinding Your Way at W3C about W3Cabout W3C Membership
Copyright for ones and zeros. The Digital Domain is the home of some of the thorniest issues regarding copyright. See the software cases that spawned incomprehensible infringement tests, legislation (proposed and enacted) that frame the Battle Royale for the Internet, and, or course, everything you wanted to know about websites and copyright.
Links Storyboarding: - Decent article on storyboardinghttp://en.wikipedia.org/wiki/Storyboard Wireframing: eframing_paper_wireframing - a great ideahttp:// eframing_paper_wireframing - wireframing app for purchasehttp:// - free online wireframing apphttp://hello.hotgloo.com/ - wireframing bloghttp://wireframes.linowski.ca/
Design/CSS: - a great CSS resourcehttp://reference.sitepoint.com/css - A List Aparthttp:// - A great/wonderful inspiration site for design ideas all done with CSShttp:// - Josh Spear, great with spotting design trendshttp://joshspear.com/ - what Delicious is to links, this is to imageshttp://ffffound.com/
Leverage Your Online Presence – link to this presentation D=9&DepartmentChoice=links High School for the Performing Arts Westside High School