Design

Identify the Data Types

Identify the different data types needed when designing a solution to a problem. At National 5, the data types are:

Example

A program is required to store a user's forename, surname and whether or not they own their own property.

State which data types would be used in this program.

Solution

Pseudocode

Pseudocode is a way of designing the steps of a program using phrases that resemble lines of program code.

Pseudocode is not a formally-defined language - there are different ways each step of a problem can be written. The following examples show how pseudcode can be written differently to represent the same step of a problem.

Example

A program is required to repeatedly display 'Hello World' until the user enters 'stop'. Use pseudocode to design this program.

Structure Diagrams

Structure diagrams graphically show the steps needed to solve a problem.

Structure diagrams must be read from the top down from left to right.

Structure Diagram Symbols

Process - Used to show that a process is needed.

Loop - Used to show that repetition / iteration is taking place.

Selection - Used to show that there are different outcomes through conditional statements.

Pre-defined function - Used to make use of a pre-defined function (Round, Len, Random)

Example Diagrams

This diagram represents a program that:

Flowcharts

Flowcharts are a way of designing the steps of a program graphically.

Each step in the process is represented by a symbol containing a short description. 

he different flow chart symbols are shown below.

Flow Line - Shows the direction of flow within your program


Terminal - Shows the start and end of a problem

Initialisation - Declares variables and arrays or assigns a value


Input / Output - Show data input or data output

Decision - Shows that a decision is to be made, with branches for different outcomes. Used in loops or IF statements.

Process - Used to show that a process is needed.

Pre-defined function - Used to make use of a pre-defined function (Round, Len, Random)

On-page Connector - Used if the flowchart has reached the bottom of a page.  The connector lets the chart continue from another point.

Example Diagrams

Example

The program adds up three numbers entered by the user, and stores the answer in the variable total.

UI Design

The purpose and functional requirements generated during the analysis phase are also considered when designing a user interface.

A user interface is the part of software that the user sees and interacts with. The user interface often includes features that allow the user to input data and includes areas where the user will see on-screen output.

When designing user interfaces, it is common practice to create wireframes.

Wireframes

A wireframe can be used to design the user-interface of a program. The wireframe should show the screen elements and layout, including any inputs and outputs.

Example

Use a wireframe to design the user-interface of a program which: