1. Wireframes & Mockups presents…

2. What is a Wireframe? a sketch or a guideline before you build actual website a “skeleton graph” that shows how the contents will be layout frames with no colors, images, or any graphics Source: Fisher, Libby. "Designing a Website: Wireframes and Mockups." The Web Design Blog of TheLibztercom. EchoHosting, 24 Feb. 2011. Web.

3. Why should I use a Wireframe? have an idea of what contents will be falls into where save your time because you have guide to follow to make sure that you and the client are on the same track before you ever starting the design or the coding of the site to avoid miscommunications with clients to help you and the client decide and agree on the layout that the website will have Source: Fisher, Libby. "Designing a Website: Wireframes and Mockups." The Web Design Blog of TheLibztercom. EchoHosting, 24 Feb. 2011. Web.

4. What is a Mockup? web development stage which is next step after creating wireframe comes into design with colors, images, and graphic elements much detail than wireframe, mockup should have look and feel of the finished website but does not yet represent the final design Source: Frontand.de. "Wireframe vs. MockUp." Frontand De. N.p., 7 Oct. 2010. Web. Image source: Johnson, Devin. "Examples of Wireframe to Mockup." John Householder. N.p., n.d. Web.

5. Why should I use a Mockup? plan out graphically using wireframe as a guide adjust colors and size of elements using Photoshop before you build actual site decide with clients about how the finished site will be before you start coding it Source: Fisher, Libby. "Designing a Website: Wireframes and Mockups." The Web Design Blog of TheLibztercom. EchoHosting, 24 Feb. 2011. Web.

6. What’s Different? WireframeMockup black and white with no graphics decorated with colors and images function &layoutshape, design & visual used to portray the simple layout used to portray the graphical elements and look Source: Fisher, Libby. "Designing a Website: Wireframes and Mockups." The Web Design Blog of TheLibztercom. EchoHosting, 24 Feb. 2011. Web.

7. Three Stages of Mockups Low Fidelity Mockup (Lo-Fi) Medium Fidelity Mockup (Me-Fi) High Fidelity Mockup (Hi-Fi) Me-Fi Lo-Fi Hi-Fi

8. often call as a wireframe because it is very basic and black/white lack of color and texture, focus on usability, functional design Lo-Fi mockups are important to understand how the test user navigates and interacts with the product, concentrating in the tasks instead of how elements appearances are. Lo-Fi Source: Bulkin, David. "PowerMockup, A New Tool for Low Fidelity Mockups." PowerMockup, A New Tool for Low Fidelity Mockups. C4Media Inc., 22 June 2011. Web. Image Source: Stolarsk, Lucas I. "Low Fidelity Prototyping: The Cheapest Corrections in Design Stage Ever!" InfoSec Institute. N.p., 27 Nov. 2012. Web.

9. Me-Fi containing colors and more precise positioning of components giving importance to contents and minor details Image Source: Stolarsk, Lucas I. "Low Fidelity Prototyping: The Cheapest Corrections in Design Stage Ever!" InfoSec Institute. N.p., 27 Nov. 2012. Web. Source: Guelfi, Nicolas, and Didier Buchs. Rapid Integration of Software Engineering Techniques: Third International Workshop, RISE 2006, Geneva, Switzerland, September 13-15, 2006 ; Revised Selected Papers. Berlin: Springer, 2007. Print.

10. has all the requirements for the site including pictures, colors and graphics looks complete almost same as a final design look Hi-Fi Image Source: Stolarsk, Lucas I. "Low Fidelity Prototyping: The Cheapest Corrections in Design Stage Ever!" InfoSec Institute. N.p., 27 Nov. 2012. Web. Source: Oliveira, André. "What Is a Mockup? – Mister Mockup." Mister Mockup. N.p., 29 Jan. 2014. Web.

11. How do I create Wireframe & Mockup? you can create using Adobe Photoshop or Adobe Fireworks Or if you don’t have Adobe Software use online resources: - http://frontand.de/wireframes-web-based-tools/http://frontand.de/wireframes-web-based-tools/ - http://mashable.com/2012/06/07/mockup-tools/http://mashable.com/2012/06/07/mockup-tools/ (Online resources are fairly quick and easy to use !) Source: Fisher, Libby. "Designing a Website: Wireframes and Mockups." The Web Design Blog of TheLibztercom. EchoHosting, 24 Feb. 2011. Web. Image Source: Frontand.de. "Wireframe vs. MockUp." Frontand De. N.p., 7 Oct. 2010. Web.

12. Visit Us: www.meijun.cc Tweet Us: @meijun Email Us: hello@meijun.ccwww.meijun.cchello@meijun.cc Any Questions?