But I think there are still a couple of corners that need polish and fine tuning. So, this past weekend, I thought I could exercise myself by realigning the new Twitter; specifically, by improving white space, align the layout to a grid, and above all, sprucing up typography.

In case you don’t have it yet, have a look at the new Twitter (click on the image for viewing it full size):

So let’s dissect this specimen and begin by aligning everything to a grid.

Grids: Everything in its right place

As you know, grid systems create order, and more important, provide us with a basic framework to start exploring layout and typographic possibilities. The problem with grids is that, if you are not careful enough, it’s really easy to get lost in the means of the International Typographic Style and completely forget the main visual concept behind your site (that could be different than using Helvetica, a white background and lines).

I’m sure Twitter didn’t like that. It seems they wanted a more relaxed look, not Swiss, but American. Approachable and modern. But in my eyes, the site still looks a bit messy, and not clean though. If this is intentional, I don’t know, but since this is an exercise, I wanted to experiment on how the new Twitter would look loosely applied to a grid.

So I began by adjusting the new Twitter to a 12 column, 1080px wide grid (also, check out Cameron Moll’s related blog entry on page widths). The grid has a generous gutter to prevent the design from looking too grid-y, but, still in order. Here’s what I came up with (rollover to show the grid):

As you can see, I filled the left 6 columns with the user’s timeline, and left the remaining columns to play with the right panel. There, I used 3 columns for each section, nudging them even more so it doesn’t seem that there’s a grid behind it. In this way I also released stress from the design, that could appear when aligning everything strictly to a grid column (in a related note, have a look at Doug Bowman’s explanation on proportions).

Looks better. Everything in it’s right place, and still looking American.

White Space

While aligning the design to a grid, I also tweaked the white space and some UI elements for better usability and consistency.

White space is fundamental in the way that it helps users identify blocks of information quickly, without reading. The problem with new Twitter’s white space is especially prominent in the right panel. When I first saw the new design, I couldn’t identify quickly what areas of the content make for a section. Since everything looks shrinked and the titles are set in Helvetica Neue, it’s hard to actually understand what fits within a section. My brain was making a heavy process in identifying what’s part of a section, and what’s not.

So I polished macro white space (between sections, wrappers and other modules), and micro white space (between titles, and copy). Here’s a cropped version, compared side-to-side, of the right panel. On the left, the original sidebar designed by Twitter, on the right, the realigned panel.

The changes may sound subtle, but have a look at this blurred export of it:

Typography

There’s no point in discussing the importance of typography in web design. It’s not important, it’s fundamental. Again, the problem, to my eyes, is the new right panel. It still looks cluttered, and font pairings doesn’t seem to match. I love Helvetica, and I can understand why Twitter decided to choose Helvetica Neue Light, but I’d propose to change it for Helvetica Bold for aims of better usability.

As you can see from the previous blurred screenshot, findability is greatly improved when using Helvetica Bold for each section title. I also removed unnecessary weights (limiting myself to play with 13px, 15px and 18px as font sizes) and polished everything out a bit more.

Copy is interface

The section titles now have more information, and therefore are more usable. Section headers now have direct links to their actions. Users, now, at a glance, can quickly have a look on the section title and make an action on them.

Special treatment requires the “Trends” section. I simplified it a bit, by displaying WorldWide trends by default. So in this way, users have an idea of the type of content this section is displaying, (WorldWide, South America, etc.) and can change their settings by clicking on “change”.

Sections headers now convey more information and work as a pattern, with section titles on the left, and their primary actions, on the right.

Final thoughts

This is just an experiment. I like to dissect things because then I can understand how they work. If you read Spanish, you can read my analysis on Taringa.net (a site with over 13 million page views daily and probably the most popular site in Latin America) where I helped to save thousands of dollars a month by applying simple HTML techniques.

Oh, and the disclaimer: I don’t work for Twitter and this was made just to experiment. This said, I love @vl, @stop, and all the design team they have there :-)

Here’s a full size version of the realign, and also a compared version, side to side, of the experiment.

Oh, don’t forget to follow me on Twitter.

It’s also already known that they are a bit reticent with design. I can understand the thinking behind this. However, they are slightly improving the user interface of each of their web applications. If you are curious of the design process behind Google products, read an in-depth look from Douglas Bowman here.

So when I logged in to check my emails today, I found the new Gmail. Compressed, with too much contrast, and some curious UI decisions (like the placement of the “Compose mail” button), it just looks strange, very strange for me. So I made a quick mockup on how I would like to see Gmail. Again, restricting myself by thinking that they are reticent towards new design ideas, and that they should maintain their brand identity over time. Have a look:

How Gmail could look. Click on the screenshot to enlarge it.

I tried to give more white space to the overall interface, so the emails list doesn’t look just as a unreadable block of text with no proper line height. Each email has certain actions (drag, mark and star) that are now more separated between them, so they can be more easily clickable (following the Fitts’s law).

I found out that two of the three main principal links on the current Gmail (Mail, Contacts and Tasks) that are placed in top left area, could work as tabs, except for Tasks (this link opens a to-do list window similar to a chat conversation). So I placed Mails and Contacts as proper tabs, and leaved Tasks as an item in the left sidebar. This way I can group similar items and give users a hint on their importance and what to expect when clicking. I also placed the more important element of the interface, the “Compose mail” button next to these tabs.

Finally, the list of Gmail folders is also revamped a bit: The current folder has a different font size, and it’s also set in bold, so you won’t miss or doubt what folder you are looking at.

Again, this is a really quick mockup on how Gmail could look, based on their restrictions of brand/design identity. An extensive work could be made. How do you like this?

Es interesante ver como detalles tan sencillos influyen tanto en la percepción que tienen los usuarios sobre un sitio. Todo esto, por supuesto, está comprobado con varios estudios, por cada recomendación hay una investigación de fondo que la respalda. Algunos puntos jugosos:

• Muestra que hay una organización real detrás de tu sitio.
• Actualiza el contenido de tu sitio frecuentemente (o por lo menos muestra que ha sido revisado recientemente).
• Evita errores de cualquier tipo, no importa que tan pequeños sean.

Les recomiendo que lo vean, la página está en inglés pero se entiende perfectamente. Son 10 puntos esenciales para lograr un nivel alto de credibilidad en cualquier sitio web y no son difíciles de aplicar.

Por fìn nos vamos dando cuenta de que la usabilidad, la experiencia del usuario y el diseño gráfico van de la mano. Y de que las presentaciones/intros en Flash son simplemente una pérdida de tiempo.