Designing a GUI

YouTube Video

Video Materials

One of the first questions we may consider when adding a GUI to our programs: how do we go about designing a GUI in the first place? There are many ways to go about this, but one of the easiest and most accessible is also the simplest - pen and paper.

GUI Sketching

GUI Sketch GUI Sketch1

A common technique used when developing a GUI for a program is to simply sketch your design on paper. This allows you to quickly see how the overall program would look, and it can help you figure out how you’d like to lay out your content and elements on the screen.

Once you’ve got a basic idea of what you’d like your GUI to look like, there are a couple of next steps that you can follow to further refine your design:

  1. Label each element on the screen with the type of element that best performs that function. Would it be a button, label, text box, combo box, or something else? We’ll cover some of the available elements that are common to each framework later in this chapter.
  2. Review the layout of the program. Can it be easily divided into section, or perhaps rows and columns? Each GUI framework handles layouts a bit differently, but having a good idea about what you want the layout to look like, and which controls can be resized or moved as needed is a great thing to know.

GUI Mockup

Mockup Mockup

Another type of tool we can use to develop GUI prototypes is a simple drawing tool. Both Microsoft Visio (available through the Azure Student Portal) and the Diagrams.net drawing app are both well suited to develop GUI prototypes. In fact, they even include some items you can use to mimic what a real GUI would look like. The picture above was created using a few of the built-in mockup designs present in Diagrams.net

Once we have a good idea for what our GUI should look like, we can start building it.

Terminology

Here are a few terms and acronyms that are used in the GUI world that are important to understand.

  • UI - User Interface (Design), typically describing the look and feel of a GUI.
  • UX - User Experience (Design), typically describing how the UI behaves as users interact with it.
  • Accessibility - how well users of various skill levels and abilities can interact with your product.
  • End User - the eventual user of the finished product.

Resources

Here are some helpful resources that discuss GUI design:

  1. UI/UX Sketching Techniques 101 from UX Collective
  2. The Difference Between UX and UI Design - A Beginner’s Guide from Career Foundry
  3. User Interface Design Basics from Usability.gov

  1. https://uxdesign.cc/ui-ux-sketching-techniques-101-7e91d854ae3d ↩︎