Wireframes

Covered more in the web design topic a wireframe can be used to display what the user interface of a program or website will look like. Even if you use a text based language such as Python this may be very simple and would just show examples of the text a user would expect to see on the screen.

The wireframe below is a sample UI for the program of adding two numbers together. It shows the prompts that the program will display and the responses from the user.

Why make a wireframe?

A wireframe helps the designer think about the interface of a web page/application

  • It is not the final version!

  • It can be used for discussion with clients

It should show

  • Placement of elements

  • Text/images

  • Any other objects

  • Navigation links

Examples of different wireframe designs are shown below:

Interface Design Examples