Hello, everyone today we are going to show you “How to Design Salon App in Adobe Illustrator”. In this tutorial, you will learn how to the mobile app. Don’t worry if you are new here this is a step by step tutorial also have a screenshot of each step so you can practice it by yourself by downloading the project Ai file.
An app is a way to bring your consumer closer to your products or services. It allows customers to easily interact and make transactions without physical limitations. To have positive results, the app must have a focus on user usability and navigability.
Resources
Images used:
Fonts used:
- Arial font Family
- Raleway Family
Step 01
- Open the Adobe Illustrator software.
- Go to the “File” menu and click on the “New” option.
- Select the size of the document and click on ok.
- Take the “Rectangle” tool from the “Tools Bar”.
- Draw a “Rectangle” on the artboard and make the corner rounded.
- Again take the “Rectangle Tool” and draw two white rectangles as shown in screenshot 1.5.
- Now make the login button by using the “Rectangle Tool”.
- Take the “Type Tool” from the “Tools Bar”.
- Add the text to the “Login Page” also add your brand “Logo”.
- Click on the “Art Board” option in the “Layers Panel”.
- In the “Art Board” panel click on the “New Artboard” option to add 2nd
Step 02
- Again take the “Rectangle Tool” from the “Tools Bar”.
- Draw a rectangle at the top of the artboard as shown in screenshot 2.3.
- Draw another thin “Rectangle” at the lower side of the artboard.
- Make sure that the corners of the rectangle are rounded.
- Fill the rectangles with any “Color” you want.
- Now go to the “File” menu and click on the “Place” option.
- Place the salon “Icons” on the lower side rectangle.
- Draw a “Search Bar” on the upper side “Rectangle” with rounded corners.
- Draw a small circle above the search bar and also place the “Shopping Option Icon”.
- Take the “Rectangle Tool” and draw a rectangle in the center of the artboard.
- Draw a big rectangle and place it under the app menu bar as shown.
- Make “Multiples Copy” of the “1st Rectangle” and arrange all the rectangles as shown in 2.11.
- Take the “Type Tool” from the “Tools Bar”.
- First, add “User Name” at the top parallel to the “Profile Picture”.
- Under the name add “Welcome Note” and “Search” text to the “Search Bar”.
- Add the “Catagories” in the app like “Top Services, Best Specialists, etc”.
Step 03
- The “Profile” page is done now we have to design the “Choose Services” page.
- Take the “Rectangle Tool” from the “Tools Bar”.
- Draw a “Rectangle” on the top of the artboard.
- Draw another “Rectangle” on the 1st rectangle but the size must be smaller than the first one.
- After the “Heading Portion” add the “Services” options.
- To do so, take the “Rectangle Tool” from the “Tools Bar”.
- Draw a “Square Rectangle” as shown in screenshot 3.4.
- Select the “Square Rectangle” and press “Ctrl+C”.
- Now press “Ctrl+F” to make multiplies copy and arranges all.
- Now we need to add a menu bar the same as we add to the “Profile” page.
- So go to the “Profile Page” select the “Menu Bar” and drag it to the “Services Page”.
- Now take the “Type Tool” from the “Tools Bar”.
- Add text to the “Services Page” as shown in 3.8.
- If you want to add “Images” so go to the “File” menu and click on the “Place” option.
- You can find how to add images in the previous tutorials.
- Finally, your App is ready.
This is how the final result looks like
