WEB DESIGN and FRONT-END DEVELOPMENT (Part-4 and Final)

Wireframes, Mockups and Prototypes: What’s the Difference?

Wireframes, if properly created, serve as the backbone of the product. It’s just like an architectural blueprint of a house: It states plainly and clearly what should go where. It has three simple objectives; the clear presentation of:

1. Main groups of information
2. Layout/structure of information
3. Core visualization and descriptions of user interface interactions

 The main groups of content (what?)
 The structure of information (where?)
 A description and basic visualization of the user – interface interaction (how?)

Mockup, is a middle to high fidelity, static, design representation. Very often a mockup is a visual design draft, or even the actual visual design. A well created mockup:
– represents the structure of information, visualizes the content and demonstrates the basic functionalities in a static way
– encourages people to actually review the visual side of the project
Mockups are often confused with wireframes, due to the names of some software companies.

Prototype

A prototype is a mid- to high-fidelity representation of the final user interface. The goal of a prototype is straightforward: Simulate the interaction between the user and the interface.
Whenever a button is clicked, the appropriate action must occur, mimicking the experience of a full product. It should allow the user to:
– experience content and interactions with the interface
– test the main interactions in a way similar to the final product

TYPOGRAPHY

Typography is the visual component of the written word.
TYPEFACE/ FONTS/ FONTS-FAMILY
A design for a set of characters. Popular typefaces include Times Roman, Helvetica, and Courier.
There are two general categories of typefaces: serif and sans serif. Sans serif typefaces are composed of simple lines, whereas serif typefaces use small decorative marks to embellish characters and make them easier to read. Helvetica is a sans serif type and Times Roman is a serif type.

Finding

According to most studies, sans serif fonts are more difficult to read. For this reason, they are used most often for short text components such as headlines or captions.

FONT-FACE

@font-face is a css rule which allows you to download a particular font from your server to render a webpage if the user hasn't got that font installed. This means that web designers will no longer have to adhere to a particular set of "web safe" fonts that the user has pre-installed on their computer.
• @font-face { font-family: myFirstFont; src: url(sansation_light.woff);}
• @font-face {font-family: myFirstFont; src: url(sansation_bold.woff); font-weight: bold;}

Thanks a lot for stay connected with my series of article on "FRONT-END DEVELOPMENT" :)