Overview of design features

Overview of design features

Step into the realm of app design and let your creativity take flight! Our app builder empowers you to craft visually appealing apps without the need for coding knowledge. In this guide, we will provide a design overview of Alphonso, presenting steps for app design and highlighting Alphonso’s design modules.

1. How to design your app?

Alphonso’s design module offers you several components and features that empower you to craft your own distinct app. We will unravel the basic steps of designing with Alphonso, including designing main components, saving, and previewing. 

1.1 Add and manage blocks

  1. The drag-and-drop functionality allows you to add blocks from the block pane to the layout preview.
  2. To reorder the blocks, drag and drop blocks in the layout preview.
  3. To design a block, hover over it and click Design. Please note that the design settings vary depending on each component.

1.2 Save your drafts and publish to mobile app

  1. After designing elements within a component, click Save in the design setting screen before moving to the next one. 
  2. When the app design process is complete, remember to execute one final Save draft action.
  3. Saving a draft affects only the design page, allowing you to make further changes. To make the current design available to all mobile users, click Publish to Mobile.

1.3 Preview your app

Previewing is an absolutely essential step during the design process. The preview button in the top right corner grants you the power to step into the user's shoes, seeing firsthand how every design element aligns with functionality and user behavior. For details about previewing your app, please see Preview the app.

2. What design modules does Alphonso offer? 

This part aims to provide a broad overview of Alphonso's design modules. The accompanying articles for each module are also attached to grant you access to a more comprehensive guide detailing the information on the components and instructions on their design.

2.1 Home 

Home is the foundation of your app's home screen, which is the first destination your app users are taken to by default when they open the app. With drag-and-drop functionality, you can easily design various blocks to suit your brand's aesthetic. For a guide on how to design home blocks, please take a look at Design the home screen. What’s more, we are thrilled to introduce a game-changing feature to our app builder, multi-home. This innovative addition is expected to provide unparalleled flexibility and customization to your app.

2.2 Bottom Tab

Bottom Tab is where you can configure the bottom tab to display up to five destinations at the bottom of a screen. A well-designed bottom tab ensures seamless and intuitive navigation, allowing users to access critical app functionalities effortlessly. For further information and instructions about how to design the bottom tab, see Optimize app navigation with bottom tab.
.

2.3. Categories

Categories are where you can organize products into main categories and subcategories. All categories in your web store are synchronized with Alphonso, so you can leverage them to design a two-level category structure. What’s more; the app builder offers you two design options, unlocking a range of possibilities. Enhance your understanding of the two options, and design steps by reading .


2.4 Product Detail

Product Detail is the module in which you can configure and design blocks to create a page presenting information about a specific product. With the provided blocks, you have various options to show the essential details of a product and configure the page according to your preferences. To explore the functionality of the product detail page and design steps, please take a look at Configure the product detail page.

2.5 My Account and Custom Pages 

My Account serves as a user-centric hub that allows customers to create and manage their profiles. Besides the built-in buttons such as Profile, Address book, and Order history, you can add other buttons to provide necessary information to your app users. For example, an FAQ page, a Contact Us form, or a returns form. You can create these pages via Custom Pages (see below). For further information on these two components, please visit Configure My Account page.
.

In Custom Pages, you have the flexibility to create new pages by adding images, videos, and text. Use custom pages to showcase your brand story, share store information, or create landing pages for specific campaigns. The versatility of custom pages enhances your app's ability to engage users and promote your brand. For details on this component and how to design it, check out Build custom pages.

2.6 Theme

Theme is the module that allows you to customize the app's color scheme and overall visual style to align with your brand identity. A great mobile app theme can give users a sense of familiarity and keep them aesthetically engaged. You can gain insights into the app theme with our complete guide to Set the app theme
.

Our app builder's design overview reveals a powerful platform that puts creative control in your hands, allowing you to design and build customized, high-quality apps that align perfectly with your business needs. Embrace the opportunity to create engaging and user-friendly apps that will undoubtedly make a significant impact on your business.

If you have any further questions about using my account, we’re happy to help! Please reach out to us at customer.success@jmango360.com!

    • Related Articles

    • Getting started with Alphonso

      Welcome to Alphonso - the advanced app builder designed to empower you to create exceptional mobile apps. This article will take you on a guided tour of the Alphonso app builder and the core pages in the app builder. By the end, you'll have a general ...
    • Welcome to JMango360

      Welcome to JMango360, a leading provider of cutting-edge e-commerce solutions. We are thrilled to introduce our latest offering, Alphonso, an advanced app builder designed to empower businesses to create exceptional mobile apps. In this article, we ...
    • Design the home screen

      In this guide, we'll explore the power of multi-home and various blocks that allow you to customize and enhance the visual appeal of your app's home screens. From showcasing product collections to adding interactive elements, these blocks offer ...
    • Build the category structure

      In this article, we'll share information about the Alphonso category tree and take you through the step-by-step process of creating your category page. The synchronized category structure automatically pulls the category tree from BigCommerce. In ...
    • Configure the product detail page

      In this article, we'll walk you through the introduction of product detail blocks how to leverage them to create an impactful product detail page. 1. About product detail blocks When you open the Product Detail module, you will see the default view ...