Have you ever looked at a mobile application and thought to yourself,
“WOW this looks nothing like Instagram. What were they thinking?
Who even designed this?”
Well the answer is probably no one.
Cross-platform frameworks have made developing mobile applications as easy as saying, “I’ve seen HTML and CSS before!” but just because it works doesn’t mean it’s gonna look good doing it. That’s where I come in.
As a designer and UX engineer designing applications within the Ionic Framework for almost three years I’ve found a few easy ways to get your app looking as fresh as Febreze: Meadows and Rain smells.
So let’s talk about my five most used tricks to make our Ionic Applications look like the prettiest girl at the ball (the ball being the App Store and Google Play).
1. Become Your Own Creator
If you’re not design savvy but want to play around with layout outside of code, Ionic Creator is a great option. Creator lets you be as in depth as possible by allowing you to:
- Add multiple pages and click functions
- Add and edit Ionic components
- Add additional CSS classes for customization
- Edit the application’s theme as a whole
- Export HTML and Angular
(if you’re willing to splurge on a Pro Account)
You can also get a little more heavy with Ionic Playground which allows you to edit and demo code directly in your browser!
Check out Ionic Creator here
Check out Ionic Playground here
2. Make Ionic Components Work for You
Using Ionic’s HTML components saves a ton of time and severely cuts down on the HTML and CSS you have to write. However, they are standard components and can quickly give your application a stale and generic feel. You can make these components your own by:
- Adding additional CSS classes for ultra customization
- Influencing Ionic predefined classes to make them what you need them to be
Check out the components for Ionic 1 here
Check out the components for Ionic 2 here
3. Get a Little Help From Your Helper Classes
Helper classes, or utility classes, can help you easily change aspects of components. The utility classes have been improved in Ionic 2 so let’s talk about them separately. For Ionic 1 utility classes exist to help influence colors and padding. For Ionic 2 utility classes can be used to alter margin, padding, colors, buttons, and even text alignment. You can also implement a theme and update the standard Ionic colors to match your brand.
You can also make your own helper classes that can be easily added to components. My personal favorite is creating a class to center content. You can also browse online forums to find helper classes that are not as well documented. For example, I found item-text-wrap which wraps text when added to any component with Ionic’s item class.
Check out Ionic 1 utility classes here
Check out Ionic 2 utility classes here
4. Kick Some Variable’s Sass
If you don’t already use Sass, or Syntactically Awesome Style Sheets, I would highly recommend it. Sass has endless benefits one of which is allowing you to change Ionic’s variables globally. So if you want assertive to be your favorite red instead of the standard #ef473a now it can be done in just one line!
See more documentation on this trick here
5. Blend into Your OS
One of the easiest ways to make an app look better to the user is to give them a more native experience. While it may not seem like it matters users get accustomed to their OS and an application that looks like what they are used to is easier to use and less jarring. Since Ionic 2 has introduced platform specific styles all components look native for iOs, Android, and Windows.
For Ionic 1, components can be altered for different operating systems by using the platform class platform-ios or platform-android. These allow you to change as much as you want between the two to curate the experience. If you want the bottom tabs to be on the top of Android users are used to you go right ahead, dude!
View more documentation on these classes here
For Ionic 2, since all components appear native these classes will not need to be used as much. These classes can still be used for small tweaks and enhancements. Ionicons will also be changed based on operating system from iOs to Material Design but this can be easily overridden.
View more documentation on platform specific styles here
View documentation on platform specific icons here
In summary:
-
Look and feel is super important
-
These tricks will help improve the look and feel
-
Your app will be b-e-a-utiful
Stay groovy, ya’ll
*Webjunto’s design team would like to show some serious love to Ionic components. You’re beautiful and we love you.
