Web design
is about creating the link between a product and its user using the
internet. An interface needs to communicate how a product is to
be used, and to
create an
positive experience
for the people
who will use it. In this course, we will explore interface design and
graphic design using appropriate software (Photoshop, Flash, Illustrator,
etc.). We will focus on basic 2-dimensional design principles, information
hierarchy and
navigation,
user-product interactions, and how these elements become part of the larger design
process.
1. To implement
sound 2-dimensional design principles.
2. To recognize current trends in web design.
3. To explore computer hardware and software for web design.
4. To use clear, focused processes to design interactive web sites.
5. To create sample portfolio pieces illustrating the skills acquired in class.
Evaluation
is based on the following requirements:
1. Attendance
2. Project evaluation
3. Quizzes (normal weight grade)
4. Written and performance test(s) over book(s), readings, and lectures, etc.
(normal weight grade)
5.Portfolio (normal weight grade)
Late assignments will be accepted for one week after their due date (the grade will be reduced one full letter). If assignments are more than one week late they will receive no credit.
You can redo your projects to improve their grades (not tests and quizzes).
This
is how your projects are graded:
1. You fill out a self evaluation rubric and turn it in on the day of the critique
(week 2 day 2/3).
2. You show your design to the class using the projector (week 2 day 2/3).
4. After the critique, you and I will look at your design(s). I'll
make suggestions and show you ways to correct any problems. I will
give
it an "as is" grade.
5. If you make corrections I will re grade it and you will receive the new
grade. The goal is to help you create great looking work.
What letter grades mean to me:
A
- Your assignment is great. Much better than average-above and beyond
the call of duty.
B - Your assignment is above average. More than the minimum. Really looks good.
C - An average grade. Your assignment possesses the minimum requirements. No
errors or omissions.It is in focus, not blurry, and has good exposure.
D - Below average grade. Your assignment does not possess the minimum requirements
(bad focus, bad exposure, inappropriate subject).There are errors or omissions.
F
- You didn't do the assignment or it was really, really, bad.
I follow the school tardy policy.
No music devices during class.The first offence is a reminder, the second time I'll take it and one of your parents will have to pick it up from school.
File management/backing up (make a folder on your server space named -web design. In that folder make a folder for each assignment. Name the assignment folders the first 3 or 4 letters of the assignment name and your last name example: compwilson (for the composition assignment). Name the finished files what the online assignment sheet indicates. You will need all of your assignment files at the end of the semester for your portfolio.
Back-up your Web Design folder every week or two. Servers go down. You would lose all of your work for the semester. You can back up to:
1. Flash drive if you have one, then move the files to your home computer.
2. Burn them to a CD in class (don't lose the CD, I'll store it for you if you like).
3. Save them to your iPod or music player.
Unless your files are in 2 different places, they are not secure. It's not if you will lose them, it's when. As a teacher I have seen it happen dozens of times. If your files vanish you will need to redo them - not fun : ( It is not the computers fault, it is your fault for not backing them up). When you tell me you don't have your assignment done because the computer messed-up I will refer you to this paragraph.
I had a hard drive go bad this summer that had 50 thousand pictures on it. Did I have a back-up? Yep : ) But if I didn't I would have been cryin' : (
Leaving the classroom
1.
If you need to go to the bathroom sign out and in on the sign out sheet
and bring the pass with you.
2. If you want to go anywhere else, check with me first, then sign in and out
(bring the pass with you).
If you leave the class without permission ( signing out, and/or checking with me first ) you will be marked absent.The Web Design classroom is never a study hall. All activities must be web design related.
It is not OK to go to vending machines during class time.
The computers are only to be used for photo class projects or research for photo class projects.
If you can't use the computer responsibly you will not be allowed to use the computer.
First offence: you will be locked out of the computer for the day (and given book assignments).
Second offense: locked out for the week (and given book assignments).
Third offence: locked out for the semester. You will work on assignments in the photo book and receive a "D" for the semester.
Please respect school and student materials.
All assignments need to be designed by you after the assignment is given. Don't use your old projects for our assignments. Don't use images from the web without prior permission from me.
Turning in another student or persons work as you own is plagiarism . It will be dealt with as outlined in the student manual.
As the semester progresses I will be changing things in the weekly schedule.
Learning
This
is how things work in the Web Design Lab.
1.
Instructional Input-Class lecture, info to read etc. The theory for
what you are about to learn.
2. Modeling-Showing you how to do something, things I show you in the classroom.
3. Guided Practice-Helping you with projects, assignments, etc.
4. Independent Practice-This is where the actual learning occurs. It is you
doing it by yourself. If someone is helping you it isn't independent practice.
No independent practice, no learning. YOU need to do the independent practice.
If you feel like you aren't learning it may be because you aren't doing enough
independent practice.
CLASS CULTURE
All classes and teachers are different. These are some things that are "really" important to me.
I expect the room to be silent when I am speaking or demonstrating.
I expect the room to be silent when you are speaking or presenting.
I will call your name during attendance. It needs to be silent so I can hear you respond. I can't see faces behind the computer monitors. If you are here during the morning announcements I expect you to sit in your chair and listen. After the flag salute you are free to leave.
I want you to create exceptional design, not average design. The computer has created a wonderful opportunity for fast and easy revision. Redoing things is part of the process. Don't expect to get it right the first time. Leave time for revising.
Read the links. They provide information to help you do your assignments.
All assignments need to be done by the beginning of the critique. Critiques will be at the beginning of class.
Read the web site daily. I will be making updates weekly. The web site is an integral part of the class. I use it instead of a text or handouts. Don't print out the web site at the beginning of the semester, it will be out of date by week 2.
I will not be reminding you when assignments are due. Check the web site for that information.
First day of the week:
Hello, tour, syllabus, logging on to computer, 20 questions, expectations (see above and...).
Web Design overview (we will go over this in class).
It is pretty hard to produce good design if you don't know what good design is. We will spend the next couple of weeks learning how to talk about and identify good design.
Mac 101 (desktop, hard drive, Mac and PC similarities and differences, managing your student account.
How the internet works, the design process, software overview, Photoshop overview.
ViC story.
Pretty cool web site - a little different.
The company that made the site.
Some web sites to discuss: good and bad
Remember,a web site is the interface between the viewer and information. The design should make that easier, not harder.
First day of the week:Look at and discuss good web design . Interface design discussion navigation styles (find samples on the web), themes (find samples on the web), etc.
Design strategies (we will go over this in class).
Photoshop basics for web design (we will go over this in class): pictures, shapes, lines, etc.
Read, know, use this information about planning a web site (interface design process).
Web mock-ups in Photoshop. Critique.
Middle of the week: Photoshop basics. Intro to Photoshop notes
Read through elements and principles of design (we will go over this in class).
Look at these flowchart samples. Flowchart this web site exercise. Make the flow chart as professional as possible.
Web mock-ups in Photoshop. Critique.
Last day of the week: Work on current concepts.Intro to Photoshop notes
Porsche web site assignment - Due date to be determined.
Web mock-ups in Photoshop. Critique. Finish the design you started last week.
Check out this site . Spend some time here, these guys are great.
Another company that does good work. Check out some of their sites HERE. Hillman Curtis wrote a great book named, MTIV- Make the Invisible Visible. Get a copy if you have a chance.
Last day of the week: Continue.Have the final design sliced up with mouse over images
Multi-page web site strategies, organization, naming conventions. Size, resolution, Gifs, Jpegs.
Click here. Watch some of the interviews. These are Flash designers. I want you to see how designers think and talk.
How to pronounce "GIF"? The answer lies here.
Another HTML cheat sheet.
HTML Exercise:
Do this:
1. Create a basic web page with a title and one sentence of text from memory.
2. Create a basic web page with a title, one sentence of text, a picture that is 640 x 480 from memory
3. Create two basic web pages (see 1). Name the first one: index.html, name the second one, pagetwo.html. Make a link from page one to page two. Have a link on page two that leads back to page one.
4. Pick a subject. Make a five page web site that has some information on page one (index page) about the subject and links to the other four pages that have a graphic and information on them. Be sure each individual page has a link back to the first page. Pick something you are interested in. You can use graphics you find on the internet. Make the graphics a consistent size.
Link code:
<a href="name of page to link to goes here">this is the text that will be the underlined link word</a>
Sample for this assignment:
Link from index page to page two.
<a href="pagetwo.html">Page Two</a>
Link from page two to index page.
<a href="index.html">Page one</a>
We all need to be able to do this. Everybody.
Last day of the week: Continue with above concepts.First day of the week:
Dreamweaver Concepts: New site, new html page, modify page properties (background color, background image, text color, link color,etc.), insert pallet, properties pallet, making hyperlinks, inserting pictures, inserting and configuring tables, named anchors,inserting tables and images that have been sliced with Photoshop, designing with a table, inserting rollover images, using behaviors to add rollover images.
Defining a Site
Always do this when making a new site with Dreamweaver (even if you think you don't need to):
1. Create a folder for the web site (on the desktop or your server space, where ever you want it to be while you are working). Everything for the web site needs to be in that folder (html pages and graphics).I usually make a graphics folder and name it gfx or images. Be sure to put images into the image folder before you put them in your web site with Dreamweaver. Name the web site folder something that describes what it is.
2. Open up Dreamweaver. Make a new html file. Before you do anything, save this file into your web site folder (name it index.html).
3. Go to SITE>NEW SITE. Select the folder for the web site as the local folder.
4. Now you can go back and work on the site. Do this for each new web site.
This is a video I found that shows you the same thing:
We are going to do the same exercises we did with html last week. This time you will be doing them with Dreamweaver. I'll go over them with you.
1. Create a basic web page with a title and one sentence of text.
2. Create a basic web page with a title, one sentence of text, a picture that is 640 x 480.
3. Create two basic web pages (see 1). Name the first one: index.html, name the second one, pagetwo.html. Make a text link from page one to page two. Have a link on page two that leads back to page one.
4.Now do this same with a graphic button for the links.
Now do the same with a graphic button that has some sort of rollover image.
4. Make the rollovers work on the first Web site. that you sliced up with Photoshop.
Last day of the week:
5 Page Dreamweaver Exercise : Create a five page web site. Pick a topic you are interested in. Make a flow chart for the web site (review flowchart samples in week 2). Include text and graphics on each page. Make this as professional looking as you can. Check out this Dreamweaver Basics link for new techniques. Try using tables to arrange your content. The class web site uses a table to create the stripes and place the text. Tables are useful to arrange content.
Web site Assignment - Due date to be determined
More Dreamweaver techniques: tables practice.
Continue working on Web site assignment.
Dreamweaver CSS Text Exercise - Make and define a new site. Put a bunch of text in the html page. Format the test with an external style sheet. Change the attributes of the styles. Info here.
A little bit more advanced stuff with Dreamweaver. Using CSS to format text and creating layers with AP Div tags. Watch these videos on YouTube. I'll go over the concepts in class for those who are interested.
Centering your Web page in the browser window using a Div tag.
Tutorial Video for CSS text
Part 1
Part 2
Tutorial video for AP Divs - A way to design with layers.
Another longer version of some more complex concepts.
Part 1
Part 2
Part 3
First day of the week:
Continue working on Web site assignment. I want everybody to be finished with their comps today.
A lot of questions about remote rollovers or some people call them disjointed rollovers. You mouse over something and a variety of images change. We'll go over this in class.
Disjointed rollover tutorial:
Last day of the week:
You should be continuing with your design process steps.
Use CSS for your text.
First day of the week:
Continue working on Web site assignment.
Last day of the week:
Lets try to get this web site wrapped up this week.
Be sure all of your Dreamweaver projects are in your student locker (icon on your desktop with your student number on it).I need them there to grade and to put in the gallery. Progress reports are coming up.
Welcome to Flash.
Flash Concepts: new document, document size, stage, timeline, library, symbols, instances, layers, drawing, frames, key frame, blank key frame, tweening animation, frame by frame animation, onion skin, action scripts, buttons, Flash projects, Flash movies, getting Flash movies on the web.
In class practice exercise:
Have a stick figure wave his or her arm in 10 frames or less.
Flash Frame by Frame Animation Exercise 1
Make your own frame by frame animation. You can use multiple layers and more than one object. It could be a bird flying into the sun, a snake crawling, a man walking, etc.The animations can be simple stick figures. Spend some time planning before you start. Make some type of script or storyboard to guide you as you make the animation. This is simple frame by frame animation - no tweening, old school : )
Tips:
Use" >" to move ahead one frame, "<" back one frame.
Turn onion skinning on.
To make a bunch of blank keyframes(for frame by frame animation): click on the first frame of a layer in the timeline, hold down shift and click on the last keyframe.With all of the frames selected right click on one of the selected frames and choose: convert to blank keyframes.
You can copy and past the contents of a frame and then erase the part that moves and draw in the portion that needs to move (copy and past the person, erase his arm, draw in a new arm).
Spend some time practicing these concepts. This will be a graded exercise.
Read this about the Flash interface. Read this about symbols.
Motion tween exercise 2 - Animate a symbol with a beginning and ending key frame Now add some in between keyframes.Now animate a symbol using a motion path. Make a rocket that launches and goes toward a planet.You can use pictures you find on the internet or draw your own.
Flash Concepts: add sounds and music to the project.
Good basic flash tutorial links:
Flashkit - Good place to find legal sounds.
Flash Concepts: Make go to and play, on release, go to and play, stop, go scripts for navigation
Flash button exercise 3 - Create a flash site that has 2 buttons. Have button 1 link to the main page, button 2 will lead to page 2.
Flash button exercise 4- Make a button that changes when you mouseover it, and when you press on it. Also have a sound that plays when you press the button.
We are getting to the point where things start becoming a little complex. Always do a task analysis to keep yourself on track and organized.
City Flash Assignment - Due last day week 14.
Continue working on City Flash Assignment.
Flash Concepts you should know: new document, document size, stage, timeline, library, symbols, instances, layers, drawing, frames, key frame, blank key frame, tweening animation, frame by frame animation, onion skin, adding sound, action scripts: on release go to and play, go to and play, start, stop) buttons (applying scripts to them, adding up, over, and down color changes, adding sound), Flash projects, Flash movies, getting Flash movies on the web.
You will be having a Flash performance test that will include all of the Flash concepts you have learned. If you have notes you will be able to use them.
New Flash Concepts: Making and using masks, making text, making scrolling textbox, fading text or shapes, movie clips, publishing.
Mask Exercise: Make a mask that reveals your name.
Scrolling Textbox Exercise: Create a scrolling textbox that is filled with gibberish text.
Fading Text Exercise: Make you name fade in, stay visible for a few seconds and then fade out.
Movieclip Exercise: Make a square spin and move across the stage.
Publishing Exercise: Save one of your exercises to play on the web (this will create an HTML file and SWF file). After you publish the Flash site you can edit the HTML with Dreamweaver (if Dreamweaver was working : ).
Flash Concepts you should know: new document, document size, stage, timeline, library, symbols, instances, layers, drawing, frames, key frame, blank key frame, tweening animation, frame by frame animation, onion skin, adding sound, action scripts: on release go to and play, go to and play, start, stop) buttons (applying scripts to them, adding up, over, and down color changes, adding sound), Flash projects, Flash movies, getting Flash movies on the web, masks, scrolling text boxes, fading text and shapes, movie clips.
Be sure City Flash is done.This is a graded project.
After the Flash city assignment is done:
Review Flash concepts:
Flash Concepts you should know: new document, document size, stage, timeline, library, symbols, instances, layers, drawing, frames, key frame, blank key frame, tweening animation, frame by frame animation, onion skin, adding sound, action scripts: on release go to and play, go to and play, start, stop) buttons (applying scripts to them, adding up, over, and down color changes, adding sound), Flash projects, Flash movies, getting Flash movies on the web, masks, scrolling text boxes, fading text and shapes, movie clips. adding video to Flash.
New Concept: Adding video to Flash.
Tip: You need to import the video to the frame and layer where you want the video to be. You can't move the video after it is imported using this method.Be sure the frame is selected before you import the video.
Graded
Concept Exercise - Due last day week 15.
Create a 2 page Flash web site that includes a: mask,
movie clip, scrolling text box and something that fades. This doesn't
need to
be pretty, just concept examples.
Flash Web site 1 Assignment - Due date to be determined
Last day of the week: Flash City presentation.
First day of the week: Work on concept exercise.
Flash Web site 1 Assignment - Due date to be determined
Last day of the week:
Work on concept exercise. Work on Flash City. Work on Flash Assignment.
Last day of the week: Concept exercise due. Flash City due.
Text goes here
Text goes here
Continue working on Flash Assignment.
Text goes here
Text goes here
First day of the week: Clean up and out : )
Middle of the week: Clean up and out : )
Last day of the week: Clean up and out : )
GHHS room 312
