Bold predictions for the savvy designer, 2006 edition
~ 09 December 2005 ~
Andy beat me to it by a day, even though I’ve been brainstorming this article for weeks. If our names weren’t gracing the cover of the same book, I might pick a fight (kidding, Andy).
Fortunately, I think there’s still plenty of room to take a second look into my crystal ball of web dev (first one was in 2004), with an eye squarely on what 2006 will bring.
Out
- Page Refreshing - I know, I know, this isn’t a sweeping statement. Sure, page refreshing is certainly a good thing. But expect the web dev community at large to continue to embrace Ajax, in search of reducing the page count between point A and point B (aside from other reasons).
- That Fisher Price Look - Big buttons, big text, big everything. Yes, it definitely has its place at times. But I wonder if we belittle users with visuals that implicitly say, “Hey, you’re too foolish to choose what to do next, so I’ve put a really big button right here just for you.” The exception, of course, are pages on which 90% of the visitors are seeking the same action item, e.g. Mozilla.com (download Firefox). If you’ve got the big blues, consider negative space as suitable replacement.
Neutral
- Lucida - Expect this very webby typeface to continue to become mainstream. I, for one, am beginning to tire of it already much as I did Verdana a few years back, but its usage is showing no signs of slowing. Just don’t expect it to appeal to Windows users with ClearType disabled.
- The Trusted Trio: drop shadow, gradient, dotted line - On several occasions over the past few years I’ve thought all three of these would have fallen by the wayside by now. But they’ve proven resilient enough to stick around for probably a few more years at least.
- Rounded corners - Apparently, encoded in every human being is an innate attraction to rounded corners (yes, I’m paraphrasing poorly). I must admit I was hesitant at first when Patrick Griffiths requested an abundance of rounded corners for the Vivabit redesign — and there’s no shortage of them on the site — but I’d say it turned out rather nicely in the end. Them Brits are always ahead of the curve, say it ain’t so.
In
- Tags - If you haven’t had to consider tags for inclusion in an interface yet, you certainly will in 2006. Consider 37signals’ “Tag formats: Can’t we all just get along?” before your first foray into tag UI design.
- Helvetica/Arial + negative letter spacing - Expect this trend to spill over in spades into 2006. Currently enjoying Ben Saunder’s execution of this technique (see his
h2
titles). - The grid - Mark Boulton and Khoi Vinh ushered in new thinking in 2005 in regards to using grids in web layouts. I take that back — the use of a grid in graphic design is nothing new, but the fact that their articles enticed many of us to think more seriously about using grids in web layouts is perhaps the better statement. I know they influenced a few of my designs, some of which I may reveal at a later date.
- Mobile - If CSS was the big push in the first half of this decade, mobile design could very well be the battle cry of the second half. The two movements share many similarities — presentation of data controlled by big corporations (first browser developers, now carriers) and the eventual collide with grassroots efforts towards standards by the little guys (us). See Mobile Web Design, The Series.
- The fluid layout - I actually anticipated more wide-scale adoption of fluid layouts in 2005, but they didn’t take hold as firmly as expected. Though I’ve got hopes for 2006. So much so, in fact, that my case study site for CSS Mastery is a fluid one.
- JavaScript & DOM scripting - I’ve been able to get by the last few years with my measly JavaScript skills, you know where you just copy and paste existing scripts? Yeah, those skills. That’ll change in 2006. The traditional role of “web designer/developer” will add JS/DOM to the existing XHTML/CSS mix. Those of us with sorry skills will expect to see a copy of Jeremy Keith’s DOM Scripting under the tree this Christmas.
Wild Card
- New MS fonts - JSM explains (back in March). If Vista includes the new typefaces as expected, I’m confident plenty of us will be quick to
font-family
them.
Wow, I somehow made it all the way through with no mention of “Web 2.0” and only one mention of “Ajax”. Fancy that.
60 Comments
Stock photography, type, and killer tees. Genuinely recommended by Authentic Boredom.
People are going to fight you on the Fisher Price thing.
Garrett Dimon thinks Big is where it’s at.
Nice analysis and interesting preview for 2006. We will see ;o)
“The fluid layout”
Fluid/Fixed has been going on for years now. My prediction would just be that neither one will ‘win’, but both will have times when they’re dominant on certain types of websites (like fixed is king on journals today).
I for one think the fisher price look should die. It seems rather ridiculous to make a button as large as I’ve been seeing them.
I agree that Lucida is getting used a lot more. But I still love to see it when it’s well executed. I just wish Windows users had it so I could stop using that ugly Lucida Sans.
Helvetica/Arial + negative letter spacingDear god, I hope that doesn’t catch on, because it looks like swill. Be kind to your fonts :D
Black will be back in 2006! So much nicer too your eyes while browsing late at night. Examples?
The fluid layoutI think something fluid along with some max-widths (jello?) is going to become more widespread. Stats that I see put sites in the middle of a bridge between 800x600 and bigger…
Helvetica/Arial + negative letter spacing
Hmmm… Can’t say I like that! But then again, maybe the clients do… :)
I’m guessing stripes will be back in. That’s completely unevidented, but I did say I’m guessing…
‘But I wonder if we belittle users with visuals that implicitly say, “Hey, you’re too foolish to choose what to do next, so I’ve put a really big button right here just for you.”
Nope, it doesn’t belittle users. If you are helping to take ambiguity out of a choice, you’re doing the world good.
Great list! Go Lucida!
although i do not completly agree with the fisherprice look, i would prefer it over the 8pt pixel font rage of the past.
I tend to agree with your asessment of what is rising and falling but I can’t say I completely agree that all of these are trends. The rounded corners obsession (in addition to being not at all new) is just the fashion of the day. As is making everything look like the 37signals home page. Fashion comes and goes, trends build. I suspect most of your “neutrals” will be on the out list next year, if we even remember them well enough to list them there.
Although Ajax is a way overused buzz word, it’s changing websites for the better. And at least large fonts of the “Fisher Price” look are here to stay. Higher conversion rates through the use of large fonts will always beat out designer desires.
What I’d like to hear about is where these trends are coming from. Who’s behind bigger type and bigger form fields? I think that would be interesting.
Interesting lineup… I’m curious regarding Ajax, can it be considered a solid solution when it seems to limit the forward/back control of the browser? Maybe I’ve just experienced bad implementations of it.
Mike D. - Um, yeah, that’s one I was speaking of. Should I now expect punishment in the form of any and all access to Newsvine being denied?
Pierce - Garrett makes some fine arguments in favor of big. That’s not really what I’m arguing about. Perhaps I should have titled that point “The unjudicious use of big for the sake of big” as in ‘big’ can present issues just as ‘small’ can.
Jason - I wouldn’t be that harsh. :-) Negative kerning in print — especially with Helvetica — has been done tastefully for years. The web version of it can be done tastefully, too.
Mike P. - You’re spot on. Buy the book for further discussion.
Josh - Yes, definitely a concern (limitations of the forward/back controls). That debate will more than likely be repeated in 2006.
I have to disagree with the fluid layout. I think that fixed layout is easier for people to read because it’s like reading a newspaper or book. There’s a certain degree of comfort there. I find many fluid layouts overwhelming at first look.
I don’t think that the fixed layout is going away.
Jason - I wouldn’t be that harsh. :-) Negative kerning in print — especially with Helvetica — has been done tastefully for years. The web version of it can be done tastefully, too.
Sorry, Cam, you’re going to have to show me a good example then, because I have yet to see one. Helvetica has a much better shot at looking passable negative-kerned than Arial (which looks awful, even in its Sunday best). The problem I have with negative kerning (and I am specifically talking about this circumstance, Arial/Helvetica) is that it drops readability considerably, stylistically it makes the designer look untrained with type and unobservant of font usage for a face that has few distinguishing characters to make such a techniques manageable.
Yes, in print it has worked a bit better, but in print you also have the control to kern in between each letter to fine tune a headline. Blanket statements to negative-kern Arial/Helvetica with css are junky at best. Just my opinion, don’t take any of that personally (and I know you won’t)… you either Ben :D
Take it personally? Of course I will!! Wait until my presentation at SXSW, “Negative Kerning: Stan Says No, Cam Says Yes”.
Kidding. I do agree with you that the inability to control individual letter kerning is a big drawback, among other issues mentioned. Fair argument.
BAM! Stan jumps in and tells it how it is. I completely and utterly agree with all that he is saying — tightly spaced Arial (yuck!) or Helvetica (slightly less yuck!) looks like a developer’s fake way of trying to look like a designer. It’s almost as atrocious as stretching letterforms out to like 150% or something just to make a typeface wider when all you’re doing is destroying somebody’s hard work.
And don’t get me started on fluid layouts. I’m sure everybody has read the studies about line-length readability put together by psychologists at Wichita State, right? Basically when your line-lengths exceed 12-13 words your comprehension levels and reading speed drop. So fluid layouts that make lines 20 words long suck the proverbial acorns.
C’mon people. Forsaking common usability knowledge to make something look “different” is just baloney. Let’s make 2006 the year where designers remember that people actually have to use the things we create ;)
(No offense to anybody in this thread who uses fluid layouts since we’ve probably gotten drunk together at some point!)
Another huge problem with negatively kerned sans-serif type on the web is that it really brings out the imperfections of the browser’s letter spacing capabilities. The closer together things are, the more likely you are to spot that there is one pixel between certain letters, two pixels between others, three between still others, and something there is none at all. In the print world, you have expert kerning to manually account for this stuff, but on the web there is no such equivalent.
Sites like Coudal make great use of negative kerning because they use large serif typefaces which can withstand a pixel or two worth of inaccuracy… the serifs act as a nice buffer between the meat of the letterforms and so things still look “right”. Sans serif faces, however, do not have this luxury and that’s why it’s best not to muck with them.
My personal take on large fonts: The World always wanted them, we just had to wait for XP to catch up with font smoothing so they looked pretty.
Mike Rundle - Perhaps I need to clarify. We’re talking about limiting the width of the fluid layout to prevent the issue you speak of. Just as I, too, fear wide line lengths, I also fear clinging to 800px as the proper width for all sites now and forever.
Mike D. - 2+ votes down for negative letter spacing. Fair enough. Points taken. And besides, where would the fun be if all predictions were correct? But I think you and Jason are talking about basing predictions on solid graphic design principles — glad this article has spawed the discussion.
Personally, I’m a big fan of negative letterspacing, even with Sans fonts (both our Firewheel and IconBuffet sites make use of the technique). However, Mike is right in some ways… the font’s look like crap in Opera on Windows.
But since a grand whopping total of like four people visited last week in Opera, they’re going to get to live with it. Merry Christmas.
Perhaps we need to lobby for better kerning control in the specs for CSS4…
BAM! Stan jumps in and tells it how it is. I completely and utterly agree with all that he is saying - tightly spaced Arial (yuck!) or Helvetica (slightly less yuck!) looks like a developer’s fake way of trying to look like a designer.
Mike, I think you need to iron those stressy pants, dude. If you read my website, you’ll see that I’m not a professional designer. I don’t pretend to be one, and I don’t aspire to be one.
You might like these two facts, though. One: I don’t even know what kerning means. Two: I first spotted the ‘squished up heading text in shades of grey’ look that you’re so repulsed by on your website [link removed]. To quote your CSS:
h3 { /* blog entry title */ padding: 28px 28px 5px 27px; margin: 0 0 13px 0; letter-spacing: -1px;
Anyway, life’s too short for a handbag fight about kerning. I’ve got an expedition to organise…
Cameron, I’m not sure why you’ve been expecting gradients to fall by the wayside for years - gradients are everywhere in design, wether it’s print or web. Just like the simplebits article way back on natural colors (or maybe it was mezzoblue?) just ‘looking right’, gradients occur in nature as well and, done correctly, provide a subtle texture.
Horizon, anyone?
(…) i would prefer it over the 8pt pixel font rage of the past.
Pixel and PT suck. They should be banished from the web as 1em is as much as the user wants the font to be. So never - repeat!!! - be smaller than 80% (0.8em) from users wishes - he could hate you.
People should start to give up total control over a website. This means liquid, em, float.
“There is no such thing as control. Control is an illusion.
I’m with Mike D. - Lucida Grande is the best web font I have seen. Sure, it’s being used on a lot of sites, but it looks good and is very readable. Too bad it isn’t available for Windows people.
Man, just when I was getting used to the Fisher Price look! I’ve always wondered why this is popular and the only conclusion I can come to is that it is a backlash to those cluttered hard to understand pages with five hundred images and links, flashy backgrounds, and font type medlies.
Gotta agree with Benke, I’m lovin those black sites, particularly Apple’s Aperture dept. Cooler than an eskimo’s feet. The Helvetica, neg margin’s will definitely catch on too, it rocks. And serve me in line for the death to Fisher Price look queue. I Love Lucida Grande, alright!
As for the JS/DOM - I’ve added that book to my Amazon list as I’m feelin that heat too. Sorry to hijack proceedings but, while we’re in such educated company, can anyone recommend a good, beginners guide to PHP/MySQL as my time for not taking on dynamic sites is rapidly running out.
As great as it looks, Lucida Grande has a drawback as serious as its unavailability on Windows - it’s lack of an italic.
Get on the ball, Apple! Microsoft is trumping you in typography, your once great hallmark focus!
Damien, I like this book: “PHP and MySQL for Dynamic Websites” by Larry Ullman. Tried a few different books, but this was the only one that made sense to me.
On topic: As my eyes are getting older, I am appreciating the Fisher Price look more and more. Big text is easier to read sitting back in a relaxed position, or with a notebook on my lap. If you’re not making the text big, at least make it so the fonts can ctrl+mouse-wheeled bigger :)
OK everyone has beat me to black…. so I will go out on a limb here and say orange is going to have a nice hay day here.
There is another bold thing I think it will be very present all over the web in 2006: shades of gray / shades of green color schemes. It was just started!
in for 2006 -
bads:
* amateur-hour web scripting and dom manipulation that will hose resources.
* underhanded javascript contributing to/playing a key role in phishing, identity theft, etc.
* a return in late 2006 of the “javascript is bad” meme, not due to buggy browser implementations but to malicious js and resource-wasting js as outlined above. implementing features for non-js (by choice) users will become meaningful again.
* whatwg and w3 will continue to play “name that standard”, and browsers will bloat trying to accomodate overlapping standards and unused features.
goods:
* svg
* mobile
* a rapid die-off of the navel-gazing web design crowd. the novelty of paying monthly hosting fees to show off this week’s css hack will drop like a rock
* markup vs scripting will battle it out for mindshare. winner will be determined by penetration of malware js into the public perception.
You�re actually talking about tight tracking, not �negative kerning.� Kerning involves a character and its neighbour(s).
�Letterspacing� (as one word) is always added space: �letterspaced two units.� (You may be acquainted with the apocryphal tale of what a man [sic] who would letterspace lower case would also do.) �Letter spacing� is an attribute we can discuss generically as just �spacing,� as in �Verdana�s spacing is much too wide for lengthy printouts.� Back in the day we would simply have said Verdana sets too wide, but much typographic knowledge has been lost within a single generation, hasn�t it?
Not only can you already include the impossible-to-remember, inaccessible-to-dyslexics Windows Vista font names in your CSS, I�ve been doing it for months.
Hey Ben, I actually love the design of your site, didn’t mean any offense to you with what I said. As for that archive URL, I’d like to kindly request to Cameron that he de-activate or comment out that URL in the comment so people don’t actually go there. The reason that completely inappropriate background image is up is because someone stole the look and feel of my site, complete with hot-links to all my images. I decided to send that person a message :)
And as for the negative letter-spacing…. that’s on a Trebuchet MS header, not Helvetica. Point still taken though!
Joe - Thanks for the clarification. You amaze me every time you talk about type.
Mike - URL removed.
Got to agree with the Green, Grey and Orange thing - I’m finally cool!
Using justified text in narrow columns without hyphenation results crap looking pages with large holes between words. This blog or whatever is the perfect example.
Long time lurker, first time poster. Cameron, it’s a cool site and a good read you’ve got posted there. I am all for the Fisher Price look—from an accessibility point of view as it helps users who don’t understand they may change their text size at all. Who is more likely to know s/he may change the text-size—the css-aware designer or some hapless consumer?
Can anyone explain the relationship of whatWG and the w3c? Are their efforts competing, cooperating, overlapping? I’m excited to hear about the whatWG but don’t know much about them.
Yeah black is definately coming back! ;P
As others have said stated I think fluid works well for certain sites (i.e shopping carts) and others are better fixed. Certainly, there is something more asthetically pleasing to the eye with fixed.
I pray to God, the Fisher Price look goes away. It drives me nuts. My main client LOVES this. I continue to fling the poo on the wall and the jump up and down clapping their hands with glee.
As for the fluid layout. I am not so sure it will take off. They percentage width causes problems when images are used. Mast headers cold not contain fixed with images, images placed in content div’s would have to remain small to allow for fluidity. This causes problems for invidivuals such as photographers who need to display images quite large to showcase their work.
I’ve just seen to many problems with the fluid layout to see it taking off.
I really don’t know where this hype over Lucida comes from. Weather you like it or not, the vast majority of users will be on a PC without ClearType, in which case this font looks horrible. Is is just a big lash against Verdana and Arial?
It isn’t even installed by default on Windows. It comes with MS Office, but even then, it isn’t installed by default.
So, ok, use it. But make sure you have an alternative setup that works too.
It’s not a perfect font, but I actually rather like Verdana. Trebuchet MS, too, although that has had a bit of backlash lately (probably in conjunction with Fisher-Price).
On the off-chance that this gets a high googlerank for the phrase “Fisher-Price”, I hope no one gets sued. ;)
Great writeup Cameron. As for “page refreshing”, I wonder if analytics/informatics would be affected. That is in terms of “page-view” category. I think we may see some change regarding this by the way AJAX is runnin’ and chuggin’ at the moment. This would probably be only significant for marketing purposes.
@jason kunash:
whatwg (whatwg.org) is more-or-less a response to the notion that the w3 is an ivory-tower organization that trie to design the future by committee instead of dealing with the realities of the market.
this is a laudable goal, but in my opinion its one ad-hoc standards body too many. as i said before, their competing standards will win adherents who will demand browser support, and bloatware will ensue.
I am surprised you didn’t include the obvious changes that will occur due to the arrival of IE7. For example I would predict PNG starts to become much more common as well as PNG transparencies.
Similarly I would expect the use of :hover for CSS menus to become more common and the use of fixed backgrounds to create effects like Mayer’s Complex spiral.
Diego - Well, if I included all those I wouldn’t have given you any reason to post the 3,000th comment on this site! (which, btw, you really are #3,000)
Damien, I have to second the recommendation ‘PHP and MySQL for Dynamic Websites’ by Larry Ullman. I’m slowly expanding from design into some development (I’m almost always a one-man-band) and this book did great things for me. (Sadly, my debut site is down, so I can’t show off.)
Cameron, great article as usual.
Thanks, Andrew.
3000+ comments and article #666!
Glad so many people also think that that the negative kerning isn’t such a good thing. It really does seem motivated from people responding to wider kerning. Who wants headlines on the web to look like the Windows logo?
Cameron,
Yet another steller article, and congrats on the 3k in comments.
From my stand point I see 2006 having lots of mobile web in it, so I definitely agree with you there. With the large push in the states on the mobile web/application front. I see a number of sites making sites that will be viewable on on the mobile browser without having to use third party CSS stripping tools.
Lucida’s a nice, font, but somebody {hint} should do a survey to see, what percentage of people actually use “cleartype”. I usually have it turned off, because it makes the fonts look a bit unclear and I think most people have it turned off. So if I design a website with cleartype on, what about the other viewers?…
Fonts : Trebuchet MS and Verdana are my choices. Personally I dont like Lucida, and dont agree that Lucida rules :)
Colors : Lime, orrange, light blue and dark grey, well, pink with the dark background are really nice .
Graphics : funky, retro.
www.frexy.com
I thought the Fisher Price quip would create more of a stir, as it seems to be a direct swipe against the 37Signals style and until now I’ve never read a bad word about them though I am having a hard time enjoying Basecamp like everybody else seems to. That said, I like Fisher Price. First, because it’s not been around long enough to have become tedious. But mainly because it seems appropriate for sites that are more applications than they are publications. It wouldn’t suit aldaily but it does suit backpack.
As for negatively-spaced san-serif letter spacing, Mike Rundle’s comment above (that it looks like a developer’s fake way of trying to look like a designer hit home) did hit a nerve, as I am that soldier, but for larger fonts it really does allow for one letter to bleed into the next, and that is nice is it not?
Regarding people’s javascript skillset. I actually think that with all the new libraries coming out like moox.fx and Scriptaculous, that while some people will focus on that area, you’ll see that they will create behaviours that you can easily drop into your sites.
Similarly javascript componants like editable textareas, and image croppers will all become more viable now as people become more accepting of Javascript, and techniques of separating it out from your main code, become more advanced.
So, in short, don’t worry too much if your JS isn’t too hot, you’ll be able to use what others are writing for you.
“Basically when your line-lengths exceed 12-13 words your comprehension levels and reading speed drop. So fluid layouts that make lines 20 words long suck the proverbial acorns. Let’s make 2006 the year where designers remember that people actually have to use the things we create ;)”- Mike Rundle.
Amen to that!
Also I agree with people saying black is back for 2006 - it is so much more comfortable on a computer screen than white. Although it needs really great effort to have a professional or prestigious look and feel with a black background.
Personally I’ll be using lots of greys with accents and white space, and trying to avoid clutter that allows me to avoid the “Fisher Price look” to draw attention where it’s needed.
Fluid layouts and re-sizable text simply must be on the up, I know I’m going to work on flexible sizes with max- and min- limits.
position: fixed; and the background-image version (for complex spiral style FX) have been waiting to take hold too!
Authentic Boredom is the platitudinous web home of Cameron Moll, freelance new media designer, author, and speaker. More…
Full-time and freelance job opportunities. Post a job...
A selection of fine reading, available for a limited time only:
- Jobs home page reorg
- Coming soon: Mobile Web Design, the book
- Dyson ad: Text as more than just words
- Setting sail for Europe
- Review: Sumo Omni bean bag chair
- Dashboard widget for Authentic Jobs
- Limited-time offer: $99 listings
- Nine skills that separate good and great designers
- Fire sale
- Introducing AuthenticJobs.com
CSS Mastery: Advanced Web Standard Solutions A solid round-up of indispensable CSS design techniques by Andy Budd, Simon Collison, and Cameron Moll.
Mobile Web Design A guide to publishing web content beyond the desktop. Tips, methodology, and resources. Now available.
Letterpress Posters The unassuming beauty of a freshly letterpressed print.
That Wicked Worn Look. Techniques for that worn, aged, distressed look.
Mister Retro Machine Wash Filters Turn the dial to “Instaworn” with these filters.
Blinksale Dive in and enjoy shamelessly easy invoicing from Firewheel Design.
Basecamp My preferred web app for internal and client project collaboration.
HOW Conference Austin, June 24–27. Pentagram, Adobe, P&G, et al.
Web Design World Seattle, July 20–22. Practical sessions on web design.
Stimulate Salt Lake City, September 2009. Entrepreneurship and design conference.
Articles:
Linkage:
1 Mike D. ~ 09 December 2005 at 02:39 AM
Good analysis Cameron.
Quick question: when you say “Lucida”, which Lucida do you mean? Lucida Grande, the unmistakable “finest font ever created for the web but only available on OS X”? Or one of the other Lucida variants (like Lucida Console) which bear no resemblance to the aforementioned whatsoever? If it’s Lucida Grande you’re telling me you’re sick of, we might just have to throw down right here right now… that is pure typographical heresy. :)