Digital Portfolio Production Session II


Published on

Slide presentation on elements of Interaction and Presentation Design for creating digital portfolios.

Published in: Technology
1 Like
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

  • Main Menu
    Gallery system

  • Whether the user can get what they need depends on getting them oriented right from the start.

    The first screen should tell the user what they are going to do, see or experience.

    Use a balance of images and words that provide enough guidance to be useful without too much detail.

  • Every route in your flow chart represents an access route you will need to create.

    Provide direct access where ever possible.

    Consider a variety of access types: menus lists, timelines, icons, buttons, maps
  • New - Major leap; change of scene
    Within - new material in same topic should be subtle to keep user anchored and in control

    Users become disoriented if content jumps from screen to screen. Where am I? How do I get back?

    Solution - Bring new material to current screen
  • Random Access: Less is More

  • Process of looking at the closeup view of individual controls and the big picture of how all the controls work together

  • 1. Avoid content exceptions/find universal solutions.

    2. What mode am I in? Be careful with button states.

    3. What does this button do? Don’t change a buttons function on different screens. Keep it consistent.

  • Walk through the flow chart & put on paper all the actions and options available on screen.

    Do you need to consider timing?

  • Come up with a visual language that will make the content list, flow chart and storyboard come to life, work together and support the functions of each screen.

    Keep it simple
    Keep it consistent
    Know when to break the rules

  • The Elements of Style

  • Design a collection of screens not individual screens
    How will they work together and be visually interesting?
    distinct images in a montage on the main screen, used individually in topic screens
    Distinct colors in the main screen, used individually as key colors in topic screens
    a hierarchical family of images, such as a clock and clock parts or a tree and leaves.

  • Come from the world of print
    Be aware of, know when to break
    Scan from top left to bottom right
    assume that larger items are more significant
    assume that items “above” have primacy over items “below”
    Look for “more to come” signals at the bottom center or right
  • Layout Effects:
    How good it looks
    How easy it is to understand
    How easy it is to use
    The purpose of interface elements are:
    structural <hr />
    Informational – images, text
    functional – buttons

  • The elements are the building blocks of the interface
    Their family relationship produces a sense of continuity and consistency
  • Backgrounds provide location and context
    they influence look, balance & location of all elements on the screen
    fill empty space so other elements are not floating
    do not need to fill screen
    should be integrated and not compete with content
  • Windows often hold media
    Panels enhance structural features or add depth or color
  • Can be any part of the screen or image
    has to reveal purpose at first glance
    need to mach style & composition of the screen
    should be proportional in importance to the function it represents
    For Layout cluster controls by function
    use consistent positioning
    when there are many controls
    if same controls used frequently
    several controls have a similar look & feel
  • Special button that symbolically depicts what it does
    Instantly recognizable
    meaning is cross-cultural
  • standalone
    component - should be created seperately
    Integration techniques
    drop shadow
    alpha transparency mask
    soft or irregular edges

  • Text is always content
  • Preserving Formats
    bitmap - can’t be edited, searched or indexed
    Flash text - Increases storage and bandwidth in addition to the above
    Scrolling Fields
    no custom formatting
    anti-aliasing can be an issue
    can negatively impact design

  • How large should the video window be?
    How long should the video play?

  • Elements that change
    Elements that move
    Elements that appear/disappear
    Screen transitions

  • ×