Getting Started with Web Design
Designing great web sites is the result of careful planning combined with flawless execution. You'll learn the process of "Define, Design Develop" as the model that will lead you there. What is the site's core purpose? What are the project objectives? Learn to build an audience profile, inventory content, and create a basic site map. Now, from a design point of view, how can you translate this knowledge into a visual stunning design?
Homework
Interface Design
Just what is an interface, and why do you need to know it?? How do design decisions affect the success or failure of the ease of use of a website? Why do I have to optimize graphics if it's fast enough on my computer? Finally, you'll look at the impact of color on Web design, learning what you need to know about color theory (hue, value, contrast, saturation) to make good design decisions. Using Adobe's Kuler website, we'll build our own custom palettes.
Visual Web Design Workflow
Lesson five delves deeper into the techniques and workflow that encompass the "design" portion of a web project. You'll use Photoshop to design a business-oriented web interface and learn techniques for optimizing web graphics. You'll discover the differences between the different types of web graphics (.gif and .jpeg). Finally, we'll slice and prepare your web design for export into Dreamweaver. We'll then use the exported content to create the foundation for a presentable prototype.
Homework
Business Website Design
Lesson four looks at best practices in business site design: how to create an identity, be consistent and follow a clear set of goals to achieve the design objective of the site while being aware of the business goals. We'll continue to look at Photoshop as a design tool, with the goal of completing an in-class web design. Further in class work will illuminate the connection between Photoshop design and markup and publishing in Dreamweaver.
Today is a conversion day.
Project #1 is due today.
HTML Structure and CSS Layout
We'll begin lesson two with an introduction to Hypertext Markup Language (HTML), the language of the World Wide Web. And just as the great graphic designers used grid systems to layout the world's books, magazines and advertisements, so does the web designer. We'll have a primer on CSS to create a simple layout for an article using background colors and inline images.
Homework
Designing with CSS
Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents. We'll compared CSS to straight HTML and give you the foundation to build successful websites using CSS. After this exercse, you'll never use a <FONT> tag as long as you live. We'll look at using external style sheets or the style method. In the exercise, you'll build an open CSS-based website.
Homework
Web Layout with CSS
OK. So you've learned a secret. CSS styles are not that difficult. They're just like style sheets in Quark or InDesign, right? Yes, but only more powerful. CSS also gives you the opportunity to design consistent, lightweight layouts. We'll examine ID attributes and div and span tags to create two or three-column layouts, without using HTML tables or spacer gifs.
Styling out
This lesson will explore techniques and styles for creating Web sites that look unique. Through a series of case studies, you'll explore the features of sites created in avant-garde or experimental design styles. Wanna try your hand at the avante garde? In the training exercise, you'll implement a page design in one of four styles.
Project #2 is due today.
Homework
Web Typography We'll talk about letterforms and the value of adding motion to static type. You'll learn how to move and morph type.The object of motion graphics that include letterforms or typography is to create or release controlled visual energy — motion which communicates an effective message. We'll also explore a case study which combines several letters to create an animated logo.
How do type characteristics affect mood? We discuss using elements such as size, weight, color, and spacing to put the viewer into a desired frame of mind. We'll finish off the project by designing an animation sequence in After Effects and exporting it to Flash.
Homework
CSS Transitions, Transforms and Animation
We’ve seen CSS used for visual effects like rounded corners, color gradients,
and drop shadows that previously had to be created with graphics. In this week's class, we’ll look at some CSS3 properties for producing animated interactive
effects that were previously only possible with Flash or JavaScript.
Homework
Spring Recess.
Interactive Applications
DOM (the language one uses to interface HTML, CSS, and JavaScript to create interactive components) should be part of every Web designer's toolkit. This lesson gives you some simple ways to add pop and sizzle to your sites. You'll learn how JavaScript events and functions work to create interactive effects and how to add DHTML rollover effects to your site buttons and create a slideshow for a photo album or portfolio. Afterwards, a final large-scale project will enable you to apply everything you've learned in this course.
Homework
Introduction to Animation
You'll view interactive case studies to learn what animation is used for (and why) and learn about its strengths as an animation tool. After a tour of the Flash interface, you'll dive into a hands-on exploration of Flash drawing tools. As you'll discover, Flash can be a one-stop shop for drawing, a flexible environment for creating lines and fills, grouping elements, smoothing curves, and aligning objects.
Project #3 is due today.
Homework
Animation continued
We'll then move on to Symbols and Layers. Using symbols -- reusable images, buttons, or animations -- can speed the creation of your artwork, making it easier for you to focus on the bigger picture. This portion of the lesson explores the basics of manipulating art in a Flash movie. You'll look at how to create a layer and edit symbol properties, exploring how any component of a graphic can be turned into a movie clip. You'll cover how to use symbols as instances throughout your movie, without increasing file size, and how to put effects on an instance.
Homework
Animation and Data Visualization
Animation is one of the more dynamic elements of web content, but it gets even deeper when we add the component of live data. We'll dig into the nuts and bolts of making things move. You'll look at motion tweening, the process of moving graphics around the movie stage, shape tweening, the technique of morphing one shape into another, and cell animation, the traditional, frame-by-frame approach. Data visualization allows you to tell a story with data. We will use Tableau to explain a company's sales projections and publishg them on the web.
(Project #4 is due.)
Homework
Get published for your portfolio
In this lesson, we'll delve into actually publshing our projects on the web using Dreamweaver's built-in site managment tools. In addition, the Web has changed the nature of publishing, and the power to get your own message out is well within your grasp. This lesson looks at the influence of personal publishing (home pages, portfolios, zines, and blogs) on Web design styles today. Since many of your Web design projects may be personal publishing projects, you'll look at a range of approaches to this creative space, including how to set up and design blogs. In the training exercise, you'll setup your own blog using WordPress.
This is our final class regular class together.
(Project #5 is due and you will present in class.)