podcast en español sobre diseño web, tecnología y tendencias de diseño
Es común dentro del medio Web, que sea necesario mostrar a nuestros clientes una idea general de nuestra solución propuesta,
y una de las técnicas usadas es crear Wireframes, prototipos o storyboards. Y estos pueden servirnos para mostrarles nuestras ideas,
explicarles nuestros puntos, y ganar proyectos.
Además mencionamos lo último que ha pasado con respecto a las tipografías Web, cuyo tema ha habido mucha actividad en este año gracias
a la adopción de la propiedad @font-face en los navegadores.
february 3 2010
"A classic is an object with a symbolic value that greatly
exceeds the actual value."
John Maeda
It’s on our nature to create, most of the times we just replicate unconsciously
because there's so much images on our life that makes it harder to stay one step
ahead of the current trend, but even if we know how to design we never stop trying.
There are big names whom transcended with their creations, and now they are considered
"classics"; one of them and for me is Otl Aicher.
Otl Aicher was the design director for the Munich 1972 games, he designed the pictograms
used for the first time at that olympics with such elegance an clarity that never
would be topped. These had been redesigned every olympic.
Munich 1972 Olympic Games Pictograms
Then the madness begin… this idea was so well executed that was used on every possible
signage, advertising, poster, t-shirt.
Then became ICONIC, CLASSIC, something so great that it's part of our lives; this
is the goal of every designer, to be remembered, to be a "classic", transcend. So,
we see all the design community –not just graphic, also the fashion, industrial,
interior, type– struggling and trying to create the next big thing on they area
for just one reason, to be an icon.
Another iconic-breathtaking designer is Stefan Sagmeister, which has set a new design
bound with the infamous poster for AIGA Detroit by cutting all the type on his skin
to represent the pain that seems to accompany most of his design projects.
Stefan Sagmeister's poster for AIGA Detroit
And what about Lou Reed's poster "set the twilight reeling"
Lou Reed's poster by Stefan Sagmeister
So, pretty much there are a lot of iconic people, Sagmeister, Spiekkerman, Maeda,
that probably will be classics on the design field and inspire the new artists…
but is no reason to feel intimidated by the great designers, because every artist
start as an amateur, first emulate their environment then adapt it to his personal
preferences and finally creates; not because wants to replicate something or be
with the mainstream. Once on this stage, it's all downhill for a nonstop creating
creature in the searching to become a classic.
Finally, if you have an idea, there’s nothing better that rant about it.
You should drop me a line to
tiw@sonetworks.no, :)
November 18, 2009
You can watch the demo here
Or you can download the demo here
Yesterday,
Tim Brown
released his
Web Fonts Specimen
, which shows all the variation of a font we can have on our websites. His work is
really the best example of typography on the web so far.
Since last week, I've been asking myself: Why do we have to limit
ourselves with one or two main typefaces on our websites? Finally, I decided to
create something to get rid of that.
I coded this piece of jQuery called typeQuery, it's just a fancy name for some lines
of code, and I combined it with the WebFonts Specimen to show it.
What does it do?
It gives the flexibility to change the font-family for everything you define with
class, id, or tag, this example is referring to the selected item on a select object
with id="tag" and the font-family value at select object with id="family":
$($("#tag").val()).css("font-family", $("#family").val());
How to use it?
First, you have to decide which elements of your website you'll allow the users
to change, once this is defined, display those elements, in this case I used "select"
object, the value property is the tag, id or class you want to change.
<select id="tag">
<option value="body">body</option>
<option value="h1">h1</option>
<option value="h2">h2</option>
<option value="h3">h3</option>
<option value="h4">h4</option>
<option value="h5">h5</option>
<option value="li">li</option>
<option value="p">p</option>
<option value="em">em</option>
</select>
Then you decide which font families to display. The most important property is the
value, there's where you refer the font-family. One tip, recently I figured out
that when referring to font-families, the browsers look for the Postscript name,
instead of the name we see on any text editor, e.g.
ITCAvantGardeStd-Bk instead of
ITC Avant Garde Gothic Std Book.
Also, you can combine this with your @font-face embedded families , e.g. Museo300
and GraublauWebRegular, and any of the @font-face kits at
fontsquirrel.com.
<select id="family">
<option value="Georgia" label="Georgia">Georgia</option>
<option value="Times New Roman" label="Times New Roman">Times New Roman</option>
<option value="HelveticaNeue-Light" label="Helvetica Neue Light">Helvetica
Neue Light</option>
<option value="Palatino Linotype" label="Palatino Linotype">Palatino Linotype</option>
<option value="Hoefler Text" label="Hoefler Text">Hoefler Text</option>
<option value="Myriad Pro" label="Myriad Pro">Myriad Pro</option>
<option value="AmericanTypewriter" label="American Typewriter">American Typewriter</option>
<option value="BodoniStd-Book" label="Bodoni">
Bodoni</option>
<option value="ITCAvantGardeStd-Bk" label="ITC Avant Garde">ITC Avant Garde</option>
<option value="Museo300" label="Museo 300">Museo 300</option>
<option value="Museo500" label="Museo 500">Museo 500</option>
<option value="Museo700" label="Museo 700">Museo 700</option>
<option value="GraublauWebRegular" label="Graublau Web Regular">Graublau Web
Regular</option>
<option value="GraublauWebBold" label="Graublau Web Bold">Graublau Web Bold</option>
</select>
Further use
Most will think it isn't necessary give this flexibility to the user, and maybe
it's right. But I think we can define some tipographic styles that can be switched
with just a click and give the best experience to the user.
Finally, I've been reading the typophile's forum, where most of professional type
designers critic and share them knowledge, and some of them comment that the font-stacks
commonly used on websites, aren't typographically informed and they just ensure
cross browser compatibility.
Hope you find this useful, and I'll keep looking to improve our typographically
uninformed font-stacks. If you have any comment, drop me an email
tiw@sonetworks.no, cheers!
You can watch the demo here
Or you can download the demo here