The GoodBarber Blog

Step by Step to Create Restaurant Apps

Written by on Wednesday, February 22nd 2017 14:07

Step by Step to Create Restaurant Apps
In our last step by step guide we walked you through the main steps to create the best app for travelers, to promote a city, a region or any tourism business really. Today, leisure is still the order of the day, with restaurant apps on the menu!

Let's get started!

1. Choose a theme

Choosing a theme is the first step to create your Beautiful App. In your back office, you will find a choice of over 25 different themes (and counting) created by our designers. The theme you choose is just a starting point, you’ll be able to customize and adjust its settings completely.
Step by Step to Create Restaurant Apps

We recommend picking a style which is close enough to the color scheme or the look and feel you want for your Beautiful App. For instance, for this app, we started with the theme "Green".

2. Build your Home

The Home is the first screen users will see when opening your app. It is therefore an important feature of your app, both visually and practically. With GoodBarber 4.0, the Home lets you choose which content to highlight upon opening the app. It also lets you display links towards the primary destinations making up your app.

The modular home introduced by GoodBarber 4.0 is made up of two different kinds of widgets, content widgets and navigation widgets (links)—a total of 66 widgets has been developed so far. Templates associated with widgets have a mobile, tablet and desktop declination.

Here you can see that we’ve added our first widget, a Content widget, to feature an mCMS articles section (our restaurant’s menu):
Step by Step to Create Restaurant Apps

After selecting a template (Banner > Minimal), we customized the font used to display the Title as well as the number of items displayed, from 3 to 4.
Step by Step to Create Restaurant Apps

Now, let’s add another Content widget to feature our Events, and select a template for it, List > Card.
Step by Step to Create Restaurant Apps

We then proceeded to add Links, the first one towards our About section:
Step by Step to Create Restaurant Apps

As you can see, according to your choice of template (here, Banner > SmallSlideshow) it is possible to show a button and edit several design settings (the font, the copy, etc.):
Step by Step to Create Restaurant Apps

We added another Navigation widget with another set of links. We created a distinct widget in order to enable a different template, List > VisualIcon. As you can see you can feature internal links (towards sections), as well as external links (towards your Facebook page for instance):
Step by Step to Create Restaurant Apps

Our Home now features a total of 4 widgets.

3. Build your Menu

With GoodBarber 4.0, the Menu is used for secondary navigation within your app. Your Home already provides points of entry towards the sections of your choice, as well as call to actions, which is why you can even choose the option to not display a Menu at all. If you do choose to enable a Menu (or Browsing mode in your back office), you can choose between 7 different types of “menus” or browsing modes, to further distribute traffic within your app. 

Building the menu can be achieved independently of the number of sections in the app for complete control over the navigation of your app. Your menu can feature links and shortcuts, to point towards destinations, and titles and separators, to prioritize information within the menu (these two serve design purposes).

Here we’ve selected the Slate template: 
Step by Step to Create Restaurant Apps

We’ve added the restaurant’s logo in the Header along with Shortcuts (Loyalty Card, Settings, Call), we’ve featured our main sections in the Body, and a Copyright in the Footer.

4. Add your Content

Up until now, using the Sample content provided in the app can be a convenient way to achieve a great design without having an empty app. But here are a few examples of how to proceed when you're ready to start adding your own content. 
  • Here we used an mCMS articles section to display the restaurant’s menu. We then customized the list of articles view, choosing a full screen display template (template n°8).
Step by Step to Create Restaurant Apps

  • Another key feature you might want to enable for booking purposes, the Form section. You can add fields tailored to your needs and as usual, customize the design.
Step by Step to Create Restaurant Apps

Now, for business related apps, you will find more features you can install in our Add-Ons store. This is where you can activate the Loyalty Card Add-On for instance.

Note that it is tied to the Authentication feature and is available with our Advanced plan only.
Step by Step to Create Restaurant Apps

Once the Add-On is installed a new Business tab will show in your back office menu.
Step by Step to Create Restaurant Apps

From there, you can edit the settings as well as the design of your loyalty program. From selecting a template to customizing the icons for the points, the colors and more.
Step by Step to Create Restaurant Apps

Almost there! Two more elements to add before your app is ready!
Step by Step to Create Restaurant Apps

5. Launching screen and app icon

The launching screen is the first thing users will see when opening your app (before the Home). It will be displayed for a few seconds while your app’s content is loading (in a browser as well). To make a good first impression, pay attention to the specifications of the different screen sizes, to ensure optimum display.
Step by Step to Create Restaurant Apps

For the app icon, which will be shown on the home screen of users, you also need to comply with different dimensions, for the different operating systems and for web app specifics (such as the favicon). Creating the right app icon can be tricky as you have very little room for creativity, plus it needs to be self explanatory. For instance, you might need to tweak your logo somewhat, so that it adapts to a square format, and don't forget to enter the name of your app.
Step by Step to Create Restaurant Apps

- Learn more about the many options to set up your Home with this article: the Modular home.
- Discover everything there is to know about Browsing modes, with this article: Menu and secondary navigation.


Step by Step to Create Restaurant Apps

In the same section
< >

Wednesday, March 29th 2017 - 17:53 PWAs - Technology Fundamentals and Powerful Use Cases

Monday, March 20th 2017 - 08:00 PWAs - Progressive Web Apps explained

Define your App Concept Ebook

Sign up for our newsletter

Be the first to know about our new features, discount coupons, DIY tips and more!

Scan the QRcode to download the GoodBarber News App!

Available for iOS & Android