After reading this article you’ll know how to:
Start working on your application design
Structure layout components while designing a page
Work with navigation components
Change the background of pages, color scheme, and styling of components in your application
Save style presets and new components to reuse them later
When you start building an application, you may wonder how to structure all elements of pages to later fill them out with content and enable multiple end users with different devices to comfortably view and interact with it. This article will walk you through the best practices you may apply while designing the user interface of the Betty Blocks application.
Information architecture and wireframing
One of the first things a citizen developer might think of when starting to design a new application interface is the information architecture (IA) that makes information findable and understandable within an application. It’s always reasonable to know a hierarchy of all elements on the website to design a successful sitemap, user flows, and navigation.
Here’s an example of a bookstore’s sitemap that helps to comprehend some essential points like the information needs of users, the application’s content, and organizational goals. |
 |
Next, goes wireframing which pushes the application’s structuring to the next level enabling stakeholders to visualize the blueprint. Wireframes are basic design layouts that display information about your product. This schematic drawing could be done using various tools from pen and paper to such applications as Figma, Balsamiq, or Adobe XD. |
Creating a page layout
Arranging the elements on the page might be tricky in some cases. As you design your application, it’s essential to structure a layout to achieve consistency and build a proper hierarchy within your application. Each web page consists of two important elements: layout and content. The layout defines the structure of a page, while content is something that is displayed within this structure. Of course, in order for content to be positioned properly, we first need to make sure that the layout is well-prepared and arranged. Therefore, the best practice is to define your user interface structure (using such tools as Figma, Azure, Proto.io, etc) before you start building your application.
In most cases, the quickest option to create a simple layout is to use the header and footer page template. It has a pre-created grid out of the box that keeps the header and footer to their initial positions: top and bottom accordingly. As you can see from the screenshot below, the grid has different kinds of options to apply. There are also different types for sizing; for example, when you want the grid to be reduced in size when you look at the page from your phone. When you check it on a tablet, it makes the grid component very responsive. |
By applying the grid component to your page, you create an invisible fixed net for the components to stick to their proper positions. Even when elements are separated from one another, a grid doesn’t let them be scattered all over the page, no matter if it’s a desktop, tablet, or mobile device. |
Working with columns
When it comes to designing a user’s interface, the most commonly used components are columns. These are blocks that enable the structuring of your page’s layout, and they also define the width of your design. Within columns, we can put all kinds of elements as content, data, forms, buttons, etc. Besides columns and grids, there are also containers and boxes.
By default, the number of columns per page width is 12 on a desktop, 8 on a tablet, and 4 on a mobile device. So, depending on the type of content displayed within the user interface, you may divide the page’s width on the desktop, for example, into two (6+6), three (4+4+4), or more columns. In this case, your content will properly fit the page’s sizes. |
You can view and change the column’s width, alignment, and styling in its options. |
Columns, as well as grids, boxes, and containers, can be turned into partials (1) or saved as new components (2) to be later reused on other pages. This might come in handy if you are willing to apply a consistent design across pages. Of course, you are always welcome to check how the user interface you’re working on is displayed on different devices by pressing small icons at the bottom of the options (3). |
Boxes
Boxes are layout-type components that are used to create empty containers for your page. Once you fill a box with other components, it allows you to display these components in the way you want. For example, you can change the alignment of such elements as buttons. Again, the options here are similar to the ones of a column component.
Of course, each button will also have its own styling options like changing outer space. |
Find some information about layout components in this article. |
Layout examples
Here are some examples of layouts:
The desktop version of a page with the card and list view template applied |
The mobile version of the same page template with a navigation tree menu |
Some examples of setting up and building your page layout could be found here.
Navigation
Web applications’ navigation plays an essential role in user experience as it allows visitors to navigate from one page to another without facing obstacles. Within the well-built navigation, each user should be able to find the relevant information in a few clicks. Certainly, there are various kinds of ideas to come up with while creating a navigation in your application. In this chapter, we will go through the use of some of the navigation components to give you general ideas of what you can apply.
Navigation bar
As you add the navigation bar component on top of your page, it will automatically come with a few buttons, that you can duplicate, delete or stylize in all kinds of ways. On the desktop overview, they will be positioned horizontally by default. |
However, in the mobile version, these buttons are automatically converted into the navigation tree menu, just like in the layout example in the previous chapter. |
Breadcrumbs
In some cases, when you have some deeply nested, you may use breadcrumbs to make navigation easier and more consistent. This component is used to apply secondary navigation schemes that use breadcrumb items to reveal the user’s location within an application.
Drag and drop the breadcrumbs component onto an empty column (usually it is placed in the top left corner of a page, just below the navigation bar) and you will get a simple navigation scheme. By choosing a separate breadcrumb item, you will be able to set the name, page to be redirected to by clicking, text color, etc. |
Other navigation components
There are other navigation components with their own options and peculiarities. We recommend experimenting with them to get a more clear understanding of what will suit your application best.
For example, if your web application has a registration flow with some steps the end user has to go through, the best option is to pick up the stepper component. |
When you need to alternate views within the same context, it’s essential to use tab components. However, as your pages become bigger and more complex, the page builder performance might decrease a lot. In these cases, we recommend using buttons that can be styled in a similar way as tabs or steps but include redirection to separate pages.
Example of using the tabs component within a profile details page template: |
Color scheme
One more essential step while designing your application is choosing the color scheme for various elements and components. The primary tool in this case is the theme builder that provides multiple options for customizing your application.
Working with the theme builder is well explained in this article.
Besides changing the color scheme in the theme builder, you can also set various colors for separate components, like data tables, boxes, buttons, etc. |
Background colors
Let’s say, you would like to play around with background colors for your page, but you’re not sure which order of components it’s better to pick up in order to do that properly. For this case, it’s better to have the box under the rest of the components on your page.
Choose the box component and open the background tab in the options overview. In most cases, it’s better to set a theme color to #F5F5F5, for example, because light, medium, accent, etc. colors are used by default for a lot of other components. In the following example, we will set the background color to black with a 10% opacity so that as the result we don’t get issues with input components which get nearly invisible borders. The background URL enables you to set the custom image. Look through the other options provided there. |
It’s also possible to change the background color of the data table itself. Go to the styling tab in options and switch the color of the background, so that your table sticks out of the box. |
Changing and saving component styles
If you apply the color scheme via the theme builder, such components as a navigation bar and buttons will be changed according to the primary color of your application. Nevertheless, you can change the colors of these components separately.
To do this, click on the button and go to the styles overview. There you’ll find various styling options, in particular, changing the background color of the button. |
Also, for the sake of style consistency, we highly recommend using:
|
|
After you’ve done designing your page, it’s possible to save it as a page template. In order to make your page reusable, just click on the ‘Save as template’ button and fill in the name and description for your new template. You can also make it available in the Block Store. |
All in all, the Betty Blocks platform provides multiple styling options to experiment with and this article only covers some common use cases. It’s essential that you dedicate enough time to designing the user interface of your application. Investigate, customize, discover new features, and don’t forget to have fun!