Wireframe Designing Presentation

Designing Wireframes

> Alignment and Notes (Use of Guides and Notes)

> Proper Spacing and useful action

> Button (Make Interactive)

> Follow Action Patterns

> Add Link to Button

> Preview the work

1> Plan the layout

2> Align Properly

3> Meaningful Design

4> User Perspective

*wireframes should effective which driving the design conversation.

How to Create Dynamic Panels in AXURE

Follow the Steps as Screenshot 

1>  File - New

2> select the Image

3> select the Button

4>  Convert Image to Dynamic Panel

5> Rename Button and Dynamic Panel

6> Add More Images (Click on State)

7> Replace images as per your images (Browse from your computer)

8> Now check all your images are Placed correctly.

9> Now Give Action to Button as onclick 

10> Click on case and Set Panel State

11> Checked the Set Dynamic Panel and Select State from Dropdown

12>  Select State as Next

13> Now See the Preview in web Browser

14> Preview as Sliding images as onclick on Button

Steps:-

1> File - New

2> select the Image 

3>select the Button

4>Rename the Button and Dynamic Panel

5>Convert Image to Dynamic Panel

6>Add Duplicate State

7> Replace with your images (in state under image)

8> Give Action to Next Button (Select OnClick)

9> Double click on case and select Set Panel State from Left side of Widgets

10> checked the check-box(set DynamicPanel1)

11> Select State (From dropdown) Select Next

12> Checked (Wrap from Last to First)

13> Select from (Animate In Dropdown) As Slide Left

14> Click On OK

15> Click on Preview and see in web Browser

Axure Tool

How to create wireframe in Axure Tool

• Axure  is a wireframing, prototyping, flowcharting, and documentation tool. Use it to create and style diagrams, add interactivity and notes to diagram pages and elements, and publish finished designs to HTML for viewing via web browser.

        When you need to work in Axure

•  When feedback comes from many different sources
•  When things are likely to change frequently
•  When working with smaller, foundational “slices” of the experience, e.g. site navigation             or a  new section of content
•  When you need to get the experience right before you commit things to code.

         

          WHAT CAN YOU CREATE IN  AXURE?

•    Site Maps
•    Content Models
•    Prototypes
•    Documentation and Discussion

           While you start working with AXURE:-

•     Go beyond wireframes into interactive prototypes that can be tested and iterated before             development time is spent
•     Comment and discuss with distributed teams online
•     Annotate as you go, making it easy for devs to see your thought process and break down for     implementation
•      Work more efficiently with multiple pages, styles & masters
•    Create team projects that allow collaboration with other team members directly in the                document

Basic About Axure Tool

Create New File

Add Pages

Create Master Page

Create Navigation (Menu) 

Add links to Navigation

Add Navigation Link to Pages

Place Content to Pages

Preview your work in web browser

                                           Preview your work in web browser

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.