Interface Programming 2 - PowerPoint PPT Presentation

About This Presentation
Title:

Interface Programming 2

Description:

Colors: Cool (Shades of Blues, Greys, and White)? color study/background color study example: ... of balance, rhythm, repetition, emphasis, contrast, variation, ... – PowerPoint PPT presentation

Number of Views:19
Avg rating:3.0/5.0
Slides: 15
Provided by: www2H7
Learn more at: http://www2.hawaii.edu
Category:

less

Transcript and Presenter's Notes

Title: Interface Programming 2


1
  • Interface Programming 2
  • Week 14

2
Calendar
3
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.

4
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.e
    du, 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.

5
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

6
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
  • dont 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

7
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?

8
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

9
Printed portfolio assignment
  • typography study examples

10
Printed portfolio assignment
  • color study/background color study example

DIRECTION A HOTStylistic risk level
HighColors Warm (Shades of Reds, Oranges,
Yellows, Black, Greys, and White)?
DIRECTION B COOL Stylistic risk level
MediumColors Cool (Shades of Blues, Greys, and
White)?
11
(No Transcript)
12
Final Assignment
Due Week 16B
  • Art 257258 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.

13
Final Assignment
Due Week 16B
  • Art 257258 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 time-based, 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.

14
Final Assignment
Due Week 16B
  • Art 257258 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!!
Write a Comment
User Comments (0)
About PowerShow.com