From The Archives: Thermo Clock Android App

So this is turning back the pages of time when we had just started out. The Thermo Clock Android App was probably our very first venture into app development. We wanted to test the waters as they say.

The idea of the app came while looking at the various methods to depict time besides the standard format (analog and digital). We basically had to show a quantity variation and decided to use the stardard thermometer as our guide.

Thermo Clock Android App Pixel Drop Studios
A Thermometer design is pretty good to depict quantity

Thermo Clock Android App

Taking the standard mercury thermometer, we assigned every hour as the number and added  divisions within the hour. Four divisions of 15 mins or Twelve divisions every five minutes, that was left for the user to choose.

Thermo Clock Android App Pixel Drop Studios
Every hour is divided into Four divisions of 15 minutes or Twelve divisions every 5 minutes

Initially its a greyed out number, then gradually the ‘mercury’ inside it rises which shows the passage of time. Half the number filled meant it is half an hour past, a quarter filled means 15 minutes had passed and so on.

Thermo Clock Android App Pixel Drop Studios
Rising mercury shows the passage of time

The concept was to find a rather relaxing method to track time. (inspired by the Pomodoro technique). Just a simple timer – Set the time and you get an alarm at the end of it, that’s it. A timer that keeps you away from distractions.

Thermo Clock Android App Pixel Drop Studios

The Thermo Clock was primarily aimed as an Android timer. We were going through our old work and thought to check if the idea resonated with anyone out there. Do let us know if you guys think it’s worth pursuing.

Damn, all this just takes us back to the start…(ala coldplay)

 

Do You Think We Should Develop This App?

View Results

Loading ... Loading ...

We are alive

We know that we have been quiet off lately, and some people have even asked us if we’re still alive.

We are alive, and can assure you that the silence is because we have a lot on our hands. And just to soothe your worries, here’s what is happening at the moment:

We have not 1, not 2, not 3 but 4 projects in works! Now we can’t spill out all the details about them, but here are some slices of information.

We are alive - Pixel Drop Boys
Yep. Thats us

Project 1

Quote Codes – We have been working extremely hard on this for the past good year. The bulk of the work is done. What we’re doing now is some in-game mechanics, some animations, a little intro, bug fixing and sound engineering. We would be opening this for beta testing soon so please do sign up if you are interested to test our cool game.

Quote Codes - upcoming iOS game for 2017

We’ll keep you posted on a release date and we have documented the entire journey from Design to Code which we would be sharing– The game will be out in the second half of this year exclusively on iOS

In the meantime go check out the pages from the game and don’t forget to follow them!

Facebook Page

Twitter Page

Instagram Page

Project 2

The Game Quantum – reworking this and coming out with a more refined, more enjoyable version of our first ever game is one off our top priorities. More details in the coming weeks!

Project 3

The WOW Signal – This is a space exploration video game. A topic that makes us jump from our seats. We are in the concept/designing stage of this and will start development in June. More updates on this then!

Project 4

Tuta Tuk Tuk – Embarking new territories on this. We are traditionally 2D artists and developers but have challenged ourselves with doing the art of this in isometric. Currently in Prototype stage, we would be opening this for a closed Beta stage by the end of May!

 

App Prototyping with Adobe XD

So last time we talked about the benefits of Sketch App for initial designs of an app. Things were going fine for us. We designed on Sketch. And then we would try to figure out our app flow. This would involve getting screens arranged in their order of sequence and sharing the pic between us which always turned out to be horrible and confusing.

Quantum iOS app Flow
Imagine having more than 20 screens here

Or otherwise it would be going old school. Taking printouts and physically figure it out on a white board. All these methods lacked one essential component for any successful design – feedback from initial testers. How can we make the users get the sequence – we had to rely on their understanding rather than them experiencing it. We could only be sure they understood it, if they held it in their hands and get a first hand experience. Figure out where they could go wrong, how we could minimize or negate that possibility through better design.

Then Adobe hit back with Experience Design (XD).

Adobe XD was exactly what we were looking for. XD allowed us to make real prototypes on real devices that we could give to real users. This brought out a great clarity to us and the users. It greatly simplified our process. Changes could be made in the initial stages itself.

Just take a look at what our whole artboard looked like in XD:

The Game Quantum on XD
Adobe XD interface
The Game Quantum on XD
Linking each screen to create the prototype

Don’t get intimidated by these images. It is far more easier than it looks. All you need to do is link the various buttons in the screens based on your app flow – Its just drag and drop and literally takes less than 10 mins!

 

Prototyping with Adobe XD
Linking the screens together is just drag and drop

Hats off to the Adobe guys for getting this product out in the market. Mind you, the product is still in beta, but damn it’s awesome.

There are however a few things missing in Adobe XD:

 – XD does not give you the ability to animate individual elements. For ex: you won’t be able slide in a single button separately on the screen. It only allows screen transitions for now.

 – XD does not support Photoshop import. Yes, you read that right. Currently, the software only allows vector imports. This can be a big problem if you already have your app designed in Photoshop.

 

But since the software is still a work in progress we are hoping they would add additional features. Oh and the whole thing is just under 80 MB. Kudos Adobe! 

Adobe XD can really become the de facto prototyping tool. The Windows version of the software was just release in beta sometime back. In the end it will all depend on how much Adobe decides to charge us when they come out with the full version.

All in all, there is no denying the fact that there is a new player in the prototyping wars. And this newbie happens to be the oldest of them all.

Adobe XD is currently available in beta free for Mac and Windows HERE

 

If you are looking for some quick tutorials. These are our top picks. 

How to Use Adobe Experience Design CC By Terry White

How to Create a UI Prototype By Rafiq Elmansy

Design with Sketch App

We have always used Adobe Illustrator and Adobe Photoshop for the initial prototyping of our app designs. Though a bit of an overkill, we were familiar with it and hence stuck with it for a long time. Then a friend introduced us the Sketch App. And it just blew us away..

Sketch app

Firstly, it’s less than 50 MB installed on your hard disk. 50 freakin MB. Can you imagine that? Adobe Illustrator is more than 1.5 GB and Photoshop is well over that. We became a believer right then. Of course don’t get us wrong. Illustrator is still one of the best when it comes to making accurate drawings that involve stylus inputs and Photoshop is the king of digital image manipulation.

Sketch vs Illustrator vs Photoshop
Photoshop vs Illustrator vs Sketch

If you google you will find a million comparisons between Sketch, Photoshop and Illustrator but believe us Sketch wins when you are looking at getting started with the initial screens of the app and it wins in Web Design because of its superior grid layouts, ability to export all layers separately in one go and get CSS attributes for your designs!

Design with sketch app Pixel Drop Studios
iOS Ui Template in Sketch

And the templates included are so much handy. They have templates and export options for almost every iOS device screen size, Web Design and most popular Android ones. It is a match made in heaven for studios like us.

design with sketch app tutorial Pixel Drop Studios
Pre-Installed Templates in Sketch

So Sketch has now become our de facto software for building our initial designs.

It is available for download from their official website. You can first download a Trial version and then purchase the licence if you like from HERE.

If you are really interested here is a small list of awesome free tutorials that will help transition to the software. Note that some of the tutorials are of Sketch 3 while the latest version available right now is Sketch 4 but be assured that the learnings in them still apply!

For Readers:

Official Sketch User Manual

Marc Andrew – Sketch App Tutorial Series

Sketch Tutorial for iOS Developers – Robert Chan

Sketch for Beginners – Sebastian Gabriel

For the ones who prefer videos:

Sketch Tutorial Series – LevelUpTuts

Introduction to Sketch for Web Design – CharliMarieTV

Sketch for Beginners – Patrick Benske