wireframes & mockups presents…. what is a wireframe? a sketch or a guideline before you build...
TRANSCRIPT
Wireframes & Mockups
presents…
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.
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.
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.
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.
What’s Different?
Wireframe
Mockup
black and white with no graphics
decorated with colors and images
function &layout shape, 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.
Three Stages of Mockups
• Low Fidelity Mockup (Lo-Fi)• Medium Fidelity Mockup (Me-
Fi)• High Fidelity Mockup (Hi-Fi)
Me-FiLo-Fi
Hi-Fi
• 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 importantto 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.
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.
• 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.
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://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 ofTheLibztercom. EchoHosting, 24 Feb. 2011. Web.
Image Source: Frontand.de. "Wireframe vs. MockUp." Frontand De. N.p., 7 Oct.
2010. Web.
