Why use design tools?
- Design tools help to plan a product before it is built. The client can see the ideas, and problems can be found and fixed early, while changes are still quick and cheap.
Flowcharts and data flow diagrams
- A flowchart shows the steps in a process, in order, using standard symbols: a rounded rectangle for start and end, a rectangle for a process, a diamond for a decision, a parallelogram for input or output, and arrows for the order.
- A data flow diagram (DFD) shows how data moves through a system. It shows external entities (people or organisations outside the system, such as customers), processes, data stores (such as a file or database) and data flows (arrows labelled with the data).
- A level 0 DFD shows the whole system as a single process. A level 1 DFD breaks it down into its main processes.
Visualisation diagrams and wireframes
- A visualisation diagram is a sketch of what a product will look like, such as a poster or a screen, with annotations about colours, fonts, images and layout.
- A wireframe is a simple outline of the layout of a screen or web page. It shows where things such as the menu, text, images and buttons will go, without detailed design, and can show how the screens link together.
Choosing a design tool
- Flowchart: the steps and decisions in a process. DFD: how data moves. Visualisation diagram: how a product will look. Wireframe: the layout of screens and the navigation between them.
- Advantages: ideas are easy to share and check, and problems are spotted early. Disadvantages: they take time to create, some need specialist knowledge to understand, and they may not show every detail.
Key terms
- Design tool
- A diagram used to plan a product before it is built.
- Flowchart
- A diagram showing the steps and decisions in a process.
- Data flow diagram
- A diagram showing how data moves through a system.
- External entity
- A person or organisation outside a system that sends data to it or receives data from it.
- Data store
- A place where data is kept in a system, such as a file or database.
- Visualisation diagram
- An annotated sketch of what a product will look like.
- Wireframe
- A simple outline of the layout of a screen or web page.
- Annotation
- A note that explains part of a design.