Category Archives: Graphic Design

Dogs and cats, living together. Mass hysteria.

Posted on by
Reply

Wha?

There has always been somewhat of a dichotomy in the world of web professionals between design & development.

Designers do their thing making pretty pictures, drinking cocktails at lunch, having social cliques, and little romances within the group. They frolic away in the meadows of Photoshop and Dreamweaver Design View, paying little attention to the nuances of the mechanical underpinnings of their creations. Or so I hear…

Meanwhile, the code monkeys toil away in the dark, unseen from the public eye, in caverns and closets and in back alleys where you dare not travel. Typically found unshaven in the wild, they hack away in text editors such as TextMate and Vim, write their code from scratch, and make jokes about algorithms in C in an Erkel-esque voice from behind Coke-bottle glasses. (Mexican Coke bottles, since apparently north of the border we’ve lost our flair for nostalgia and authenticity and now mostly distribute the plastic bottles which are unfit for ocular correction.)

I’ve had this debate at least six or seven times in my career, in some form or other, about this separation of church and state. Oil and water. Dogs and cats.

Stephanie Sullivan recently wrote this:

The root of my story and my point is — it’s the rare individual that has all the strengths needed for one web site. It’s the team that matters. Should everyone have a basic understanding of the other member’s jobs? How they work? What they can accomplish. Oh yes. Absolutely. Should they be able to do them? That’s just ludicrous. Absolutely not. Surround yourself with people more brilliant than yourself. Always learn. Work hard. You, and those around you, will be enormously successful.

Now granted, she’s posting this in response to the guys at 37signals, who by definition are an opinionated group making opinionated software. That’s why their stuff is so great – they set some constraints and they live by ‘em. I’m not sure which posts she was referring to, but this could be one of ‘em. And this is true. Designers who have strong developer kung fu are better designers for it. And developers who understand the issues of design are correspondingly empowered.

But I tend to agree with Stephanie. The reality of it is that there are a wide variety of personality types out there, and that translates into varying abilities and motivations for crossing over into the design or development realms one way or another. As a musician, I myself come from a deeply creative side (with some early code hacking expertise in the Atari days,) but have come around to being mostly a developer at this point in my career. I draw heavily on my design background when working today. But I certainly would want to get a good, web-experienced designer on my project. And I think that’s where the core of the debate has led to: Web designers who understand The Code create designs that make better sense within the constraints of the digital medium, and understand what the user interface objects are that the web-surfing masses are familiar with. Conversely, pencil-necked code monkeys understanding design principles won’t shackle their creations with masses of cruft and flotsam just because it worked 9 years ago and why not copy/paste that in?

There are so many faceted roles now applied to the web production line. We are all part designer, part coder, part marketing stooge, part librarian. There is no escaping that. But if the Industrial Revolution has taught us anything, it is that things will continue to specialize in the name of efficiency and progress. Multitasking sucks. For some of us (moi,) it sucks more than for others. It takes time for the brain to switch gears between the too-sexy-for-my-shirt design aesthete and the l33t h4x0r. Throw having to be a project manager, writer, or manager into the mix and you get all kinds of crazy flying around.

My take on it all is: Embrace what you are good at. Do what your passion dictates. Challenge yourself frequently, but never lose sight of your foundation. If your foundation migrates, then great! But always be aware of yourself and live in The Now™. If you do what you love, you are more likely to get good at it, more likely to stick with it for the long term, and good things will tend rise up around you.

Judging a book by it’s cover…

Posted on by
Reply

Sharks patrol these waters...

Or in this case, judging a candidate by their web design! Let’s face it – I am no political wag, and politics is something best left to other demagogues and zealotous pundits across the spectrum.

However, I can claim passable knowledge in double bass, and claim a rudimentary knowledge of web development design and development practices. Obviously I certainly can’t use my bass chops to judge this year’s candidates for president, although if one were to bust out a contrabass and wail out a rendition of oh, say the Koussevitsky Concerto in solo tuning, then I’d have vote for them just on principle.

But I sure as hell can embrace my inner fashion slave and get all up in their web design business! If nothing else, I can at least engage in the purely superficial practice of candidate analysis by using their primary online web presences as the basis:

  • http://www.barackobama.com/ – PHP backend, which says to me: “I’m an open format, flexible, and I like to get things done.” Title tag reads “Barack Obama | Change we can believe in.” Great design, usable. Very ‘web 2.0′-ish design. What stands out: Quote that says “I’M ASKING YOU TO BELIEVE. Not just in my ability to bring about real change in Washington… I’m asking you to believe in yours.” First line of quote in all caps which we will see is overused later on, but here provides appropriate emphasis in the context of the quotation. While I generally don’t like to see drop-down primary navigation menus, these are done well and seem to server the text that is within. Only criticism is the most recent blog post in which they inserted 14 full-size images that were subsequently shrunken down in the display using HTML attributes. This is generally considered a bad idea. Please cut them down to an appropriate pixel dimension for the thumbnail versions and link back to the high-resolution copies. But that is more of a content management issue…
  • http://www.hillaryclinton.com/ – ASP.NET, with a slightly disturbing marionette-like picture of Hillary, and the words in bold “MAKE HISTORY.” In all caps. For emphasis I suppose. Kind of a weak message if you ask me. It’s saying: “Vote for me, just because I’ll be the first woman president.” Drop-down menus seem a bit boxy and compartmentalized – I don’t find them to be as readable as Obama’s. Update: I check back the next day to find that they updated Hillary’s site with a new, vastly improved photo. Airbrush is your friend. Seriously – I have no problem with the airbrush tool in Photoshop and intend to wipe away each wrinkle in my own photo history as they occur…
  • http://www.johnedwards.com/ – Appears to be static HTML. Design looks dated. Message says “Thank You, South Carolina.” Color theme is not your typical palette. Here we have a sort of ochre/green/maroon/blue thing going on – a wider gamut than your usual red, white and blue political site.
  • http://www.johnmccain.com/ – Running on an IIS server. Interestingly, trying any file extension other than .aspx yields the default IIS 404 error page, but when using a .aspx, we get the “intended” 404 page with the site chrome. Noticed this problem on Hillary’s site too. I’m a fan of monochrome color schemes, so I had a soft spot for the site when I hit their splash page. (Why do all these sites insist, in 2008, on using splash pages still?) But the soft spot faded quick when I came to the home page and got overwhelmed with boxes, sliding pictures, a scattering of instances of “click here!” and “learn more” buttons, and a giant smiling McCain holding a mic. Message: “Best Prepared to Lead on Day One.” (Using smallcaps, for slightly less emphasis than all caps I suppose.) But for a minute I thought the site message was “click here.” This page has some nice b/w treatment. Overall I find this site to have an overabundance of head shots – maybe scale it back 50% or so? I get saturated by it – front, left side, right side, repeat.
  • http://www.mittromney.com/ – Server is running Apache Tomcat and appears to be servlet-driven. Slogan: TRUE STRENGTH FOR AMERICA’S FUTURE. You alpha male you. Center image advertises “Limited Edition Mitt Romney T-Shirt Designs” that suspiciously look like André has a Posse stencils. Right action box has the heading “TEAM MITT,” which I subconsciously took to read “dammit” for a minute there. Like the Five Brothers section overall, although they really need a sharper JPEG for the banner.
  • http://www.mikehuckabee.com/ – IIS server. Same 404 problem as McCain and Clinton. Not sure why this is hard on Microsoft web servers – should not all not found pages get the same treatment. Site uses Scriptaculous and Prototype, although I didn’t see any use of these in my cursory glance. Overall not a bad design. Oops – just saw the tagline in the right banner: “FAITH. FAMILY. FREEDOM.” I smell erosion of the 1st amendment separation of church and state and must flee far away from this site…
  • http://www.joinrudy2008.com/ – PHP, and overall not a bad site design. His site doesn’t use his first and last name. The site rudygiuliani.com appears to be controlled by a domain squatter. Anyway, the home page renders an embedded Flash video with Rudy’s portrait in the still image, and I’m immediately reminded of something: Rudy looks like a mortician from one of those wild west flicks – the gaunt, hunchbacked undertaker in a long coat and stove-pipe hat. By now I’ve noticed the ubiquitous box in the lower right of each candidate’s home page that is used for linking to their MySpace, Flickr, Facebook, Digg, and whatever presences. Looking at the home page, I don’t immediately have a message to take away. Every other candidate seemed to have one engraved in text somehow. I was shocked there was no typographical mention of 9/11 mentioned. To get Rudy’s message, you need Flash and have to run the home page video (a feature he relies upon site-wide). OK, once we run this, I see the familiar harping on terrorists and 9/11 that we all know and love from Rudy’s talking points. Rudy’s blog is all video posts, which is kind of odd and probably not that friendly to search engines or people scanning for messages.
  • http://www.ronpaul2008.com/ – PHP, and not a bad first impression for the site design. In fact, we get a meta tag generator attribute that tells us they use Moon PHP MVC framework. Has a Web 2.0 feel to it, although we feel a bit cluttered on the home page. Ron’s tagline is “HOPE FOR AMERICA.” Glad to see at least one candidate on the Republican side has moved beyond wrapping themselves in a flag and thumping on a bible. Join Campaign page has appropriate use of fieldsets which is a nice touch. But what’s this? Under the “The issues that most concern me in this election are:” fieldset, we have a checkbox entitled “Pro-Life.” Obviously this campaign is prepared to exclude the pro-choice camp from having a voice here. Pro-life is not an issue, it is a position on an issue.

Well that was an eye-opener. It is mind-numbing when you have to pay attention to these wingnuts for only a few minutes. It is interesting to note the similarities between many of the sites – the general layout, the features they all place in their sites and on the home page, and how they treat color and typography. The quality of the various sites overall was good, but not really that great. I have to say, for my tastes Obama’s site is by far the best of the crop. The design is there, the usability is there, it nails the design trends of 2007 on into the present, and has the best treatment for features, typography, and messaging. On the Republican side, I have to say that Ron Paul’s site is best, but I’m still having trouble getting past the semantics for that one checkbox issue. Of the three main democratic candidates, I noticed a sense of overall inclusion and positive attitude. On the Republican side, with the exception of Paul’s and somewhat on Romney’s site, I got the feeling that they were trying to convey a sense of “this is what we believe and how we’re going to do things – end of discussion.”

Interestingly, I was surprised to see that all of the ASP.NET/IIS websites failed to have a good 404 error page behavior. And overall, the PHP sites seemed to be coupled with the highest-quality page designs and content structures, although correlation does not equal causation as the whole pirate to global warming trend so effectively illustrates.

What the hell was I thinking?

Posted on by
2

I backed out of the global rewrite of my blog’s CSS this evening, because let’s face it: I had no plan, and I have traded my graphic design chops for code chops long ago. I’ll try to revisit this issue later.

I have more important things to waste my time with. Like practicing. Oh and that homework thing.

Choose your battles carefully…

Clobber and rewrite

Posted on by
Reply

It’s time to redesign. I’ll use my traditional method of blowing everything away and starting from scratch.

Also upgraded to WordPress 2.3 today. Noticed some of my categories are missing. This is a first for me – usually the upgrades go pretty well.

I wonder what design I’ll come up with…

I also need to find a new web host.

So pardon the dust. This is a work in progress.

PDF Rant

Posted on by
1

PDF is a poorly-understood medium for most developers. In fact, I’ll go as far as to say that 98% (not scientific – you get the picture) of the PDF creators out there have any idea of what is going on underneath the hood when they produce a PDF. I’m talking basic information, like image compression, readability, usability, who is reading this, etc. Typically when doing usability studies for web sites, the process stops abruptly when the PDF is encountered. The user usually backs up a step, and the usability professional shrugs and says “let’s move on.” :| Never mind the issues with optimizing vector data, embedding fonts, and so on. Typically, people pump out their 6 MB files without a thought. “That’s OK – they’ll download it and print it.” Yeah right – did you test that theory? I thought not.

This is not really acceptable, is it? I mean, I know that PDF was created for portable printing output, but nowadays I suspect that the primary delivery and consumption of the PDF format is electronic and screen based – not print/hard copy based. So something needs to change in our attitudes towards PDF documents as web designers and developers. And that does not include pumping in more features into our PDFs like hyperlinks and embedding video – it can be done, but that is probably not a good idea. OK hyperlinks are good – but think it through. These work differently than they do on the web, and that is not the primary workflow for web consumption of PDFs.

The primary workflow for web documents is however to read the document. If someone is going to go through the trouble to access a PDF, they already are confronted with in the best cases a change in their browser user interface – an Acrobat plugin, or maybe native rendering in the browser (as in the Safari browser.) In worse cases, the PDF opens up in a separate application such as Acrobat or Preview, and just as commonly, the file doesn’t open up at all but just downloads onto the users’ computer.

So give them something to read already. Here are my recommendations for the next generation of usable, web-ready PDF design:

  • Use a readable font. Just because you can embed some crazy font like Edwardian Script ITC doesn’t mean that is a good idea. Garamond looks great in print, and looks very thin and weak on the screen, so maybe you want to rethink that one. I’m not saying cave in and use Verdana and Georgia for everything – my god. Just give some consideration to the fact that this document is going to be read on screen more than on print, and choose your fonts with this consideration in mind.
  • Taking your InDesign or Quark files for your hot layout that went to the printer for that 2-fold brochure with the die-cut and bleed margins and exporting it as a PDF with the “For Web” setting does not constitute a web-ready document, and you should be ashamed of yourself. Consider that the people who actually print this thing are going to be printing this thing black-and-white on a low-quality stock from Staples or Costco on white 8×11 or A4. And that’s if you’re lucky. As I said before, the screen will be the primary reading format. Reformat the document to be optimized for “Screen + A4″ format or something.
  • Compress those images with care. Use simple vector-based illustrations whenever possible, and use small but clear versions of the bitmaps that are higher than 72 dpi so the printer treats them well, but less than 300 dpi so that you won’t force the viewer to have to wait an hour to read the content.
  • Embed fonts. This is the default nowadays, so don’t override it or do something silly like convert all the fonts to outlines just because you want things to look “exactly the same.” Outlined fonts look way worse on screen than embedded font type.
  • Use newer versions of the fonts. Don’t use some old wingding font from 15 years ago. It will cause errors. Better yet, use a standard and well regarded font from a foundry that is respectable, such as Adobe or Agfa, and not that bonus disc of 5000 fonts that you got with that subscription to Microsoft Office Noob Magazine.
  • Actually test your PDFs as if they were part of the site they are being deployed on. This means having a variety of setups on hand, from an up to date Windows, Mac, and Linux box on hand, maybe having a crippled machine ready that lacks a PDF reader or just downloads straight to the desktop. This will wake up your senses like peppermint in your cappuccino.
  • Recognize the fact that screen font size and print font size are going to be two totally different things, and find an acceptable middle ground. Do not deliver paragraphs of 6 point text and expect that screen reading users are going to be happy about that.
  • My final one for tonight, and this is the biggie and perhaps the most controversial: Format your PDFs for landscape, not portrait. It is time for portrait layout in PDF to die. Portrait layouts must be scrolled in page-wide PDF sizing on screen. Screens are in landscape aspect, not portrait aspect. In landscape, the page fits neatly on most screens. If this is too much horizontal space, use columns for your text. Yes, those things you weren’t allowed to use in web design. Two columns should do nicely. Remember that most users will still have the 3:4 aspect ratio on their screens and not be enjoying those sexy new MacBooks with the 17″ cinema-style displays. Again – readable font size, no microprint.

Well, there’s some ideas. I think just the main thing to remember is to just consider screen output for PDF to be as important as print, if not more. I know that sounds sacrilegious to the essence of PDF, but we live in the modern world and things have changed. PDFs are shared as files over the web and via email, and people want to read them. Laptop users – ones running around offline in coffee shops doing homework or business folks on travel in airplanes and subways – with no access to a printer. Give ‘em a break.