GoodBarber 4.5—Managing your app's design

This menu is entirely dedicated to your app's header, which contains action buttons and of course your application's title. 

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. 

You'll also find the option to customize your header's background; you have a few choices available:
- 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. 

Finally, like for the Menu icon, you can customize the Back icon that will that will be shown in the deeper pages of your app. 

Here's where you're going to create the first elements your users will see.
Whether it's for the icon or splash screen, you have two choices: 

- Use the creation wizard
- Import your own images

In the example below, we created the app's icon with the wizard, and you're going to see that this process lets you create your elements very easily. 
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. 

Now we'll get into the part that's the equivalent of the Content menu that we showed you. You'll find the list of all your app's pages inside, which you can enter to set up each design option. 

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. 

2) Articles
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:
- Comments
- Share
- Font size
- Favorites
- Go to the next article

You also have the option to edit the HTML code by structuring the page template with the tags [TITLE], [DATE], [AUTHOR] and [CONTENT].

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. 

You can also create your Home from this new Design menu, and organize an extra level of navigation. All the details on creating the Home can be found here. 

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.