Blog

#d3js meetup presentation links

Saturday, May 25th, 2013 at 15:17 by Wolfr

Here’s the links to what was presented last Thursday (and is publicly available) at the Fronteers meetup:

Some of it is code, some are presentations. For the full experience and context of what all of this is, you should have been there ;).

De Tijd user style

Saturday, May 25th, 2013 at 13:12 by Wolfr

So… a few weeks ago De Tijd introduced their iPad app. Naturally, I tested it and by registering I got a trial to their website too. And apparently a weekend subscription to the digital magazine. This landed in my mailbox last week:

De Tijd Vijftig

Good stuff. The magazine was great. If you can grab a copy somewhere, be sure to read it.

Now, something bothered me: their website. The overall design is nice but it contains a lot of annoying elements. For example, when you are reading an article a fixed bar pops up that lists more articles.

Newspapers are starting to see that things things can be different. People want a nice reading experience. 13 pixels for the body font size is not enough. Responsive design is needed.

I believe, if I’m going to pay for a service, I would like to have it my way. So instead of waiting for De Tijd to redesign their site, I wrote a user style to make things a bit better now. I installed it using Stylish for Chrome (who knows a nicer user style manager?)

This is the CSS:

And here’s a video:

Grunt.js/Happy Plan

Wednesday, May 22nd, 2013 at 12:02 by Wolfr

grunt-logoToon presented his Grunt knowledge to the Node JS user group audience last Wednesday.

This talk sparked me to finally bring my workflow to the next level. I got to know Grunt when doing the Corelio annual report project we made together but parts of Grunt were still a mystery to me.

Most projects I work on involve a lot of designing in the browser and automation is key to productivity here. You don’t really want to start compilers manually, drag images to ImageOptim, or depend on a million bash scripts. Grunt.js helps automating all of these tasks. Basically when I want to work on a project I cd to the relevant folder and run grunt. That’s all.

However, it can be very daunting to get everything you use to work nicely together in an automated fashion. I didn’t use Grunt in most of my projects because I couldn’t figure out how to get Jekyll and Compass to play nicely.

That is, until I stumbled upon Happy Plan. For those looking for a Grunt.js workflow that does this:

  • Jekyll compiling
  • Sass compiling using Compass
  • Custom font creationg by dropping SVGs in a folder
  • Auto image optimization
  • Auto minification of JS & concatenating all files
  • Bower support for components
  • LiveReload (if it works, for me it doesn’t work reliably)

Look no further than Happy Plan. It even has scripts for easy publishing to Github pages. Hooray!

My Google I/O highlights

Tuesday, May 21st, 2013 at 8:45 by Wolfr

If you’re a tech reporter, chances are big you are busy. Adobe MAX was 2 weeks ago, last week there was Google I/O, there’s an Xbox event tonight and Apple’s WWDC is underway.

This post is about my highlights from Google I/O. I didn’t go but over the long weekend I watched the sessions that looked the most interesting to me.

Seemingly every session has been recorded and has been put/is being put online at the Google Developers YouTube channel.

If you only watch one thing, watch the keynote. I feel it’s worth watching entirely to get a feel of where Google is going. For me Google is the most important tech company in the world right now.

They announced Android studio. Some kind of IDE for Android. One interesting feature is a per-device layout preview. Curious how this could help me when designing Android apps.

I tried downloading Android Studio but couldn’t get a simple project up (at least not in 5 minutes).

Indoor maps. Pretty epic. See one in action by searching Google for “Bozar Brussels” and zooming in. The presentation on this is here: indoor maps. And then I watched another session on Design principles for maps.

One of the presentations (I think the keynote) showed the Referral flow for a Play application inside Google Analytics. It also showed the developer console which surely seems to beat the measly iTunes Connect. You can roll out your apps in phases, assign beta testers directly from the developer app, get semi-automatic translations etc. In terms of services, Google is owning Apple.

More:

3 weeks with an Android

Monday, May 13th, 2013 at 18:05 by Wolfr

Google Nexus 4

A few weeks ago Coolblue started selling the Google Nexus in Belgium. It used to be that you couldn’t order it here – some people went through quite a bit of hassle to get one.

After my previous Android experience (an HTC Desire S) - I was quite relieved to see that Android has grown quite a bit to a more mature and stable platform.

I’m using the Nexus as my primary phone these days and I must say I quite like the experience.

First and foremost, I love the big screen. I used to be in the “WTF is that in your pocket”-crowd but really, when you use your smartphone as a pseudo-tablet for watching videos and reading articles a bigger screen is a better experience.

Notification system

The notification system is the #1 best thing about Android. I never use the iOS notification center since it’s so bad. But Android has a nice system where you can swipe away a single notification or dismiss all notifications. Much better than the tiny touch target in iOS’s notification center.

Global sharing

The sharing system between apps is also much better. It’s a lot more “system-wide” than iOS i.e. if you use an app like Pocket once you install it, seemingly every other app can share to Pocket.

Sharing data between apps is often more cumbersome in iOS, where you have to go through hacky bookmarklet ways or rely on the developer to have provided sharing between the exact combination of app X and app Y.

Quality of apps/Holo UI

In terms of UI, more and more apps are respecting the Holo UI guidelines. It’s very flat which sometimes makes it unclear what is tappable and what’s not but overall it’s a well documented and well thought out system.

I’ve mostly used “big name” apps so far like Twitter, Facebook, Foursquare and Instagram.

Overall, their quality is great but sometimes it seems like the Android version is playing catch-up with their iOS counterpart (and losing).

Having seen (and been in) many projects where this exact situation was the case this doesn’t come as a surprise.

Some apps (like DoubleTwist’s Alarm Clock and Instagram) look like a bizarro clash between Android 2.3, Android 4 and iOS where I’m not really sure if the designer ever cared about the Android design guidelines.

I know this is the work of some big name designers (hello Tim and Sebastiaan) but I am wondering what their line of thinking is to not follow Holo. Maybe because the rest of the world is seeing Samsung’s TouchWiz and HTC’s sense interface, both of which have an abundance of shadows and gradients.

Advanced features and tinkering

When Android fans say that iOS has been stuck for years I get what they are talking about.

I don’t necessarily agree with that statement but there are some features in Android that are just really nice.

For example, Android apps auto update in the background.

Google Play is wonderful. You can send apps to download on your device through a website. Developers can comment on app store reviews.

What’s also nice with Android is that you can “tinker” a bit with it. If you want the weather to show up on your homescreen, you can do so.

My iOS home screen is a ridiculous combination of app folders and is nowhere near what I want on my homescreen, which is mostly quick access to system functions like camera/flashlight/WiFi/bluetooth.

The fact that apps can access more system functions comes with a the obvious downside of instability. I’ve experienced a few app crashes which might be related to some of the widgets I’ve installed (I used Widgetsoid).

Conclusion

I’m happy enough to be using the Nexus 4 as my primary phone, which for me says a lot. Google I/O is around the corner. I’m excited what the future holds for Android.

Mobile web app framework/tool recommendations

Tuesday, April 30th, 2013 at 19:34 by Wolfr

I’m looking for framework/tool recommendations for putting together a mobile web app prototype.

One of the projects on my plate right now is designing a native iOS, native Android and mobile web app.

I’m doing most of my work in Photoshop but it feels elaborate to be designing each and every screen in it. Like my other projects these days I intend to only design the visual “styles” in it and make the rest in code.

However, this project being a “web app that looks like a native app but is not” (think forecast.io) poses some problems that I didn’t have before namely: a lot of animation, a single page app, multi touch events, etc.

I am putting together some code to form my own framework for this but there are a lot of missing parts. The genius of Hammer.js leads me to believe that there must be more tools out there that are brilliant yet that I never used before.

I don’t want to be writing logic that already exists out there (and probably in a much better form) i.e. reinventing the wheel.

Therse are the main things I’m looking for:

  • Some kind of framework that handles “pages” and internal links through anchors; I want the prototype to be a single page javascript application with no page refreshes (so it can be added from homescreen on iOS). jQuery mobile’s click handling/page handling is a good example but I want something lean so I can write my own CSS.
  • Some kind of framework for webkit animations. I tried animate.css in a previous project but I feel there must be something better out there by now.
  • Some kind of “bootstrap” CSS for iOS/Android style forms. I figure I will just use -webkit-appearance to customize the form elements to look like native iOS/Android components but a framework that handles the pitfalls would be nice.

Any other suggestions within the theme would also be cool. Who’s got some advice?

Fronteers #d3js meetup

Monday, April 29th, 2013 at 21:41 by Wolfr

The Fronteers #d3js meetup is almost selling out faster than WWDC: in less than a day over 80 people signed up making this the most popular Fronteers Belgium event so far.

I wanted to host a small event (see) and now we have this – great! Toon will be giving an intro to D3js. Andries will tell you what it’s like to run a studio that focusses on interface design and data visualisation.

In between there will be some demos of awesome d3 work by Bart and Piet. And I’ll also show a bit of what I did recently.

Don’t forget to sign up and see you there!

Twitter Music

Thursday, April 25th, 2013 at 8:41 by Wolfr

Twitter’s music app is beautiful, in that now-tiresome way apps from VC-backed companies are required to be, sacrificing utility for aesthetics and looking dated as soon as it hits your neighborhood app store. That’s fine, they’ve got plenty of designers to restyle it every 18 months.

Still have to test it – it’s U.S. only for now. Here’s Jim Ray’s well written opinion.

The short story of the AB Concerts website

Saturday, April 20th, 2013 at 11:35 by Wolfr

Five years ago I was working at a small web design firm in Ghent: Netlash (now Wijs). It was very successful – over a two year period there was a new hire every 2 months.

It was a nice time in my career – we were doing small websites for small companies and started getting bigger and bigger projects every month.

At some point, I was told we were going to make the AB Concerts website. I was excited since this was my favorite concert venue and I really wanted to make this something great.

My boss and the information architect (this is what we called our UX person) came up with a good concept that added a social network layer on top of a good informative site. It was a bit ahead of it’s time but still stands.

Unfortunately, the design was going to be done by another company… that mainly specialized in print and advertising. I got their initial proposal and suddenly I wasn’t so enthusiastic about the project anymore.

While these guys did quality work, what they produced was very print-like and there was no match between our vision of what it should be and what was designed. It had fixed frames with scrollbars and tiny text and no webfonts – you know the kind of design I’m talking about.

I decided to take matters into my own hands and proposed that we pitch another design to AB and let us handle the design part of the website.

  • ab_white
  • ab_white_home
  • ab_profile
  • ab_home_final

Some designs including an interaction design for an audio player (where I discovered my true calling) and a light version which I actually like more than the dark one.

The idea was executed – I worked some nights and weekends to come up with what I thought was a good approach. I was coached by my design lead and we ended up with something web-like that could work.

Then at some point in the process I found myself in a meeting room with my boss, the ad agency and the people from AB. It was an awkward meeting since we “took” their work but in the end we got the web design part of the job.

It’s really impossible to separate the design and building part of a website and come up with a good end result.

We spent a ton of hours collectively making the website great. This was one of those projects where I could feel the passion from the team in a way that just wasn’t there when we were making sites for hospitals and lawyers. Subject matters.

I remember the solid relationship I had with the lead programmer on the project. It was a bit of a ping pong game – I would design a small bit and he would develop it. Repeat. He went on to co-found his own company.

I remember struggling with sIFR/Flash and Cufón to get a custom font for the headings. Things are easy these days with @font-face and Typekit!

I remember the “profile” page which had so many variations that I ended up designing everything in the browser since that made more sense. These days I seem to be designing most projects in the browser.

I remember that the site eventually won a usability award.

And what I’m most proud of is that the design still stands after five years.

(But to be honest, now it’s really time to modernize some things!)