Wireframing and Prototyping Presentation

  • View

  • Download

Embed Size (px)


Wireframing and Prototyping Presentation given at Joomla Day NYC 2011


  • 1. Wireframe Kung-FuandPrototype 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 Showroomhttp://joomlashowroom.com(Joomla Programming & Extension Development) 3. What Youll Learn Working with clients How clients think The Dos and Donts Tools that are available How to be more efficient in the design process How this presentation will make you more moneyfor 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 webdesigners brain 6. Thought ProcessesThe Female webdesigners brain 7. SketchingGetting 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 its fast Its easy to do It gets the client and you on the same page No batteries required 9. SketchingSo are there any tools available for sketching? Napkin Pencil and paper Sketching Books Stencils 10. SketchingAdditional resources 11. WireframesFrom idea to concept 12. Dos and DontsWhat 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 dont forgetto mockup any unique pages Focus on clean and lean layouts Label your elements so you dont forget what they are when youreference later 13. Dos and DontsWhat you shouldnt do Dont use Photoshop or other photo editors (use the right tool for the job) Dont include graphics or colors (Black, White, Gray only) Dont make your mockups too busy; stay as generic as possible Dont skip this stage; it is just as important as the first and the last Dont use real content (it is a major distraction) Never use real images 14. ExampleKeepItSimple &StupidUse the KISS theory 15. PerspectiveSo how does this relateto Joomla?Thinks of your wireframeas the layout of yourtemplates modulePositions. 16. PrototypesMaking the concepts reality 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. 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 incompleteyou 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. ToolsLETS TALK TOOLSWHAT DO YOU USE? 21. ToolsComparison ChartSketch TemplatesSoftware ReviewsAxure Demo 22. Resources Sketching template libraryhttp://joomlashowroom.com/sketching_templates.zip Application design and development services http://joomlashowroom.com info@joomlashowroom.comPresentationhttp://www.slideshare.net/carson3511