Skip to main content

Design

The following examples are used to compare design changes a Retool developer can make to improve usability, efficiency, utility and consistency.

Steps​

The following steps focus on improving the first iteration of a design to a second iteration.

  • Iteration 1 represents a starting point for a Retool App. This iteration has issues with usability, efficiency, utility and consistency.
  • Iteration 2, improves that design with a focus on usability and consistency.
  • Iteration 3, further improves the design with more usability/efficiency, utility and consistency.
IterationApp
One
Iteration One App
Two
Iteration Two App
Three
Iteration Three App

This example focuses on modifying the iteration one app to iteration two. Iteration three app is provided in its completed form.

Create a Retool account and login​

Create a Retool account and login to your account as shown below.

Import iteration-one app into Retool​

Next we will import the Retool iteration-one app into Retool. This application is meant to provide a working example with components, colors, alignment that is the starting point.

Iteration One App
  • Click the Iteration one Retool App link to download the JSON.
  • Once the template has downloaded go to Retool Home Screen, select Apps > Create > From JSON/ZIP. This will display a dialog to provide the downloaded file, the name of the app and the folder.
  • Select Upload a file and select the downloaded file iteration-one.json.
  • Specify an App name, iteration-one.
  • Leave Add to folder to None(root).

Establish consistency for containers​

For the app, all functionality will have its own container, with container heading of H4 and left alignment.

  • Select containerTitle2 via the Component Tree.
  • In the inspector go to Appearance > Styles > Background and adjust the color from #89F1D1 to #FFFFFF (white).
  • In the inspector go to Appearance > Alignment select the Left alignment
  • Change the font size from H1 to H4 by going to Content > Value and change # Users to #### Users.
  • Select containerTitle1 via the Component Tree.
  • In the inspector go to Appearance > Styles > Background and adjust the color from #10EEC4 to #FFFFFF (white).
  • The following image shows the impact of those changes in creating a consistent alignment, font size and a white background.
Container header background, font size and alignment
  • Next we select container3 in the Component Tree. Drag and drop container3 and place under the buttons Login as user and Deactive as user.
container3 removed from container2
  • Once container3 has been placed, resize to take the full width.
Resized container3

Establish consistency for buttons using alignment, sizing and colors​

  • Reduce the size of the Blue Logout button by dragging it to the same height as the Settings and Payout buttons.
Resize logout button
  • The Logout button should have the same size as Payout funds and Settings.
Resized button
  • Resize the logo by selecting it dragging it to make it smaller / occupy less columns.
Resized logo
  • Let's group the image1 and navigation1 components by selecting them by dragging the mouse to highlight them both.
Selected image1 and navigation1 components
  • Once we have selected them both, right-click and select Stack horizontally.
Stack horizontally
  • The tag for the two components changes to the label group1.
Stack created labelled group1
  • Drag the group1 stack to the top of the header as shown in the following image.
group1 prior to move
group1 post move
  • Select button1, button2, and button3 to the top of the header.
button1, button2, button3 moved
  • Select button2 so that we can adjust the color.
Adjust button2 color
  • In the inspector, examine the Appearance > Styles notice that the Background is set to Highlight.
Appearance settings
  • Select Highlight and the following palette selector will appear. Change the setting to Primary surface #FFFFFF
Palette selector
  • The button2 background is now set to white but it doesn't have a outline so it doesn't appear the same as Payout funds.
Updated Settings background
  • Select Appearance > Variant > Outline.
Appearance settings
  • Select Styles > + and specify a Border color of Generated.
Outline styles
  • The button2 will now include an outline making it consistent with Payout funds.
Button with outline
  • Now lets move to the two buttons below table1. Log in as a user and Deactivate user are labelled as button4 and button5. Rather than having them stacked vertically, we will make them consistent with the previous buttons which are organized horizontally.
Resize / align button4 and button5
  • Select button4 and reduce it size it size as shown in the following image. Select button5 and place it alongside/horizontal to button4, also reducing it size as shown below.
Resizing and alignment
Left alignment

Simplify table by removing alternate row color​

  • The last change to the application is the removal of the alternate "red" row highlight. Select table1 and go to Appearance > Styles. Currently this is set to Alternate row value of FF00000 45%.
Alternate row coloring
  • Select Styles and delete the Alternate row styling. The table will no longer have the red highlight alternating as shown in the following image.
Removal of alternate row color

Summary​

This lab briefly touches on design decisions and how to navigate the Retool interface to leverage grouping, alignment, colors, sizing, fonts and placement.

Usability Improvements​

The overall net affect of moving the containers into their own designated space helps improve usabililty making it more clear / discernable for the user what a container does. Additional improvements are made in iteration three of the application as shown in the previous section. In addition the reduction of colors helps decrease the inputs a user experiences when using the application.

Consistency​

The majority of this lab focuses on creating consistency in button sizing, coloring, and overall organization of where components are placed and aligned.

Completed Examples​

You can import the following examples and compare with what you have built.