Why does an office look the way it does? Well, we haven’t analyzed it deeply, but we have a theory that it comes from the days when things were all paper-based. Suddenly man had climbed into the office from the field and needed a flat surface on which he could put his paper and his jar of ink. Papers turned into more papers; letters, copies, printed papers, and the ink was replaced by a sturdy type writer. If you were more in the creative business it was completely logical to sit by your desk and sketch. This is not the case today. Sure, we at Commind do some sketching now and then, and sure we come in contact with papers, but our daily work is mainly done on computers.

It all started by coincidence, when Max was sitting alone in the office and found himself more often with his laptop in the couch than in his office chair. Being a man with a history of back-problems he soon noticed that he felt good. The couch made him shift his posture several times every hour and was a lot more confortable than the chair. When Oskar joined he sank down into one of the armchairs and hasn’t moved since. As Commind grew the couches and armchairs filled up. The couch concept not only provides comfortable seating, but also creates a completely fluent environment where small things are discussed immediately and you will always find someone to help you with your problems. Micro-meetings are taking place constantly, and we admit: this does require a certain amount of focus from the ones not included in that particular meeting, who needs to turn off their ears. However this has so far never been a problem, we all have experiences from great office landscapes and the negative effects of the micro-meetings are by far exceeded by the positive; You can have half an ear on the conversation and it’s easy to keep up with what’s going on in different projects.

In September we will be moving to a new office and recently got the question if we were to bring the couches. The answer is naturally yes! We have no back problems, the environment around the couches is creative and dynamic and even the physiotherapists behind the book “Fit while you sit” think we are on to something good!

Keep your eyes open for our “Couch manifesto” – soon in an office near you!

It is still rather common that a mobile application is first created for iPhone and later adjusted for Android. This was the case with our app Fit While You Sit.
Creating graphics for iPhone is simple. You have two fixed sizes; 320x 480 px and the Retina display at 640x 960px. This means you can design your UI pretty much as you please, like in the below picture. The single png-file can be delivered to the developer, who creates invisble buttons to work in your layout.

For iPhone a single png-file can be delivered and the developer creates invisible buttons on top (right image).

This is not the case for Android. For Android you are encouraged to deliver graphics for their four generalized sizes; ldpi, mdpi, hdpi and xhdpi. However, within each of these resolutions there are numerous devices in different sizes and with different display proportions. This means your Android app may end up on a screen with proportions you have not designed for. And it may look terrible.
So what can you do? 
First thing is to separate the different elements of your view into several png-files. In this case we have the background with the tabs, the tab icons, the two buttons and the illustration. You do this in order to be able to scale each element separately.

Separate the different elements in the picture; background tabs, illustration, tab icons and buttons.

Next step is to figure out which of these can be scaled unproportionally without distorting the look. Usually it is the background, which often consists of a colour or a gradient. In this case, however, stretching the background would distort the tabs and their corner radiuses.

When you have a case like this you have the great opportunity to use the Androids nine-patching tool, Draw9patch. It is included in the Tools- folder in the Android SDK which you easily download here.

In this tool you drop or open the graphics you wish to nine-patch and right away the tool creates a one-pixel border around you png file. This is where you will tell the program what parts can be stretched. By drawing a black one-pixel wide line or just a 1×1 px dot you tell the program that this part can stretch. The indication also means that the stretched area will never become smaller than the size of the mark.

Background with indications for nine-patching.

In this case we created one large indication in the middle of the background gradient, and another, 1×1 px pixel indication in the center of the tabs for vertical stretching.
For horizontal stretching we created a 1×1 px  indication for each tab to transform them separately.
Straight away the nine-patching program gives you a preview of how your graphics will look when stretched in different ways.
Worth noting is that if you start making indications to the right and top of your graphics, this will indicate padding instead of nine-patch-area.
When you are satisfied with the result the new png shall be saved with the suffix .9.png in order to work in the code. (for example: background.9.png)

Now we have prepared the background to transform nicely on any screen, no matter size or proportions.
The rest of the graphics will be placed on top and scaled proportionally.

In our previous cooperations with advertising bureaus and communication firms we have discovered that there is a lot of great designers out there, but also a lack of knowledge in how to create and adjust graphics to work in mobile devices. The knowledge-glitch often causes a lot of extra work for developers and in-house designers when they need to cut, rename and modify the delivered files into something useful.

This gave us the idea to offer a one-day course in how to create great mobile graphics, and it is now ready and awaiting participants. It targets desginers who already has extensive knowledge in the most common design tools, such as Photoshop and Illustrator. Also worth mentioning is that it is not a design course, we assume designers already know that. It’s a one-day lesson in how to create correct and functional mobile graphics.

The course is very hands-on and comes with a complete mobile-graphics-bible in which all details are written down.

Main course bullets are:

• Create functional wireframes for both interaction and graphics
• UI elements – What are they, how are they used, and when to create new ones
• Copy – How to handle a localized app
• Graphics – What to deliver and in what sizes
• Graphics tips & tricks – Photoshop tips for pixel perfect graphics
• Animations – How to create functaional and high performing animations
• Social media – Integrating Facebook, Twitter, etc
• Smart delivery – The most efficient way to deliver assets from designer to developers. How to name files and folders
• Flow of action – What should be delivered when

Sign up for the App Graphics Course here.

Wikipedia explains Augmented Reality as:

It’s a good definition, but as always, it is better explained in images or videos. So we made a few videos for you on each of the concepts we have created.

Augmented Paper

Paper is great. It has been around for thousands of years and works really well for text. But when it comes to images of real world objects it’s a bit… flat.

And we have the solution to that problem!

We used a plain off-the-shelf leaflet and created an application that recognizes and extends it. When you look at the leaflet in the viewfinder of the app a 3D model pops up and it all comes to life.

We believe this will significantly extend the life time of the leaflet, and also allow for digital sharing where it was traditionally not possible before.

Augmented Packaging

Retail packaging fight to be seen on the store shelves. And some are so small they don’t have room to fit all the information they would like to include.

With augmented reality on retail packaging it can both stand out and include more information on the product. It is also a great opportunity to include deals on the products, that can be tailored to fit the identity of the user.

Augmented Livingroom

Have you ever wanted to buy a chair or a sofa, but wondered if it was too big? Or too small? Or just mismatch in style?

Well, so have we.

That is why we created the concept to preview what a piece of furniture would look lite at home. Just put a paper on the floor, and the app viewfinder will display e.g. a chair true to size and material in your living room.

No need to carry home bulky furniture to try them out in your livingroom and then having to return them again.

Augmented Anything

Do you have an idea of something that can be augmented in your business? Let us know! We can easily and quickly create concepts to prove your ideas, and bring them to life as a product.

King of the Slope fits well in Vattenfall’s sponsoring of Swedish skiing, and allows anyone to track their skiing results. You can track your vertical drop, average speed, how much energy you’ve generated, and many other attributes. Competing with your Facebook friends and for the overall King of the Slope title on a given resort makes it even more exciting!

Together with our friends at Magic 8 Studio we have created Tree of Life - a beautiful Android Live Wallpaper. 

The concept is simple and beautiful – a wallpaper that follows the time of day:

• The sun moves throughout the day, resulting in a beautiful sunrise and a stunning sunset.
• Alive, with fireflies and butterflies, following your taps.
• Fluffy clouds form an easy-to-read clock in the sky
• At night the magical northern light flows across the screen
• Tweak the colors and customize the wallpaper

And we are proud to announce that it is available today!