Apple posts design tips for developers

apple design tips

We recently raised the subject of how most apps don’t really look like the design when they are developed, and here comes Apple to the rescue! ;) The developers are generally lazy when it comes to implementation and believe that if it displays (in any way) then their job is done. They don’t care about margins, spacing, platform rules and ui paradigms. No, they are the mighty app developers, a rather small elite among other devs, so they don’t lower themselves down to implement things perfectly or to worry about how the information is presented.

Apple has published a set of rules and guidelines (a short one still, but always something) to educate developers about some basic mistakes they do. Let’s just hope they’ll start rejecting crap-design apps from now on, because a warning is only meaningful when it’s a threat.

A Good user interface? You bet!

A good user interface - before & after

Most of the current web interfaces are still based on the visual and UX paradigms created in the early days of the internet. User Friendly is an empty term with a lot of those interfaces, loosing the battle against costs and deadlines. The end user is the one who suffers a poorly designed, hard to use and plain ugly interface on a daily basis. Be it a bank system, your webmail, or any other sligthly more complicated thing you spend hours with every day. It’s not the 90’s anymore, time to redesign!

Does it have to stay that way?

Go here to find out + see the before & after shots.

iOS 7 visual errors, mistakes and bugs

ios7 background app refresh visual bug

I was very skeptical about Apple’s new mobile OS a while ago, but it actually grew on me. I still think the home screen icons are ugly, but more and more of the OS is actually quite cool. There are glitches though and small visual errors that look very weird coming from Apple. Steve Jobs had famously called some designers at 4am to change an orange hue on the Google Maps icon, and now things like that end up in the final OS? Odd. Let’s hope they fix it soon. I’ll be adding more images as I’m finding them.

ios7 calendar iPad portrait visual bug

The calendar bug is pretty weird. It says it’s September of 201, and I’m pretty sure that if it was I wouldn’t be writing this blog ;)
Yes, we know that the “3” is under the segmented control, but that is just a plain bad solution. Especially in portrait on the iPad, when we have so much vertical space, we can make the actual days smaller vertically and add another line with just the date. It would be clean and precise + visible too.

Apple’s website is starting to match iOS 7 style and with even better result!

Apple modern website design iphone 5c

Apple did not only announce some new hardware today, but it also revamped some of it’s web presence, that was considerably lacking the (controversial) flair of iOS 7. Apparently it’s slowly progressing towards unification and we can see the start of it on the iPhone 5C page. First of all it hides the glossy, gradient’y Apple menu background right after you scroll down and the translucent (hello iOS 7) menu bar slides down and stays on the top of the site.

The website also uses nice scroll-animations that are becoming a new web design trend, but fit the mobile OS as well. After all there’s plenty of things moving in iOS 7. It’s becoming more and more consistent and we might as well see a totally revamped Apple website on the day iOS 7 ships.

Let’s just hope they won’t go too minimal with the next desktop OS (the one after mavericks as this one has the classic MAC OS look left intact) because that will be a lot harder to get used to.

Former Apple designer redesigns iOS 7’s icons

iOS 7 icon redesign Louie Mantia

Louie Mantia is a former Apple icon designer, so he actually has even more right to do that thing every designer now does. You know – redesigning iOS 7 icons. And since he has worked on some of the original pre-iOS 7 icons too, he has both the skills and the knowledge on how good icon design works. The fact is that it actually does look much cleaner and nicer, but also a little confusing, because if icons all shared that very consistent style they’d be harder to process by our eyes. So there are compromises everywhere I guess. But still worth a shot, I especially like the safari icon.

You can see his Dribbble post here

iOS 7 UI in a PSD file now available

iOS 7 UI kit

Teehan Lax agency has been known for years to deliver each iOS version created from scratch in Photoshop so you can easily export UI elements while working on your own apps. iOS 7 wasn’t yet released, but they decided to do a beta PSD anyway, because summer will be quite busy for some developers – they need to redesign their apps to fit iOS 7 before it’s fall release. You can download the PSDhere


iOS 7 screenshots and design review

ios7 screenshots iPhone 4S 5

We installed the new iOS 7 right away and we wanted to share both our thoughts and a nice set of screenshots from the release with our readers along with some commentary where we think it’s necessary to say something. Overall we have mixed feelings about the new OS design. Some elements are simply stunning (blurred navbars and tabbars), while some look like they’ve been done in a rush (the safari icon, the Control Center arrows are way too thick and so forth). On a side-note Apple also now allows developers to transfer their apps to another developer account. That can be handy – I hope Rovio transfers Angry Birds to me based on a typo ;)

What we like
The blurred, semi-transparent backgrounds of some elements are just plain stunning. We also like the general white tone of the OS that differentiates it from all the competition (both Windows Phone and Android are much darker). Siri looks simply stunning. The new UX features in Safari (pulling down for an unified search / address bar rocks!). The new keyboard is also pretty sweet looking. The lockscreen and weather (the do share a common aesthetic) are also beautiful. So is the new search bar and folder view. An oh the music icon finally has a white note one it! Just as we hoped it will!

What we don’t like
There’s still A LOT of inconsistency between all the apps. They have different font sizes and spacings, different color schemes (the keyboard sometimes changes the color too) and some of the new icons are plain ugly. There’s also a big inconsistency within the icons – some have very soft gradients while others – like mail, have hard and long gradients on them. Instead of unifying the look it makes it actually just as distracting as before. Apple showed some pretty advanced font alignments (with rulers and measurements and stuff) but all in all in some places the fonts really look out of place. Sometimes it’s better to judge things by the eye than with the numbers apparently. Some elements in the presentations were also pretty off (like the headline above the AirDrop bubbles – it’s not in the center of the screen but more to the left and it shows!). The control center arrow is WAAAAAY too thick and it looks out of place there visually. Also the messages are bulky and too close to each other. The whole messaging app doesn’t have enough breathing room (white space) and they don’t really look refined at all. More like a quick mockup as the internal paddings of the messages are way too big, while the external margins are way too small… Also some tab-bar icons are only blue when active (app store and contacts) while others are all blue (safari and maps).

What we’ve noticed
The icons are more rounded now which also changes the perception of the homescreen a bit. Also the contacts have now been put inside circles. This is actually a bit odd as there are not many circles anywhere inside iOS (the icons, even when more rounded are still rounded squares). But the circles do look nice. Some icons have thicker edges than others, some are very narrow and some are very wide. That all creates a bit of inconsistency.

Our judgement
We think it’s a step in an interesting direction but this is not what we’d expect from Apple. There’s too many little mistakes or weird, mismatched elements and inconsistency for my taste. But since it’s the first version of a developer beta we think a lot of the stuff will be refined in the final version and maybe that’s the idea Apple has – to get some good feedback now and refine iOS 7 for the fall release.

And here are some screenshots we took today:

iOS 7 homescreen screenshot

More after the break.

Continue reading

Did Apple show iOS 7 design in the WWDC App?

iOS 7 WWDC white style

There has been a lot of speculation about how iOS7 will look like this year and apparently Apple gave us a hint releasing the updated WWDC calendar app. It’s going to be white – everyone said. The whole iOS 7 will be white as snow! Yeah, well, maybe. But judging it just by the WWDC app is not really the right option, because it had a different, white design since last year. And when it was announced last year ahead of WWDC everyone sang the same song – the new iOS 6 will be whiter and flatter and prettier because of the WWDC app!

And guess what? It didn’t change at all then. This year we’re almost sure it will, but let’s wait and see, because the WWDC app is at some points pretty nice looking, but it has it’s flaws that can be forgiven for a one-time event app, but not for the whole OS that everyone will use at least for a year. Take a look at those oversized fonts in the sections (they almost don’t fit). There’s very little whitespace in many screen sections too. Also the font stayed the same.

So what I think is that this whole “whitening” might actually happen inside iOS 7 because most OS’es are actually dark, but it will probably not look this way. This is a slightly different app from the rest of the OS for at least a year and even though parts of it look promising, as a whole it’s a typical iOS 6 app.

Blackberry OS 10 finally has a design voice, isn’t it too late though?

BlackBerry 10 OS design language

You might say what you want about BlackBerry and it’s OS in the recent years, but pretty will probably not be among them. With the recently launched Blackberry 10 OS it appears that there is finally some good design involved that doesn’t (at least not completely) rip-off from other platforms. The interface is clean, modern and kinda sexy actually. That’s not really BB style, but it’s a nice and refreshing choice.

I really like the typography, spacings and icons. Even the semi-skeumorphic keyboard looks quite nice. Sure, there are some odd things about it and the UI is a bit different from what we’re used to, but that’s not necessarily a bad thing. It’s going to be an interesting battle (especially for the Enterprise market) between Microsoft and Blackberry this year. Being number 3 is always better than being number 4, right?

Blackberry 10 OS design

Too bad that right now the most outdated looking OS is the one coming from Apple…

This is an interesting idea for a back button, with the skewed line showing which way the user will go. It’s a similar concept to what we have tried to do for an iOS app a few weeks ago, that I’ll try and showcase here soon.

Google redesigned their apps to improve overall quality of the Play Store?

Google Great Design

“The Verge” did a great article about how Google finally invested time and effort into design – with a stunningly beautiful result. I couldn’t agree more – the new designs for Maps, YouTube and Gmail apps are very good and in most cases prettier than Apple’s offerings.

There was also this life-long problem of Android being associated with bad quality apps, made just with developers and without any designers. Sounds familiar? Because apparently that’s how Google was operating (sort of) until that change a few years ago. It is true that most Android apps were never touched by a designer, and they are mocked for that by iOS and Windows Phone Users.

Great Google Design

Maybe this is all a clever ploy to improve overall designs for the Android Platform? Because if Google defines how to nicely put text data on a white background, many developers will copy the style. That might help boost Android a little bit design-wise which is something the platform really needs for it not to feel like that limpy cousin who always gets his presents a week later.

I personally think that Google has done an amazing job in design. Outpacing Apple and getting real-close to Microsoft. Now it’s Apple’s turn to show us something remarkable with iOS7.

Why BlackBerry failed in their designs

BlackBerry terrible design

With the quickly coming BlackBerry 10 (the final stand) I looked back at what their apps and OS looks like to designers and actually went through the design guidelines. Most of it is typical gibberish, but the screen above speaks volumes – how could ANYONE create text that’s basically touching the screen border? I know the screens are low res, but having just 5 pixels from the side would create an EXTREMELY big difference. 10/15 would be perfect. The sad truth is that they lost on both functionality (modern touch phones can do a lot more) AND design. And by the looks of the BlackBerry 10 OS some things are fixed, but I think that without a complete overhaul it’s going to be one ugly OS with ugly apps (if any). And that’s a pity because the more OS’es the more different designs I can do. Well, let’s hope Windows 8 catches on…

The 4 best designed Android Apps (Top list)

I’ll be honest, etsy shook my world a little bit because it looked far better than any Android app I’ve seen so far. And if there’s one there might be more, right? So I went out and searched for best designed Android Apps and while the list is not long (yet) at least there’s more than one non-stock beautifully designed App for the green robot. So let’s start, shall we?

best android app design

1. Spotify
Spotify takes the first place and leaves the competition far away (have you seen that terrible Android app? Exactly!). Here we have Android style UI with a lot of attention to detail, great font alignments, spacings and an overall refined look & feel. Too bad that’s just one app and not the entire Google Play offering…

etsy app for android

2. Etsy
We covered Etsy last week and we believe it still deserves a place among the best designed Android apps, so here it is.

Best Android app design

3. FlipBoard is another example that has been transferred from iOS with high precision. It looks almost exactly the same and it’s a good thing because it didn’t use the standard iOS guidelines anyway, so it translates well for any touch platform.


4. TuneIn Radio
A simple and clean app can be free of annoying design flaws like fonts touching the edge of the screen with no padding. Whoa! That is actually something on Android!

Do you know any other beautiful Android Apps?