Flowcharts & Wireframes

Flowcharts

A flowchart is a diagram that represents a process. The process is shown in steps that are connected by arrows or lines. They are used in analyzing, designing, documenting or managing a program. Many designers also use this process as a way of analyzing and organizing their prototypes of products.

This flowchart is quite basic, it is about a patient going to the doctors and then leaving. The flowchart has only one starting point and one end point. This makes it easier for the user to read and follow the process.

The flowchart also includes decision points where the user is interactively involved and has to make decisions.

Website wireframes are also quite similar and work with flow charts. Wireframes are usually rough diagrams and visual guides that represent the basic frameworks of a website. The wireframe shows the arrangement of the websites content, for example the way it navigates and how the different hyperlinks will work together. Business analysts, user experience designers, developers, visual designers usually create Wireframes.

Wireframes

...................................................

Here we have a flowchart and wireframe for a mobile app. The wireframe shows the basic structure of what will be on each page of the app. This will help the designer create the app much quicker and more easily.

This example is quite detailed compared to other wireframes.

Click on the image to view larger

Click on the image to view larger

Hotglue flowchart

I decided to create a basic flowchart of my hotglue. As my hotglue starts on the page 'Authorship & Interaction' I have put that on the top of the page. The chart also shows a rough hierarchy order.

BROWSER BASED NARRATIVE EXAMPLES

Module: Authorship & Interaction
Ba (Hons) Graphic Communication Design
University of Westminster

Bhavika Gajipra