Web wireframe,Prototyping

 What is wireframing? 

Wireframing is a way to design a website service at the functional level, it is a layout of a web page that demonstrates what interface elements will exist on key pages.

It provides a visual perceptive of a page beforehand in a project to get stakeholder and project team approval before the creative phase gets under way.  

It also be in use to create the global and secondary navigation to ensure the terminology and structure used for the site meets user prospects.

It is a visual guide that represents how a page or screen of a website or system may look.

Wireframes can extent from very unfinished and ‘sketchy’ in visual aspect, it is the first level of design like sketch which will look at 100% completion of any website.

 When it is Useful:-  

• Write down the idea using paper, pencil
• It is a good way of documentation as a raw visual way
• when we have complete information about website or project we can draw a rough idea that is “Low fidelity of wireframing, and when we use complete functionality wise like navigation,links,tabs,and other effects using appropriate software (like Axure and others) then it is “High fidelity” of wireframing. 

 Wireframe  helps in:- 

• The structure of a page or screen
•  The layout of content
•  The functionality available
• Calls to action
•  Blocks of text
• User interface elements
• Graphic design touches
• Wireframes display site architecture visually
• Wireframes identify ease of updates
• Wireframes save time on the entire project
•  Experience shows it works
• Wireframes push usability to the forefront
• Wireframes allow for clarification of website features

Wireframes are created for the purpose of arranging elements to best accomplish a particular purpose.

The purpose is usually being informed by a business objective and a creative idea. The wireframe depicts the page layout or arrangement of the website’s content, including interface elements and navigational systems, and how they work together.

 wireframe tools:- 

•    Axure
• Balsamiq Mockups
• Cacoo
• Denim  
• FlairBuilder
• Fireworks CS6
• Framebox
• Gliffy
• HotGloo
• iPlotz
• iPhone mockup 
• InDesign CC
• JustProto
• Justinmind
• Lumzy
• Lovely Charts
• Mockflow
• Mockingbird
• OmniGraffle  
• Photoshop CC
• Protoshare
• Penultimate
• Pencil Project
• Pidoco
• SimpleDiagrams
• Visio
• Website Wireframe

       What is Prototyping? 

•      The prototype are usually not absolute systems and many of the details are not built in the prototype. The goal is to provide a system with overall functionality.

•     Prototyping is the process of building a model of a system. In terms of an information        system,
•     prototypes are employed to help system designers build an information system that self-generated and easy to manipulate for end users. Prototyping is an iterative process that is part of the analysis phase of the systems development life cycle.
• During the requirements determination portion of the systems analysis phase, system analysts gather information about the organization's current procedures and business processes related the proposed information system. In addition, they study the current information system, if there is one, and conduct user interviews and collect documentation. This helps the analysts develop an initial set of system requirements.
• Prototyping can increase this process because it converts these basic, yet sometimes intangible, specifications into a tangible but limited working model of the desired information system. The user feedback gained from developing a physical system that the users can touch and see facilitates an critical response that the analyst can employ to modify existing requirements as well as developing new ones.
• Prototyping comes in many forms - from low tech sketches or paper screens(Fictive) from which users and developers can paste controls and objects, to high tech operational systems using CASE (computer-aided software engineering) or fourth generation languages and everywhere in between. Many organizations use multiple prototyping tools. For example, some will use paper in the initial analysis to facilitate concrete user feedback and then later develop an operational prototype using fourth generation languages, such as Visual Basic, during the design stage.

 Some Advantages of Prototyping:- 

• Reduces development time.
• Reduces development costs.
• Requires user involvement.
• Developers receive quantifiable user feedback.
• Facilitates system implementation since users know what to expect.
• Results in higher user satisfaction.
• Exposes developers to potential future system enhancements.

 When to use Prototype model:-    

• Prototype model should be used when the desired system needs to have a lot of interaction with the end users.
• Typically, online systems, web interfaces have a very high amount of interaction with end users, are best suited for Prototype model. It might take a while for a system to be built that allows ease of use and needs minimal training for the end user.
• Prototyping ensures that the end users constantly work with the system and provide a feedback which is incorporated in the prototype to result in a useable system. They are excellent for designing good human computer interface systems.

 What is SDLC ? 

SDLC is a process followed for a software project, within a software organization. It consists of a detailed plan describing how to develop, maintain, replace and alter or enhance specific software. The life cycle defines a methodology for improving the quality of software and the overall development process.

 SDLC Models :-  

• Waterfall Model
• Iterative Model
• Spiral Model
• V-Model
• Big Bang Model  

 What is Mock up Design? 

A mockup, or mock-up, is a scale or full-size model of a design or device, used for teaching, demonstration, design evaluation, promotion, and other purposes. A mockup is a prototype it provides at least part of the functionality of a system and enables testing of a design.Mock-ups are used by designers mainly to acquire feedback from users. 

              It 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

 What are the Differences Wireframe, Prototype & Mockup ? 

Wireframe

Key Aspects      :     Basic representation of design elements.
What to use for :    Communication, documentation.

Prototype

Key Aspects      :  Interactivity.
What to use for:  Interactive user testing, UI design.

Mockup

Key Aspects      :  Static visualization, branding.
What to use for:  Stakeholder design buy-in.