Wireframing and Prototyping Presentation given at Joomla Day NYC 2011

1. Wireframe Kung-Fu
and
Prototype Like A Ninja
Mike Carson – www.JoomlaShowroom.com

2. About Your Presenter
Mike Carson
• Integrated Technology & Design Inc.
http://itdwebdesign.com
(Joomla Website Design and Development)
• Joomla Showroom
http://joomlashowroom.com
(Joomla Programming & Extension Development)

3. What You’ll Learn
• Working with clients
• How clients think
• The Do’s and Don’ts
• Tools that are available
• How to be more efficient in the design process
• How this presentation will make you more money
for your organization.

4. The Steps
Building a website is a 3 step process.
1. Layout
2. Function/Usability
3. Design

5. Thought Processes
The Male web
designer’s brain

6. Thought Processes
The Female web
designer’s brain

7. Sketching
Getting the idea on paper

8. Sketching
• When do I sketch?
– When you are at the idea stage
– When you are at the first planning meeting with the client
• Why bother sketching?
– Because it’s fast
– It’s easy to do
– It gets the client and you on the same page
– No batteries required

9. Sketching
So are there any tools available for sketching?
• Napkin
• Pencil and paper
• Sketching Books
• Stencils

10. Sketching
Additional resources

11. Wireframes
From idea to concept

12. Do’s and Don’ts
What you should do
• Mockup unique pages first (Homepage and one internal page)
• Make a master template (logo, navigation, search, content placement,
footer)
• Start from the top and work your way down
• Reference your sketches created in step 1 to make sure you don’t forget
to mockup any unique pages
• Focus on clean and lean layouts
• Label your elements so you don’t forget what they are when you
reference later

13. Do’s and Don’ts
What you shouldn’t do
• Don’t use Photoshop or other photo editors (use the right tool for the job)
• Don’t include graphics or colors (Black, White, Gray only)
• Don’t make your mockups too “busy”; stay as generic as possible
• Don’t skip this stage; it is just as important as the first and the last
• Don’t use real content (it is a major distraction)
• Never use real images

14. Example
Keep
It
Simple &
Stupid
Use the KISS theory

15. Perspective
So how does this relate
to Joomla?
Thinks of your wireframe
as the layout of your
template’s module
Positions.

16. Prototypes
Making the concepts reality

17. Definition of Prototype
Wikipedia describes the word “Prototype” as:
A prototype is an early sample or model built to test a concept or process
or to act as a thing to be replicated or learned from.
The word prototype derives from the Greek πρωτότσπον (prototypon),
"primitive form", neutral of πρωτότσπος (prototypos), "original, primitive",
from πρῶτος (protos), "first" and τύπος (typos), "impression".

18. Disadvantages
• Good prototyping software is a little pricey
• Great prototyping software is expensive
• Training can be time consuming
• It takes time to build a prototype
• If the requirements gathering process is incomplete
you will find out very quickly that you need to re-
engage the client to complete the process

19. Advantages
• Prototypes look and act like the real thing
• Reduced production time and costs
• Realistic interactions
• Client feedback and involvement increases
• Usability issues are flushed out early
• Changes can be easily made
• Clients know exactly what is going to be built
• Prototype becomes the project specification
• Prototypes can make you MONEY!!!!!!!

20. Tools
LETS TALK TOOLS
WHAT DO YOU USE?

21. Tools
Comparison Chart
Sketch Templates
Software Reviews
Axure Demo

22. Resources
Sketching template library
http://joomlashowroom.com/sketching_templates.zip
Application design and development services
http://joomlashowroom.com
info@joomlashowroom.com
Presentation
http://www.slideshare.net/carson3511