Building web apps with WordPress and BackBone.js

Gave a talk today at WordCamp Norrköping on how to build web apps using WordPress, JetPacks REST API and BackBone.js. A short presentation on the why and how to use BackBone.js and WordPress to build interactive web, apps or otherwise. My slides are available below and you can find the demo app on GitHub.

http://www.slideshare.net/raelmiu/wordcamp-2014-norrkping

Writing a Children's Novel - part 1 writing

I've had plans on writing a book since... forever. And right now I have 30 days of vacation so I thought it was about time to do something about it.

Over the next few weeks I'll be trying to write, layout and publish my own kindle book. Of course I'll share everything about the process right here.

First off: Writing I decided to try to tackle Ayn Rand's Objectivism as a moral for the story. That set the stakes high enough. Over the next few days I'll flesh out a plot and write a first draft.

Of course you can follow me actually writing the document LIVE right here.

 

A new iOS notification design

Something I don't get about most current design is that designers adding features always add layers of complexity. Never add things unnecessarily.

This is my design for a new Notification system. The notification counter on top will ping in color and sound/vibration when new notifications drop in. The user can set which service does what in settings.

The entire notification list is under the spotlight window. If you use spotlight, it'll disappear until you remove your search.

 

UPDATE:

iOS5 has been unveiled and while I'm not shocked to find I wasn't spot on, I am a bit shocked by their adding another menu just for notifications. If you have no idea what I'm talking about check em out here.

Adding the Fun

I decided to start a new project that is closer to my heart than anything for the passed three years. A blog dedicated to explore gamification and game theory for products. Originally meant to be a short book I decided doing the research and most of the writing as a blog might help the project along. Who knows, it might actually be better for it.

You'll find it continuously updated over on Tumblr: Adding The Fun

New iTunes Redesign

iTunes is long overdue an overhaul. The old program has become so bogged down with features one can't help but wonder when Apple will update it. They might follow their mobile strategy and split into several parts or go for the completely cloud based streaming version a la Spotify.And they might announce it this Monday at WWDC. This is why I thought I'd redesign it while it is still a huge challenge.

My design is based on a rethinking of what iTunes manages, namely media. But lot's of different forms of media. In this design of iTunes every media item is considered to be a media bit no matter if it's a song, an album, an app or a book.

As you can see this design is radically different from the current version of iTunes. I've followed Apples recent reductionist standard in design and tried to eliminate everything unnecessary while retaining the purpose of the program.

There are three main areas of interest in this design:

  • The top navigation bar which holds filters, search and player controls. Allowing users to easily find what they're looking for.
  • The media view which allows users to browse through media, partly for fun and partly for aimless just looking. It also gives a great overview of what types of media and with modal boxes for more information can give users details if they want.
  • The bottom devices dock. This is where media is divided to the available devices as well as start and stop the currently playing list. I'll explain a bit more about devices below.

The start screen shows you the available devices as well as your favorite and most recently used media bits, this way the user instantly has an overview of where they left off last time.

I've considered devices to be anything that has media in it. From left to right:

  • The currently playing list displaying the artwork for the currently playing media with a simple play/paus control for the queue. Users access the queue by clicking this icon or just drag and drop media to it to add it to the queue.
  • The computer library. WIth home sharing different computers can share with all devices over a home network, I've just eliminated the extra fuss by reducing it as far as I've been able.
  • Peripherals, in this case my iPhone. Used in the same way as computers, playlists and the queue. Drag and drop or click to view contents.
  • Playlists, drag and drop media to and from and click to view.

A lot of people use playlists as a way to traverse their media libraries. I have actively made this harder as playlists are a lot more harder to search through as media libraries grow. Instead I've focused on search and filtering to allow easy browsing of the library. I have however thought this to be a perfect place for Apples famous horizontal scrollbars should the number of devices increase.

Filters are used to group media bits making it easier to find what you're looking for in a large library, seach is however crucial since most people tend to grow really large media libraries. Click a filter and all media is displayed as stacks or bits, click one suck stack or bit to see it's contents and either filter further or search the stack.

The currently playing queue acts as both a queue for media and as the main media player. It's a simple principle to learn and as all devices work in the same way the user needs never get confused or irritated at features appearing and disappearing depending on context.

Media bits can be freely moved between devices, making sharing and syncing simple and easy to understand.

Each media bit has detailed information available only if the user wants so know more.

The player controls have been moved aside leaving only the large play and pause button on the icon for the currently playing list/device. I'd love to get some more work done on this project in the future but I think Apple might beat me to it. And I'm excited by the thought of comparing my work with that of Jonathan Ive's team!

There are a few weak points in this design so far, namely the lack of the iTunes store and the lack of a way to arrange Apps on devices. While I've thought about solutions for these and believe that this design can accomodate them I haven't had the time to sketch it out yet.

Hope you like my work, and if you're reading this Mr Jobs; yes, I'd love to come work for you. ;)

See higher quality versions of this design at Flickr

Why I tweet

Tired of telling people why you are active on Twitter? So am I. So we've started a little project, me @heidi and @dcarlbom is aggregating tweets about why we tweet and will be using them to make the definitive explanation to why Twitter is so great. Help us out! Just add #whyItweet to your tweet and explain why you tweet. We'll be posting more about the project and following up on the results.

UX needs a common language

After a short debate with @miakolmodin about the difficulties of building a portfolio when what you do is design interaction we stumbled upon an interesting flaw in the design process. User Experience has no language. Now this might sound a bit redundant but all development needs language to convey principles and models that are often used. Why, for example, are we still trying to convince people that simplicity in interfaces is a good thing? We should have a word for this model of design that literally means "grade of simplicity in the interaction, with overtones of how good it is". Just to speed up the process.

So I figured I'd give it a go shortly. Thanks Mia for a great idea!

Business Card Design - minimalist color fetish

Another business card design, this one with a slightly less hidden fetish for the mint/new spring green that I really like. For some reason this color represents the color of sunshine and happiness for me. Has something to do with new leaves on birch trees in spring but that's as far back as I care to identify the emotional response.

 

busCard2

 

 

The card had, besides the clear fetish for green, a slogan about design that I regularly use as a mantra and a short pitch about why I can help improve your product. Not the most convincing one I've written but still alright. The typography of the pitch is a bit dodgy as the wording wouldn't let me balance the characters by reshaping the sentences. Might return to this one.

Business Card Design - minimalist typography

I realized last weekend that I'm missing a proper business card. Time to design one. And since I'm at home, sick but not dying, I took the time to do a couple of sketches.

 

busCard1

 

 

This card is based on the very popular typographic design posters you'll find floating around the web. Complete with a more minimalist front with the logo from my current WP theme design (not launched, still sketching and tweaking)

Creating a minimalist WP theme

These are just sketches for my WP theme. Just getting ideas out to test them visually. Experimenting with design is really an awesome process and I wish we had the tools to do the same with interaction without involving a group of developers and spending a lot of money. JesperBylund.com design

 

Experimented a lot with gradients and feedback as if the objects had a real world existence.

Worked pretty well but not at all to the degree I was looking for. Getting users to experience fake tactile experience through Gestalt Closure is really hard without sound.

 

 

JesperBylund.com design

 

Here I tried relying more on the grid to make the site look structured and clean. But I bailed out in the last minute and added a few details outside the grid that didn't work at all.

 

 

 

JesperBylund.com design

 

Here I was just trying to present a lifestream that could work as a living resume of my entire life. Before long I realized that what I really was designing was an XML feed. Not at all what I had set out to do.

 

 

 

JesperBylund.com design

 

Testing out the idea of a virtual business card. But it started feeling cheap really early. The point of a business card is to be able to hand it around. A website doesn't have the same appeal for the function. If I wanted you to find out exactly who I am I'd probably hand you my resume, not my site.

 

 

JesperBylund.com design

 

This was one of the most interesting models I tried. Another fake spatial space website but with equal amounts of information about me and information that I wanted visitors to see. Worked pretty well but ended up a bit cramped. Not far from my current direction though.