This Material Design App Will Make You Want to Study Chemistry Again
From concept to the Google Play store
--
Just about a year ago, we were right in the Material Design craze. Just like a honeymoon, no flaws. And when Material does this motion thing? We’d get a tad crazy.
That’s when Anders Bjarnle created and shared a jaw dropping Periodic Table Concept on MaterialUp — a place for tens of thousands of designers and developers to share the best Material Design resources, every day. The MaterialUp community was mesmerized and needless to say, we all agreed that it had to be built.
Anders took all this enthusiasm, went and found just the right developer, Jack Underwood, and together they just released the first version: Isotope.
And folks, it was well worth the wait.
More than just the design its execution is impeccable, making us want to go back and sit on those school benches. Read on for an interview of the two creatives behind this beautiful app: learn the story of a successful collaboration, what kind of magic Material Design adds to an app, and how Isotope fully embodies the maturity that Material Design has today.
We hope you enjoy the read — it’s truly inspirational for anyone looking to bring an idea to life.
Hi Anders and Jack! So tell us, what is Isotope?
Isotope is a high-end Android application which purpose is to make the studying of the periodic table of chemical elements more fun and interesting.
Anders Bjarnle — I’ve always loved the idea of how the periodic table works because it’s a smart and obviously logic way of structuring up how all the elements work. However it never really caught my interest because its appearance usually is way too boring to study. I can’t remember ever seeing a well designed periodic table that wasn’t printed on a big gray/yellow-ish sheet of paper with some ancient version of Times New Roman and the existing periodic table apps out there didn’t really satisfy me.
Also you don’t really know what the elements look like and how they occur naturally, which makes people and students less motivated.
Jack Underwood — Isotope is Anders’ creation. It’s an attempt to bring good design to an area where historically design has always been an afterthought.
How did you get the original idea and how did you find a partner to build the project?
AB — I remember I got inspired to do my own version when I saw a random stock photo of a lump of coal. Sometimes even the weirdest stuff inspires you :)
I then thought of how elements occur naturally and I combined the idea with the periodic table. I designed a few concepts and created a motion design mockup that I posted on MaterialUp and Dribbble.
The feedback was very positive and I got contacted by 20–25 developers all willing to partner up with me and this a guy whose name reminds me of the main character in House of Cards contacted me and we partnered up. Unlike Mr. Underwood in House of Cards this fellow was very easy to work with and the process has been really smooth from beginning to end!
How long did it take you?
AB — To do the initial concept, it took about 10 hours. The creation of Isotope kept going for roughly 6 months. It could’ve been much faster but none of us were able to keep the work up on a daily basis, but Jack deserves extra credit for doing improvements and development by himself when I couldn’t.
JU — Building the actual app took us about 6 months of on/off work. There was lots of new things that I hadn’t done before animation wise, and I’ve never had to optimise something so much (to get good fps during animation) in my whole career, so that was totally new too.
What tools do you use to design, prototype and code?
JU — I work in Android Studio, usually on the latest stable version unless there is something awesome in the beta/canary builds, then I’ll have both installed.
I don’t do any mockup/design work myself, (I cannot use Photoshop for the life of me) so I don’t have any actually installed!
AB — My usual flow is:
- Gather inspiration! Make a mood board and find enough ideas and concepts to get you started. Usually I grab mockups that contains colors I like, nice ways of structuring up something similar to what I have in mind, appealing illustrations, fancy icons, great usage of fonts etc. It’s not a crime to get inspired by other people’s ideas, just don’t steal them.
- Design mockups in Photoshop.
- Create motion mockups in After Effects to give users and developers a feeling of how I see the whole flow.
- Get feedback from others. Even though you work on something for many hours there is always some essential feature you miss that a fresh pair of eyes can help you out with.
- Build some kind of prototype to try out the concept, which in Isotope’s case got handled by Jack at an early development stage.
Sometimes I sketch ideas on paper before I go to Photoshop because I’m not really sure how I want it to be structured. If you draw something in the actual size it will be used it’s easier to place elements in positions that feels more natural when interacting with them.
What did you find in Material Design that you wouldn’t find elsewhere?
JU — I love Material Design because as developer that almost doesn’t do any self-designing, the keylines and default values for everything makes it easy to do the small things myself. Without Material Design, I’d probably be completely lost.
AB — I’m old enough to have experienced many digital design trends. I remember in the early 00’s when default Photoshop effects such as bevel and emboss, outer glow and fat strokes ruled the design of websites. Shortly after that gradients got introduced in many application interfaces and set standards for many trends until flat and minimalistic design was found to be very easy to use for basically all the users and visually appealing if done the right way.
I’d say Material Design is flat 2.0 with a little bit of depth (shadows and the feeling of interaction with actual objects). It is by far the strongest design trend ever and even though it has a Bible of guidelines, people can create loads of different interfaces and still keep the same style.
It’s also the design trend that created communities and tools for people who want to apply it to their ideas. It’s a really solid concept and obviously there is no way it couldn’t get massive since Google applied it to the world’s most common operating system. Designing interfaces and icons for more than 1 billion users where there are some guidelines to follow doesn’t make people less interested in trying it out. It’s a beautiful style that’s gonna live for quite a while.
Do you take liberties from the guidelines or strictly follow them?
AB — I most definitely take liberties from the guidelines. I don’t think you can design a truly unique Material app by only following the guidelines, you need to add your own touch to it. Isotope follows quite a few guidelines but we’ve taken lots of liberties as we want to make it a unique experience.
For example blurring backgrounds is more iOS than Android and we have our own interpolation curves for the animations but as long as we don’t exaggerate those effects it works with Material Design.
The tricky part — how did you collaborate? What was your process?
AB — We created a scrum board using Trello where we placed ideas, mockups and statuses in different columns to easily keep track of them. As we created and dealt with tasks we discussed different ways solving problems which also led to idea generations.
From time to time we had sprints where we did some quality assurance work (finding bugs, trying the builds on different devices, keeping things consistent etc) and Jack focused on fixing them. It’s never healthy to keep on implementing new features without knowing that the most essential ones actually work. So basically it’s nothing special than what should be ordinary UX + developer workflow.
JU — We used Trello for getting stuff done (It was my first time, it’s awesome) and Hangouts for talking more about specific issues and the app itself. Hangouts sucks though, not being able to search is a massive pain for a project that lasts months, I’d definitely recommend not using it for a large project!
And how do you guys keep learning and improving your craft?
AB — For me the best way of learning new stuff is to dare to try them out. Photoshop is a very powerful tool you can create any kind of image with, as long as you are creative.
Basic knowledge about the software is enough to create for example most interfaces and icons, you just need to know how you want it to look when it’s done. There are always workarounds for how things can be achieved and the more you learn about them the more experienced you get, which will make the workflow a lot easier in the future. For me the step from web design to mobile interfaces was like that, as I had never done any serious design for phones but I had knowledge about how they work and how interfaces might look.
JU — Most of it is trial/error, but I Google how to do things a lot! I do listen to the Fragmented podcasts+ Android Developer Backstage podcasts though, and both are super useful.
Regarding the animation in Isotope, Alex Lockwood’s resources are great for getting started, and I suggest reading his tutorials before diving in.
What’s your favorite element of Isotope?
AB — That’s an easy one: the element expansion animation. I loved playing with it when designing the initial concept and I know Jack loved and hated recreating it. It turned out very good in the end but creating the expansion of the white box, scaling the text, blurring the background, having multiple transitions being made at the same time; all this without any performance issues wasn’t easy at all. But he made it!
JU — The expanding animation is beautiful, it’s the whole reason I wanted to build the app in the first place. I haven’t seen an animation like that before on Android (if anyone has seen some let me know, I’d love to check it out!)
How’s the feedback so far?
JU — Pretty good! We have an average rating of 4.5/5 and the majority of people that use the app love the design and UX. There’s a couple of 1* ratings, most of which seem to be complaining that the app doesn’t have enough detailed information. So hopefully our latest release will cause the rating will climb to at least 4.6 (our pre-launch target).
AB — The feedback has been great so far, better than we expected. As we speak our rating is 4.5 in Google Play and for an app that is very niched, has known issues and that just got released I think it’s amazing!
Is there anything that you still want to improve? :)
AB — There are always things to improve. We will base our next moves based on user feedback since it’s the most valuable feedback we can get. When the first version was released we tried to understand what the users wants based on reviews.
The most popular feature requests was about being able to change themes, get more premium information, having descriptions for the images and a sort of “fun fact”/use cases for each element — and that’s what we added!
JU — We’re not done yet for sure. Version 1.1 contained a bunch of more detailed information about each element, a bunch of fixes and a new theme. As for 1.2, we’ll have to pay close attention to user feedback and go from there!
Moral of the story? Use great design to get students interested, and don’t make them think 😉
More about Anders & Jack
My name is Jack Underwood, I’m a 22 year old full time indie developer with a passion for great UI/UX.
I was first taught Visual Basic by my Dad at around 12ish, since then I’ve experimented with bunch of different languages, and made a bunch of different games using AS3. I started learning Android whilst a school but didn’t fully commit until i was at University doing Economics about 3 years ago.
Follow Jack on Google+ and Twitter.
I’m an always smiling Swede working as a UX/UI designer at Opera for the Android mobile browser, which has been the main product for quite a while, not the desktop one.
Like many other graphics designers I used Photoshop as my digital playground in my early days. This evolved quickly into web design which I got totally in love with when I realized how powerful marketing tool web development is. After studying graphics design & web development at the university for a couple of years I started to work professionally as a web designer. As smartphones quickly became a must-have for most people I thought it would be cool to design interfaces that people interact with on a daily basis, several times. That’s basically how I got into mobile interfaces.
Today my main areas within design are user interfaces, motion design and web. I think I’ve been doing a little bit of everything in digital design but designing interfaces and creating experiences that are part of people’s everyday life is a pretty massive feeling.
Other than that I think beer is great but I hate IPA, I have no favorite color and I prefer dogs over cats, even though I’m slightly allergic to both of them.
Follow Anders on MaterialUp (part of UpLabs) and Dribbble.
UpLabs curates the best resources to help you create awesome apps and sites, daily. Check out today’s showcases on UpLabs!
