Wireframe Kung-Fu and Prototype Like A Ninja

Mike Carson – www.JoomlaShowroom.com

About Your Presenter

• Integrated Technology & Design Inc.http://itdwebdesign.com (Joomla Website Design and Development)

• Joomla Showroomhttp://joomlashowroom.com(Joomla Programming & Extension Development)

Mike Carson

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.

The Steps

Building a website is a 3 step process.

1. Layout

2. Function/Usability

3. Design

Thought Processes

The Male web designer’s brain

Thought Processes

The Female web designer’s brain

Sketching

Getting the idea on paper

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

Sketching

So are there any tools available for sketching?

• Napkin• Pencil and paper• Sketching Books• Stencils

Sketching

Additional resources

Wireframes

From idea to concept

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

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

Example

Keep

It

Simple &

Stupid

Use the KISS theory

Perspective

So how does this relate

to Joomla?

Thinks of your wireframe

as the layout of your

template’s module

Positions.

Prototypes

Making the concepts reality

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".

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

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!!!!!!!

Tools

LETS TALK TOOLS

WHAT DO YOU USE?

Tools

Comparison Chart

Sketch Templates

Software Reviews

Axure Demo

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