Gilles Vandenoostende

Hi, I'm Gilles Vandenoostende - designer, illustrator and digital busybody with a love of language, based in Ghent, Belgium.

Archive for the ‘Design’ Category

Thoughts on FiftyThree's Paper

I came across an interesting article on how Paper’s new color mixer works:

In the new version of Paper released last week, you mix colors with your fingers, like it’s paint–only somehow more beautiful. This one magical feature burned a year of development time, resurrected the work of two dead German scientists, and got Apple’s attention.

It’s a good article so go read it. I made the color-mixer in-app-purchase last week and I’ve had some opportunities to play around with it. Here are my thoughts on it, and Paper as a whole.

I’m not sure how I feel about Paper and its new color mixer. I love the app for sketching, and I felt that the originally limited (and fixed) color palette was an interesting creative constraint: you worked with what you had. Some people felt the same way and described it as the Instagram for people who draw, which I feel is apt: even those of us with little to no art skills could make something aesthetically pleasing with it, in the same way that Instagram’s filters can make crappy cell-phone pictures look better than they ought to, simply by virtue of its pleasantly analogue feel.

But now they added a color mixer the app is climbing out of the toy-box and is inching into more professional territory. It portends you should be able to utilize every color in existence, yet I feel as though I’m constantly struggling against the app’s skeuomorphic design. I feel like it’s holding me back, unlike purely digital painting apps like Brushes 3 or Autodesk’s Sketchbook Pro which are much closer to giving you the power usually reserved for professional tools like Photoshop.

One thing that irks me is that with certain tools Paper decides wether a color should multiply when blending (i.e. darkening whatever’s underneath) or if it should be opaque (i.e. cover up what’s underneath) in a very digital on/off way. For instance, if you have 49% white and 51% color, it multiplies, but if you’re at 51%-49% it suddenly covers. Since you have no precision control over this mix it’s easy to mess up.

I know it’s emulating traditional painting in this regard, but in real life you have some control over the paint/thinner ratio (the analog equivalent of opacity), which Paper doesn’t give you any real control over (but then Paper also gives you the ability to undo, so there’s that).

That said, I still love playing around with it (and I really should post some more of my drawings). If you think of it as a sketchbook (and give yourself permission to mess up) it’s great, but at the end of the day it’s still a toy app, whereas apps like Brushes 3 could be used to make finished artwork that I could drop into Photoshop and use in production. I think that’s a shame when you consider how great the rest of the app feels to use.

I wish Photoshop also had a similar sketchbook mode so I wouldn’t have to mess with the file system when I just want to do a quick speed-painting, sketch or finger-exercise.

The Mobile Context

There are two schools of thought when it comes to mobile webdesign: one is responsive webdesign (RWD), which aims to serve the exact same HTML (and thus content) to all users, but adapts the layout to suit each visitor’s device. The other approach is to build a completely standalone mobile site, with a different layout and different content, and to redirect users using server-side device detection.

Defenders of the second approach often cite “The Mobile Context” as their reason for doing this: they argue that people browsing from a phone are likely to be on the move and thus need to be able to get to the most important information ASAP. They might be on a slow data-connection, have a cheap smartphone with a slow CPU and limited memory, or might just be high-powered business people for whom time is money and who have little patience.

Let’s take a website for a restaurant, as an example. A mobile user is most likely looking for the address, telephone number for reservations and the menu, so we put all that info right on the homepage. Great! Now please explain to me why mobile users deserve such an efficient experience, but why people on a desktop browser prefer to look at a 2MB stock-photo of a girl eating salad and dig through a complicated navigation-structure instead? People like efficiency no matter what device they happen to be using. But marketing  and unsubstantiated assumptions can quickly get in the way of correctly divining what people actually want from your site.

Many assumptions about people’s device capabilities are also flawed. Just because someone’s using a laptop doesn’t mean they’re on a broadband connection – they might be tethered to their 3G smartphone or using free Wifi in a coffeeshop along with two dozen other hipsters. Likewise, I might be using my phone to read something in the comfort of my own home and capacious wireless network – restricting me to a cut-down mobile site makes no sense here either.

The point is, you can’t predict users intentions and needs based on their device. We need to be building websites that are streamlined and efficient for all users. That’s why I find that mobile-first responsive webdesign is such a great design methodology: it forces you to prioritize your content from the get-go, so that you end up with a unified experience where all users get a good website.

Another likely reason why most big companies opt for a separate mobile site alongside their existing site instead of one responsive site is because it’s quicker to slap together a cut-down mobile version than to do a complete redesign. And that’s fine – it’s a long and hard process and few businesses can afford to wait that long while the competition might be stealing their mobile customers. But just remember that a separate mobile site is a bandaid – a temporary stopgap – and not a long-term solution.

Sooner or later, you’ll have to bite the responsive bullet.

UI Patterns for scrolling

Some design patterns I find that go well together with scrolling:

  1. Dynamically Fixed UI – like the sidebar on this very blog, for instance. Once a user scrolls past the top-most point of a certain UI element (like a menu or table-header) said element becomes ‘sticky’ and becomes fixed on screen. Now that mobile devices are beginning to support CSS’ position:fixed style, this could become a more common sight on sites.
  2. Animated Anchors – i.e. those links you click on and that scroll the page for you. Really handy because it not only takes the user to wherever he or she wanted to go, but at the same time also educates them on the layout of your site, and their position within it.
  3. Infinite Scroll – i.e. that AJAX trick to load in fresh content at the bottom of the page whenever a user scrolls past a certain point. For immersion, this cannot be beaten; If done right users can just lose themselves in the content before realizing just how long they’ve been reading the same page.

    The downside with this is that when a user clicks a link on the page, and then hits the back button, he or she will be thrown back to the top of the page. I can imagine a suitable workaround to this involving a just-in-time history push-state using History.js, so that when the user returns, they’re only taken back to the last page-fragment that was loaded.

The rising popularity of tablets and other touch-screen devices will only serve to increase the need for good scrolling user experiences.

My new portfolio

After spending the best part of the last year experimenting with (and evangelizing the use of) responsive webdesign I decided to scrap my existing portfolio and completely redo it, practicing what I preach – so to speak.

Here it is.

I’ve actually been agonizing over the next version of my site since… well, since the last version went live. Because I had decided to use WordPress as a CMS I had to compromise on a lot of areas I feel very strongly about (markup, efficiency, etc…), which left a bit of a bad taste in my mouth. But the version you’re seeing now is the result of just a few weekends’ – and late evenings’ – work.

Of course, there’s always the chance that some things got screwed in the transition from WordPress to a customized PHP solution, so if you notice any dead links or browser rendering issues, don’t hesitate to contact me.

Next up: to apply the new styleguide to this blog (and my tumblr, which I’m planning to expand upon), but that will be for this weekend.

Flash on the Beach 2011 - Post Mortem

Last year was my first Flash On The Beach and I was lucky enough to be able to back again this year. Here’s an overview of the sessions I saw:

Day One

Adobe Keynote

Adobe’s keynote deviated from previous incarnations, eschewing the usual Flash player statistics and highly rehearsed demonstrations for a more down to earth showing.

The biggest demonstration for me was Adobe Edge – the HTML5 animation tool recently released in alpha on Adobe Labs. Having only superficially played around with the pre-release version available on the Labs I still wasn’t sure if having a visual design tool for HTML animation was such a good idea, given Adobe’s poor track-record of code-generation tools (see: Adobe Muse). However, my earlier assumptions were proven wrong, as Edge is really shaping up to be a credible piece of software. The timeline looks a joy to work with, behaving like a cross between the simplicity of Flash’s classic timeline and the power of After Effects’.

The Flash IDE team should take note.

Love the Future – Carlos Ulloa

A nice showcase of some of HelloEnjoy‘s latest work in Unity and WebGL. Keep an eye out for “Lights”, an interactive WebGL-powered music video for Ellie Goulding.

With Great Power comes great responsibility – Elliot Jay Stocks

A great rant by Stocks which covered everything from bad combinations of drop- and inner-shadows, pointing out stupid design “fads” like Web 2.0 gloss, wood-textures, coffee-stains and the use of “impossible” 3D in web-design.

He pointed out that designers should strive for good fundamentals like strong typography and structure first, instead of fiddling about with all the new effects provided by CSS3.

During Q&A I managed to ask him his opinion on non-coding designers. He stated that he’s seriously re-considering his earlier statements where he maintained that purely visual designers still had a future in this industry.

Designing for today’s web, with web-fonts, responsive layouts, CSS3, etc… is becoming increasingly difficult if your only available tool is a flat image editor.

The only way to create a truly great web-design that takes advantage of all the latest advances in our field is to just bite the bullet and design directly inside the browser. For his current project, the redesign of Smashing Magazine, he’s doing exactly that.

TRON GFX by GMUNK

A stunning session by GMUNK giving us detailed breakdowns of several effect shots they made for TRON Legacy. The presentation covered the entire process from inspiration to pre-viz, writing custom graphics software to generate dynamic effects right up to the final shot as it appeared in the film.

GMUNK was also responsible for FOTB’s stunning opening titles, which he also gave us a process-overview of. It seems to me like FOTB is rapidly becoming more of an artistic/creative conference like OFFF – an evolution I can only cheer on.

(If you haven’t seen last year’s titles, by all means treat yourself)

Lettering is not Fonts – Jessica Hische

A nice presentation covering Ms Hische’s lovely portfolio of lettering, logo-design and illustration, while also opening my (and the audience’s) eyes to the staggering amount of work that goes into creating typefaces.

One of the more interesting pieces of advice she gave was to strive to be incredibly knowledgable about the design process, and to then share these insights with clients – turning them into potential advocates for your design choices, even if they may not fully understand them.

ProStress or the Graphic Universe of Han Hoogerbrugge

A cool showcase of Hoogerbrugge’s body of work. Funny and disturbing in equal measures. (If you don’t know Hoogerbrugge but find that his name rings a bell, he’s the guy who made Modern Living)

A Short Talk About Working and Not Working And How To Waste Your Time Proficiently – Jon Burgerman

A delightful overview of Burgerman’s massive portfolio of paintings and illustrations and a great insight into his interpretation of the creative process.

Day Two

Scaling & Organization: Massive Flash-Projects – How to build a Top 10 game on Facebook? – Wooga

A rather dry and dull session by 2 people from social-gaming firm wooga. Not very interesting, and I suspect it was only because they sponsored the event that they even got a speaking session, let alone in the dome. Should’ve gone to Riding the HiSlope! by Tomek Augustyn instead.

Pixels for the people – Seb Lee-Delisle

Seb’s sessions are always a riot, and this one was no exception. Using openframeworks, a modified playstation-eye camera and several Airport Express wifi routers he attempted – and succeeded – to turn the audiences mobile-phones and tablets into a massive synchronized display.

The process is far too complicated to detail in this summary, but the end result was quite amazing! Also, since I happened to be seated in the first couple of rows (and own an iPhone 4) I was called up on stage as a willing subject to demonstrate the principle behind his setup, before opening it up to the rest of the audience.

Paper.JS: Vector Graphics Scripting on top of HTML5 – Dr. Woohoo

A confused session, torn halfway in between trying to tell his life’s story and a far too simple tech-demonstration. A disappointment.

Slide to Unlock – Sarah Parmenter

A nice session about designing for iOS. Nothing too original but well brought – and I took away some useful processes for planning app-designs, such as the Application Definition Statement, which lists each feature the app must have tied to its intended target-audience. Great for narrowing down design-docs and focusing only on the most important things.

Meta Process: Making it up as I go along – Hillman Curtis

I came into this session not quite knowing what to expect but walked away duly impressed and inspired. A great talk about the creative process, and how to stay in on the right side of the complacent pushover/opinionated asshole graph when dealing with other creatives.

Because sometimes, collaboration is just about sharing failure.

Destroying my laptop with After Effects – Cyriak Harris

Cyriak was one of the great revelations to me personally last FOTB, and so I was glad to see him return, given a prime spot as the penultimate speaker on the second day.

For those of you unfamiliar with Cyriak’s body of work, take a few minutes to search his name on youtube and then – mind suitably blown – come back here.

In his first FOTB session last year he just showed his animations, but for this session he actually took us through a mini-tutorial of sorts, where he demonstrated how he took raw footage of a man writhing in a sheet (long story) and turned it into a lumbering monster walk-cycle.

Yeah. Difficult to explain, but be sure to watch the video once it comes online.

Who died and made me boss? – James Victore

Inspired session by self-taught independent artist & designer James Victore, wherein he took us through his body of work, recently collected in an impressive looking coffee-table book called “Who died and made you boss”.

Brought with much gusto and bravado, it was a great session with lots of laughs. Wouldn’t want to get on this guy’s bad side!

Day Three

The Elevator Pitch

A Flash On The Beach classic, where lots of great upcoming talents get 3 minutes to wow the audience and hopefully secure a full speaking session at next year’s conference.

Some of the best I thought were:

  • Mike Cobb: Get Real (digital fun in the physical world)
  • Matthew Burton McFaul: What You Don’t Know About Graphic Clips And Code (apparently, wrapping stuff in graphics clips doesn’t change its nesting, meaning a component wrapped in a dozen graphics clips on the stage is still accessible in code via level0.component! brain aneurysm)
  • Anders Figenschow: The Subtitler 3000 Very Awesome! (hilarious)
  • Graham Odds: How I Learned to Stop Drawing Lines and Love Whitespace (could make for an interesting design session next year)

Making tools – Keith Peters

A rather dry and dull session, as I’d already seen most of the items on display online or during previous sessions by the same speaker. A shame, because the last session I saw by bit101 at Multi-Mania was excellent.

Jam session

Another FOTB tradition. Great fun as several of the conferences senior speakers get 10 minutes to “wow” the audience and just show off, either with new stuff or stuff they didn’t manage to fit into their previous sessions. Seb Lee-Delisle managed to take his Pixels For The People experiment and scale it to over 150 devices in the Dome, which was most impressive.

New York, New York – Jeremy Thorp

I’ve seen Jeremy Thorp before at Multi-Mania a few years ago and so I knew I had to see this session. I wasn’t disappointed. As artist in residence at the New York Times he demonstrated some of the interactive data-visualizations he created inside Processing to analyze the Times’ massive influx of traffic and social media chatter.

The second half of his talk concentrated on his recent work with the people behind the 9/11 memorial and his work in helping to organize and layout all the +/- 3000 people who died at the WTC’s names on the metal placards. Amazing the amount of effort that went into this. Read more about this project on his blog.

As a quick closer he demonstrated processing and some of the features coming in the next version, like one-click exports to WebGL or Android.

Visions from the man cave – Jared Ficklin

Jared is a tinkerer and a creator, and so he spends most of his time inside his ‘man cave’, his basement/workshop where he creates the most amazing, crazy and downright mental technological toys imaginable.

During his session we went from phidgets to kinect hacks, from lasers to smoke machines, and how to throw a great party – among some other things to demented to mention. A great time was had by all.

The unknown voyage – Joshua Davis

What better closing-speaker than the great Joshua Davis. Inspiring stuff as usual, going through his classic work all the way to his latest work – creating Watson, the Jeopardy-playing AI for IBM.

And with that this year’s FOTB was wrapped up. It’ll take some time to digest everything I’ve seen, but rest assured – you can consider my creative batteries well and truly recharged.

Thoughts on Adobe Muse

A few days ago Adobe released a public demo/beta of their new web-design tool: Muse. Modelled after Indesign (it’s made by the same engineers) it aims to allow print-designers to create HTML sites without writing a single line of code.

Naturally, this didn’t work. Many influential webdesigners have already slammed the app’s many shortcomings – both technical and conceptual, so I won’t bother to repeat their perfectly valid criticisms. Suffice to say, I wouldn’t recommend it.

As far as I’m concerned, Muse’s biggest shortcoming is the absolutely attrocious quality of the HTML code it generates. But even if Adobe fixed that, by for example switching to a better layout framework and reduced the amount of code by 80%, it would still be a poor substitute for a skillful webdesigner and a text-editor. The reason for this? Semantics.

Jeffrey Zeldman wrote a post last year entitled “An indesign for HTML and CSS”:

But Nack’s “constructive” suggestion for Adobe, quoting Michael Slade, is to create “the modern day equivalent of Illustrator and PageMaker for CSS, HTML5 and JavaScript.”

Nack acknowledges that this will be difficult. I propose that it will be impossible. Says Nack:

As I noted the other day, “Almost no one would look inside, say, an EPS file and harrumph, ‘Well, that’s not how I’d write PostScript’–but they absolutely do that with HTML.”

Well, there is a reason they absolutely do that with HTML. PostScript is a programming language designed to describe page layouts and text shapes in a world of known, fixed dimensions (the world of print), with no underlying semantics. PostScript doesn’t care whether an element is a paragraph, a headline, or a list item. It doesn’t care if a bit of content on one page cites another bit of content on a different page. PostScript is a visual plotting language. And HTML is anything but.

HTML isn’t just a collection of blocks representing pretty pictures: it describes a document, whose content is meant to be consumable by just about anything. A properly written and formatted HTML document should remain human-readable even when viewing the raw source-code. This is an incredibly vital advantage of HTML over other technologies, and to just discard this like a used hankerchief, when the semantic web is right around the corner is hugely irresponsible on Adobe’s part.

Adobe is essentially lying to untold numbers of print-designers by telling them “Yes, you could – nay, should – be making websites, even if you can’t code”. And this my friends, could only lead to calamity: can you imagine handing Muse-generated HTML off to a back-end developer to integrate? He’d laugh you out of the room! For all Adobe’s claims to the contrary they are actually widening the gap between designers and developers with every new release.

Indesign can now export Flash sites, DVD menus and those god-awful iPad magazines that are nothing but 500MB zips of “interactive” Jpegs (magazines that, by the way, will look like absolute arse when Apple decides to release a retina-display packing iPad). I’m betting the only reason they didn’t release Muse as an Indesign plugin was because Indesign isn’t included in the Web-Premium Creative Suite.

Adobe’s philosophy that (print-)designers should never have to learn anything other than graphic design is hurting every single app in the creative suite today. Every release, more and more features no professional actually uses are added to already overly complicated and bloated apps.

“Look!” they’ll say, “without a single line of code I can use inverse-kinematics in Flash!” For a sales pitch that’s a pretty compelling feature. A feature noone uses of course, because full-on character animation is rare in a webdesign workflow – and the professionals I know still do it by hand.

But the feature’s there, and it’s taking up space in your tool-palette, memory, keyboard-shortcuts and even required a rewrite of the Flash IDE which means it now consumes 3 to 10% of your CPU (depending on how fast your machine is) at all times, wether you’re doing something or not. And I’m sure you can give exampes of similarly useless features across the entire suite.

Bloat and inefficiency aren’t even the worst side-effects of these additions: it’s the fact that with every year that passes, the barrier for creative people to get into these apps gets higher and higher. Flash went from being the easiest animation-tool ever to a hugely complicated development framework spread accross three different apps, and multiple programming languages. The animation-tool is still there of course, but it’s become so bloated, so slow and so unstable that I doubt it could ever enthrall newbies like it enthralled me all those years ago.

Same thing with Dreamweaver: I learnt a great deal about webdesign and hand-coding from toying with Dreamweaver’s design-view. I didn’t realize that tables for layout was bad, but then – noone really did back then. I just drew the layout and then switched to code-view to see how it’s done. I taught myself a great deal about then-contemporary webdesign techniques, and after a while I switched to hand-coding entirely, simply because it was faster that way. I’ve been teaching myself how to code better HTML and CSS ever since.

Muse doesn’t even have a code-view.

Thanks to Photoshop, Flash and Dreamweaver I taught myself how to design, how to animate and how to code, which now means that, given a copy of the Creative Suite (or any similar tool, honestly) and time, I could single-handedly build almost anything I can think of. I fear creatives growing up in Adobe’s vision of the future will never be able to say that.

Adobe MAX Autopsy report: Flash Catalyst

Crossposted from pool.proximity.be.

As you may have seen last week, we (Matthias, Pieter and myself) have had the privilege of attending Adobe MAX in the lovely (yet very wet and cold this time of year) city of Milan, Italy.

MAX is Adobe’s yearly conference, held in North America, Europe and Japan, focused on presenting the latest technological advances made by Adobe, as well as providing education on the software currently available. The sessions are presented both by Adobe “evangelists” and members from the community.

In this first blog post, I’ll be talking about the big thing of the show this year, namely Adobe’s upcoming new entry in the front-end webdeveloper market-segment : Flash Catalyst. Read on after the jump.

(more…)

Back to top