What a long, fun trip it's been!

I just wanted to take a minute to thank all of the ART 116 students from Spring 2010. This was our first semester for this class and it has been a learning experience for all of us. We made some great progress and I feel ART 116 will keep getting better and better. I want to thank the students for their constant feedback throughout the semester. I take all comments to heart and assure you I will use them in planning future classes.

You all started this class with a little apprehension about what to expect and I think you were all pleasantly surprised with what you learned. It was truly a pleasure to have you in class and I appreciate the opportunity to share a little bit of what's in my brain with you.

Good luck everyone! Have a great summer!

T.J.

Don't Forget: Missing work due tonight!

Several of you are missing certain assignments or quiz grades. They must be made up and turned in by the end of class TONIGHT if you want to get credit for them. Don't let zeroes bring your grade down!

Final websites due tonight!

O.k. everyone. You've survived the semester and should have some cool websites to show. Pat yourself on the back!

Tonight's class will be work time to finish up your final website projects. Be sure to TURN THEM IN before you leave. :) They are due tonight! It was great having you all in class this semester and I hope you see you around the SVHEC in the fall!

Continue working on your final websites

As per the the consensus in class last week, we will use class time tonight for work time. Take advantage and ASK QUESTIONS if you need help. I'll be available all evening to help you solve your problems with your websites. Remember, websites are due by the end of class next week!

Homework:

• Finish up your website!

Building your website

O.k., so you've already got your business picked and your photos taken (or found.) We will be resizing your images in photoshop tonight and building your web pages using your wireframes as a blueprint. If you don't have wireframes in class, you won't be allowed to work on your website until you make them. They must be NEAT! No sloppy hand-drawn wireframes will be accepted. If you are hand drawing them, they must be super-tight and clean. (Use a ruler.) Otherwise, a computer printout is preferred.

We will build the two pages you have wireframed and make them link from one page to the other. By the end of class tonight, you should have two, fully coded HTML pages! So, when you get to class, sit down, buckle up and be prepared to WORK! They are due TONIGHT before you leave class.

Also, it seems as though you all would like a little more class time to get this stuff done before the end of the semester. Tonight, we will discuss having some extra class time for those interested. I am willing to make the trip down to help you if you are willing to come to work outside of normal class time. We need to nail down times and dates that work for everyone!

See you all tonight!

Homework: (held over from April 12)

• Have your business picked before coming to class

• Have your photos ready. Make sure they are large enough!

• Wireframe TWO pages of your site. Make sure to keep header, footer and nav. consistent!

• Be ready to WORK tonight. They are due before the end of class!

Let's get a little flow going in our websites

The websites you turned in several weeks ago were good. Now it's time to make them great. We're going to jazz up our designs a bit with a few easy tricks to make them flow a little better, look a little nicer and generally be easier on the eyes.

We're going to talk about resizing images to fit the page. Remember, you're supposed to be wireframing your sites before you build them. You should go into the construction phase with a nice set of blueprints for how your website should look. You should know how big your images need to be before you start constructing the html.

We're also going to talk more about consistency with your navigation and footers. These need to be the same on every page, so people don't have to look for them. It is imperative that you don't make a visitor think too much, or else they may click right out of your site. We want them to stay!

Homework:

• Pick one of these types of business to build a website for: travel agency, bakery or an auto repair shop.

• Gather together some photos to use. Remember, if you are getting them off the web, make sure they are big enough (resolution) to use BEFORE you come to class. If they are tiny, they probably won't work. Please feel free to take your own photos if you would like!

• Wireframe TWO pages for your site. Remember to keep your header, footer and navigation consistent!

• Be ready to work on them in class on Monday, April 12!

Working on our Flash web banners

We will spend tonight's class time (after taking your quiz) working on your web banners. We will look at everyone's sketches and hear why you chose the local business that you did. Remember, we are trying to help out the community and hopefully get these businesses to USE these banners! Be creative! Think of what they might want to advertise and come up with something great!

After reading over all twelve chapters of the Flash Learning Guide, you should be ready to tackle starting your banner in Flash. We will talk about the basics of a new document and how to get started animating. Take your time, be patient and you'll be fine. Flash isn't as scary as you might think. You'll be animating your web banners in no time!

Homework:

Finish your web banners (if you don't finish them in class.)

No other homework tonight!

Let's get ANIMATED!

O.k., so you've built a website. Now let's see how to jazz up the world wide web a little. How about adding a little animation to it?

Adobe Flash is a great way to add animation to your website. But be careful: If overdone, it can look tacky. Flash is one of those things where a little dab will do it. So instead of trying to build an entire site out of flash, let's focus on something a little smaller.

Let's make a web banner!

You've seen them all over the web. Little banners that advertise everything from Shamwow's © to Ginsu © knives! Small boxes that play music or animate text are staples of advertising on the web. So let's learn how to make them!

First, you'll need some background. I want you to read up on what Flash is and what it can do here. I want you to read ALL TWELVE sections. Remember, each section may have 5-10 pages! I want you to read it well, as there WILL be a quiz. And no, this time it WON'T be open book! Quiz will cover "Frame rates", "Timelines and Keyframes", "Motion Tweens" , and "Motion Paths." I want you to start to understand what Flash is and what it can do.

Once you've read the Flash learning guide (above) I want you to start thinking about your flash banner. We are all going to design a banner for a local South Boston business. Pick out a business in downtown South Boston (or near) that is a mom-and-pop shop. No big corporations allowed! Prepare some ideas on what you'd like to advertise for this business and make some drawings of what you'd like your ad to say. You will be required to animate some text for this project, so think of what you need to say and how you might like to animate it. It can fade in or our, zoom in or out, fly in from the side/top/bottom, etc. Think about what the banner should look like and decide if you will need any photographs to use. If so, I want you to go out and take the photos yourself. If you don't have a digital camera, the Higher Education Center has a few they can check out for your use. But think ahead: Other students use these and they may already be checked out. Plan in advance if you need to borrow a camera!

Homework (due March 29):

• Read all twelve sections of the Flash Learning Guide

• Study sections listed above for quiz - NOT open book!

• Pick a local South Boston business to make a flash banner for

• Bring in 3-5 color sketches of your banner (MINIMUM of 3!!)

• Take any photos you might need for your banner.

ALL OF THIS WILL BE GRADED!

Working on YOUR site

O.k., so you've outlined your site content and done some wireframing to make sure your site flows. Now it's time to start building! You will have lots of class time to work on these so I may help you with questions, but as you know, I encourage you all to be as self-reliant as possible. Having said that, check out some of these FREE tutorial sites and see what you can learn from them. If you need to learn something specific, don't be scared to google your question and see what answers you get.

Adobe - Dreamweaver Development Center

Free Dreamweaver Tutorials

Adobe TV - Dreamweaver video tutorials

A great breakdown of some of the Adobe TV tutorials

The sitewizard.com's list of dreamweaver tuts

There are tons more online. Google is your friend!

HOMEWORK:

You need to start building your site. We've gotten a little behind, so you're going to need to work hard and fast. I'll help you while in class, but you'll need to be working on this outside of class hours as well, if you want to get it done in time. Your site will be due on Monday, March 22nd. We will then learn more about domain names and hosting plans for you to help get your site on the web!

YOUR website

So you've learned what a KJ session is and you know a little about wireframing and paper prototyping. You've even started working on your first web-building tutorial. Now it's time to start working on a website of your very own. Don't panic! We'll be working on this for several weeks and you'll get through it just fine.

First thing you'll need to do is decide what type of website you want. For all the students in the graphics curriculum, I'd like to see some type of website to showcase your talents. That means a portfolio site. An online portfolio will be a valuable asset to have when you start looking for jobs. Potential employers like to have an idea of what you can do before calling you in for an interview. This is your chance to dazzle them!

To all the non-graphics students, you will have a little more latitude when coming up with what type of site you'd like to create. Now remember, we're just beginners, so don't plan on any sort of crazy, code-intensive sites. I will not be coding these for you–you will complete them yourself. So if you want to create some sort of portfolio site like the graphics students, you are welcome to do so.

Maybe you love photography and want to make a website to showcase your photos? Maybe you want to show off your collection of Hot Wheels© to your buddies around the world? Maybe you want to make a special 50th wedding anniversary site for your parents' upcoming celebration? Any of these (and more) are fine.

First step: Decide on your site's content

Second step: Wireframe your site

Third step: Paper prototype your site

Fourth step: Build your site

HOMEWORK (due Monday, March 8th)

• I want you to finish the Dreamweaver tutorial.

• Come up with your site's content. List it out, outline-style.

• Wireframe your main page (called a "landing" page) and one content page.

We will be looking at what you've done on Monday, so make sure you have it in class!

Paper Prototyping

Paper prototyping is an easy, inexpensive way to test the functionality of your site design. When designing a website, it is imperative that the end user be able to navigate quickly and easily to the page or content they desire.

Creating a paper prototype of your web site design will give you a first glimpse into the mind of your end user. It may show holes in your navigation or content. It can help you decide if your page ID and/or headers are doing their job: making it clear to the user exactly where they are. A paper prototype can also tell you if you are missing content or functionality that the user wants or needs.

Have a read through the following links to better understand what paper prototyping is, and how it can effect your design:

Streamlining the Design Process with Paper Prototyping

A Breakdown of Paper Prototyping: Elements

YouTube: An Example of Paper Prototyping

Paper prototyping will help you develop, among other things, your graphical user interface. You will see if people are having trouble navigating your site, and why. Graphical user interface, commonly called GUI, can make or break your site's functionality and aesthetic. Have a look at the GUIdebook: Graphical User Interface Gallery and see how user interfaces have progressed over the years. (Check out Microsoft Windows 1.01!!) That progression is based on user experience and usability testing, like paper prototyping!

HOMEWORK

• Start reading over chapter 4 of the web style guide online. It focuses on interface design. Study up, because there may be a quiz on this information on Monday, March 2nd!

• Creating your first website using Adobe Dreamweaver. You need to download the linked files (check_magazine.zip) and start working on this tutorial. I would like to see parts 1, 2 and 3 completed for class on March 2nd. Adobe has a great support network, so if you have questions, do your best to find the answers online. Part of being a web designer is being self-reliant. Don't panic if you run into trouble. Just think to yourself: What would Google do?

Wireframing

The next phase of web design we will focus on is wireframing. Wireframing is a quick, efficient way to design your website without spending lots of time in Photoshop (or Illustrator, or whatever you use.) The reason for wireframing is basically to let you explore certain design directions to see if they will flow, allowing visitors to be able to find the content they will be looking for. There is no sense in making full Photoshop comps of your site until you know it will work like it should. Wireframing will save you all of that valuable time. After all, your client is paying you for your time. Don't waste their money!

Wireframing should NOT be a detailed rendering of your website. Ideally, you will not use graphics of any kind. A true wireframe is simply a grid to check your usability, therefore no graphics are needed (or wanted.) Blank boxes are used as placeholders for graphics or photographs.

In early stages of wireframing, you may even want to greek your text. "Greeking" text refers to inserting unreadable or nonsensical text in your design, simply as a placeholder. Your computer's software may include "Lorem ipsum" text that can be used for greeking, to save you the time and trouble of filling in the text areas. As your wireframes develop, you may want to include your actual text to refine your design and test the spacing you will be working with.

I want you to read chapter 3 of the Web Style Guide online (first link - top right) very carefully. Wireframing is covered on page 4, but I want you to read (and study - there might be a QUIZ) then entire chapter. It is full of great ways to make your website more friendly and functional to your site's visitors.

Smashing Magazine has a list of 35 excellent wireframing resources.

You can also check out several cool YouTube videos on wireframing here:

The Right Way to Wireframe

Another great video on wireframing

You can make wireframes using pencil and papers (as long as they are neat!) but there are also several websites that offer the use of FREE wireframing tools. Anyone serious about the profession of web design and development should check them out:

FREE wireframing software on the web

So, get your wireframes going and next class we'll talk about PAPER PROTOTYPING!

HOMEWORK:

• Read chapter 3 of the Web Style Guide (study for QUIZ)

• Read/watch all the links I've included in this post

• Make a sample wireframe for any SINGLE PAGE on imdb.com using their existing navigation. Just focus on redesigning and recreating the site in a WIREFRAME.

• Read and start working on How to Build Your First Website

The KJ Technique

Today we'll talk about another way of gathering information: The KJ Technique. This method will allow a group of people to quickly reach a consensus on organizing information. For our purposes, we will be focusing on website content, however you could use this technique for any number of situations.

Let's all have a look at how the folks at User Interface Engineering describe the KJ Technique:

http://www.uie.com/articles/kj_technique/

Now that you have a better understanding of what the KJ method is, let's try one in class! Remember asking your friends and co-workers all those questions about IMDB.com? Now it's time to see what YOU think! The room is about to get very colorful!

Once we have grouped and named our categories, I want you to take an inventory of every group. Write down each category, outline-style. This way, you'll have a quick-reference guide to what exactly your website design should include.

Next, we'll start WIREFRAMING!

Homework due 1/25/10

1- Read the Site Development Process section of the Web Style Guide online. There will be a QUIZ on this content on Monday, January 25th in class.

2- Talk to THREE (or more, if you want to) people who know what iMDB.com is and ask them the questions I handed you in class. Write down their answers and bring them with you to class on the 25th. Do NOT ask other classmates. You can ask friends, coworkers, parents, etc., as long as they are familar with iMDB. We will talk about these in class, and use their answers to start reorganizing the iMDB website.