Transcript slide presentation :: week14

Interface Programming 2
Week 14
:: Calendar
Week 10
10.23
Lesson:
Flash tips
10.25
Lesson:
Flash tips
Week11
Week 12
10.30
11.1
HW – final Lesson:
designs
Flash tips
due.
11.6
HW - 1st
draft of
site due.
Week 13
11.8
Lesson:
Flash tips
11.13
HW - 2nd
draft of
site due.
11.15
Work Day;
1-1
feedback
Week 14
Week 15
11.20
11.22
Work Day;
1-1
feedback
11.27
Week 16
11.29
12.4
Work Day;
1-1
feedback
12.6
FINAL –
flash w eb
site
NO CLASS
NO CLASS NO CLASS
–
– WORK
– WORK
THANKSGI
WEEK
WEEK
VING
WORK DAY WORK DAY CRITIQUE
WORK DAY WORK DAY WORK DAY WORK DAY WORK DAY WORK DAY
Interface Programming 2 :: Week 14
WORK DAY CRITIQUE
:: This Week's Agenda
 Quick lesson on how to begin your printed portfolio
assignment
 We will take a look at some of last year's portfolio
entries.
 Full work day
 Take advantage of today to get 1-1 in-person feedback
from me.
Interface Programming 2 :: Week 14
:: How to contact me next week
 While I am out of town, you can contact me the
following ways:
 If you have a technical question about your site, please log into
laulima at http://laulima.hawaii.edu, go to the discussion board,
and post your question. I will be logging onto laulima all week
and checking the discussion. I will answer all questions posted
to the discussion board on the discussion board so that
everyone can see the answers.
 If you need for me to see your source files (.fla's) then post
your files to the laulima server via the drop box. Consider
zipping up your files if you are loading external swf's or mp3's.
 If you do not want to post your question publicly, you can email
me, but I want to encourage you to use laulima so that we can
all learn from each other's experiences.
Interface Programming 2 :: Week 14
:: Printed portfolio assignment

How to prepare your web site to become a portfolio entry

Gather all of your assets






Creative brief
Sketches
Site map
Page maps
Studies
Save out 300dpi images of your content





make a folder to place all of your portfolio entry images
digitize your sketches (scan them, clean them up, save them out as uncompressed .tiffs)
update and save out your site map and page maps (.tiffs)
save out any comps that you will need (.tiffs)
take screenshots of your final site
Interface Programming 2 :: Week 14
:: Printed portfolio assignment
Tips for digitizing your sketches


“clean” up your sketches before scanning them




use a thick black marker in order to get a high contrast scan
adjust the scanner contrast settings before scanning
scan your sketches at 300dpi
clean them up in Photoshop

erase dirt and unnecessary artifacts from your scan



don’t go crazy with this, they are sketches after all
adjust your image (levels, contrast, etc.)
save all images as uncompressed .tifs into your portfolio folder
Interface Programming 2 :: Week 14
:: Printed portfolio assignment

tips for designing your portfolio layout

design the layout for how you want to show the progression of your designs from
sketch to final


consider a diagram/flowchart/hierarchy tree showing the full design process on one
page
things to keep in mind:

what is the narrative of my portfolio entry?

beginning, middle, & end




beginning: what is the primary design problem at hand? who is the client? what is the targeted audience?
what is your primary goal/objective for the site? what are the major obstacles?
middle: what steps did you take to try to solve your design problem(s)?
end: how did you ultimately solve/resolve all of your design problems?
how can I best show this full design problem solving process from concept to final
design?
Interface Programming 2 :: Week 14
:: Printed portfolio assignment

elements to consider including in your portfolio entry:








your name, the class, the date
a project title
brief description of the project (1 or two paragraphs at the most - consider
including your primary goals/objectives, main design problems at hand, and target
audience)
thumbnail sketches
artwork/concept sketches
thematic color studies and/or typography studies
a diagram/flowchart/hierarchy tree that demonstrates the full design process
on one page
final images of the site, perhaps seen inside of a browser window, or perhaps a
zoomed-in close-up or detailed view
Interface Programming 2 :: Week 14
:: Printed portfolio assignment

typography study examples:
Interface Programming 2 :: Week 14
:: Printed portfolio assignment

color study/background color study example:
DIRECTION A: “HOT”
Stylistic risk level: High
Colors: Warm (Shades of Reds,
Oranges, Yellows, Black, Greys,
and White)
DIRECTION B: “COOL”
Stylistic risk level: Medium
Colors: Cool (Shades of Blues,
Greys, and White)
Interface Programming 2 :: Week 14
:: Final Assignment

Due: Week 16B
Art 257+258 Flash Web Site


Assignment: create an advanced Flash web site. You can choose
any site/client/idea that you want, however: your site must warrant
the use of Flash versus HTML. In other words, if you ask yourself,
“should this be an HTML site instead?” and the answer is “Yes” –
then you should consider another idea.
Your final site should include:






A custom preloader
An animated intro
Multiple pages/sections (minimum of 3)
Transitions between pages/sections
SWFObject and CSS for placing/publishing your flash into HTML
NOTE: You can NOT do your own Flash portfolio site.
Interface Programming 2 :: Week 14
:: Final Assignment

Due: Week 16B
Art 257+258 Flash Web Site

Objectives:
 To apply the skills learned in both motion graphic design and interface
programming 2 into one unified interface.
 Complete the creative problem-solving process from the preliminary
planning stage and exploration through revisions to the final product.
 Experiment by taking risks through the process of exploration during the
creative problem solving process.
 Demonstrate relevant contemporary responses to motion graphic design
and interface programming using ActionScript, HTML, and CSS.
 Analyze and apply the visual elements of line, shape, value, color, texture,
time, motion and the design principles of balance, rhythm, repetition,
emphasis, contrast, variation, and unity to interface design assignments.
 Incorporate typography, shape and sequential graphics/images in a timebased, interactive interface.
 Analyze the way motion is used to convey sequential organization of
information in time.
 Demonstrate strong group communication skills and the ability to speak
clearly during critiques.
Interface Programming 2 :: Week 14
:: Final Assignment

Due: Week 16B
Art 257+258 Flash Web Site

Format: Flash inside of an HTML page.
 Use a combination of Flash, SWFobject, HTML, and CSS to
design your site as it will appear in the browser.
 Post a link to your final site from both your Art 257 AND Art 258
class web pages!!
Interface Programming 2 :: Week 14