Subscribe: Acko.net
http://acko.net/tag/design/atom.xml
Added By: Feedage Forager Feedage Grade B rated
Language:
Tags:
bit  box  css  design  drupal  garland theme  garland  graphical design  graphical  people  theme  time  web  wordpress  work 
Rate this Feed
Rate this feedRate this feedRate this feedRate this feedRate this feed
Rate this feed 1 starRate this feed 2 starRate this feed 3 starRate this feed 4 starRate this feed 5 star

Comments (0)

Feed Details and Statistics Feed Statistics
Preview: Acko.net

Acko.net





Updated: 2016-05-12T20:06:53+02:00

 



Zero to Sixty in One Second

2013-08-23T00:00:00+02:00

.visualizer-activate { display: none; } .visualizer-activate a { display: block; position: absolute; left: 50%; top: 37%; width: 50px; height: 50px; margin-left: -25px; margin-top: -25px; text-align: center; vertical-align: middle; line-height: 58px; font-size: 28px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; padding-left: 4px; border-radius: 25px; color: #fff; background: rgb(108,123,132); box-shadow: 0 2px 0 rgb(84,98,105); box-shadow: 0 2px 0 rgb(84,98,105), 0 0px 5px rgb(255,255,255), 0 0px 20px rgb(255,255,255); } .visualizer-activate a.pause { display: none; opacity: .5; transition: opacity .1s ease-in-out; -webkit-transition: opacity .1s ease-in-out; line-height: 56px; } .visualizer-activate:hover a.pause { opacity: 1; } Fusing WebGL, CSS 3D and HTML Ladies and gentlemen, this is your captain speaking. Today's flight on WebGL Air will take us high above the cloud. Those of you sitting in Chrome class, on the desktop side of the plane, will have the clearest view. Internet Explorer class passengers may turn to their in-seat entertainment system instead. Passengers are reminded to put away their iPads and iPhones during take off and landing. Edit: You can now also watch the YouTube video kindly provided by Leland Batey. Acko.net, the domain, just turned 13, so it's time for a birthday present in the form of a complete front-end rewrite. The last design was entirely based on CSS 3D: it was a fun experiment, but created at a time when browser implementations were still wonky. It ultimately proved impractical: the DOM is not a good place to store complicated geometry. It's too bulky and there is a huge difference between a styled
and a shaded quad. After adding WebGL to the mix with MathBox and typesetting with MathJax, it turned into a catastrophic worst case for loading, and the smoothness was often lost even on fast computers. Since then, we've seen a big push for rendering performance, both from the native and JS side. Hardware-accelerated DOM compositing is better understood, requestAnimationFrame is now common-place and reliable, and we have excellent profiling tools down to the frame level. Hence the goal: to fuse 3D elements into the page like before, but with full 60 fps rendering. Plus to use WebGL instead of CSS 3D where possible, and be free of the constraints of the DOM. Like Voodoo I use a fixed full-screen canvas and sync up scrolling with a 3D camera. The scene is mapped to CSS pixels and CSS perspective is locked to the camera. Once HTML, CSS 3D and WebGL are all in sync there's a truckload of linear algebra and easing functions to keep you amused. The code is based on the platform I kludged together for the christmas demo, at times a mess of ad hoc demo formulas and spaghetti, though robust enough in the parts that count. Daim Procedural Wildstyle The so Designers Republic kitsch of last time was starting to grate, and I wanted something more stylish. Taking inspiration from street art and graffiti, in particular long-time favorite Daim, Acko's gone wild, though with a math twist. This design was built procedurally using some nifty vector calculus and more difference equations than you can shake a stick at. At its heart it's really a game of Snake, albeit a complicated one. Starting from a line-based skeleton of the model, the curves are traced out, smoothed, oriented and finally extruded on the fly into ribbons. The final pose shows 261 lines mapped to 2,783 curve segments, tessellated into 43,168 triangles, though that amount is just a knob that can be tuned. In other words, it's a scalable vector graphic. No images were harmed in the making of this header, or the rest of the window dressing for that matter. These pixels are local, organic and bespoke, though I'm pretty sure they're not vegan. The ribbons need to animate, so I'm using a slightly exotic set up: [...]



Noir meets web

2008-10-23T00:00:00+02:00

After 4 years of LeuvenSpeelt.be aka the Interfacultair Theaterfestival at my old university, the organisers are calling it quits. I was their resident web monkey, and designed a new site and poster every year. I always saw these designs as an opportunity to explore unconventional web design, as the sites were low on content and high on marketing — essentially being fancy brochures with a news feed.

With a track record of originality, I figured we should end it in style, so I whipped up a new page which explains the reasons for quitting (i.e. the politics) and highlights the work done with a timeline and some photos.

(image)

I wanted the reader to get a sense of ambiguity and dread that comes with ending big projects, so for inspiration I looked to Film Noir, known for its mystery and shady morals. The scene is meant to look like the desk of the typical private detective, who is trying to make sense of a case.

The end result was pretty close to how I imagined it, though the limitations of the web as a medium required me to tone down the contrast quite a bit for readability. This makes it lose some of the noir-ness, but overall the cohesion of the piece is still right. Because it's just a good-bye page, it probably won't get as much exposure as the previous editions, but it's the thought that counts.

I think it's a fitting end to a project that, more than anything else, has taught me about graphical design and style.

Tools used: 3D Studio Max (with Mental Ray), Photoshop, TextMate




Welcome to the World of Tomorrow!

2008-07-20T00:00:00+02:00

(with apologies to Matt Groening)

After about two years, it's time for another make-over of my site.

My last design had a relatively quirky look, with a bold red/yellow theme built from various irregular vector shapes. The idea was to step away from the typical mold of rectangular aligned frames on a page. I tried to incorporate some elements of perspective into the page composition, but it ended up being a relatively flat, geometrical theme.

This time I wanted to work on the depth aspect and try to create something that feels spacious. To do this, I based the entire redesign on a two-point perspective. While the content itself is normal 2D markup, it sits in a 3D frame.

(image)

(image)

The header image is a regular illustration file (which is 100% manual vector work) and the content is typical HTML/CSS. However there is a twist: the perspective from the header is continued into the content with some simple 3D decorations, created on-demand with Canvas tags and JavaScript (highlight canvases, check out the footer).

While this perspective works perfectly near the top, the further down you go, the more vertically stretched the shapes get and it ends up looking weird. To compromise, the projection actually gets more and more isometric the further down you go. This creates an interesting effect when scrolling down.

The design also uses various CSS3 methods (@font-face, text-shadow, box-shadow) throughout, and uses sIFR 3 as a fallback for the headline font. Unfortunately CSS3 is still mostly unsupported in the browserscape, so only Safari 3.1 users get the luxury combo of pretty, fast and no Flash. Everyone else will have to suffer through hacks.

As a total surprise, the canvas-rocket-science trickery even works in IE6 thanks to Google's ExplorerCanvas library.

I'll probably be tweaking it a bit more in the days to come, but feedback is appreciated.




Poster design for Interfacultair Theaterfestival 2008

2008-02-28T00:00:00+01:00

The design is meant to look like the cover of a board game box and accompanies the web site's design.

(image)




Because there are too many serious websites around

2008-02-07T00:00:00+01:00

I finished designing and building this year's edition of LeuvenSpeelt.be, a site that promotes student theater at my old university. You can read about the background in my previous blog posts.

(image)

The site is a simple Drupal installation with heavy content and theme work. The design is heavy on graphics and built as an experimental semi-fluid layout that adapts to different screen resolutions. Peripheral design elements are shifted in or out of the browser frame to make more space for content as needed.

Tools used: Photoshop, Illustrator, 3D Studio Max, TextMate. Uses the beautiful Fontin font available freely from Jos Buivenga's exljbris foundry.

And no, no easter eggs this year.




Design presentation slides

2007-03-22T00:00:00+01:00

I did my OSCMS talk Designer eye for the geek guy today. My main plan for this talk was to blast as much basic graphical design concepts into people's heads as possible and sort of teach some of the principles, vocabulary and methods that a lot of designers take for granted.

The response was great as far as I could tell. I also got the inevitable "How do we deal with Internet Explorer?" spin-off discussion in the questions round at the end ;).

Steven Peck recorded my session on video.

You can download the slides as PDF (36.5 MB), though because of all the graphics it's quite large. I think some sections will not be clear at all without the spoken explanation to go along with it though.




Announcing.... ComicJuice!

2007-03-06T00:00:00+01:00

Announcing.... ComicJuice!

I'm proud to announce the start of ComicJuice, a web 2.0 social mashup tool that lets you create comics in your browser and share them with others.

Update: Now with Internet Explorer support! Thanks to Google's ExplorerCanvas. Viewing comics works in IE6 and 7, while editing still requires IE7.

allowfullscreen='allowfullscreen' frameborder='0' height='349' src='http://www.youtube.com/embed/qhVMU48GfvE' style='margin: 0 auto;' width='425' />

The crazy part is that I started working on this only friday evening (that's 4 days ago). Once I had the initial idea and a rough plan, I simply couldn't not code it.

A lot of jQuery and JavaScript later, with some wizardry (boy is that thing inconsistent across browsers), we have a fully-fledged comic creator. The best part is that all of it is rendered client-side, so no actual images need to be generated. To display a comic, we use the same code as the editing interface. The down-side is that it doesn't work in IE, but I've been thinking about maybe doing a rough canvas emulation. We'll see. For now, the latest versions of Safari, Firefox and Opera have been tested and work well.

You can also embed comics with iframes, and copy/pastable code is provided. Like this lame example:

(No longer available)

I figured a Web 2.0 mash-up would not be complete without a fitting design to go in, so I designed icons, sliders and toolbars for the editor, as well as a theme for the website. The theme is a Garland knock-off: I guess I'm proving myself wrong that it's a bad base theme. It's actually quite good as it has fluid/fixed 1-3 column layouts in it.

I'm curious to see if ComicJuice takes off and what people do with it. It was a blast to code in any case. Check it out.




Drupal's Designer Future

2007-03-01T00:00:00+01:00

In the past months I've been doing a lot more graphical design, and it's caused me to think about how it relates to Drupal. This prompted me to write a rather long blog piece with some insights and a call to action. If you are interested in the future of Drupal, please read on. The trigger was that I noticed that I'm getting less and less motivated to do graphics work for Drupal. It's not that I don't like design... I loved designing and building that LeuvenSpeelt.be site last month for example. But when it comes to Drupal graphics, the personal reward that I feel from doing it doesn't seem proportional to the effort I put in. This includes designing little banners for the Drupal.org spotlight, doing a t-shirt, making ad buttons, doing the association theme and more. The most recent big example was the Garland theme. When Stefan Nagtegaal showed a work-in-progress version of his 'Themetastic' theme (as it was then called) in September, I was instantly charmed and knew that this was our new default theme in the making and said so clearly. Many others were not convinced though and hammered on details, even though the basic design for the theme was rock solid. Some were not convinced of the theme's potential, or simply didn't see that we needed a theme that was graphically smashing rather than a good base to develop on. At that point, I essentially said "screw the community, this is going to be our default theme" and started refining the theme so it was perfect for core. This took several weeks. Until then, the rest of the community put its eggs in the wrong baskets and got a lot of useless design-by-committee done. These designs, which were in my opinion mediocre at best, were being pushed for inclusion. This may sound a bit harsh, but I honestly believe that if the most popular candidate theme, Deliciously Zen, had become the new default core theme, we'd have been ridiculed for still not 'getting' design after 6 years and Drupal 5 would not have been such a big release. Just like 4.7, most people would not stick to Drupal long enough to discover how good it is. Now, when the Garland theme was finally done, everyone suddenly changed their opinion and congratulated the community on its excellent work. I have to admit this hit a nerve, especially after I'd been spending countless days and nights the two weeks before fixing annoying IE rendering bugs, redoing the CSS layout and adding a whole new layer of Glitz und Glanz to Drupal core. Only three people did serious work on what became the Garland theme: Stefan Nagtegaal did the original design from scratch and worked with Adrian Rossouw to come up with a proof-of-concept of the recolorable theme. I wrote the color picker, improved the theme and coded what became the color.module based on Adrian's stuff. Only a handful of people helped with testing of the theme during its development and only after the main theme was finished — most of the bugs were in the recoloring mechanism. How can such a vital piece of Drupal 5 have only have 3 serious contributors, when the whole release had almost 500 people submitting patches? To me, this shows that we have a problem in the Drupal community, or rather a knowledge void. Not enough Drupal people are savvy enough about theming and design to help out with even small tasks (like a banner) or even give quality tips and feedback on other work. The result is that theming and design receives little attention. Most contributed themes and sites could look a lot better, if they just themed it some more. And getting patches into core that give the defaults a little more oomph is tough, as they are often considered to be useless embellishments. Still, ever since Drupal started, there has been the recurring cry of doing more to attract great designers to the platform. The overall effects of this have been minimal. However, somet[...]



Children of Men Fake Media

2007-02-28T00:00:00+01:00

I got linked this video, which contains all the fake media created for the movie 'Children of Men' (see my earlier post).

Aside from sci-fi geek fun, I loved watching them to analyse the graphical designs they used. One of the subjects I'll be talking about in my OSCMS talk about design is branding and style. If you're going to attend, here's a great opportunity to do your homework.

Having an eye for graphical design is as important as creative skill, but luckily you can train on this. Each of these ads or clips has a different look tailored towards the product and its audience. Look at the graphical elements, such as images, colors, typography and animation and try to figure out why it's appropriate and effective. There's also some public signage in there which has a style of its own.

If you have some time, a good trick is to take a particular design, look at it for a couple minutes, then try to reproduce it in a graphical program like Photoshop or Illustrator. When you're done, compare your version with the original, and try to figure out what you did different and whether this makes it better or worse. Look for qualities like readability, alignment, typography, contrast and aesthetics. The ones in the movie are probably a bit too graphical each, but you can do this for logos or web sites too.

The clips can be viewed in QuickTime and were done by London-based design studio Foreign Office.

Tip: you can slowly move forwards or backwards in a QuickTime video by scrolling up/down.




Poster for Interfacultair Theaterfestival done

2007-02-19T00:00:00+01:00

I just finished designing the poster for this year's theaterfestival at my ex-university. I already blogged about the websites for the event which I made.

The poster follows the same carnival theme as the website and reuses several elements from the 3D scene. It's rendered in a flatter composition and looks more like a mini-tent or puppet show.

The challenge every year is finding an aesthetic way of cramming the information for up to 8 events on a single poster. The festival's branding is important (which explains the large title and website address), but these posters are going to be used for over 2 months. So, I chose to focus the design around the dangling labels for the events, with the floating ducks as decoration. In Belgium at least, there is a game at fairs where kids have to fish out rubber ducks from a steady stream using a small fishing rod, so it's a recognizable setting.

The 3D render was exported to a PNG and decorated in Illustrator. All the text and print on the design is vector art, so it will print crisply. For the 3D rendering, it is unpractical to go beyond 250 dpi as it takes too much time and memory to produce the image. Still, 250 dpi is sufficient for posters like this, as the final print will be 70 x 50 cm large (7000x5000 pixels @ 254 dpi).

I made an effort to paint and collect high quality textures for all the objects, so there is plenty of detail to look at up close. Every element looks realistic. Check out this high resolution version (3.5 MB) to see. The final PDF however is 2.5x more detailed, even.

More info about the event can found in this blog entry, or on the event's website (if you read Dutch).




OSCMS Talk: Designer Eye for the Geek Guy/Gal

2007-02-14T00:00:00+01:00

Update: I've posted the presentation slides and a video is available as well.

I'll be attending the OSCMS conference in Sunnyvale CA at Yahoo next month. Aside from a repeat of my DrupalCon jQuery talk, (though with a bit more examples) I just submitted another proposal for a talk. It's something that I've wanted to do for a while now:

In meetings and lectures across the globe, people are made to endure hideous presentation slides featuring some of the wildest colors, clip art and typography. Many websites are so confusingly laid out, that you get dizzy from the overload of boxes, images or links. And every day, people receive resumés, invoices and ads ... *cue lightning and thunder* set in the Comic Sans font.

It's enough to make the average designer's hair turn blue, fall out, morph into a ninja and stab him/her in the eyes.

But, all hope is not lost! Contrary to popular belief, graphical design is not some arcane voodoo magic, but a straightforward discipline that values experience, reusability, elegance and good tools just like programming. Just like code, there are plenty of objective ways to measure the quality of a design. However, just like art is subjective, so may two programmers disagree on which implementation is the best. No designer is born with a genetic sense of proportion... it's just that while you were busy writing BASIC code on your C64, they were busy drawing superheroes.

I myself am an engineering geek who's never had any sort of formal design or art training, but has earned the title of "design nazi" on numerous occasions.

This session will teach geeks some basic principles about graphical design (especially on the web), from a geek perspective. This means we won't talk about "visually balanced design" but "here's a good approach to spacing". Soon, you'll be hearing the oooh's and aaah's when you don your designer hat.

You can vote on the session page if you're interested.




Wordpress.com copies Drupal theme

2006-12-12T00:00:00+01:00

I just found out that Wordpress.com has launched a port of the Drupal Garland theme for their users. It didn't take long for some questions to rise up, so I'd like to clear up my side of the story.

I received a mail about a month ago by Bryan Veloso at Automattic where he praised the theme and was asking for permission to port it to Wordpress for Wordpress.com.

I replied with the clear fact that the theme is technically GPL'd and thus only subject to the restrictions in that license, but that there were a variety of other factors to consider:

The Garland theme is the result of a concentrated effort of a few dedicated Drupal folks to make a new default theme for the upcoming Drupal 5. Drupal has always been better on the technical side than the design side, and this is an important step to get rid of our 'clunky geek software' image.

We'd also like to use it to establish a better Drupal branding. The default Garland look is very blue and matches our visual identity. However, the recoloring feature of Garland ensures that people aren't stuck with all blues, and can change everything to match their tastes. So, more Drupal sites will now stick to using the default (Garland) theme. If website visitors keep seeing the same design on multiple sites, they might start to wonder why that is and what CMS is running behind it. This is especially important because, unlike Wordpress, our themes are typically built to be used both for the front-end and back-end (there really is no hard distinction).

From this point of view, if Wordpress or Wordpress.com were to make the Garland theme available, it would be a direct hit to our goals, especially because it's going to take us a couple of weeks to get our final Drupal 5.0 release out the door and really get the buzz flowing. And then, weeks or even months to see the spread of Garland-themed Drupal sites. (emphasis added for clarity)

I never got a reply or any sort of news about it, until Gerhard pasted me the link to the Wordpress.com announcement. My immediate reaction was disappointment. If Wordpress.com serves up Garland before we do, all hope of promoting it as an original Drupal style is pretty much flushed down the drain.

I'm also disappointed that they did such a poor job: Elements are missing or badly styled, the positioning and spacing is off too and they didn't even credit Stefan Nagtegaal in the footer.

Of course, technically, Wordpress.com didn't do anything wrong. But the fact that they asked first, and then still copied it and released it early feels like a stab in the back for me.




New Design for Acko.net

2006-07-13T00:00:00+02:00

If you're not reading this through an aggregator, you will have already noticed: I've redesigned my website.

The last theme lasted about 2.5 years, so it was time for something new and fresh.

Now, I don't know about you, but honestly I'm a bit tired of all the pastelly rounded corners and soft shadows that are all the rage today. Sure, it looks nice and neutral, but I'd prefer something with a little more oomph. So, after a day of fun with vectors tools, a highly saturated color palette and some browser-fighting, my geometric theme (uncreatively called Acko8) is completed.

(image)

The result is, as you'd expect, tableless and semantic XHTML/CSS. The theme should work from 800x600 up without scrolling (though at higher resolutions, more eye candy sticks out on the sides). Whether it is aesthetically pleasing depends of course on your own tastes. But I sure love the way it turned out!

What's cool is that I specifically crafted the underlying CSS skeleton to allow images to 'break out' of the text flow. The previous design tried this as well, but had several nasty issues with it. The effect is quite nice.

Aside from the looks I already reorganised the site a bit. The front door page was removed in favor of a more direct approach. I put my side projects a bit more in the spotlight as well. Finally, I emphasised the personal aspect, with a clear explanation of the site's purpose in the upper-right corner on every page.

Comments welcome!