Flash forward a month later. You’re struggling to come up with new ideas, fresh thinking, sound logic. You see awesome work being posted on Dribbble and FFFFound. Everywhere you look, you’re wishing you had made this, that, and the other thing. You’re wondering if you’re even cut out for the world that is design. Hell—why the world can’t see aesthetics, logic, and experience the way you do. You wonder if it is all pointless. Your parents wanted you to be an engineer and you let them down for that fancy-pants art school. You envy the mundane: the mindlessness of it all. Screw it—you’ll be happier flipping burgers. Maybe you’ll come up with a fancy way to swirl the ketchup and mustard into the restaurant’s logo.

Repeat.

Welcome to the life of a creative.

I wanted to share my slides and a short video that was a part of the presentation, but unfortunately, since this was an unconference, much of the meat was had in a back and forth with the audience. The talk covered some great points such as Mark Boulton on how good design creates a ‘halo effect’ around your product and brand, Oliver Richenstein on the subject of the 100% Easy-2-Read Standard, and Brendan Dawes on Mariah Carey Syndrome. Chank has some nice coverage over on his blog as well.

Below are the slides and video presented at FontConf for your consumption and pondering:

Ira Glass on Story-Telling

Presentation Slides

Download PDF

But Wait! There’s More!

I’d like to get your thoughts on Mariah Carey Syndrome and how it applies to the current landscape of web technologies. For the unfamiliar, Brendan Dawes put forth the analogy in his book, Analog In, Digital Out, when he compares Mariah’s singing to the gratuitous use of Flash in the early/mid 2000s. Mariah can hit some pretty high notes in her songs, and while this is a unique talent, she does it repeatedly in just about every single song, and it quickly becomes annoying rather than impressive.

With the swath of new CSS techniques available, it’s becoming apparent that some folks are already abusing them—sites that apply text-shadow to all of their content make it quite the pain to read, for example. What do you think? Are we headed towards a deluge of flashy CSS3 transitions for no reason? Typefaces poorly selected for reading, just because we can?

Don’t Overload Yourself

There’s something appealing about the notion of ‘how much one could get done if one had all day’ that sounds like you can tackle the world. Wrong. The first thing I did out of the gate was pile on far too much work on too short of timelines. It’s been stressful but after about the first month, I’ve learned my lesson.

After launching the new portfolio, I had a nice list of job opportunities and potential freelance gigs. In short order, I was spending entire days in meetings learning about all of these new paths. This is great if you have nothing else on your plate but taking on some of the first freelance offers made for some long nights when days are spent in meetings—only to come home to work which still needs to be done.

There Are Such Things as Great Clients

I was fortunate enough to meet Dan Wick from Redstamp.com in that big batch of meetings, and after a few rounds of getting to know each other, our directions, and their new project—it was obvious this was the way. After the first few weeks, it’s been a great match and I’m really excited to show off what we’re working on. Thankfully they’ve given me clearance to blog and Dribbble about it as we go, so hopefully I can find time to write about the process from start to finish over the next few months.

The Cobbler’s Children Have No Shoes

Looking at my current situation, I really wish I would’ve taken two weeks or so to get my ducks in a row. Since I hadn’t freelanced much before, I didn’t have a scaffolding to build off. Andy Clarke’s Contract Killer and Freshbooks have been lifesavers, but I’m still wishing I had an intranet of sorts for storing documentation and files associated with a project, more time to freshen this blog, and so on.

Other People are Smarter Than You

Jumping in to freelance straight out of college now seems like it would be suicide. I learned more from the brilliant folks at Clockwork than I could have ever picked up in a school. Project structure, timelines, better time management, practice, practice, practice, client relations—you name it. My experience there was invaluable. Other people are smarter than you—learn from them.

Onward.

At the moment, I’m handling a bit of independent work while I get the portfolio back in order (please view my portfolio), but if you’re interested in working with me, or know of an opportunity you think I would be well suited for, please contact me. I’m excited to take on the next challenge, whatever form it will take.

Sitting on the sofa, MBP on my lap, iPhone in my hand. Do I really need an ‘in between’ device? No.

What’s a bit dissapointing about the iPad is that it’s *exactly* what we expected… and we’re used to Apple exceeding our expecations

if you have an iPhone and a MacBook Pro, why would you need an iPad?

The problem here, is the people doing the grumbling. We (geeks) aren’t Apple’s target audience with the iPad.

We may consider it yet another piece of gadgetry that makes it a little easier to read RSS feed items in bed, or check your email while you’re taking a poo—but the truth of the matter is, that’s all it is to us.

But Here’s the Magic

Think of your parents. They probably aren’t terribly tech savvy, but you buy them a laptop anyway. A laptop is a very powerful device even with average hardware specs, you can do a lot with it. But the ability to do a lot comes at the price of reduced usability. Introducing more choices means more mental hurdles to jump. To us (the geeks), these hurdles are skipped, we’re used to computers and we don’t even think when using most basic functionality. The iPad removes all of these choices, and as a result, increases the inherent usability of the device for those who normally have to jump those hurdles.

Think of those whose lives don’t revolve around using a computer for anything more than entertainment. The iPad is, and let’s be honest here, perfect for this group. Extremely lightweight, easy to throw in your book bag. Plays music, video, let’s you browse the web, read books, and so on. These people don’t need the power of a laptop the way those of us who use a computer for work do. The iPad does exactly what they want to do, and it does it well.

Think of those who travel. Many of these people have a laptop and a 3G connection card. Why? So they can check their email and file documents on the road. The iPad with a 3G connection does this, and does it well.

Think of those with desktops who want to do some mobile computing. Most people’s definition of computing is just working on stuff in Microsoft Word, or browsing the internet.

I think you can see the running theme here by now.

So Why the Lofty Title?

If the iPhone revolutionized the usability of smartphones, the iPad just did the same for laptops and netbooks. It’s a completely different take on the de facto standard. It targets the average computer user, not those of us who use a computer all day at work. It creates a UI and capability set that adopts the 80/20 principle of usability. It does nearly everything this crowd wants it to do, with 20% of the bullshit interface getting in their way.

It brings mobile 3G based computing to the mainstream, if we thought the iPhone took the internet to the mobile realm, this takes it even further. This makes a move where some people may not purchase an at home internet connection. If the iPad does everything you need, flip the bird to Comcast and only pay $30 a month for unlimited 3G access—anywhere.

So while we the geeks may feel under-impressed, there’s a whole new market Apple just tapped—and it’s going to take the internet to another level of ubiquitousness in much the same way as the iPhone. And, well, we all know the impact the iPhone has had.

Rather than write a short comment which would be lost within the hundreds soon to be posted, and since some folks on Twitter thought I should expound upon my harsh tweet, here are my counter arguments to the points made in the article, though it’s likely better if you read the article in question first:

Item One: It Discourages Bad Information Architecture

Only after reading some of the content on the site do we see that they manufacture, install, repair and otherwise service various types of industrial equipment. But those facts could have been communicated more clearly by including a simpler navigation bar with links like “Manufacturing”, “Repair”, and “Installation” — instead of the overly-specific “Wet Process Systems”, “Tanks”, and “Air Management”. This would then allow for a more aesthetically-pleasing horizontal bar that would serve to facilitate a more organized structure that’s not just one level deep.

I completely disagree. While a vertical navigation pattern may be more forgiving to an overtly long list of navigation links, the issue here isn’t the choice of layout—it’s the designer. A vertical navigation can contain a short list of well architected links just as well as a horizontal menu, and to say it’s more aesthetically pleasing comes down to the particular design in question and the other content that must be placed on the page.

Consider the example in Figure 1 below, a horizontal navigation bar here would ruin the beautiful top left to bottom right eye-flow the designer has created. The navigation is properly architected for each section, and the navigation is obvious and well placed in the hierarchy so your eye falls across it and recognizes what it is immediately.

Figure 1: Black Estate

Item Two: It Wastes Prime Screen Real Estate

As discussed in the previous section, design in today’s market needs to be based on strong information architecture. The navigation paths taken by users should have clearly defined goals and outcomes. A vertical navigation bar that sits to the left of a page’s content on every screen wastes valuable space that could be used for more important things. Yes, it’s true that you want navigation to be easy to find, but you also don’t want navigation to unnecessarily crowd the left side of the page, which studies have shown will draw a user’s eyes more often.

It would be ignorant to assume that just because navigation is placed to the left or right of a site in a vertical fashion that no content could fall below it and continue to make use of the space as you scroll down the page. Consider your typical blog template: content in a main column, navigation in a sidebar. More importantly, beneath the navigation, typically lies other sub-content that is less important to the user as they scroll the page looking at the main post content. With a horizontal model, this content would have to be placed above the main content, forcing it lower on the page. Below the main content, forcing it far down the page and demoting it to the footer’s territory, and the lack of importance that may come with this. Finally, perhaps inside the main content, creating a distraction from the title to content to post meta data flow that users are so accustomed to.

Plus, if we’re using a simplified home page to draw users in to the experience, don’t we want them to see the navigation quickly with your usual F-pattern hierarchy? I’d like to use Figure 2 as an example, the content to the right of the navigation is a flash experience to establish confidence with the visitor that the architecture firm creates top notch work. Glancing at the navigation to the left of this experience establishes in the users’ mind where the navigation is when they’re done with the experience.

Figure 2: Shea Architecture

Item Three: It Doesn’t Conform to Real-Life Reading

There aren’t many areas in life where a person is asked to read something that has a “left hand menu” that resembles what we find on websites that feature vertical navigation. In general, people are accustomed to reading content that spans the entire width of the reading area, or else is broken up into boxes or columns within the reading area. In either case, the content is vertically sandwiched between a header and footer. Books and magazines are a good example of this.

Now, to be fair, the author mentions this is a debatable point, so I’ll be brief. There are numerous examples elsewhere in the world where a person is asked to read something that resembles a vertical navigation. Restaurant menus, lists in books or emails. In fact, lists in general, which is what we use to semantically mark up navigation menus, no?

Upon finishing a line in a book your eye moves down to the next row. It’s been proven through centuries of roman language based book design that content which spans beyond a certain line-length is degrading the ease with which the reader can interpret the content.

Item Four: Fly-Outs Aren’t as Usable as Drop-Downs

I don’t believe either are usable and truly are the biggest crutch for bad information architecture available. Both have been written about numerous times as design patterns to be avoided.

Item Five: It’s Not as Successful, According to Studies

An excerpt from the quoted study:

“While testing several homepage designs, we varied the placement of a navigation element: top (under the flag or logo), left column, and right column.

“Navigation placed at the top of a homepage performed best — that is, it was seen by the highest percentage of test subjects and looked at for the longest duration.”

This is some very subjective research, if a user stares at something longer, does that mean it’s better? If they have to look at it longer to possibly interpret what the item in question is, or which category to pick, is it better? If anything this proves that content on the right side of the screen is seen less often, but the F-Pattern research (figure 3) shown proves that the left-hand side of the page is just as ‘hot’ as the top horizontal, if not more.

The key here is properly designed visual prominence. Whitespace, color, size, and more determine what the eye sees first. While it’s natural to start in the upper left-hand corner it’s the visual design of the page that will determine where the eye goes first. These eye tracking studies are based on information heavy pages such as search results. I totally agree with the research findings when you look at the designs beneath the clickheat maps, my eye goes to where readers would look too. But if that left-hand navigation wasn’t smaller text, lighter colored, and densely packed, my eyes may have done different things.

Figure 3: Quoted Eyetracking Research

Item Six: The Few Benefits Are Negligible

Yes, one of the advantages of a vertical based navigation is being able to fit more in to it due to scrolling. In some cases the flexibility of adding an additional navigation link in the future, without having to rehash the horizontal menu design to include it, is very helpful. While they may be small differences, they have their uses.

Conclusion

The point I would like to make is not that vertical navigation is in any way better than its horizontal counterpart. They both have pros and cons and are situationally more useful than each other. This is part of being a designer. Knowing the design patterns available to you and having the discretion to use the proper one at the proper time.

I hope you enjoyed the counterpoints and encourage you to think critically of such articles in the future. Having thoughtful discussion is an important part of educating ourselves and making informed decisions. I’d love to hear your thoughts in the comments.

As designers, we tend to enjoy nice things—items with quality, good aesthetics, good design. We pass them around on instant messenger, get the occasional email with something someone found that they think you’ll be fond of, etc. So essentially, I just set out to document things that I discovered or were shared with me that I wanted.

A few days later I had a new blog… thing: Needs/Wants.

It’s sort of a living experiment, I know the functionality that I desire isn’t completely in place. Maybe I won’t like the design much in two weeks, who knows. But for now, there should be new content every two days or so, and we’ll just see how it fares in the wild.

Hope you enjoy Needs/Wants, and if you’d like, there is a Twitter account to follow as well.

@cameronmoll Seriously. It’s all fluff and no context, criticism, or thought. Just pretteh pretteh pretteh, and no “why”.

— Jason Santa Maria

Jason has a great point, 300 Lists of 425 New Techniques to Make Your Web Design More Spectacular won’t make you a better designer. Articles such as Web Design Trends for 2010 will do nothing to increase your understanding of design, and furthermore, they undermine the value of design.

This is not design:

1. Oversized Logos/ Headers

Splash pages are so yesterday. To make an unforgettable impression on the visitor, the trend for 2010 will be oversized logos on an equally oversized header. These types of headers can take up the entire screen, but with one important note. Visitors will not need to click anything, just scroll down. Visitors often having a clicking phobia (due to years of poor navigation), so big headers do the job of a splash page without forcing your visitors to click anything.

— Omitted ¹

Using an oversized logo or header has a set of pros and cons. While it does give a great opportunity to do some more exotic branding, just look at the quote: “big headers do the job of a splash page.” Didn’t we get rid of splash pages for a reason? A large header has a place in certain websites and not in others, making the decision of whether or not this element is appropriate for a particular website is practicing design.

Andy Rutledge puts what I want to say better than I can in a recent post:

Creativity is not design. Creativity has nothing to do with design. Creativity is bound by no laws, rules, or strictures …which is perhaps why it’s so intoxicating […]. Design, on the other hand, is based entirely on math, psychology, human perception, and a host of rigid rules and laws […]

— Andy Rutledge (Creativity is Not Design)

Andy is pretty upfront about his opinions on the matter, and just wrote a great test which looks at basic design principles. If you haven’t read through it, it’s a great chance to refresh these principles in your mind. If things are a little difficult, spend a little time researching them. Andy’s written about design fundamentals in the past, and they’re great reads as well. Andy’s blog is exemplary of the type of content that is being drowned out on the web by all the noise. It’s opinionated, it makes you think, it makes you question what you know about design at times. Agree or disagree with him on each post, you’ll only learn more by doing so.

What makes great design great is not a trendy technique, but the logic and conceptual aspect that were figured out in the designer’s mind—or on more likely, on paper—before a mouse cursor ever opened Photoshop.

So ignore those top x lists and articles on trends. Seek out quality content about the logic and reason that goes in to design. Read great, thought provoking posts that delve in to the process of redesigning a site, evaluating the finer details of pricing and plans pages, and so on. Make this the content you share with others, and leave the link bait to turn to link rot.

¹ Omitted because it’s unnecessary to identify the author.

Put simply, it’s a request for a new font-file format, specifically for the web: .webfont. This format would allow typefaces to be assigned to a domain to prevent abuse, and would allow us to use the browser native @font-face functionality as intended. No workarounds, no middlemen, no bullshit.

They’ve got my support.

For the sake of brevity, I’ve copied the highlights of the proposal here (ignoring the sections aimed at browser manufacturer’s and type foundries). You could also view the full proposal if you so desire.

The revised format [.webfont] is now a compressed file containing
two files with the following names:

— info.xml
— fontdata

The info.xml file contains numerous bits of data describing the font
 data.

The fontdata file would contain the actual font file. The name does
not have an extension so that it can be format agnostic.

[…] these files would be compressed into a single file.

The proposal goes on to list various elements for the .xml file but the important bit is this:

allow - A list of URLs allowed to use the font. Optional.

In our previous proposal we suggested an unobtrusive alert system that
would be triggered if the domain being viewed did not match a domain
in the element. John Daggett explained that he didn’t think
this would work. Instead, he suggested a “page info” window that
would display data about the page including information defined in the
font’s metadata plus same-site origin restrictions. We are very
interested in hearing from the browser developers about the
feasibility of these two ideas.

We’re hopeful that this is a good format for everyone. It gives users
smaller file sizes. It gives the font vendors a simple format that
allows them to include information about the font. It doesn’t require
entirely new technologies from the browser developers.

What do you think?

While things are still hazy about exactly how this new service would work, I’m rattled by the following section of the opening announcement:

We’ll be launching this summer with a great collection of beautiful and hardworking typefaces. We’ll offer a free version of the service to get you started, and a low-cost way to grow from there. A truly scalable professional version will follow soon after.

Pay? Again?

The issue with @font-face has largely revolved around licensing issues and the complications from the lack of DRM that it provides. Understandably, the type foundries are not willing to allow their hard work to be easily downloaded from linked font files.

The problem, at the moment, lies in this complicated licensing that is a result of technology failing to amicably meet the needs of type foundries and designers. As a result of this, it appears as if we’ll be renting our typefaces from a third party entity.

I already pay for a license to use typefaces within my design applications, and now I’ll need to pay again to use them in the final produced site: a recurring fee because files don’t host themselves.

While I’m excited that a group of influential people (who I admire) have taken this step towards making @font-face a more realistic tool, I have to wonder why we’re solving what is essentially a technical issue with yet more complicated legalize and extra money out of every designer’s pocket.

If the technology to link typefaces exists, designers can and will do so regardless of licensing. This will become the same battle DRM has been for the music and film industries, with the same outcome. The people who properly work through Typekit to protect the rights of the foundries will be the ones who pay extra money, while the ones who just link their font-files with abandon will be the ones truly enjoying @font-face.

Perhaps this is just a rant over lunch hour about something I don’t fully understand — and while I sincerely appreciate the effort — I think we may still be headed down the wrong path. Hopefully I’m just blowing smoke, because I’d love to see this service succeed.