0
Wireframe Kung-FuandPrototype Like A Ninja   Mike Carson – www.JoomlaShowroom.com
About Your Presenter                   Mike Carson• Integrated Technology & Design Inc.  http://itdwebdesign.com  (Joomla ...
What You’ll Learn•   Working with clients•   How clients think•   The Do’s and Don’ts•   Tools that are available•   How t...
The Steps   Building a website is a 3 step process.   1. Layout   2. Function/Usability   3. Design
Thought Processes The Male webdesigner’s brain
Thought ProcessesThe Female webdesigner’s brain
SketchingGetting 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 clie...
SketchingSo are there any tools available for sketching?•   Napkin•   Pencil and paper•   Sketching Books•   Stencils
SketchingAdditional resources
WireframesFrom idea to concept
Do’s and Don’tsWhat you should do• Mockup unique pages first (Homepage and one internal page)• Make a master template (log...
Do’s and Don’tsWhat you shouldn’t do•   Don’t use Photoshop or other photo editors (use the right tool for the job)•   Don...
ExampleKeepItSimple &StupidUse the KISS theory
PerspectiveSo how does this relateto Joomla?Thinks of your wireframeas the layout of yourtemplate’s modulePositions.
PrototypesMaking the concepts reality
Definition of PrototypeWikipedia describes the word “Prototype” as:A prototype is an early sample or model built to test a...
Disadvantages•   Good prototyping software is a little pricey•   Great prototyping software is expensive•   Training can b...
Advantages•   Prototypes look and act like the real thing•   Reduced production time and costs•   Realistic interactions• ...
Tools        LETS TALK TOOLS        WHAT DO YOU USE?
ToolsComparison ChartSketch TemplatesSoftware ReviewsAxure Demo
Resources             Sketching template libraryhttp://joomlashowroom.com/sketching_templates.zip Application design and d...
Upcoming SlideShare
Loading in...5
×

Wireframing and Prototyping Presentation

1,192

Published on

Wireframing and Prototyping Presentation given at Joomla Day NYC 2011

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,192
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
21
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Wireframing and Prototyping Presentation"

  1. 1. Wireframe Kung-FuandPrototype Like A Ninja Mike Carson – www.JoomlaShowroom.com
  2. 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. 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. 4. The Steps Building a website is a 3 step process. 1. Layout 2. Function/Usability 3. Design
  5. 5. Thought Processes The Male webdesigner’s brain
  6. 6. Thought ProcessesThe Female webdesigner’s brain
  7. 7. SketchingGetting the idea on paper
  8. 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. 9. SketchingSo are there any tools available for sketching?• Napkin• Pencil and paper• Sketching Books• Stencils
  10. 10. SketchingAdditional resources
  11. 11. WireframesFrom idea to concept
  12. 12. Do’s and Don’tsWhat 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. 13. Do’s and Don’tsWhat 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. 14. ExampleKeepItSimple &StupidUse the KISS theory
  15. 15. PerspectiveSo how does this relateto Joomla?Thinks of your wireframeas the layout of yourtemplate’s modulePositions.
  16. 16. PrototypesMaking the concepts reality
  17. 17. Definition of PrototypeWikipedia describes the word “Prototype” as:A prototype is an early sample or model built to test a concept or processor 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. 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. 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. 20. Tools LETS TALK TOOLS WHAT DO YOU USE?
  21. 21. ToolsComparison ChartSketch TemplatesSoftware ReviewsAxure Demo
  22. 22. Resources Sketching template libraryhttp://joomlashowroom.com/sketching_templates.zip Application design and development services http://joomlashowroom.com info@joomlashowroom.com Presentation http://www.slideshare.net/carson3511
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×