April 26-30 | May 3-7 | May 10-14 | May 17-21 | May 24-28 | May 31-June 4 | June 7-11 | June 14-18 | Gone
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 ( after the critique) will be accepted for one week after their due date (the grade will be reduced 2 full letters). If assignments are more than one week late the grade will be an "F".
If you have an excused absence on the critique day the assignment is due the next class day. You need to show me your late assignment so I can put in in the grade book that day.
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 last 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.
No phones or ipods. The first offence is a reminder, the second time I'll have an administrator take it.
From the Student Manual:
CELL PHONES AND OTHER ELECTRONIC DEVICES - Cell phones and other electronic devises are allowed on campus but cell phone and other electronic devise usage during school hours is NOT ALLOWED and the expectation is that all cell phones and other electronic devises will be OFF during school hours (7:30-2:00pm). This includes cell phones with text messaging, music and video capabilities. Students ignoring this policy will lose their cell phone or other electronic devise privileges. Student phones are available in the counseling and main office for any student needing to use a phone before and afterschool, during their lunch, or with a teacher note.
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.
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.
Some web sites to discuss: good and bad
Remember,a web site is the interface between the viewer and information. The design should make access to information 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.
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).
Last day of the week: Work on current concepts.
First day of the week: Dreamweaver basics. Finish up practice sites.
Last day of the week: Finish up practice sites.
First day of the week: No school this week.
Last day of the week: No school this week.
Multi-page web site strategies, organization, naming conventions. size, resolution, Gifs, Jpegs.
Look at these flowchart samples. Flowchart this web site exercise. Make the flow chart as professional as possible.
Read, know, use this information about planning a web site (interface design process).
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:
Click here. Read some of the designer interviews.
How to pronounce "GIF"? The answer lies here.
Another HTML cheat sheet.
HTML Exercise:
Text Edit Tip:. Open Text Edit. Go to TEXT EDIT>PREFERENCES. In the new document section click on PLAIN TEXT. In the OPEN AND SAVE SECTION check IGNORE RICH TEXT COMMANDS IN HTML FILES.
When you go to save your file save as WESTERN (MAC OS ROMAN). Be sure to add .html to the name.
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.
First day of the week: Porsche web site assignment - Due next week. Use this sign-off sheet.
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, CSS and text.
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.
Last day of the week: Work on Porsche assignment.
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, aligning images and text, combining and splitting table cells, inserting rollover images, using behaviors to add rollover images, CSS and text.
Design
Info.
The goal of good design is to communicate a message. Everything in the design
should help to communicate the message. If something is detracting from the
message, don’t include it.
Refer back to the elements and principles of design. Use them in your design.
Things to know:
Leading, Kerning, Tracking
Designing with a grid
Boxes (opaque, transparent)
Lines
Picture size
Guides and alignment
Visual Weight
Leading, kerning, tracking info.
Leading: Space between lines of text.
Tracking: Spaces between a series of letters.
Kerning: Spaces between 2 letters.
Typography info: cool little interactive presentation about typography here.
Gestalt and typography - another interactive presentation here.
History of typography: This is a little long but if you are interested...check it out.
Designing with a grid: Order out of Chaos ,Consistency and Unity
Sampleng color pallets.
Last day of the week:
WEEK 8 – March 15 - 19 :: TESTING TUESDAY, WEDNESDAY AND THURSDAY :: CLASSES START AT 10:30
First day of the week: Work on Porsche Assignment
Last day of the week: Work on Porsche Assignment
First day of the week: Work on Porsche Assignment
Last day of the week: Porsche Assignment Critique
First day of the week: text goes here
Last day of the week: text goes here
First day of the week: GHHS web site redesign
Last day of the week: GHHS web site redesign
First day of the week: Finish GHHS redesign and then critique.
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.
Drawing with Flash
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 tween motion guide tutorial video
Flash Concepts: add sounds and music to the project.
Good basic flash tutorial links:
Flashkit - Good place to find legal sounds.
Last day of the week: Create a Flash animation that lasts at least 30 seconds. Make it something spectacular : )
First day of the week: Work on spectacular Flash animation.
Last day of the week: Continue from last week.
First day of the week: Work on spectacular Flash animation.
Last day of the week: Work on spectacular Flash animation.
First day of the week:
Flash Competencies: By this time you should be able to do a: frame by frame animation, motion tween, motion tween with guide layer, create a movie clip, fade in or out, and mucic and sounds.
Layers and Layouts: Watch this tutorial video
Scripts: Watch this tutorial video
Buttons: Watch this tutorial video
Do the Flash City Assignment after watching the videos
Last day of the week: text goes here
First day of the week: Do the Flash City Assignment after watching the videos
Interactivity, buttons, actions.
Last day of the week: Work on Flash City.
First day of the week:
New Flash Concepts: Add sounds and music to the project. Make go to and play, on release, go to and play, stop, go scripts for navigation.Making and using masks, making text, making scrolling textbox, fading text or shapes, movie clips, publishing.
Flash button exercise - Create a flash site that has 2 buttons. Have button 1 link to the main page, button 2 will lead to page 2.
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.
Last day of the week: text goes here
First day of the week: Read the Flash notes to learn how to make a scrolling text box. Flash notes here.
Work on files for Mr. Smith
Flash Competencies: By this time you should be able to make a : frame by frame animation, motion tween, motion tween with guide layer, movie clip, fade in or out, add music and sounds, make a scrolling text box, make interactive buttons.
Final Flash Project: Create an interactive Flash project that includes at least four techniques from the Flash competency list.
Last day of the week: Work on incomplete assignments.
First day of the week: Work on incomplete assignments. Work on files for Mr. Smith
Last day of the week: All assignments due from seniors.
First day of the week: Work on incomplete assignments.
Last day of the week: All lassignments due
First day of the week: Work on incomplete assignments.
Last day of the week: Work on incomplete assignments.
First day of the week: text goes here
Last day of the week: text goes here
GHHS room 312
