brunobergher::blog

(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.

Wenetus Interactive, a brazilian web development company reversed the usual order of fields in a contact form:

Instead of the usual name, e-mail, message order, the form first asks what the visitor wants to say (something that is in her mind, for sure) to only later ask for contact information.

It’s a really simple point, but I believe it makes a big difference on how the visitor perceives the interest the company has on what she has to say.

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.

Matt at signal vs. noise noted the sliding images that explain how the Beanstalk, a hosted Subversion system, works.

I find that interesting, but what really caught my attention was the simplicity of the sign-up process: they only offer you the option of signing up for a free account. That way you don’t feel that the service is being sold to you, but rather that they’re offering you an opportunity to enjoy something good.

THAT is user-friendliness and inviting for business, because we have to be realistic: there’s no way someone is going to choose a paid option without checking out the free one first, standing right next to it.

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.