I have a question to poll the audience: If you were to create a new Web design intro class, what would you teach? There were plenty of holes in my knowledge left to fill after my first class (still are plenty of them), but what would you propose adding? Here’s my take on an intro web design class. Do you have anything to add/remove? Let’s be brutal!
Class Objectives
At the end of the class, students will have a solid foundation in designing for the web. Students will also gain researching skills to extend and adapt their technical knowledge to the constantly-evolving web media.
Specifically, students will be able to:
- Create, from start to finish, a fully-functioning website with limited interactive elements
- Purchase hosting, domain names, and perform basic website administration tasks
- Analyze target users to set site-wide design and content goals
- Create clear navigation and site structure with attention to page hierarchy and UI design
- Write valid HTML and CSS without use of WYSIWYG editors
- Use CSS to style a page’s structure and text elements
- Troubleshoot layout and basic code issues
- Understand the current limitations of browsers and monitors
- Be knowledgeable of current trends in web design
- Create modular designs and provide specs for developer implementation
- Strategize future improvements/updates to a page if given additional resources
Applications used
- Adobe Photoshop
- Text editor of personal choice
- FTP program of personal choice
- Adobe Dreamweaver (Optional)
Lesson Plan Overview
Basic website functionality
- Browsers (what are they?)
- Server-side vs client-side
- Hosting, Domain names
- FTP basics
- File structure
- HTML Tags: <HTML>, <BODY>, <HEAD>, <A>, <img>, etc…
Site architecture and Content development
- Target user
- Site depth and site maps
- Page folds and call to action
- Navigation standards (tabs, menus, breadcrumbs, footers)
- Icons, Links, buttons
- Language
Project: Create a web portal for linking to class work (HTML only. CSS not required.)
CSS basics
- Linking methods (inline, per page, external, multiple)
- Syntax: Selectors, inheritance
- Containers
- Margin, padding
CSS & Typography
- Fonts
- Spacing, color, line-height etc
- HTML conjunction <h1><em><p>
- Special characters
Images and color
- RGB, Hex, web-safe
- File types, size, transparency, animation, image maps
- Monitors – Resolution, size
- Browsers (display differences & percentage users)
- Slicing strategies
- Repeating backgrounds, gradients, rounded corners
Project: Design a restaurant’s website. (Simple portfolio piece using CSS typography for menu.)
Accessibility
- Alt tags and metadata
- SEO standards – uses and benefits
- Web spiders, bots, crawlers
- Screen Readers
- Mobile devices
- Forms and standard web components
Testing and scale
- Code validation
- User tests
- Branding and adspace
- Design style guides & specs
- Analytics & user data
- Modularity
- Dynamic content (PHP & SQL, XML, web services)
- Skinning
- Content Management Systems
- Further study: Languages, Browser functions (get/put/cookies/sessions), Flash, Weh services, UI
Final Project: Design and build a corporate campaign or product line mini-site
( Define current and new branding, navigation, content, sponsor pages, and provide design specs for future updates)
More dynamic/in-depth content – Out of class scope
Content Management Systems
- php+Mysql concepts, uses: dynamic content
- modularity and skinning
- examples: WordPress, joomla, drupal, Ruby
Browser functions
- get/put
- cookies
- sessions
Javascript
- Forms
- drop-down menus
- shadowbox
XML
- RSS Feeds
- Dynamic Data (lead-in for flash)
Other languages
- Flex, Actionscript 3, Java, Coldfusion
Web services
- google maps
- plug-ins