<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0"
    xmlns:dc="http://purl.org/dc/elements/1.1/"
    xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
    xmlns:admin="http://webns.net/mvcb/"
    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
    xmlns:content="http://purl.org/rss/1.0/modules/content/">

    <channel>
    
    <title>Jason Santa Maria: Articles</title>
    <link>http://jasonsantamaria.com/articles/</link>
    <description></description>
    <dc:language>en</dc:language>
    <dc:rights>Copyright 2008</dc:rights>
    <dc:date>2008-07-21T11:28:00-05:00</dc:date>
    <admin:generatorAgent rdf:resource="http://expressionengine.com/" />
    

    <item>
      <title>Appearing</title>
      <link>http://www.jasonsantamaria.com/feeder/?FeederAction=clicked&amp;feed=Articles&amp;seed=http%3A%2F%2Fjasonsantamaria.com%2Farticles%2Fappearing%2F&amp;seed_title=Appearing</link>
      <guid>http://jasonsantamaria.com/articles/appearing/</guid>
      <description><![CDATA[<p class="lead">A quick note for completists:</p>

<div class="illo one left"><img src="/i/entry/appearing/creativexpert.gif" alt="CreativeXpert" /></div>

<h2>Interview</h2>
<p>I had the pleasure of chatting with Alan Houser last week for his <a href="http://www.creativexpert.com/">CreativeXpert podcast</a> series. It&#8217;s a <a href="http://www.creativexpert.com/2008/07/20/jason-santa-maria-24-design-inspiration/">brief interview</a>, but we manage to cram in some discussion about design and a few fun stories from my past. Be sure to check out previous episodes for interviews with talented folks from Adaptive Path, Frog Design, House Industries, Firewheel Design, and many more.</p>

<div class="illo one left"><img src="/i/entry/appearing/ftb.gif" alt="Field-Tested Books" /></div>

<h2>Reading and Drinking</h2>
<p>If you will be in or around New York on Monday, July 28th, I suggest swinging by <a href="http://newyork.citysearch.com/profile/41278835">The Delancey</a> at 7pm. Coudal Partners is holding a special <a title="Field-Tested Books, live!" href="http://www.coudal.com/ftb/events.php">Field-Tested Books event</a> with some of the local testers reading their reviews live. Testers include: Michael Bierut, Randy Cohen, Steven Heller, Jason Santa Maria (hey, I know him!), Jeffrey Zeldman, Ben Greenman, John Gruber, Jim and Steve from CP, and many more.</p>]]></description>
      <dc:subject>Books, Design, Press, Black, Default, White</dc:subject>
      <dc:date>2008-07-21T11:28:00-05:00</dc:date>
    </item>

    <item>
      <title>Shake it Like a Metaphorical Picture</title>
      <link>http://www.jasonsantamaria.com/feeder/?FeederAction=clicked&amp;feed=Articles&amp;seed=http%3A%2F%2Fjasonsantamaria.com%2Farticles%2Fshake-it-like-a-metaphorical-picture%2F&amp;seed_title=Shake+it+Like+a+Metaphorical+Picture</link>
      <guid>http://jasonsantamaria.com/articles/shake-it-like-a-metaphorical-picture/</guid>
      <description><![CDATA[<div class="illo eight left solo"><img src="/i/entry/metaphorical-picture/polaroid-backs.jpg" alt="Polaroid as a metaphor for photography" /></div>

<div id="col1">
<p class="lead">Sometime next year, Polaroid will <a title="Polaroid discontinues instant film products" href="http://www.polaroid.com/ifilm/en/index.html">stop producing instant film</a>. There have been lots of people jumping in to help <a title="Save Polaroid" href="http://www.savepolaroid.com/">save the format</a>, and others writing some <a title="gone in Sixty Seconds" href="http://www.aiga.org/content.cfm/gone-in-sixty-seconds">striking eulogies</a>, as the rest of us start mourning the oncoming loss. But one thing I can&#8217;t quite shake is what Polaroid represents to me, something that will likely be on its way out the door too: <em>the visual metaphor of a photograph</em>.</p>
</div>

<div id="col2">
<h2>Tangible Metaphors</h2>
<p>That little picture window, framed in white with justthismuch more spacing on the bottom so you can <em>hold it</em>. The fucking thing was begging to be held, passed around, shared, pinned up, torn, and written on. It&#8217;s a triumphant visual institution. The humble visual of a Polaroid picture, practically synonymous with the idea of photography, will eventually start fading from the general consciousness like the cassette tape, film reel, and rotary telephone. Sure, we&#8217;ll remember this stuff, but our grandkids and great-grandkids will just look at us with quiet concern as we ramble on about the sounds we heard coming off giant vinyl disks.</p>

<p>How long do we hold onto past iconography to represent modern concepts? The record might only represent the concept of music to some, perhaps the cassette a few more, the CD more still, but how long before iTunes needs to change its icon because the CD metaphor isn&#8217;t what currently means &#8220;music&#8221;?</p>

<p>The process of photography has seen so many changes in the past decade, that even the methods we use to describe the act have changed. When someone mimes you the act of taking your photo, chances are they don&#8217;t hold an imaginary box up to their eye anymore, they hold an imaginary box a foot away from their face, as if they are looking at a digital camera&#8217;s LCD screen. The language, mannerisms, and visual associations we have with photography are being replaced.</p>
</div>

<div id="col3">
<h2>Making Meaning</h2>
<p>I recently stumbled onto Jamie Livingston&#8217;s <a title="Jamie Livingston's Photo of the Day" href="http://photooftheday.hughcrawford.com/">Photo of the Day</a> (<a title="More info on Jamie Livingston at mental_floss" href="http://www.mentalfloss.com/blogs/archives/15131">more background</a>), a daily slice of one man&#8217;s life from 1979-1997 told through Polaroids (ending when cancer claimed the photographer). <em>6,697</em> Polaroids. That&#8217;s a striking number of photos to take by any measure, especially to keep it going everyday for nearly 20 years. It&#8217;s a testament to both the instant photo format and the act of unintentional art. But how much more inspiring is it to imagine all of those photos, not on a computer screen somewhere, but in boxes and albums, carefully cataloged by hand. <em>Needing to be held by hand.</em></p>

<p>The Polaroid instant camera pioneered a huge movement in photography, both from technical and <a title="The Branding of Polaroid" href="http://giam.typepad.com/the_branding_of_polaroid_/">aesthetic aspects</a>, and will be sorely missed. There are plenty of people who will continue to produce traditional photographs, me among them, but even as we do, and even if a new manufacturer picks up the torch to continue making instant film, and I hope someone does, the void in the public consciousness has begun growing. But, as our media moves into the virtual spaces on our hard drives, their tangible counterparts grow more foreign to us, never truly being lost, but fading into quaint ephemera.</p>

<p class="addendum">Yes, I’m aware of the irony of this entry with <a title="Kiss of Death" href="http://jasonsantamaria.com/articles/kiss-of-death/">regard to my last</a>, and it&#8217;s fully intentional. Let&#8217;s call it artistic license.</p>
</div>
]]></description>
      <dc:subject>Design, Photography, Black, Blue, News Gothic, Pink, White, Yellow</dc:subject>
      <dc:date>2008-07-17T12:20:00-05:00</dc:date>
    </item>

    <item>
      <title>Kiss of Death</title>
      <link>http://www.jasonsantamaria.com/feeder/?FeederAction=clicked&amp;feed=Articles&amp;seed=http%3A%2F%2Fjasonsantamaria.com%2Farticles%2Fkiss-of-death%2F&amp;seed_title=Kiss+of+Death</link>
      <guid>http://jasonsantamaria.com/articles/kiss-of-death/</guid>
      <description><![CDATA[<div class="illo eight left solo"><img src="/i/entry/kiss-of-death/slanty-photos.jpg" alt="Nine designs that use the Slanty Photo Treatment" /></div>

<div id="col1">
<p class="lead">I don&#8217;t play the lottery. But I suspect that each time you lose, you feel like your odds of winning get a little better.</p>
<p>More than ten times in my career, I&#8217;ve pitched the Slanty Photo Treatment&trade; to clients, and not one of those designs has ever made it online. You know the look: a tastefully matted photograph sits on a page, just slightly askew as if someone dropped it on table. Extra points are awarded for a careful sliver of drop shadow, or the illusion of a stack of photos.</p>

<p>Over time, it became the running joke that by using the treatment, I was taking my design out of the running. A more paranoid designer might consider this an omen and try something else. Not me. I&#8217;m way too stubborn for that. Each time a client shot down my design with the photo treatment, I secretly consoled myself, &#8220;They just don&#8217;t get it, the next client will understand,&#8221; and continued chasing the design dragon.</p>
</div>

<div id="col2">
<p>I know the Slanty Photo Treatment is not a revolutionary technique. Tons of sites use it. And I&#8217;m not even overly enamored with it either. Perhaps it was just the quiet simplicity of the style, or the nice suggestion of an analog medium on screen, something I tend towards anyway. Whatever it was, I jumped at every opportunity to use it. I wouldn&#8217;t say that any of the times I used the photo treatment it was <em>inappropriate</em>&mdash;I considered each one&mdash;but it&#8217;s also clear that they were stylistic choices. That&#8217;s why they never stuck. Style can be a good thing, adding a bit of personality, life, or oomph. But when used without specific function, it&#8217;s not necessarily the right choice either.</p>

<p>So, I&#8217;m hereby retiring the Slanty Photo Treatment from my repertoire. Not just because it never made it and not just because the design ether is trying to tell me something, but because I need to move on already. If you haven&#8217;t tried the treatment yet, it&#8217;s all yours&mdash;just keep it away from me. Hell, just based on my track record alone, it&#8217;s bound to sell soon, right?</p>

<p class="addendum"><em>*Some photos have been substituted to protect innocent designs.</em></p>
</div>]]></description>
      <dc:subject>Design, Grey, Omnes, Orange, White</dc:subject>
      <dc:date>2008-07-07T14:26:01-05:00</dc:date>
    </item>

    <item>
      <title>Variation Within Constraints</title>
      <link>http://www.jasonsantamaria.com/feeder/?FeederAction=clicked&amp;feed=Articles&amp;seed=http%3A%2F%2Fjasonsantamaria.com%2Farticles%2Fvariation-within-constraints%2F&amp;seed_title=Variation+Within+Constraints</link>
      <guid>http://jasonsantamaria.com/articles/variation-within-constraints/</guid>
      <description><![CDATA[<p class="lead">When I design sites in my professional life, I try to create an experience that will work for the majority of the site&#8217;s visitors and will also be engaging, and most times, in that order. With my personal site, I&#8217;m pretty much trying the reverse of that.</p>

<h2>Stay the Course</h2>
<p>I could listen to my gut and freak out about how something might get implemented, but like a college freshman hopped up on Zima, I&#8217;ve just decided to leave things open to experimentation. I told myself from the outset that I would wait before altering too much immediately after launch, I&#8217;ll assess how things are going and change as needed after I have a better idea of what&#8217;s working and what&#8217;s not. In the end, the real point isn&#8217;t merely to make each post look different. I&#8217;m trying to maintain a fairly tight visual identity, while exploring the flexibility for change under time, technical, and visual limitations. The point is to find variation within constraints.</p>

<h2>Problems Afoot</h2>
<p>The drawback to this is that some of the stuff I do probably won&#8217;t work so well in a few browsers, sometimes due to the browser, and other times due to time constraints and my limitations as a coder. One of the bigger issues I&#8217;ve run into recently involves (surprise!) sIFR. That&#8217;s not a knock on sIFR&mdash;everyone involved with the project is whip smart&mdash;it&#8217;s more a knock on the sorry landscape of typographic options online. The fact that we have to resort to such workarounds highlights our community&#8217;s ingenuity, as well as the glacial movements to bring about real change in web typography.</p>

<p><em>Anyway</em>, the problem came up in <a title="Solutions, my last post" href="/articles/solutions/">my last post</a> where the quote text is set with sIFR. In order to make it easier to swap background colors, I had the background of sIFR set to be transparent. Well, some Linux-based browsers render that as a white background. The workaround is to set a background color, but in certain browsers like Firefox 3 for Windows, Flash content is loaded onto a layer above everything else. This results in a piece of sIFR whose background overlaps the closing quote. No other code has changed, it just wasn&#8217;t detectable before because the sIFR background was transparent.</p>

<div class="illo seven left solo"><img src="/i/entry/variation-within-constraints/sifr-quote-problem.gif" alt="Illustrating the sIFR overlap problem" /></div>

<p class="caption two left">The sIFR overlap problem, Firefox 3 for Mac (left) and Firefox 3 for Windows (right). </p>

<p>When faced with a situation like this, do you neglect the Linux people? Possibly, they only make up 2% of my traffic, just edging out visitors on the Wii. Or, do you rework the layout so there isn&#8217;t an overlap? I decided to do neither. Like I said above, I&#8217;m working to try and make something interesting first, and something that works for the majority of people second.</p>

<p>For a while I considered posting an &#8220;ideal&#8221; screenshot with each entry as a fallback showing how I intended something to look, but I think that might belabor the point. One of my goals is to try and not hinder the publishing process too much with what I&#8217;m doing, both to test its feasibility, but also to <em>not</em> always adjust to problems, that way I can better understand what&#8217;s possible. Some people publish great content at the neglect of a site&#8217;s design or validity. This is just a different flavor of that.</p>

<h2>On Art Direction</h2>
<p>In the scope of this site, I’m defining art direction as bringing the visual design into the fold as an equal partner to the content, while maintaining a consistent overall identity. When a newspaper runs a special feature, they may flex the layout a bit differently, add imagery or typefaces to evoke a mood present in the writing, or merely to reinforce the story. When a magazine has a feature on a topic, they might do the same thing. It isn’t always groundbreaking, but it’s treated like something special apart from the main run of design. In my mind, art direction isn’t simply nice visuals, and more times than not, it’s a practice of restraint.</p>

<p>That&#8217;s why I&#8217;m saying it&#8217;s an experiment. Sometimes it won&#8217;t be a problem, and other times it might blow up in my face. And I&#8217;m totally OK with that.</p>]]></description>
      <dc:subject>Design, Site, Black, Default, White</dc:subject>
      <dc:date>2008-07-01T14:28:01-05:00</dc:date>
    </item>

    <item>
      <title>Solutions</title>
      <link>http://www.jasonsantamaria.com/feeder/?FeederAction=clicked&amp;feed=Articles&amp;seed=http%3A%2F%2Fjasonsantamaria.com%2Farticles%2Fsolutions%2F&amp;seed_title=Solutions</link>
      <guid>http://jasonsantamaria.com/articles/solutions/</guid>
      <description><![CDATA[<blockquote><span class="open-quote">&#8220;</span><p>The greatest challenge to any thinker is stating the problem in a way that will allow a solution.</p><span class="close-quote">&#8221;</span></blockquote>

<p class="by">—Bertrand Russell, <a href="http://en.wikipedia.org/wiki/Bertrand_Russell">20th century philosopher</a></p>
]]></description>
      <dc:subject>Quotes, Auto, Green</dc:subject>
      <dc:date>2008-06-23T11:48:00-05:00</dc:date>
    </item>

    <item>
      <title>Annotated</title>
      <link>http://www.jasonsantamaria.com/feeder/?FeederAction=clicked&amp;feed=Articles&amp;seed=http%3A%2F%2Fjasonsantamaria.com%2Farticles%2Fannotated%2F&amp;seed_title=Annotated</link>
      <guid>http://jasonsantamaria.com/articles/annotated/</guid>
      <description><![CDATA[<div id="col2"></div>
<div id="col1">
<p class="lead">My name is Jason, and I&#8217;m a chronic forgetter. I often repeat-introduce myself to people I&#8217;ve met before, hoping that hearing a name again will make it stick. Then I always say: &#8220;I&#8217;m horrible with names, but I rarely forget a face.&#8221;</p>

<p>You see, I&#8217;m a visual person. I store away spatial details like colors, shapes, and patterns without a problem. So, while I have trouble remembering exactly what a nugget of information <em>is</em>, I rarely have trouble recalling <em>where</em> or <em>how</em> I encountered it. In the same way I know I&#8217;ve met someone before but can&#8217;t place their name, I can often remember where I&#8217;ve seen or read something, just not the specific content.</p>

<p>There isn&#8217;t time to reread everything, so I&#8217;ve taken to a new practice: annotating. In most books, I come across about 10-20 things that really speak to me. Those are the things I want to remember. But I was never that great with studying; my methods for remembering were always a hard-fought and strenuous exercise. I realize this <a title="Older Brain Really May Be a Wiser Brain" href="http://www.nytimes.com/2008/05/20/health/research/20brai.html?_r=2&scp=1&sq=Older+Brain+Really+May+Be+a+Wiser+Brain&st=nyt&oref=slogin&oref=slogin">retention issue isn&#8217;t new</a>, especially to those who spent more time in school drawing than reading, but that it took me this long to have a process for reading leads me to believe others might benefit from it too.</p>

<p>I flag important pieces of info with <a href="http://www.3m.com/us/office/postit/products/prod_ft_pgm.html">Post-it Page Markers</a> and scribble marginalia. Months later when I want to find that thing Henry Dreyfuss wrote about in <em>Designing for People</em>, I can skim 10-20 pages and read my own notes to find it, rather than aimlessly flipping through the whole book. As you can see from my books, I&#8217;ve jumped into the practice with both feet and it&#8217;s proven to be a huge time saver. For more heavily flagged books, I quickly compile my own handwritten index in the front flap for the pages I&#8217;ve marked. It&#8217;s like tagging in the analog world!</p>

<p>In meatspace where finding stuff isn&#8217;t a command-F away, it&#8217;s much easier not remembering everything you know, and just knowing where to retrieve it.</p>
</div>
]]></description>
      <dc:subject>Books, Beige, Hoefler Text, Orange</dc:subject>
      <dc:date>2008-06-19T12:01:00-05:00</dc:date>
    </item>

    <item>
      <title>A New Day</title>
      <link>http://www.jasonsantamaria.com/feeder/?FeederAction=clicked&amp;feed=Articles&amp;seed=http%3A%2F%2Fjasonsantamaria.com%2Farticles%2Fa-new-day%2F&amp;seed_title=A+New+Day</link>
      <guid>http://jasonsantamaria.com/articles/a-new-day/</guid>
      <description><![CDATA[<p class="lead">I like my old site design; it feels distinct even now, and I didn&#8217;t really see the point in redesigning until I needed to. It stayed in generally the same form for nearly five years. But I finally caved and redesigned. So, why the change? I&#8217;m glad you asked.</p>

<div class="illo two left"><img src="/i/entry/a-new-day/tease-1.jpg" alt="Designer Teaser" /></div>

<p>Professionally, I&#8217;ve recently become a bit disillusioned with my design work because it feels static. I design a site, and regardless of the content, it&#8217;s usually dropped into a template, reducing the design to more a bit player rather than a worthy partner to that content. In other media, the design adapts to support different kinds of content and themes in order to play a supportive role. So when I decided I wanted a change, instead of designing one look for a site, I designed a system.</p>

<h2>At the Speed of Art Direction</h2>
<p>Well, here is my experiment: a very simple setup for fast design and art direction around content. I&#8217;m approaching this is much the same way one would approach the design of a magazine: a system for the way content gets handled, but every layout and story can take on a look of their own within that system. I&#8217;ve established a visual language for the site: a basic eight column grid, a few typefaces, and more static branded elements like the masthead and utility information. Beyond that, the system allows me to adapt the design to suit the content. Typefaces, colors, images, background, columns and layout, can all easily be manipulated to whatever the art direction calls for.</p>

<p>It&#8217;s as simple as it sounds&mdash;just some smart CSS and markup planning with hooks built in for quick and powerful customization. Some of these seeds have been planted before. Each issue at <a href="http://alistapart.com/">A List Apart</a> sports a different color scheme and custom illustrations for articles. Each update to <a href="http://abriefmessage.com/">A Brief Message</a> is wonderfully art directed with art and layout. Let&#8217;s not forget that before we were all geeked out on publishing through a blogging tool or CMS, most of our sites looked this way because we were making each page by hand. This isn&#8217;t a new idea. But, I&#8217;m hoping to push things a bit further.</p>

<h2>Don&#8217;t Call It a Redesign</h2>
<p>While, yes, this is a redesign of sorts, I&#8217;m considering much more a rethinking. You see, what you&#8217;re looking at isn&#8217;t the design so much as the plan for design. I&#8217;m not saying this is the answer, but I got the itch to start experimenting with these ideas. If I don&#8217;t end up figuring it out, maybe my work will inspire others to. So, some basic posts (and all of the site&#8217;s non-article content) might look like this, the no frills, default design, others might be a lot more heavily designed. Some teaser images of the quick test cases I started with can be found in this post.</p>

<p>We&#8217;ve made so many advancements in how we publish content that we haven&#8217;t looked back to what it is we&#8217;re actually creating. Many of us see the clear separation between things like print design and web design, but I&#8217;ve really been questioning the reality of why things are this way.</p>

<div class="illo five left inset solo"><img src="/i/entry/a-new-day/tease-2.jpg" alt="Designer Teaser" /></div>

<p>I don&#8217;t believe it has as much to do with time and capabilities&mdash;the notion that it takes too long to achieve the same design fidelity we enjoy in slower print endeavors&mdash;I think it has more to do with us merely having convinced ourselves it does. We&#8217;ve developed so many ways of creating and coding websites faster, but we really haven&#8217;t scratched the surface for art directing them in that same light.</p>

<p>In this experiment, I&#8217;m going to attempt posting a bit more often, aided by this system which will fare better than my old site for a greater variety of post types, like imagery-heavy, quotes, and long or brief articles. Stay tuned, I have a few posts already lined up to give you (and me) an idea of what I&#8217;m hoping to achieve with this design.</p>

<div class="illo two left"><img src="/i/entry/a-new-day/tease-3.jpg" alt="Designer Teaser" /></div>

<h2>Some Final Housekeeping</h2> 

<p>I&#8217;m a big believer in preserving the web as much as we can, so rather than moving all of the content from my last design into the new system, I&#8217;ve decided to archive it and keep it all in the old design, the design the content was written for. All incoming links should (hopefully) be automatically redirected to its new home here: <a href="http://v3.jasonsantamaria.com">v3.jasonsantamaria.com</a>.</p>

<p>After years of having it offline, and after being <a title="Class Critique" href="http://v3.jasonsantamaria.com/archive/2006/10/10/class_critique.php">berated by a design class</a>, I&#8217;ve put <a href="/portfolio/">my portfolio</a> back online.</p>

<p>Each entry will have categories, but I&#8217;ve also added &#8220;design tags&#8221;, so as the site gets more full of content, you&#8217;ll be able to sort by design attributes like color, layout, typefaces, etc. In this latest version of my site, I&#8217;ve moved away from MovableType and onto <a href="http://expressionengine.com/">ExpressionEngine</a>, and damn is EE hot. I&#8217;ve retired my old Leisure section but started a new one called <a href="http://jasonsantamaria.com/reading/">Recommended Reading</a> where I&#8217;ll review books on design and related topics. <a href="/oddities/">Oddities &amp; Diversions</a>, my link feed, and the <a href="/dailyphoto/">Daily Photos</a> are still around. All the feeds have been updated, which should automatically redirect to the new feed locations. If they don&#8217;t, you can re-subscribe at the bottom of the page.</p>

<p>I tried, I <em>really</em> tried, to get sIFR working nicely for a few more things on the site. As you can see from some of those screenshots, I intended to use Trade Gothic a bit more, but alas, it wasn&#8217;t to be. Hence a few extra type styles here and there with system fonts to approximate what I wanted. I&#8217;m not totally sold on everything yet, so I may keep on fiddling to even some things out.</p>

<p>Lastly, this new version would not have been possible without the help of <a href="http://www.bobulate.com/">Liz Danzico</a>, <a href="http://www.ryanirelan.com/">Ryan Irelan</a> and <a href="http://markhuot.com/">Mark Huot</a> for their help with ExpressionEngine, <a href="http://www.simplebits.com/">Dan Cederholm</a> for his CSS assistance, and <a href="http://www.danielmall.com/">Dan Mall</a> for some help with a bit of pesky Javascript. You are all wonderful people and will get at least a chapter dedicated to you in my memoirs.</p>

<p>Over the next few days and weeks I will be fine tuning different parts of the site (IE 6 support is spotty here and there, though not really at the top of my list), and re-writing some old static content, so bear with me. That said, please drop me a line if anything seems horribly broken. Otherwise, enjoy!</p>]]></description>
      <dc:subject>Design, Site, Web, Black, Default, White</dc:subject>
      <dc:date>2008-06-17T17:00:01-05:00</dc:date>
    </item>

    
    </channel>
</rss>