Interactive Design

Document Sample
Interactive Design Powered By Docstoc
					    Interactive Design
1. Understand what Interactive Design is;
2. Identify key considerations when designing
interactive products;
3. Clearly identify when to use Flash and when
to use HTML code;
4. Use appropriate Prototyping Methods;
           Interactive Artefacts
• Interactive Design is the design (aesthetics and
  functionality) of screen-based artefacts which can be
  controlled or altered by the user.

•   Websites
•   DVDs
•   Kiosks
•   PDAs/Mobiles
•   iTV

• We design processes & sequences as well as still
  images.
          Distinct elements
• All key design principles still apply:
  Audience & subject research, typographic
  choice, space, focus, balance, colour
  harmony
• NEW ELEMENTS –
  Interaction, Animation, Sound, Video,
Same principles of graphic design…
…but must acknowledge technical differences.
 Before you prototype a design, you need to do
some technical research
 Tools for Designing WebSites
• Photoshop for prototyping design




                                         PROTOTYPING
• Freehand for prototyping structure
• Paper for prototyping sequences

• Hand Code or DreamWeaver for coded




                                         PRODUCTION
  websites.
• Flash for Flash based websites.
• (plus other graphics, video or sound
  packages for content creation)
                    WebSites
• Flash-based WebSites – www.habitat.net
• HTML-based WebSites – www.ikea.co.uk

  Flash-based:
  Used for „high design‟ experiences
  Used where animation/movement is needed
  Used where interactivity is beyond point and click
  Used for stand-alone apps as well as web.
  HTML-based/CODED:
  Used where the user needs fast access to Info
  Used where info is updated very regularly both by the
  user and the administrator (in conjunction with other
  languages – ColdFusion, PHP etc.)
  Used where easy accessibility is crucial
  Used for web browsing only.
Understand the Type of Site & the
        Task of the user
• Portal – a gateway to the web full of content
  from external sources. (CODED)
• Promotional/Entertainment WebSites
  (CODED OR FLASH)
• Web-based Systems:
  e-commerce (CODED)
  e-banking (CODED)
  e-government (CODED)
  e-learning (CODED)
• Intranet – internal employee use only (CODED)
  Extranet – internal system securely shared with
  other parties (business to business) (CODED)
    Types of web content you have to
                design:
•   Text: News Stories, Instructions, Forms etc.
•   Images/Illustrations
•   Video/Sound Clips
•   Animations: Banner Ads, Information Graphics
•   Games
Prototyping Interactive Designs
• PLAN HOW EACH PAGE WILL LOOK:
  Visual Treatment (this is what you’re doing by
  creating a homepage design)

• PLAN HOW PAGES LINK (PROCESS):
  SiteMap/Structure Chart/Flow Diagram

• PLAN HOW AN ANIMATION WILL FLOW
  (SEQUENCE):
  StoryBoard
           Visual Treatment
• Design follows from Content
  Scenerios – what does a user want to do?
• Step 1: Decide on Content for Homepage
• Step 2: Decide on ‘Zones’ and Design Spec
  (Typography, colour, texture, image)
• „Where am I?‟ = Site Name & Page Title
• „How do I get somewhere?‟ = Navigation Zone
• „What‟s new?‟ = New Info Zone
• „What‟s important?‟ = Key Area Zone
• „How do I contact them?‟ = Contact Details
              Hierarchies
• What are the most popular tasks?
  Put these options at the top and make
  them prominent.
• Which order should the links I‟ve specified
  go in?
• Steve Krug – can you tell what the site is
  for, at a glance?
Visual Treatment




        From Nico McDonald, What is Web Design
Visual Treatment - Photoshop
TypeFaces/Sizes in a WebPage
        Structure Chart
A structure chart is a graphical overview of how the site will
work.

You can produce these in Freehand using the connector tool.
               Storyboard
• Roughly draw what the main elements in
  the animated sequence will be.
• Not fine detail, but clear overview of idea
  and sequence.
              “I can‟t draw!”
• Doesn‟t matter, Flash makes it easy for you to
  create your own graphics using simple shapes
• You can trace graphics quite easily
• Storyboard has to communicate an idea. It‟s not
  a work of art, it just has to be clear.
• If any of you are serious about this, a graphics
  tablet for home is of great help!
                 Summary
• Interactive Design encompasses many media (tv
  screen, mobile screen, monitor)
• We have to perform technical research before
  design work begins – identify constraints.
• We have to understand the type of activity which
  the site/design needs to perform.
• We have then to decide which technology to
  use: Code or Flash?
• We use paper prototyping to establish form and
  process.

				
DOCUMENT INFO
Shared By:
Categories:
Tags:
Stats:
views:10
posted:10/6/2011
language:English
pages:20