Wireframe prototype for Asset Mapping. If you are responsible for a new building development or are in charge of city planning, keeping track of the installation and maintenance of hundreds of security cameras, air conditioning units, lights, etc is a massive juggling act. Asset Mapping is an app that centralises all assets feeds and displays everything on an easy to use map and timeline of repairs.

A mobile or tablet version of the app would help contractors find the right place to fit an asset, and it will be easier to find and repair an asset that needs servicing later.

The app creates a real time secure Google map of the physical assets of new developments or buildings or even cities, such as: security cameras, air conditioning units, etc. The CAD file or plan of the development is given Google map coordinates. The app then links up with real time API feeds of the status and location of all assets in one place.

My main role here was information architecture and to prototype the interface. My approach was to break out a navigation structure by themes, separating the modes of viewing the information (by: list / map / table / time) from the hierarchy of asset information (site / zone / level / asset type ).

It is a very complicated piece of software with lots of moving parts, made simple by use of sorting, filtering and folder style navigation.

See Assetmapping.com for more information.

Fitness dashboard

Run summary

Run mapping

User on boarding process

Sensoria Store and product page

July 2014 EDIT: Android’s “L” design guidelines now supply templates in Adobe Illustrator, making it even harder for designers user to Photoshop or Fireworks. They don’t provide an answer for how you should crop and optimise your assets for the developer (I assume they’d rather you didn’t and just use their native stuff).

See www.google.com/design/

July 2014 EDIT: On consideration of comments from NexogenDev, I have removed the more explicit reference to 72dpi in the graphic above to “1dp = 1px” as this is a more literal starting point and probably better. My point was that Android supplied templates and assets tend to open by default in Photoshop as 72dpi, but dpi in general is misleading in this context.

I found it hard to know where to start designing for Android in Photoshop.

Google tries to help by providing extensive Android user Interface Design Guidelines.  There are many devices running Android that have different screen sizes and shapes. There are also different screen densities, which means the quality of the definition of the screen or how many pixels fit in the same sized area on the screen – e.g. medium screen density has 160 pixels in every inch on the device’s screen, whereas an extra high density screen has twice as many, 320 pixels, crammed in an inch. To cover the different densities you need to supply graphics and icons at various densities.

Creating a design that will work for all these devices can be daunting. You also need to create different density icons and graphics.

1. Minimum handsetscreen size

I started with a minimum mobile handset size screen first. Starting with the smallest and most limited screen size first makes sure your content and UI will fit, removing any features that aren’t completely necessary to the core purpose of the app. Then you can work out how your app will behave on larger and tablet sized screens. You need to decided if your app is going to stretch to fit larger screens, or if you’re going to have a completely different layout and design for tablet sized screens.

2. Photoshop image size

I choose to start with a small mobile handset and a small 7″ tablet screen as a base for design and then think of how that could scale elagantly.  You may need to create portrait and landscape versions if you plan on allowing users to change orientation.

Here are some Photoshop templates

3. Download Android design templates

If you are new to designing for Android, and are confused by dpi, I STRONGLY RECOMMEND you use native Android styling and assets, rather than doing a completely custom design at first.

See www.google.com/design/

It is important to keep the icons at the same proportion to maintain the correct “hit” area for the user’s finger.

4. Scale down

It’s easier to work at the higher pixel density, XXHDPI. It is always advisable to create icon art as vectors in “Smart Objects, or as “shapes” in Photoshop so they can be scaled up or down without loosing quality.

The benefit of working at XXHDPI is that you can be sure you are not loosing any quality.

XXHDPI – 300% – x3.o
XHDPI –  200% – x2.o
HDPI –  150% – x1.5
MDPI – 100% – x1.0
LDPI – 75% (don’t bother with this!) – 0.75

When using vectors, you may want to adjust your line art to tighten up any half pixels or it can look blurry at the edges (if you’re a perfectionist like me).

5. Workflow

• Create you design PSD at XXHDPI
• Crop out your graphic assets and icons as separate PSDs
• Scale them down to the various densities: XHDPI, HDPI, MDPI

My method is to design one PSD, crop out the icons assets as PSDs, then scale them to the different densities. I often start with a PSD at XXHDPI or MDPI (providing my artwork is vector and can be scaled up or down), then I crop out the icons and assets out, then resize them.

The reason this is easier is that when you need to make design changes, you don’t have to change multiple PSDs.

What the frakk is a DP?

Here’s what I discovered after a few hours of scratching my head and moaning…

1. “dp” is a magic, made-up measurement that only exists in the world of The Matrix & Tron.
2. Android icons are 32dp x 32dp @ the medium density MDPI
3. Android supply sample icons (Edit: they don’t any more the gits) and if you open an icon from the MDPI folder in Photoshop, the icon is 32px x 32px with “image size”.
4. SO, in Photoshop:1dp = 1px @ MDPI – 100%
   1dp = 1.5px @ HDPI – 150%
   1dp = 2px @ XHDPI – 200%
   1dp = 3px @ XXHDPI – 300%
   1dp = 4px @ XXXHDPI – 400%
5. It doesn’t matter what DPI you have set in PHOTOSHOP, it’s the canvas size (the number of pixels available) that counts.

If you have a better way of getting started designing in Android, or if I’ve made an errors, please let me know.

Here are some Photoshop templates at MDPI and HDPI to give you an idea.

Please see my new guide: How to design for new iPhone 6 Plus resolutions in Photoshop

When designing an appdesigners take great care over the UI and the fine details. Apple provide a lot of built-in UI styling in the SDK for developers to produce apps of a consistent quality. However, when Apple create their own apps they add an extra layer of detail and finish that is not supplied in the SDK, this extra quality is hard to achieve out-of-the-box.

Designers are fussy by trade, and communicating this obsessive level of detail via email or Skype to a remote developer can be challenging. I have great sympathies for developers, espcially when I find myslf sending them the following documents with design revisions…

Kevin was as keen as me to get this right, so I hope doesn’t he hate me too much

New playable track list UI style for artists and catalogue pages.

Objectives:

• Make a distinction betwen full playable tracks and 30 second previews
• Create a player module to play all tracks avaible
• An expandable ajax panel to get track info, stats and content in position to increase engagement.
• Add improved e-commerce features, including the ability to buy a list of tracks in one.

In this iteration we are moving away from the flat navigation styling, and adding some depth and detail. I’m designing an iOS app at the moment, so I’m at home doing this stuff. Although, I think clean and minal is a better way to go online as, like the “little black dress”, it never goes out of fashion.

Visit Justgomusic.com