GoodBarber 4.5—Managing your app's design
Written by Muriel Santoni on
Here are a few design options that you can manage from this new menu detailed below:
Customize your app's title or logo
The first part of the menu concerns the Menu icon, which is present in the header so that the user can open the app's main navigation mode. Here you can customize this icon and choose its color.
Then comes time to display your application's title. This can be done through simple text, which you can choose the font, size, and color of.
You can also opt for a logo, and just import the image of your choice in 600 x 148 px format. Once your title has been added, you just have to choose whether you want it to be aligned in the center or to the left.
- use one color
- use a color gradient
- use the images of your choice, respecting the indicated sizes so that they appear perfectly on all screen types
To take your header's customization a step further, taking every last detail of your app's user experience into consideration, the next part of the menu will allow you to add links to your header that will be displayed to the right of the title. Select the link destination, the icon, the color, and voilà! In the example below, we decided to add a link to the user's profile and the app's contact page. What's added here can vary depending on the project. Don't forget that if you want, you can activate the "Display link title" option, that will show the title of the link next to the icon on the tablet and desktop version of your app.
Create your app's Icon and Splash screen
Whether it's for the icon or splash screen, you have two choices:
- Use the creation wizard
- Import your own images
To get started, go to the icon preview and modify the text inside the icon, as well as the app title just below, that will be displayed on the welcome screen of your users' devices.
Then, in the panel on the right, you have the option to modify the icon's design and to choose the font, color, and effects that will be applied to the icon text. Finally, all that's left to do is customize your icon's background by applying one of the following options:
- one color
- a color gradient
- an imported image of your choice respecting the indicated format
For the splash screen, we decided to show you the Custom option, which means directly adding the image. Importing your image is easy—the panel to the right indicates all the image sizes necessary for optimal splash screen display, on any screen.
Manage the design of your pages
In the example below, we've decided to show you the design setup of an Articles section. It is possible to design several parts of Articles pages:
1) The list of articles
Here you can choose the template for introducing your list of articles. Define the colors and fonts as well as the information appearing in the list (thumbnails, publication date, article summary, author, etc).
Finally, choose the default thumbnail to be used for your articles, its format, and its alignment.
Like with the list of articles, you can choose the display template, the colors, and the fonts. You can also customize the toolbar by choosing to or to not display the following functionalities:
- Font size
- Go to the next article
3) Categories and comments
If you've activated the categorization of your items, you can customize the way your users will see your categories here. You just need to select the menu templates that you want to use and choose the colors. Easy!
Similarly, you can customize the way the comments page appears from this menu.
Organize your home, manage your app's global design, and choose your navigation mode
The Design menu also contains the Global Style menu (which we mentioned a few weeks ago), that allows you to manage the overall design of your app and also to create and save your own themes.
Finally, don't miss out on the opportunity to set up your app's navigation mode which we showed you here.