1. Understand what Interactive Design is;
2. Identify key considerations when designing
3. Clearly identify when to use Flash and when
to use HTML code;
4. Use appropriate Prototyping Methods;
• Interactive Design is the design (aesthetics and
functionality) of screen-based artefacts which can be
controlled or altered by the user.
• We design processes & sequences as well as still
• All key design principles still apply:
Audience & subject research, typographic
choice, space, focus, balance, colour
• 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
• Freehand for prototyping structure
• Paper for prototyping sequences
• Hand Code or DreamWeaver for coded
• Flash for Flash based websites.
• (plus other graphics, video or sound
packages for content creation)
• Flash-based WebSites – www.habitat.net
• HTML-based WebSites – www.ikea.co.uk
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.
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:
• 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
• Text: News Stories, Instructions, Forms etc.
• Video/Sound Clips
• Animations: Banner Ads, Information Graphics
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
• 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
• What are the most popular tasks?
Put these options at the top and make
• Which order should the links I‟ve specified
• Steve Krug – can you tell what the site is
for, at a glance?
From Nico McDonald, What is Web Design
Visual Treatment - Photoshop
TypeFaces/Sizes in a WebPage
A structure chart is a graphical overview of how the site will
You can produce these in Freehand using the connector tool.
• Roughly draw what the main elements in
the animated sequence will be.
• Not fine detail, but clear overview of idea
“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!
• 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