Proposed iconset for breeze

Posted in Core User Interface, User Interface Guidelines by

This is my proposed iconset for breeze.

breeze iconset

The icons are all based on a circle for reasons outlined in the previous post. The circle has a very low contrast radial gradient with the center of the circle being slightly lighter than the rim.

Colors are still pale and playful and should match the tint colors of the apps (I know this isn’t the case yet with the mockup I did a few posts back, but this is going to be fixed)

Icons

Posted in Thoughts by

Icons are a very important aspect of a mobile OS. You see them all the time. And Nokia has treated us with what I believe is one of the most fine icon sets of all time with the N9.

While I admit that I like borderless/backgroundless icons (N900, Android) most app developers have no icon-making skills and make really ugly icons, especially in the FOSS world where no big corporations with design department do apps.
So when your app grid gets filled with 3rd party apps, having a background makes the grid as a whole look much more consistent and tidy.

That’s why apple auto-composites icons to it’s own background. So that dev’s don’t even have to bother with making an icon look like the others. They just choose an image and it does the compositing (there’s of course the option to disable that and create your own composited icon).

My idea is to create a dominating shape for all icons which is not a hard background like N9 but just a guideline for all OS apps. The icon is allowed to deviate a bit from that shape with things sticking out or negative space eating in.

For example look at the settings icon of FirefoxOS

FirefoxOS iconography

This gives freedom to designers to create something special but also allows developers to use a generator that slaps any icon of any shape on a circle (or crop it to a circle) and create an icon that doesn’t look out-of-place.

Hurrian’s icons use this approach, and I am readying an icon set myself that adheres to the same guidelines.

A glimpse into the new design language

Posted in Core User Interface, Thoughts by

Here’s a scratchpad of some screens of the new design language I’m thinking about for nemo. Nothing is final here, the accompanying texts have double purpose: as guidelines but also as notes for me to remember what I was thinking while sketching this down.

These screens do not cover every control and every pattern but are a good indication of where I want to go.

The general ideas behind the theme are

  • Flat surfaces
  • Circular buttons with icons
  • Wavy, low contrast gradients
  • Pale colors
  • Clickable texts and list items without bevels
  • Simple icons, without sharp edges as much as possible
  • Use of different font weights, sizes and opacities to signify different in importance of various texts
  • Text inputs signified by bottom border only
  • Slight use of color to signify especially important operations like delete
  • Different color tint per application
  • Use of gestures but not too much of them
  • Saving clicks where possible by smart default actions

but most of all, I wanted to make every screen look like well designed printed material. The fact that the dpi of current devices surpass the dpi of standard commercial priters, allows us to take advantage of high quality type, that is easy to read and looks good, and do away with all the tricks we used to do on screens to hide the extremely low definition. The fact that users are familiar with basic touchscreen interactions allows us to not worry about affordances like buttons that look pressable and other effects that increase visual clutter.

Keeping the sea-themed naming scheme, the name of the new theme is breeze.

breeze

Let’s talk type

Posted in Core User Interface, User Interface Guidelines by

One of the basic things we’ve got to choose is the font we’ll be using. We need a sans serif font, with many weights and good quality. I personally like the new humanist sans fonts that have appeared (and almost dominated) the digital type in the last few years. Very nice examples are the Nokia Pure font, the Segoe UI font and Ubuntu.

For a free project we obviously need a free font. There is a very nice free/open source font recently developed by adobe, Source Sans.
Adobe_Source-Sans
That would be my choice for the nemo main font but, it doesn’t yet speak Greek, and you know, I would be filing bugs about my own choice :)

I’d like to note here that Greek and Cyrillic are a bit different than all the other scripts out there that can easily use their own font. Because Greek and Cyrillic have common glyphs with Latin, it’s important that they look the same. Especially for Greek as the GSM alphabet is mixed Greek/Latin (there is no true Greek support but only the capital Greek letters that do not have counterparts in the latin alphabet exist). Thus, if we had to fall back to another font, different fonts would be used only for the missing glyphs and Greek SMS message would look like this:

ΣΑΣ ΛΕΩ KAΛΗΣΠΕΡΑ

unacceptable and unprofessional

So the choice, at least for the time being, is Steve Matteson’s open sans.
open sans

It’s a font that looks modern, it’s easy to read, has many weights and isn’t extreme in any way. The only thing I have against it, is that it’s being used too much.

Happy reading!

Thank you nemomobile community

Posted in Thoughts by

I would like to thank the nemomobile community for appointing me in the position of the design lead.

I truly believe that real thanks lie in actions though, so I will give mine with a couple of posts. Stay tuned.