Want to keep learning?

This content is taken from the Raspberry Pi Foundation & National Centre for Computing Education's online course, Programming with GUIs. Join the course to learn more.

GUI layouts

In Week 1 we learnt how to make a simple GUI and about the different kinds of widgets it can contain. This week we will be looking at how to lay out the widgets in a GUI and how to change a GUI’s design. In this step we will discuss why design is important and consider the different design requirements a GUI might have.

The importance of a design

One purpose of a GUI is to make it easier for users to interact with computer software. The design process is a big part of enabling this; if the layout of your GUI is confusing or counterintuitive, users might not use it correctly.

Different GUIs will require different designs — a text editor will need to appear different to a virus warning or a survey. There are lots of elements to consider, so I’ll start with an example.

Think about the buttons in a lift. There are lots of design elements that make using a lift simple and intuitive:

  • The numbers are in numerical order, making it easy to find the right floor
  • Commonly used buttons, for example for the ground floor, might be emphasised with a different colour or border so they are clearly identifiable
  • The emergency button is often coloured red and needs to be pulled not pushed so that lift users can’t activate it accidentally
  • Some buttons may only be activated under certain conditions (such as when someone has used a key card) to provide restricted access to their floors

An image of a lift control panel with the ground floor separate, the phone button protected by a ridge, and a series of key holes underneath.

Many of these elements can be incorporated into a GUI as well. You might want to arrange your widgets in an intuitive order, direct users towards particularly important sections, or even lay out your GUI so that a user will have to think carefully about their interaction with a widget, and can’t use it accidentally.

Using guizero to design your GUI

GUI libraries have many built-in features that enable you to arrange multiple widgets in an app, change the colour, size, and font of text, add pictures, and even add widgets that allow users to change these features themselves.

This week we will look at how to do all of these things using guizero.

Top tip

As we saw last week, drawing out your GUI is a really useful exercise. This process requires you to think about your layout and allows you to play around with different designs before you start coding. This will help you to write your code more efficiently and will probably reduce the number of edits you have to make afterwards.

Challenge

Sketch a design for a pop-up alerting a user that they have a new email (you could use pen and paper, MS Paint, or any other medium you feel comfortable working in). Are you going to include a Text widget, and if so, what will it say? How will the user open their email using the pop-up? You will also need to consider how you’ll use the colour scheme, fonts, and text sizes to draw users towards useful actions. Finally, how are you going to arrange all of your elements?

Post a link to your design in the comments below. What elements of other people’s designs do you particularly like? Reply to their comment to tell them.

Share this article:

This article is from the free online course:

Programming with GUIs

Raspberry Pi Foundation