brunobergher::blog

Apparently, yesterday’s Big Thing was the Awareness test:

Pretty interesting, right? This made me think about the level of thought and craftsmanship we, designers, frequently put into some details. That may be too much sometimes.

Charles Eames said: “The details are not the details. They make the design.” Who am I do disagree with him? Really, how could I ever go against this? The thing is, love details. I truly believe the dedication to seemly minimal things can more than often be the one way to really get a design right; I think the same way when deciding programming approaches to some problems:

But one other thing I do believe, however, is that sometimes designers get to the detail phase before everything else is done. It’s not rare to find a website with great finish, but lacking some essential item in the menu, or perhaps a design that doesn’t make it clear what’s the goal of that site is.

There’s some groundwork that often get left behind in the race for perfect details. And achieving overall beauty should not, under any circumstances, get in the way of detailed usability, legibility and purpose-filling considerations. My point is to suggest that details can and should be prioritized: never ignored, but always contextualized in the flow of a project, coming up when all functionality is right.

Because the result, sometimes, can be in some ways similar to the video: you may do a great job drawing and animating a break-dancing, moonwalking bear, and the user ends up never appreciating the level of work you put into it, because she simply needed to count passes.

(This is the first of what I hope becomes a series of posts on books I finish reading. I hope any of this ends up being useful to someone.)

I don’t plan to review Steve Krug’s Don’t Make Me Think: A Common Sense Approach to Web Usability in any new way; 411 people have done it so far in Amazon.com alone. Considering at least 100,000 people have already read this, you can take it for granted that it’s a good book. I guess I’m writing to convince you to read it as soon as possible (if you don’t have already, of course).

Upon receiving it at home, I was surprised to see how thin it is: the Brazilian edition which I bought (I’ll get back to it shortly) is only 127 pages long; it seemed like a very introductory, superficial book. I guess I’m more used to judging a book’s by it’s length than I thought, and got punched in the face with that unfair assumption later on. In fact, the author himself aimed to conceive something ‘that could be read in a single airplane trip’.

Let me just tell you this: just 50 pages on, I was already quoting Krug all day long in discussions at work. His ideas are so simple, make so much sense and are so generic that, if you’re designing/developing interfaces (web-based or not) you’ll see yourself constantly in situations where Krug can help you. His common sense approach just becomes something you take with yourself, and put before the many obscure considerations people end up having when discussing project details.

It’s also interesting to see how the examples in the book—which are only two years old in many cases—are already outdated, while the principles he shares are more up-to-date than ever. His ideal definition of a home page has become the standard template of Web 2.0 sites (big, clear company statements with big call-to-action buttons and links); and even though Krug barely mentions web-apps in the text, everything he writes just fits in perfectly to them.

Summing up: huge recommendation, for anyone involved in sites/software design/development/management/conception.

* Note on the Brazilian edition: if you’re a fellow Brazilian, avoid the AltaBooks edition at all costs. Really. Run from it like you’d run from the devil. Page layout is terrible, with no margins whatsoever, reaaaaaaaaaally long sentences, the footnote references are all screwed up, a lot of bad translations. In many cases the book tears apart the usability principles Krug is explaining in that very page. I’m thinking of warning him about this, if can manage to get in touch.

If you can read the English in this blog, you deserve a good edition—as I believe the original one is. So go for it.

… it could probably look like something this:

(It’s a homage/exercise by an art student, by no means comparable to Saul’s work, but definitely worth watching.)

I am a huge fan of the design of movie titles, so much my graduation project was actually a book (some 250 pages long) on this subject. It never went on to publishing, but is one of the most joyful things I’ve ever worked on; I hope someday I can get back to it.

Be sure to check the ‘related’ videos list in this video’s page, which showcases some of his work, including my favorites—Anatomy of a Murder and Ocean’s Eleven (1960).

While at it, try to watch ‘Why Man Creates‘, a short film made by Saul and his wife Elaine Bass about creativity, which won the 1968 Academy Award for short documentary.

I’m really proud to officially launch my friend and fellow designer Liana Nigri’s portfolio website, fully designed and developed by yours truly. The site has actually been up for a week now, but I just managed to sit down and write a post about it.

Liana approached me in need of a very simple website that should showcase some of her projects as both textile and graphic designer, while focusing on the former. She has a great body of work on textile patterns developed in some big Rio de Janeiro fashion houses as well as her current studies in London. Her main goals was to have a place where she could point new contacts to, and to have something she could edit on her own.

The result was this cute little website, highly interactive and inviting, which, as far as Liana has told me, is doing well towards some very specific goals of hers.

Backend developing was made as simple as possible—considering the big proportion of images vs. text content—and I chose a basic PHP/XML structure to handle the data. There’s a simple experimental admin tool (Liana is my friend, she told me I could test some new stuff with her) with lots of drag and drop functionality, which I plan to write about in a future blog entry. In the next few paragraphs, I’ll try to write a brief summary of the main considerations of this project.

Getting the design right

Liana’s line of work is mostly of colorful, vibrant, complex images, full of detail and interesting shapes and arrangements. Almost all of these images are repetition-based patterns, which can only really be fully understood and appreciated when visualized in side-by-side repetitions.

I realized then that I should create a design that was the least obstructive as possible allowing Liana’s work to shine without being obscured by the site interface. The result was this very simple interface, very application-like, which allows the user to see the patterns in a variety of sizes, zooming in and out as desired, and dragging them to get the best view. And even allowing the main window to be dragged around to get the best framing possible.

Since the site design itself was so minimalistic (in both quantitative and qualitative senses), the execution was pretty simple, with some nice use of CSS and lots of unordered lists, in 100% valid XHTML, no question about it. The central point to execution was adding interactivity.

Getting the interaction right

In order to have the level of interactivity I wanted, I certainly had to turn to JavaScript. Flash was available but was not adequate in some other aspects, mainly time. And considering the website has a 100% visual goal, the use of JavaScript became a non-issue regarding browser accessibility considerations.

There was no doubt I’d use the great jQuery library, to which I’m a huge fan, but there seemed to be a lot of UI to develop. jQuery UI to the rescue! This is a great set of extensions and plugins to jQuery which allowed me to include some advanced functionality, such as the resize slider and the background dragging. There’s no question my job would be infinitely harder without this.

jQuery also helped me add some animation to parts of the interface, and the AJAX-candy in the contact form.

From that point on, the frontend process became basically of adjusting some minor details, and getting on to developing the backend and administration.

Handling of images and javascript files

Liana’s site is very easy on the server: no database access, no complex calculations on the back end; but there are a lot of heavy images (to get the details right, some pictures are 500+ KB) and a lot of JavaScript, which could make the site very heavy to load. Fortunately, I developed these two simple scripts, on which I plan to get back to in a later article, which negotiate this heavy lifting.

One of them handles the resizing of max-size pictures in the server to the needed smaller sizes, generating cache files which can later be served directly, with no image processing on the server.

The second one handles just-in-time, server cacheable cacheable, javascript compression, which groups all of the needed scripts and then compacts them using Dean Edward’s packer port to PHP by Nicolas Martin, dramatically reducing the final file size and the number of requests needed to load the page. There are some current issues with browser caching with this script, which I intend to correct soon, and then release here.

Summing up

It’s been a pleasure working on this project, and I hope it goes on to fulfill it’s owner goals. If you have any comment, question or find any bugs, please don’t hesitate to comment here or contact me.

Smashing magazine ran a few days ago one of their extensive, image-crowded entry (to many of which I’m a big fan) on how there’s a trend towards ‘grunge’ style in webdesign.

I was somewhat surprised to see this line of visual presentation being brought up as a new new trend in webdesign. I mean—trends are always coming back and being recycled into something a bit different, but when the revival is 20 years apart from the original, it’s easier to digest.

70s typography, color use and proportions where quite ‘in‘ three or four years ago (great examples in MK12’s spots for AXN and Red Hot Chili Peppers’ video for Zephyr Song) and could be considered somewhat new because these characteristics where blended with the new possibilities that technology allowed.

But we’ve been just past grunge, in some aspects we may not even be through with it, and it’s already coming back.

Stuff comes back and, somehow, it seems new to some people. I get caught in that often. Being young may lead, sometimes, to cultural shortcomings (nothing that time can’t cure) and I find myself often in situations where I think something is new while it’s just a re-use or re-style of something a bit older; this happens specially with music and movies.

So, I thought I could show just share three links that seem appropriate to this context:

David Carson

Carson is most probably the one designer that lit te spark on the whole grunge design style of the nineties. Knowing his work and where it came from is essential in the process of one’s compreehension—and hence full ability—to design along this style.

The End of Print, by Lewis Blackell and Carson is a wide showcase of his work (up to the time of it’s publish date) and worth reading.

Misprinted Type

Misprinted Type is the body of typographic work fellow Brazilian designer Eduardo Recife dating from 1998 to 2004. Many great fonts, some which free, and some of which have been best sellers at myfonts.com.

Nike Jumpman M4

Very well thought, detailed design elements, with heavy textures and finish, while in a simples structure. One of the very best uses of 3D in Flash I’ve seen so far, and an example of great contemporary grunge design.

---

While researching for this post, I ran into interesting rant about the cultural and pseudo-political aspects the “appropriation of independent punk rock culture in the mainstream media” which is worth reading (it’s actually an album review, but the few first paragraphs get into that, and might even inspire another post in the future).

Since the beginning on November, Paula Scher has been exhibiting her latest painting work in Maya Stendhal Gallery, in New York. Great work.

It may be old news to some, but it’s quite a discovery for me.

I’m amazed with the density of information Scher conveys in her paintings, exploring very diverse aspects of the regions she is depicting in the maps, from income differences in New York City to the population composition of cities in the Middle East.

It resembles very much a lot of generative art projects, only made by hand. This brings a subjective and case-by-case kind of approach to the details that allows her to choose what to bring forth in a way a algorithm most probably couldn’t. Not to mention the infinitely more interesting texture that her brushstrokes produce, compared to the frequently dr—though frequently beautiful—results achieved with the computer.

On the other hand, the work has a very solid conceptual basis. From the exhibition essay:

“These are absolutely, one hundred percent inaccurate,” Paula Scher declares of her colossal map paintings. Then, after a pause: “But not on purpose.” Another pause: they’re actually “sort of right.” And therein lies their bracing paradox. Scher’s sites—Manhattan, Israel, and India among them—are instantly recognizable. Scanning the allover expanse of the canvases, you might easily pick out the swath of Central Park, the void of the Dead Sea, the dot of Mumbai. But they are also highly interpretive. The colors and graphic styles allude to loose, mostly media-fed impressions. Consider Middle East, where black paint predominates, reflecting both the dire conflict in the region and the oil underlying it.

If you know where to get more information about her art, and about other people that carry on projects similar to this in any level, please comment below.

I also dug up a link to a previous exhibition she did, with similar work, back in 2005, at the same gallery.

Via Visual Complexity.

Update: Erik Natzke does something that might be the other way around: Flash Paintings. Those are pieces of Actionscript generative art which end result get’s very close to the texture of acrylic or oil paint. Definitely worth the visit.

I got my hands on three of the most famous Edward Tufte’s books—The Visual Display of Quantitative Information, Envisioning Information and Visual Explanations— and reading them has been a great experience.

There’s this point I’d like to highlight in this post, but I’m sure I’ll be writing on his ideas again in the future.

On Envisioning Information, Tufte brings up an analogy concerning the design of rich data graphics and the view on dance of Russian ballet choreographer George Balanchine, quoting Lincoln Kirstein’s 1972 essay ‘Balanchine’s Fourth Dimension’:

A committed Balanchine dancer (with a small ‘d’) comes to realize that Personality (with an enormous ‘P’) is a bundle of haphazard characteristics frozen in a pleasing mask for immediate identification and negotiable prestige. No matter what is danced—and it makes little difference—stardom dims the dancing. What is danced is perforce secondary. There are two types of ballet companies: those interested in selling stars and those occupied in demonstrating and extending the dance, as such…

I had a great discussion weeks ago with a few designer friends about what we were calling ‘intellectualized’ or ’strict’ design, which is, more often than not, what is considered to be the discerning point between great designers and the average.

That notion that the one that chooses a font for typesetting anything because of the very history of the typographer’s life, or that emulates the visual structure of the work some important designer long dead simply because it is mentally considered to be what’s good among designers, in my opinion, comes very close to this concept of stardom in ballet.

Design is an industrial craft, rooted in aesthetic principles inherited from art, but geared towards production, consumption, objective communication.

The notion that the work that should be exalted is the one that uses visual resources that appeal only to a very strict and design-educated audience, mainly designers themselves, as opposed to the wide appeal that a user- or consumer-oriented approach might result in, at least for me, seems very wrong.

I believe pushing the boundaries of visual design forward is not about exploring personal taste and hermetic visual concepts: it’s about managing to achieve the practical goals for which the designer was called upon with the greatest rate of success possible.

This is thought in progress, and most probably will come up again soon.

Today I stumbled upon this amazing website through someone at work. The site describes itself as

(..) an excerpt of SpaceCollective.org, a soon to be
released, invite only information exchange dedicated to the future of everything.

So far it is a very rich combination of pictures, graphics and quotations with great information concerning many of the topics that might of great interest to a lot of people, among them technology, design, physics and biology.

The layout is very innovative, with a modernist, rigid grid, which is deconstructed in a captivating way, all done in meritorious HTML (although with some intense help from JavaScript).

But what caught my attention the most was the uncanny resemblance between website and Pentagram’s Alan Fletcher’s book, The Art of Looking Sideways.

The thousand-page tome is a precious collection of quotes, curious information, graphical experimentations and visual comments on a huge variety of subjects such as aesthetics, humor, curiosity and the human brain, among many others.

Fletcher writes that he has a necessity to acquire stuff. The books is a compilation and extrapolation on many concepts and information he has been collecting over his life, and decided do put together in the book. It’s an endless source of interesting information, insight and inspiration — probably one of of the best books I ever bought.

Finding Collective Perception brought me back the feeling of flipping through Fletcher’s book. But with the priceless difference that the website is growing, with even more up-to-date concepts and information, while hinting with the possibility of user contribution, which would be great.

* The picture above is a reproduction of a print by German artist Eno Henze, which has great work by the way, found in Collective Perception.

Last week, I wound up at this amazing demonstration of the amount of elements you can draw on the screen with Actionscript 3 and Papervision 3D.

The picture shows 1234 elements, but I actually got to around 2500 earlier. Wow! OK: I’ll grant that Papervision manages the screen so that everytihng that isn’t necessary is not drawn, and that the element are not interactive, and have no animation within them. But this mindblowing nonetheless.

Hold on, this post is not YAPD (Yet another Papervision demo); it’s not even on Papervision itself. It’s that this one demonstration of orderly colourful animated elements in a 3D, depth-of-field-enabled environment, seems just like one of those things that seems to set a milestone on technology. It’s a very real proof that the combination of Papervision and the AVM2 can finally be used on a real project, not a deployed extension of a demo.

But this got me thinking (and threw me in a very productive discussion with my friend Daniel Morena): are web designers (myself included) ready to design for a 3D web? It’s been not even a week since I wrote on the difficulty most of us have with articulating a new visual language that is truly unique to the web! How could we jump from no letting go of magazines and brochures to stepping into a completely interactive, immersive 3D space?

3D is not the answer to everything, but it may just solve some very difficult design issues we may have. The thing is: we don’t know how to design for 3D. The web (and the GUI as a whole) has been a 2 dimensional environment forever. We got as far as creating tabs and overlapping windows to emulate some familiar sense of depth that helps users organize information on the screen. But really going three-D, and making a whole website that truly makes use of this opportunity, is hard.

A friend forwarded me a link to a post by Kevin Sweeney, in which he demonstrates his utter in-satisfaction with everything that has been built with PV3D until now. I can’t tell for sure, but I do believe the origin for such disappointment is that: things have not been designed to be 3D, they’re that way simply because technology allowed.

Extending a PV3D demo doesn’t count. As well as creating some layout in which some two-dimensional plates float, and end-up parallel to the screen and actually being needed. I believe we need to embrace the 3D. I’m just not sure we all know how to design for it yet.

A Brief Message has been running some pretty good articles on design; talented high profile authors, interesting discussions, nice illustrations.

But if you step back from the content for a second and notice only the layout: the text in columns, the proportion between the heading and the body type—it’s all great: very good taste and extremely able design choices. But it’s a magazine design. And, for some reason, this design can be considered innovative, although it’s a very traditional magazine style.

This makes me wonder about the possibilities on innovation in web design. I mean true innovation, that is not solely dependant on technical novelties.

One could argue that we see very innovative web sites every day (especially Flash-driven ones), and there are hundreds of galleries and lists all over the web to show it. But what I mean is new design that reinvents the way to address certain problems, the way graphic designers have been able to do for decades, mostly working with the same offset printing paradigm.

A Brief Message introduces itself as, in some ways, a magazine, and most appropriately presents itself that way. But the same as a printed magazine, nonetheless. Other web sites which bring the magazine feel to further distances go as far as using Flash applets that simulate the flipping of pages, as a last resort to present a familiar ‘interface’ to the user.

In his Maeda@media, John Maeda (a major inspiration of mine) emphasizes on how important it is to differentiate the printed dot from the electronic pixel:

Turn off your monitor for a moment. Are the pixels you see gone? Certainly their visual presence is, but their electrical presence is not. This is verified by turning your monitor back on—nothing has changed.

This doesn’t happen to paper. So we can not lay elements out the same way. The impermanence of a pixel, as opposed to the immutability of a printed dot is key in the exercise of letting go of the unquestionable guidelines that have served us a lot for the printed media, and re-purposing some of those principles, along with new ones, to come up with a graphical language that is truly unique to the web.

Our choices should not dry up in endless Flashy animated menus, infinite vertical scrolls, and the occasional subversion that ends up just feeling odd. I have no definite answer, but I sure believe we can do much more. Do you have any ideas? Examples of successful attempts, maybe?

PS: This is not, by any chance, the bashing of the design of A Brief Message. I only used it as a starting point. In fact, I like the visual result of that site a lot.