Successful interactive design principles.

1. Successful
Interactive Design

2. Hi, I’m Leisy Vidal.
I am a Digital Designer at
Designzillas. I am also pursuing a
master’s degree in Digital Media
Design at Harvard University.
Hello.

3. What is interactive design?
Interactive design is the process of designing interfaces that provide
an interaction between the digital platform and the user. An
interactive design can be a website, an app, a video game, or even an
signup kiosk. Interactive design is a cyclical process with six steps.

4. Research
Wireframe
Development
Do the work. Learn what the
client wants and user needs.
Create a simple mockup of the
interface’s UX flow.
Build a product that is
functional and lightweight.
Testing
Test for issues before launch
in multiple devices.
Successful interactive design evolves
in six steps:
Prototype
Get those design details pixel
perfect.
Launch / Promotion
Launch the site and make it
discoverable.

5. Start with facts.
Do your homework.
• The first part of research is taking to
your client.
• Find our what the user goals are.
• What is the expected performance of
this site? Ex: number of sales, number
of page views, number ofsocial shares
• Research competitors to see if there
are any features or tactics to consider
implementing.
Research
STEP ONE

6. Start simple.
Build progressively.
• Wireframes are a simple sketch of
what your interface will look like.
• Wireframes are composed of simple
boxes and lines.
• Use this opportunity to problem solve
issues with the layout and user flow
early on in the design process.
Wireframes
STEP TWO

8. Wireframe.cc
Balsamiq

9. Make the web both
beautiful and
functional.
• After wireframing its time to design.
• Choose appropriate photographs,
videos, and fonts that portray the
approiate message.
• Make sure your design aligns with
user goals and expected site
performance goals.
PROTOTYPE
STEP THREE

11. Photoshop
Sketch App

12. Build a product that
is functional and
lightweight.
• Once designs have been approved, it’s
time to build.
• Build for your users. Help them
complete tasks in three clicks or less.
• Build lightweight products. The less
time users spend waiting for a site to
load, the more time they have
interacting.
DEVELOPMENT
STEP FOUR

14. Make sure your
website is up to
PAR.
[ DEVELOPMENT TIP ]

15. Performance
• Minify your code.
• Optimize your images.
• Use CDN to cache your site.
Responsiveness
• Most internet users view
sites on mobile phones.
• Make sure your site
responds to different screen
sizes and devices.
Accessibility
• Make sure there is enough
contrast between the color
of your font and the
background color.
• Add alternate text for your
images.
• Check for color blindness
contrast.

16. Test often, and
test well.
• Each browser has different rendering
engines, meaning that your website’s look
will differ from browser to browser.
• Test on as many broswers as you can:
Chrome, Firefox, Safari, IE, Edge
• Test on different devices: desktop, laptops,
tablets, and phones.
• Test your user’s journey. See if you can
accomplish the original goal set out in the
research phase.
TESTING
STEP FIVE

17. You designed,
developed, and tested it.
Now launch it.
• Launch the site and make it live.
• Make sure to evaluate at this point.
• Check drop off rates in Google
Analytics, and average time spent on
your site.
• If your design doesn’t work to meet
your goals, go back to step one and
start the cyclical process until it
works for your users.
LAUNCH
STEP SIX

18. If a website was launched in the middle
of the forest and no one was there to
see it, is the website really live?
QUESTION:

19. No. Just get Google Analytics.
ANSWER:

20. Any Questions?
THANK YOU!

21. www.leisyvidal.com
My Website
www.leisyvidal.com
Thanks for
attending this
Orlando Digital
Media Design
meetup!
Twitter
@leisyvidal
Designzillas
www.designzillas.com