1. Select one of the following themes:
-Zoology Foundation
-Online Dating
-Child Day Care
-Organic Clothing
2. You are to develop a limited color palette/scheme(2-4 colors) for the purposed interactive site. Reference the color theory handout and colorlovers.com. Think about the cultural associations we have with color, how color can evoke emotions and affect the interactive user's point of view.
3. Based on your selected color palette, create a textured background utilizing subtle gradients, overlay of patterns, textures, etc.
4. Create a wireframe of the proposed site. Block out where the logo, navigation links/buttons, main content, images should be positioned in relation to one another. Use grids as a guide to align and position similar objects.
Save your work as a jpg named "yourname_exercise08.jpg" and drop onto AI share drive in the Exercise 08 folder by the end of class.
Wednesday, October 29, 2008
Oct. 29 Homework
A. Find a design blog (use delicious.com) that you enjoy. The best way to improve as a designer/ artist to look at what other people in your industry are doing. Bring the URL to class, tell us what exactly attracted you to the blog, as well as an interesting blog post about another artist, product, design, etc.
7. Explain overall what makes this interface design aesthetically pleasing, easy to use, and/or entertaining to the user.
specialopspaintball.com
Mercedes-Benz
B .Bring in a CD-ROM you have (if you can't find a CD-ROM, find a Flash web page online that sells a product---search for big name brand companies, ie Nike, Adidas, Sony, Dove, Axe)
Take screen shots of 5 different sections of the (Flash) website/CD-ROM. Break down the layered elements that make up the interface as a hole. Identify and answer the questions below. Type up your answers, save a PDF, hand in print out to me at start of Monday's class. You will be sharing your discoveries and screen shots with the class on Monday as well.
1. What does the background look like (images, solid color, gradient, what colors make up gradient, what kind of gradient is being used, do I know how to re-create it?)
2. Typography --what kind of type is being used (serif vs. sans-serif). Are more than one typeface being used? What kinds? Is certain type a different color?
3. Hover state of buttons/links/clickable objects- is there a hover state for the clickable objects? How do clickable objects change visually when hovered over with a mouse? Are all items with different hover states clickable(a link that bring me to a new page, or does an animation or new information only pop-up)?
4. logo (design and placement) - what makes the logo stand out from the rest of the information on the page? What does color play in logo design? Are any layer blending effects applied to the logo (drop effect, glow, shadow, etc)?
5. Navigation (design and placement)- where is the navigation? Is it static (does it stay in one location, or does it jump around depending on what page your are viewing? Are all the navigation options present at every page? Does the navigation text change if a certain page is selected? Is the typeface different in the navigation in comparison to other text on the page. What about color of that navigation text?
6. Color palette (what colors are being utilized, what kind of relationship do the colors have with one another)? Do the colors evoke any emotional connection? Is there a cultural association with the color being used?
Student findings:
Mercedes-Benz
Tuesday, October 28, 2008
Oct. 29 Resources
Good stuff
ffffound.com (image bookmarking)
delicious (social web page bookmarking)
Greg Lamarche
Smashing Magazine
delicious (social web page bookmarking)
Greg Lamarche
Smashing Magazine
Multimedia CD-ROM interface design examples
Microsoft Vista Kiosk
mBlaze work
Live Multimedia work
Paul Hibbitts work
FLASH INTERACTIVE INTERFACE EXAMPLES
Method Home
Volkswagon
MiniUSA
Monday, October 27, 2008
Oct 27. In Class Exercise - 3D Buttons
Create three buttons using the 3D effects I showed in class.
-one circular button
-one rectangle button
-one rounded edge button (merge together a rectangle and two circles, do not use the rounded rectangle tool)
Each button should be a different color, and show be named differently
Save your file as a pdf or jpeg and upload it to the share drive by the end of class.
-one circular button
-one rectangle button
-one rounded edge button (merge together a rectangle and two circles, do not use the rounded rectangle tool)
Each button should be a different color, and show be named differently
Save your file as a pdf or jpeg and upload it to the share drive by the end of class.
Sunday, October 26, 2008
Wednesday, October 22, 2008
Oct. 22 - Typography exercise
It’s part of a web designer’s job to make sure text is easy and nice to read on all major browsers and platforms. Successful web typography combines a simple interface, coupled with a strong identity (logo/branding).
Browse various type/font foundries and download typefaces that you like. Take the time to build your font library, even if you donʼt see yourself using all these typefaces—its good to have a large selection to choose from during your design process. Please remember, not all free fonts are good fonts.
You are to select three different typefaces to be used in the following four proposed web pages below.
-One typeface will be use for the company’s logo. The typeface selected should somehow visually describe and characterize each company.
- The other two typefaces will be used for the links, headers, main copy text information displayed on the web page. Use the latin text generator to create some generic copy paragraphs and headers where you will define the visual hierarchy of headers, copy text and links.
1. Mr. Patts Pet Shop (online pet shop)
2. Big Top Flying Circus (promotional site for traveling circus show)
3. Cape May Ghost Tours (informational site about regional ghost tours)
4. Your portfolio page
*Save your work as a PDF name like this :“yourname_typography.pdf”
EXAMPLES:
Browse various type/font foundries and download typefaces that you like. Take the time to build your font library, even if you donʼt see yourself using all these typefaces—its good to have a large selection to choose from during your design process. Please remember, not all free fonts are good fonts.
You are to select three different typefaces to be used in the following four proposed web pages below.
-One typeface will be use for the company’s logo. The typeface selected should somehow visually describe and characterize each company.
- The other two typefaces will be used for the links, headers, main copy text information displayed on the web page. Use the latin text generator to create some generic copy paragraphs and headers where you will define the visual hierarchy of headers, copy text and links.
1. Mr. Patts Pet Shop (online pet shop)
2. Big Top Flying Circus (promotional site for traveling circus show)
3. Cape May Ghost Tours (informational site about regional ghost tours)
4. Your portfolio page
*Save your work as a PDF name like this :“yourname_typography.pdf”
EXAMPLES:
Tuesday, October 21, 2008
Oct. 22 - Resources
Great inspiration
Kevin Cornell
Great Web Typography
The Big Noob
Typography resources
Type/Font Foundries
Other resources
Monday, October 20, 2008
Oct 20 - Homework
1. Read Chapter 4 from Designing Interfaces
2. Continue to work on your Worst of the Web project. This will be due next Monday, Oct. 27.
2. Continue to work on your Worst of the Web project. This will be due next Monday, Oct. 27.
Tuesday, October 14, 2008
Week 2 Class 2 - Homework (Self Portrait)
Create a non-literal self portrait in Photoshop 24x20(inches). Do not be literal; think about what makes the essence of you. You may use appropriated images off the web or you can use a digital painting. We will use this project to get to know each other.
You are to sketch this idea in your sketchbook/notebook, and then produce them with an image editing software. Have the digital prints prepared as a PDF file before the start of the following class. Each student will present his/her portrait to the rest of class on the projector on Monday.
If you are not here by 9am Monday ready with your PDF, you will not receive full credit for the assignment.
You are to sketch this idea in your sketchbook/notebook, and then produce them with an image editing software. Have the digital prints prepared as a PDF file before the start of the following class. Each student will present his/her portrait to the rest of class on the projector on Monday.
If you are not here by 9am Monday ready with your PDF, you will not receive full credit for the assignment.
Week 2 Class 2 - Resources
Blog
colourlovers.com
Free hi-resolution textured images
Bittbox (home of free goodies)
65 Resources for Grid-based design
Books
The Designer and the Grid by Julia Thrift and Lucienne Roberts
find it in the AiOH-C library : Z 246 .R58 2005
Making and Breaking the Grid: A Graphic Design Layout Workshop by Timothy Samara
find it in the AiOH-C library: Z 246 . S23 2002
Sunday, October 12, 2008
Week 2 Class 1 - Homework (Flowchart + Wireframe)
Worst of the Web Flowchart + Wireframe
Create a flowchart displaying the new navigational structure of the website you will be redesigning. You must also put together a wireframe for the home page and two additional pages. Wireframes are to be non-graphical-- this is simply a blue print of how the different elements of your page will be structured.
Here's an example of what a wireframe for a web site would look like:
Create a flowchart displaying the new navigational structure of the website you will be redesigning. You must also put together a wireframe for the home page and two additional pages. Wireframes are to be non-graphical-- this is simply a blue print of how the different elements of your page will be structured.
A print of the flowchart and wireframes will be due at the start of next class.
Here's an example of what a flowchart for a web navigation would look like:
Here's an example of what a flowchart for a web navigation would look like:
Here's an example of what a wireframe for a web site would look like:
Week 2 Class 1 - In Class Exercise 03
Prioritize Web Design elements with a Battleship Grid
1. Take a screenshot of an e-commerce web site (save this a jpeg, named "battleshipgrid_A.jpg")
2. Using Photoshop, draw vertical lines up and down the screen. Create 10 vertical rows of equal size.
3. Draw horizontal lines across the page to create a total of 10 horizontal rows. The first horizontal line should be right underneath the top navigation, and each subsequent row should be equal in size.
4. Create a new layer where you can overlay the grid with different colors at 30% opacity. Next, begin to assign color values to the different areas of the grid. The values assigned to each of the shaded regions aren’t absolute; they’re relative values, and should be considered rough guidelines. (save this as a jpeg name battleshipgrid_B.jpg)
5. Begin to examine and analyze the web (design elements) real estate.
- Which elements take up the most space on the page?
- Which elements take up less room? Why is that so?
- Based on eyetracking studies are the elements in each valued region placed and sized effectively for the user experience.
- Are there any elements on the page that the customers won’t actually care about? Gray these element areas out.
1. Take a screenshot of an e-commerce web site (save this a jpeg, named "battleshipgrid_A.jpg")
2. Using Photoshop, draw vertical lines up and down the screen. Create 10 vertical rows of equal size.
3. Draw horizontal lines across the page to create a total of 10 horizontal rows. The first horizontal line should be right underneath the top navigation, and each subsequent row should be equal in size.
4. Create a new layer where you can overlay the grid with different colors at 30% opacity. Next, begin to assign color values to the different areas of the grid. The values assigned to each of the shaded regions aren’t absolute; they’re relative values, and should be considered rough guidelines. (save this as a jpeg name battleshipgrid_B.jpg)
5. Begin to examine and analyze the web (design elements) real estate.
- Which elements take up the most space on the page?
- Which elements take up less room? Why is that so?
- Based on eyetracking studies are the elements in each valued region placed and sized effectively for the user experience.
- Are there any elements on the page that the customers won’t actually care about? Gray these element areas out.
6. Create a new layer in Photoshop and insert text that indicates a certain viewing hierarchy for each of the colored sections. Why would a web user be drawn to this area of the web page first? Why elements are irrelevant to most users, and will probably be ignored?
Week 2 Class 1 - Resources
Cool Websites/Artist
246 W17
Eboy
Design
Illustrator Tutorials (VECTOR TUTS)
Information Architecture
http://www.useit.com/
http://www.usabilityfirst.com
Tuesday, October 7, 2008
Week 1 Class 2 - Homework
Research Assignment 1
You are to research what makes for good interface design. What are the key factors in developing a design? What does color have to do with the design? What do you look for when creating a design? Who do you ask these questions to if you’re working in the industry? What are the key factors in interface design? Write a one page report on these question and why they affect the decisions made when developing a layout and/or interface.
Have this printed and bring to the following class day.
You are to research what makes for good interface design. What are the key factors in developing a design? What does color have to do with the design? What do you look for when creating a design? Who do you ask these questions to if you’re working in the industry? What are the key factors in interface design? Write a one page report on these question and why they affect the decisions made when developing a layout and/or interface.
Have this printed and bring to the following class day.
Week 1 Class 2 - In-class exercise 02
Select twenty different images of various objects, people, things, and places by browsing the internet (I highly recommend using flickr.com). Size them in Photoshop as thumbnails (100x100pixels).
You are to create a narrative with these images. Set up a new document in Illustrator that has three columns and label them in the order A, B, and C. Pair your images together in ten rows. Place one image from a pair in column A, and the other image from the corresponding pair in column C. In column B, you will insert text that creates a connection between the two images. Essentially you must devise a way to link the images together to tell a story. Examine the different ways images can relate to one another, perhaps conceptually, associatively, or visually (color, texture).
Print this exercise out and hand it in by the end of class. Be sure to have your name and assignment number on the print out.
You are to create a narrative with these images. Set up a new document in Illustrator that has three columns and label them in the order A, B, and C. Pair your images together in ten rows. Place one image from a pair in column A, and the other image from the corresponding pair in column C. In column B, you will insert text that creates a connection between the two images. Essentially you must devise a way to link the images together to tell a story. Examine the different ways images can relate to one another, perhaps conceptually, associatively, or visually (color, texture).
Print this exercise out and hand it in by the end of class. Be sure to have your name and assignment number on the print out.
Project 1: Worst of the Web
In class we will discuss what makes for bad web design. Your first project will be to selected a really "bad and poorly designed" web site that sells a product or service. You will present it to class on Monday, October 13th. Be ready to tell us at least four things that do not work in the web site. The following class (October 15), you be expected to propose ways to improve the site design, and hand in a proposed flowchart/site map of the new navigation structure. You will then have a week to redesign at least three different sections of the web site. This project focuses only on the design aspect of interaction design, so your new site need not be functional. It should be uploaded to an HTML page and have links (images) that advance to at least three different sections within the site. Be sure to address all the problematic issues you pointed out in the original "bad" design presentation. You are encouraged to redesign all aspects of your chosen site (that includes all graphics, content, type, layout, and navigation.)
The final redesign of your website will be due October 27.
Deadlines:
Oct. 13 - Present selected bad web site and point at four problems with the site's design
Oct. 15 - Flowchart/Site Map of new navigational structure of web site
Oct. 27 - Final redesign of web site (images of three sections of site)
Student Examples:
Bad Site - http://www.nopeitssoap.com/
Redesign - http://community.mfaca.sva.edu/%7Ejessicag/interfacedesign/nopeitssoap.html
Original site - http://advocatesforyouth.org/
Redesign - http://community.mfaca.sva.edu/%7Eestherr/interface_design/advocates/newdesign.html
Original site - http://www1.shore.net/%7Estraub/wpr.htm
Redesign - http://community.mfaca.sva.edu/%7Ehuilun/redesign/process.html#
Additional Resources:
Web Pages The Suck
webpagesthatsuck.com
The final redesign of your website will be due October 27.
Deadlines:
Oct. 13 - Present selected bad web site and point at four problems with the site's design
Oct. 15 - Flowchart/Site Map of new navigational structure of web site
Oct. 27 - Final redesign of web site (images of three sections of site)
Student Examples:
Bad Site - http://www.nopeitssoap.com/
Redesign - http://community.mfaca.sva.edu/%7Ejessicag/interfacedesign/nopeitssoap.html
Original site - http://advocatesforyouth.org/
Redesign - http://community.mfaca.sva.edu/%7Eestherr/interface_design/advocates/newdesign.html
Original site - http://www1.shore.net/%7Estraub/wpr.htm
Redesign - http://community.mfaca.sva.edu/%7Ehuilun/redesign/process.html#
Additional Resources:
Web Pages The Suck
webpagesthatsuck.com
Week 1 Class 2 - Resources
Interesting interface design
Drukkerij Boone-Roosens (zoom effect, bad usage)
Knowledge Cotton Apparel (zoom effect, interesting)
Flashbum (zoom effect, good)
The Concretes
Sumo paint
Monday, October 6, 2008
Sunday, October 5, 2008
Week 1 Class 1 Homework: Interactive Design Flowchart
Create a flowchart for an interactive device.
You are expected to do some research about the interactive device and at least know how the device works and the various ways a user can navigate between difference sections of the program. Make sure to be very specific and map out all possible scenarios of the interaction.
A printout of your flowchart will be due at the start of next class.
Week 1 Class 1 - In-class exercise
Create a flowchart of your week. Map out all the possibilities of your weekly schedule, from waking up, going to classes, working, doing homework, etc. Use your choice of vector based programs or a diagramming program like Omnigraffle. Assignments should be completed and submitted via email by the end of class.
Week 1 Class 1 - Resources
Text Resources
Envisioning Information, Edward R. Tufte. Graphics Press, 1990.
The Laws of Simplicity (Simplicity: Design, Technology, Business, Life), John Maeda. MIT Press, 2006.
Flash CS3 Professional for Windows and Macintosh: Visual QuickStart Guide. Katherine Ulrich. Peachpit Press, 2007.
Design Websites
A List Apart
http://www.alistapart.com/
Subtraction: Khoi Vinh's Blog on Web Design
http://www.subtraction.com/
NETTUTS (Web Design tutorials)
http://nettuts.com/
Creative Techs (Mac / Adobe Tips)
http://creativetechs.com/tips/
Envisioning Information, Edward R. Tufte. Graphics Press, 1990.
The Laws of Simplicity (Simplicity: Design, Technology, Business, Life), John Maeda. MIT Press, 2006.
Flash CS3 Professional for Windows and Macintosh: Visual QuickStart Guide. Katherine Ulrich. Peachpit Press, 2007.
A List Apart
http://www.alistapart.com/
Subtraction: Khoi Vinh's Blog on Web Design
http://www.subtraction.com/
Design Tutorials
http://nettuts.com/
Creative Techs (Mac / Adobe Tips)
http://creativetechs.com/tips/
Subscribe to:
Posts (Atom)