Archive for the ‘Design’ Category

Say hello to Jousey Gifts & Gadgets

At the start of the year, we started to develop ideas for an e-commerce business. For years I’ve worked on websites and commerce solutions for other businesses, both big and small. But I’ve always been playing to someone else’s tune; developing things around someone else’s business objectives and aesthetics.

So, when Jo came up with the idea for a boutique online gift store, we started to put the wheels into motion for creating something different, taking everything we know about online commerce, and moulding it into something of quality and substance.

We’re on a long journey with this project — that’s a long way to go — but last week we hit our first big milestone, with the soft launch of Jousey, a place to buy unique gifts and gadgets. The first iteration of the design has been carefully crafted to make simple and intuitive to use, but with a fresh, vibrant feel which we think breaks the mould of boring online stores.

We’re curating big, bold and beautiful product imagery to complement the choice products we’re stocking. And since we’re all doing more and more browsing on our mobile devices these days, we’ve crafted the site to adapt and look just as beautiful on phones and tablets. There are lots of updates and new features in the works over the coming months, and it’s great to have the opportunity to be working on a growing, evolving design for a change.

We’ll be having a proper press launch next month, and you can keep up-to-date with all of our adventures into selling the very best, hand-picked gifts at the site’s blog.

The distribution of iBooks 2 content

Yesterday, Apple announced the launch of iBooks 2, and an audacious initiative to modernise the textbook industry. As part of the launch, they also announced the release of iBooks Author, a free tool for creating and publishing eBooks.

I’ve not had a chance to play with it myself yet, but it looks like a very slick, well-made and easy-to-use tool for creating interactive books — something which has been missing from the market for far too long.

I’ve seen a fair bit of negative talk on Twitter though, mainly about the terms of Apple’s SLA and how books created with iBooks Author can be distributed. The short story is that if you’re planning to sell your publication, you have to distribute it through Apple’s store — you’re forbidden from distributing through any other means. Seems to many like a dictatorial move from Apple, but David Smith has an interesting take on this:

The real story here today shouldn’t be that Apple has ‘audaciously’ claimed ownership of the books make with iBooks Author but that they have created an avenue for non-commercial distribution that would exclude thementirely. That is actually unprecedented.

If I create a textbook using iBooks Author and then decide to made it freely available to the world (à la Khan Academy) I can do that without any restriction. Simple click ‘Export’ within iBook Author and the resulting file can be distributed by any means I choose and then loaded in iBooks. The mind boggles at what things may come out of this.

All Apple is doing with this restriction is saying that if you directly profit from this free tool and platform that we have created, then we deserve our cut. Which seems entirely fair to me.

And John Gruber has followed up on this with an interesting point about the HTML5 foundation of this iBooks format:

Second, it’s about not wanting iBooks Author to serve as an authoring tool for competing bookstores like Amazon’s or Google’s. The output of iBooks Author is, as far as I can tell, HTML5 — pretty much ePub 3 with whatever nonstandard liberties Apple saw fit to take in order to achieve the results they wanted. It’s not a standard format in the sense of following a spec from a standards body like the W3C, but it’s just HTML5 rendered by WebKit — not a binary blob tied to iOS or Cocoa. It may not be easy, but I don’t think it would be that much work for anyone else with an ePub reader that’s based on WebKit to add support for these iBooks textbooks. Apple is saying, “Fuck that, unless you’re giving it away for free.”

Worth noting that Apple pitched their launch event at the education market, and they’re probably already a long way down the road with making deals with educational institutions (Apple has a track-record of quietly making individual, private deals in the education sector). Amazon et al have had a massive head-start in the ePublishing sector, but none of them have been audacious enough (or powerful enough) to make these kinds of bold moves into education.

Apple are doing a very clever thing here: they’re making efforts to put iPads into the hands of young adopters. Talk about brand exposure!

Publishers aren’t learning from the web

Oliver Bothwell ponders the current state of publication apps on tablets, concluding that publishers just aren’t learning lessons from the web:

And now it is quite easy to see why the media apps are failing. They are all difficult to navigate requiring too many swipes, flicks and scrolls to find things. Eureka has a lovely opening navigation and the magazines have contents pages but where are the search bars? Have they learnt nothing from the web? Where are the related articles, tags and comments. They are not taking advantage of the fundamental tools available to them. Instead they are creating gimmicky apps without any real substance. Media companies are changing but without realising what is their best asset, their quality journalism and ability to edit, which they sacrifice to fads and pointless interactive content. Newspaper and magazine sales are down because the internet allows easy consumption and access to lots of information; the only way to start making money is by championing this in their apps and combining with excellent user-interface and editorial design. At the moment there isn’t an app which is better to use than the newspaper or website equivalent and this should be worrying to an ailing industry. The approach is entirely wrong; it is not the content that is the problem, it’s the way it’s being presented.

I’ve, personally, yet to find a media app which feels “right” — even the very popular and innovative Flipboard doesn’t fit the bill, for the may of the reasons that Oliver flags up: too many swipes, no way to effectively filter and search.

The 1140 Grid

Another contender in the one-grid-to-rule-them-all category: the 1140 grid is designed to be fluid, right down to a mobile version:

The 1140 grid fits perfectly into a 1280 monitor. On smaller monitors it becomes fluid and adapts to the width of the browser.

Beyond a certain point it uses media queries to serve up a mobile version, which essentially stacks all the columns on top of each other so the flow of information still makes sense.

It’s a nice, simple idea explained in a very clear and concise way.

Baker ebook Framework

Baker is an open-source HTML5 ebook framework for publishing books on the iPad using open web standards. From the website:

To design for the Baker Framework you just have to build HTML5 pages with a fixed width of 768px and you can unleash the power of WebKit.

That’s all. Use your favorite tools, test it on the iPad from Safari, refine as much as you want.

It seems to have a workflow – which is being refined – which allows you to easily compile your HTML5 as an application which is ready for submission to the Apple spp store.

Mashable has a short feature on the framework:

“HTML5 is out there,” co-founder Davide Casali wrote us in an e-mail. “Why is nobody really making the convergence between the publishing industry and the web, and why are we confined to those crappy designed epubs?” he asks.

Casali and his team hope their creation will lead to more beautiful e-books and digital magazines on the iPad, and for other WebKit-enabled devices later.

Ber interesting to see how this develops and what gets created with it. I’m sure the fact that it’s being released under a BSD license will encourage plenty of experimentation.

Khoi Vinh on iPad magazine apps

Khoi Vinh on the rush of publications hitting the iPad:

My opinion about iPad-based magazines is that they run counter to how people use tablets today and, unless something changes, will remain at odds with the way people will use tablets as the medium matures. They’re bloated, user-unfriendly and map to a tired pattern of mass media brands trying vainly to establish beachheads on new platforms without really understanding the platforms at all.

The fact of the matter is that the mode of reading that a magazine represents is a mode that people are decreasingly interested in, that is making less and less sense as we forge further into this century, and that makes almost no sense on a tablet. As usual, these publishers require users to dive into environments that only negligibly acknowledge the world outside of their brand, if at all — a problem that’s abetted and exacerbated by the full-screen, single-window posture of all iPad software. In a media world that looks increasingly like the busy downtown heart of a city — with innumerable activities, events and alternative sources of distraction around you — these apps demand that you confine yourself to a remote, suburban cul-de-sac.

Sencha Animator: The CSS3 Alternative to Flash?

Sencha, the guys behind the ongoing development of ExtJS and some other very clever UI technologies, have announced the release of a new tool for creating CSS3 animations:

Sencha Animator allows you simply place objects (text, shapes, and images) onto a re-sizable stage area, configure their properties and then animate to bring them to life. You can move, scale, skew and rotate objects singly or at various levels of nesting, in 2D or 3D space. With Sencha Animator, you can also take advantage of CSS3 capabilities like gradients, blurs, reflections and shadows.

At first glance, it looks to have a very clean and well-implemented user interface – better than the offering Adobe previewed earlier this week at least.

I can’t say I’m too keen on this continuing trend towards using CSS for “animations” though. My worry is that people will start to abuse these kinds of tools and start to create ugly, breakable user experiences which hark back to a web we were glad to leave behind. Slick and elegant transitions I have no problem with, but give people a Flash-esque tool for CSS, and Flash-esque applications they will create.

The really interesting thing to note here is in the foot of their announcement:

For those of you wondering what Sencha Animator is written in, the answer is… Ext JS of course! Ext JS provided an enormous short-cut in development time and allowed us to deliver the product on multiple platforms without worrying about Objective-C or Windows APIs.

Very clever: a fully-fledged, multi-platform application written in Javascript. And I assume that means it would also run perfectly fine in the browser.

Preview of the Edge prototype tool for HTML5

Interesting. Short video from Adobe showcasing a prototype of their new Edge tool, for creating animations and transitions using “the capabilities of HTML5″.

A few things which instantly spring to mind:

  1. The transitions featured in this demo aren’t capabilities of HTML5, they’re capabilities of CSS3. CSS is the technology which deals with presentation logic, and to continually refer to the “animation capabilities” of HTML5 is simply misleading and will cause confusion.
  2. Speaking of confusion: it’s interesting that Adobe are seeing fit to use unfamiliar language to describe the elements of their user interface: “Layers” to identify DOM elements; “Actions” to manage groups of transitions; “Symbols” to group objects. The semantics seem all wrong, and are reminiscent of Flash authoring (something they’re probably quite keen on). It just all sounds very unfamiliar and over-complicated, because…
  3. I know this is just a prototype and proof-of-concept, but surely this is just a very basic UI for writing CSS transition rules? Webkit is being used for rendering much of the property panels seem to be borrowed from Firebug and Safari development tools. The only new thing here seems to be a Flash-esque timeline.

Well done to Adobe for stepping into the HTML5 eco-system. But surely it makes sense to jump in with both feet and present something with substance, rather than dipping their toe in with some flimsy animations?

Update: It appears than on closer inspection, this prototype isn’t even using CSS for transitions: it’s Javascript manipulating the HTML DOM. So what exactly has it got to do with HTML5? Absolutely nothing. Bad show Adobe.

Building a Custom HTML5 Audio Player with jQuery

A brilliant, in-depth post from Neutron Creations about creating a custom HTML5 audio player:

We recently built an HTML5 audio player for Tim Van Damme‘s The Box, a new podcast where he interviews people who make cool stuff. Tim wanted an HTML5 audio player on the site, and we put together some jQuery to hook up the player interface he designed. In this article we’ll run through the code to explain how it works, covering a few caveats along the way.

They provide code samples and an explanation of their really well thought out design decisions. Really surprising how little code is involved in creating something like this too.

Adobe unveiling the Digital Design Suite

Mashable report that Adobe are about to unveil their Digital Publishing Suite, a tool which will allow publishers to create Wired-style digital magazines:

The Digital Publishing Suite will let publishers create, produce, distribute and monetize their digital magazines and content across different devices and marketplaces. The App Store is obviously the biggest target of the Digital Publishing Suite right now, but the platform is designed in such a way that it is easy to target multiple marketplaces at once.

At first glance, it looks like Adobe have thought the publishing workflow through quite well on this, with distribution, monetization and analytics built right in to the toolset – they’re obviously focused on keeping ahead of the game in this profitable area. But the authoring platform is heavily focused on InDesign, and I’m not convinced that’s the right tool for creating the next generation digital magazines: it’s a tool for creating page-based print designs, not the rich, interactive experiences we’ve come to expect.

An interesting closing comment from Christina Warren:

Thanks to desktop publishing tools, the barriers to creating professional content and layouts have really been reduced. With the App Store, and mobile devices and tablets, the distribution barrier is also breaking down, allowing more publishers — big and small — to get their content onto digital devices.

The distribution and publishing barriers were broken down a long, long time ago: HTML and PDF are much better tools for modern-day publishing. HTML5 and CSS3 blow the pants off of anything these bespoke, proprietary solutions can offer.