Looking for Ionic kit for you platform?
Ionic Design Kit, built on a design base of Ionic Framework components, simplifies app development by providing designers with a range of pre-made elements. Designers can effortlessly pick and place elements, eliminating the need to create components from scratch. For developers, this means no complex coding – all components are sourced from the Ionic Framework. The result is a speedy, efficient, and collaborative process, making the Ionic Design Kit essential for both designers and developers.
The Onboarding Screen is a vital feature in mobile and web applications, providing users with a guided introduction to key app functionalities. A well-designed onboarding experience enhances user engagement, improves retention, and ensures a smooth transition into the app. Using a gallery-based multi-step onboarding process, users can select their interests to better benefit from the app’s offers, and navigation tips in a visually appealing way.
This guide will walk you through the steps to design and implement an Onboarding Screen using the Ionic Design Kit. By leveraging its gallery components and the Ionic Framework, you can create an engaging, interactive, and user-friendly onboarding experience that leaves a lasting impression.
1. Install Ionic CLI with the command
Creating a project with the Ionic CLI
npm i -g @ionic/cli
2. Create a new project
To create a new project, run the following command.
ionic start onboarding blank --type=react
3. Get inside the project directory
cd onboarding
4. Create an Onboarding page
Create page Onboarding.tsx inside src/pages and add code.
import { IonPage } from '@ionic/react';
const Onboarding: React.FC = () => {
return (
<IonPage></IonPage>
);
};
export default Onboarding;
Please make sure that you've added routing in src/App.tsx for the created page. All Ionic framework components that will be used below should be imported similarly to the IonPage component.
5. Select the layout structure
For convenience, we will be using the layout structure recommended by Ionic for all screens. This allows us to add header code and content inside the IonPage.
<IonPage>
<IonHeader>
...
</IonHeader>
<IonContent>
...
</IonContent>
<IonFooter>
...
</IonFooter>
</IonPage>
6. Create the header with a title
The header section of the component is created using the IonHeader tag, which acts as a container for the toolbar. Inside the header, an IonToolbar element is used to provide a consistent and responsive top bar. The toolbar contains an IonTitle element, which displays the text 'Logotype' as the title of the page. The toolbar acts as a flexible wrapper for the title and other components that may be added, like buttons or icons. This structure ensures that the title remains fixed at the top of the page while maintaining a professional and clean look.
...
<IonHeader>
<IonToolbar>
<IonTitle>
Logotype
</IonTitle>
</IonToolbar>
</IonHeader>
7. Add progress bar with state management
The progress bar is implemented using the IonProgressBar component, which takes a value prop to indicate the current progress. In this case, the progress value is managed by React’s useState hook. The line const [progress, setProgress] = useState(0.4) initializes the state with a value of 0.4, meaning the progress bar will start at 40% completion. This value can be dynamically updated during the onboarding process by using the setProgress function. The progress bar itself is placed within the header, giving users visual feedback on how far they are in the onboarding process.
<IonHeader>
<IonToolbar>
<IonTitle>
Logotype
</IonTitle>
</IonToolbar>
<IonProgressBar value={progress}></IonProgressBar>
</IonHeader>
This concludes our work with IonHeader, and the following sections will cover working with IonContent.
8. Display welcome message and instructions
The main content section of the onboarding screen contains a welcoming message and brief instructions. It is wrapped inside an IonContent element to make the content scrollable and accessible. Two IonText components are used, both styled with the ion-text-center class to align the text centrally. The first text block contains an <h1> heading with the greeting 'Welcome!' and additional padding on the top. The second text block contains a paragraph with a brief instruction: 'Select your interests. You can edit these later in settings.' The use of <br /> for line breaks ensures the message is displayed clearly and concisely. This part of the layout helps to create a welcoming and informative introduction to the onboarding process.
...
<IonContent>
<IonText className='ion-text-center'>
<h1 className='ion-padding-top'>
Welcome!
</h1>
</IonText>
<IonText className='ion-text-center'>
<p>
Select your interests
<br />
You can edit these later in settings
</p>
</IonText>
</IonContent>
9. Build interest selection grid
The interest selection section uses an IonGrid to organize clickable interest items in a structured manner. Inside the grid, an IonRow wraps the interest items, while each item itself is rendered as an IonCol with a fixed size of 4, ensuring that three items fit per row. The grid is generated dynamically using the Array.from method, creating an array of 12 elements. The map function iterates over these elements to generate each column, where the index is used to define the image path and label. An array of titles defines the interest names, which correspond to each column's position. Each item displays a thumbnail image inside the IonThumbnail element and the title inside an IonLabel. This dynamic and modular approach allows for easy scaling if the list of interests needs to grow or change.
<IonContent>
...
<IonGrid className='ion-padding-start ion-padding-end'>
<IonRow>
{Array.from({length:12}).map((_,index) =>{
const titles = [
"Astronomy",
"Science",
"Art",
"Crafts",
"Photography",
"Travel",
"Food",
"Nature",
"History",
"Sport",
"Tattoos",
"Anime",
];
return (
<IonCol key={index} size='4' className='ion-text-center'>
<IonThumbnail>
<img src={`g-${index + 1}.png`} alt="image" />
</IonThumbnail>
<IonLabel>
{titles[index]}
</IonLabel>
</IonCol>
)
})}
</IonRow>
</IonGrid>
</IonContent>
10. Add footer with navigation buttons
The footer of the onboarding screen is created using the IonFooter tag, which remains fixed at the bottom of the page. Inside the footer, an IonToolbar wraps the buttons, ensuring they are displayed consistently across devices. The navigation buttons are contained within IonButtons components, each positioned at opposite ends using the slot attribute ('start' for 'Skip' and 'end' for 'Next'). The 'Skip' button allows users to bypass the onboarding process, while the 'Next' button moves them forward. The 'Next' button also includes an icon, represented by IonIcon with the arrowForward icon slot set to 'end', indicating forward movement. The use of padding classes ensures that the buttons are spaced appropriately within the toolbar, maintaining a balanced and clean design.
<IonFooter>
<IonToolbar>
<IonButtons slot='start' className='ion-padding-start' >
<IonButton>
Skip
</IonButton>
</IonButtons>
<IonButtons slot='end' className='ion-padding-end'>
<IonButton>
Next
<IonIcon slot='end' icon={arrowForward} />
</IonButton>
</IonButtons>
</IonToolbar>
</IonFooter>
Thank you for joining us on this exciting journey thus far. Stay tuned for more guides in our comprehensive series, where we'll not only delve into various aspects of mobile app development but also showcase how the Ionic Kit can be your game-changer.
Are you prepared to elevate your Ionic experience? Explore the advantages of incorporating the Ionic Design Kit for intuitive designs and seamless development. May your coding journey be marked by continual innovation and triumphant achievements!