i'll present on this newsletter a little bit about typo/graphic posters' history and the new website design.

it's divided in 3 main parts:
. past – about the old website
. synthesis – about the new website design process
. results – about where we are now

(you can click on images to see larger versions)
 

as you know the website you see online right now is a new interface which was implemented a little more than a month ago, but our project is actually online since 11/nov/2008.

it started as a school project on which i should've documented the history of poster design (uniso, brazil – 2008), but obviously my teacher already knew everything about the history of poster and we would not gain anything by documenting something that is already documented all over the books and internet. so i thought of doing something more visual, like a gallery of posters.

of course i needed to convince him i could come up with that gallery in exchange for what he asked, so i searched the internet for some solution and it ends up that i found indxr and saw the possibility of bringing up a gallery on which other people could collaborate.

ok, it was possible, then it needed a focus in order to work. by the time i was pissed off doing work i didn't like for clients so i realised the cornerstone of the idea: "if i am going to do a personal project it has to be about something i am really passionate about." – typography and geometry.

that teacher supported the idea and that was "typo/graphic posters" and a happy student that didn't had to do a boring documentation. (thanks marcelo silvani for supporting me on those overloaded days)

but then... database crash on june.2009!

crash from which i couldn't recover at all, and as we already had more than 300 directories i had to close all new applications until today to focus on a new website. (applications will be reopened next week)

my business also was draining my days so the recovery process was slow, but the coffee mug was full. :)
 

these are the initial sketches where i gathered the website needs and tried to layout the elements.

it was just a study but i always tried to stick with these basic principles:
1. the poster designs should be the attraction, nothing else;
2. our name is not important and the designer's name should brand the page;
3. the project should stay as a directory of images, not a blog, not a portfolio site;
4. it is made for designers so it should have something designers could relate to.

those are some very basic principles but translated into important rules:
1. the background had to play the main role, it had be as clear as possible and also change color to shades of grays to be able to present each poster at its best;
2. the designer's name should brand the page but not be the focus, so titles at the bottom gave them a supportive character;
3. the overall feel had to be of an image gallery application and the menu itself couldn't play an essential role to browse the content;
4. the ergonomics had be smart and use features that are common to design applications (shortcuts, toolbar, view modes, etc);
5. and most important: at all costs the design had to be as simple, neutral and synthetic as possible.

so i stuck with those rules and tried to fix the previous design problems. and it evolved into this:
 

the most important decision was to define the "/" as our symbol. it is already part of our name to symbolize our double focus (typography/geometry) but now it also reinforces the principle of being a directory as the "/" is the common character for folder references on computers, mostly on internet addresses and code languages.

the grid is based on divisions of space with circles (like those made by a compass) then guides are created on their tension points. while i have no idea this would be the best approach, in my view when we use reason to divide the space it creates a relationship between all elements because all proportions regarding size and position will related to each other.

the second guidance for the layout was to define a baseline but here we got a problem... i chose a section of that grid and divided it to a reasonable size for the smaller type (11 pt) and it resulted in something like 14.788 px height, but the problem is that images have no half pixel! while our displays emulates these broken pixels the image files could not be like that, so unfortunately the baseline had to be rounded to 15 px and it falls out a little from the guides.

ok though, at least there were some structure to follow and the design could be concluded the way you see online now.

so go ahead and try yourself on the website: press "w" to see the guides construction and ";" (semi-colon) to show the baseline alignment. while there, also remember you can hit "tab" to hide the menu and "c" to change the background color (nice for presentations).

finally, the main characters! ff meta bold italic and ff meta normal

these typefaces play the most important role on our design. as you see, there is nothing on the layout besides text and those little icons, so they had to solve our two greatest needs: act as a powerful and striking title font and be readable at very small size. and the result is: they perform impressively well!

i also think they not only did their jobs but brought up a remarkable tone to our project. from all the typefaces i tried, by far, they were the ones that transmitted the best feeling.

of course i had to use them well, so i applied a ligature support and baseline alignment into the website. thanks to the new text engine of flash player 10 and the marvelous team behind text layout framework! 

as one last thing, i would like to say again this project is done with absolute passion and a sole goal: to promote good design. and thanks to all those great designers that joined us so far it is real.

so, if you ever come back to inspire yourself at our website it will mean we achieved our goal, and if you ever take forward the ideas you learned from all of us, designers of typo/graphic posters, it will make us proud.

get from us and take it to where we couldn't.


cheers,
andré felipe