FontShop’s online DIY font app, FontStruct, changes that. Built using a slick Flash-based interface, FontStruct is a perfect example of “social software” done right — a kind of Threadless for typographers. The font construction tool is intuitive and fun to use, and the gallery allows users to share their fonts, comment on other people’s fonts, and download people’s creations.

The tool allows for your masterpiece to be exported in TrueType format, and provides IP restrictions, so you can choose whether to throw your font open to the world or keep access restricted to a trusted group of friends.

There are limitations, of course. The tool could never be used to replace the likes of Fontographer. Notably, a large variety of shapes is possible with the building blocks provided, but they don’t come close to allowing for organic, free-flowing letter shapes to be built.

However, in terms of achieving the goal for which it was created — (re)igniting one’s interest in typography, building a community of budding type designers, and of course, advertising FontShop’s catalogue of professionally designed typefaces, FontStruct does everything in a remarkably slick way.

Oh, and it’s a lot of fun. That is, until you get to about “K”… then you start to realise just how difficult a job creating a beautiful font face is.

If you’d like to play font designer for a day, FontStruct is definitely worth a look.

In the interview, Andy Kowalik, one of our mentors on the SitePoint Forums talks to UK-based designer Mark Boulton about how he got started in design, how he made the leap from salaried employee to business owner, and picks Mark’s brains on grid theory, typography, and other peculiarities of design on the Web.

Go read it now!

Is there a web designer you’d like to see us interview? Let us know in the comments, and we’ll track them down and put them in the spotlight.

The experts who contributed to this list include widely read authors and speakers like Dan Cederholm, Dave Shea, Khoi Vinh and Jeffrey Zeldman. Here it is:

1. Thou shalt not abuse Flash.
2. Thou shalt not hide content.
3. Thou shalt not clutter.
4. Thou shalt not overuse glassy reflections.
5. Thou shalt not name your Web 2.0 company with an unnecessary surplus or dearth of vowels.
6. Thou shalt worship at the altar of typography.
7. Thou shalt create immersive experiences.
8. Thou shalt be social.
9. Thou shalt embrace proven technologies.
10. Thou shalt make content king.

On the surface, this advice seems reasonably innocuous. However, dig deeper and you’ll see that it all falls apart. Allow me to explain …

Before I launch into why I think this list is baloney, allow me a couple of minutes to don my flame suit. It’s a little dusty since I used it last. Oh, and don’t forget to grab a pinch of salt from the kitchen on your way through — you might need it.

OK, here we go. Deep breath … I’m going in.

1. Thou shalt not abuse Flash.

   While in principle, I agree with this statement, it’s not because it relates to Flash. A better commandment would be “Choose the right tool for the trade, and master that tool.” Flash has its place, but HTML can be abused just as easily, as can CSS. Is abusing Flash any worse than abusing Ajax, for example? The accessibility problems are potentially even bigger with Ajax web apps than with pure Flash-based sites. And what exactly does “abusing” Flash mean, anyway? Building an entire site in Flash may be perfectly acceptable if done in an accessible manner.

2. Thou shalt not hide content.

   Allow me to offer a somewhat contentious view — popups aren’t always evil. Yes, they (almost always) introduce usability issues, and yes, for regular visitors they are annoying and frustrating and can harm a site’s credibility etc etc. No doubt you’ve seen the occasional popup ad on sitepoint.com.

   Here’s why: they work.

   When it comes down to it, it’s all very well to stand on one’s usability soap box and declare “Don’t use popups!” But if your site is a for-profit enterprise, then you may be doing your business a disservice by not contemplating popup advertising as a legitimate revenue stream. Why? Because people click on them. They are engaging, and many visitors find them useful; this we know from experience.

   Don’t get me wrong — I’m not saying that popups shouldn’t be avoided, or that they aren’t annoying, or that there aren’t usability issues with them. What I’m saying is that it’s not always black and white. Usability is a science with fundamental principles, but it’s not the only influencing factor in the design of a for-profit web site. There are other factors, such as the bottom line — and as long as your site exists to turn a profit, this wrestling match between ideal and profitable will continue to exist.

   In fact, from an accessibility point of view, they’re far less evil than those JavaScript or Flash-based floatover advertisments that hide content and give the user no obvious indication of how to kill them. And there are plenty of successful sites that employ those techniques too, for the same reasons.

3. Thou shalt not clutter.

   This is something I can’t really argue with, except to say that it’s ambiguous advice. BusinessWeek’s elaboration of the point alludes to something about information architecture and structure, yet clutter to me relates to a lack of white space, something that is evident in a site like, oh I don’t know, CraigsList. Which happens to be an example of good design later in the list. So which is it? Commandments shouldn’t be ambiguous. ‘Nuff said.

4. Thou shalt not overuse glassy reflections.

   What? No glassy reflections? But how can you possibly hope to have your site listed in The Complete Web 2.0 Directory?

   OK, I’m kidding. No argument here.

5. Thou shalt not name your Web 2.0 company with an unnecessary surplus or dearth of vowels.

   Hang on a minute — isn’t this a list about design?? Of all the principles relating to design — colour theory, layout, typography, contrast, grid theory, texture… what is domain naming advice doing on this list?

   If you’ve created a web app, then you’re not just a web designer — you’re probably a web developer too. And an entrepreneur. And a project manager. Let’s keep the list on target, shall we? Leave the domain name decisions for the marketers, entrepreneurs and domainers.

6. Thou shalt worship at the altar of typography.

   My issue with this commandment is this: it’s the Web. Typography on the Web, as everyone knows, sucks. Implementing pullquotes and fancy drop letters on the Web in such a way that all visitors see them require markup hacks. And we don’t have widespread support of downloadable fonts yet, by any stretch, and there are plenty of hurdles to overcome before we do. Sure, we have sIFR and cascading font declarations and image replacement, but these aren’t enough tools for us to really take control in the typography arena.

   This may sound like a cop out, but until those tools exist, typography will continue to suck on the Web.

7. Thou shalt create immersive experiences.

   Hands up who of you know what “immersive” means, and how to achieve it. I’m sure the creator of this list doesn’t — he defines immersive experiences as ones that “can capture and hold users’ attention,” and cites YouTube as one example of a site that does this well.

   Apart from the fact that the design of YouTube is cluttered, heavily Flash-reliant (possibly bordering on abuse) and contains 4 out of 7 vowels in its name, surely the reason people keep coming back to YouTube is because of the content it hosts, not the site’s design?

8. Thou shalt be social.

   The paragraph explaining this list item begins with “Web 2.0 is everywhere”. It’s this point that I made my mind up that this post needed to be written. And MySpace started it all? Puh-lease.

   If your site is designed to include functionality that allows your users to communicate with each other, great. But it’s hardly something you simply must do to be successful. Jeremy Keith doesn’t allow comments on his blog. Would you consider him a successful blogger?

9. Thou shalt embrace proven technologies.

   And I quote:

   Wikipedia, YouTube, Facebook, and their cohorts have become a part of daily life. Sites that can incorporate these elements into their design will connect with users in a meaningful way…

   Wha…? When did Facebook become a proven technology that you must incorporate into your site? And anyway — to what elements is he referring? The data from these sites, or the features that they employ? If the latter, surely this is just “being social” (see above). If the latter (which I suspect is what the author meant given his advice to provide “functionality and an interface with which they’re already familiar”) then surely this is advocating copycat design? Either way, this seems like a back-of-the-envelope idea at best; it certainly hasn’t been fleshed out or refined in sufficient detail to be a commandment.

10. Thou shalt make content king.

    OK, so remind me again what this has to do with design. How many of you have designed and built a web site for clients, without receiving any content from them until the end of the project? How do you suppose that client might have reacted if you’d refused to press ahead with your design, and simple given the excuse “Sorry — I can’t do anything without your content”

    And finally, if the author and his team of expert designers truly believe that “content is king”, then doesn’t this undermine the importance of design in the first place?

In summary, this is one set of commandments that belong on a white board, not a stone tablet. There are certainly some elements in there that show promise, but unfortunately ambiguity, cliches and ill-informed advice gets in the way. It’s hardly a set of rules that have been refined enough to warrant printing out and posting in your cubicle, let alone etching in stone.

Image credit: Ben Cumming

Just a final reminder that we are giving away a free MacBook to one lucky designer who submits a winning design to 99designs.com before June 20th. Any design that is selected as a winner before that date is in the running. The more winners you have, the more chances you’ve got, so get designing quickly!

If you fancy yourself as a hot-shot designer, check out some of the current contests, and get your submission in.

Good luck all!

Now, a change like this is normally something that shouldn’t matter — it’s not like they changed their actual logo to begin with a lowercase g, or made any changes to their home page. They just tweaked the 256 pixels in the browser’s tab. But this is one of the strongest brands in the world, and tabbed browsing has become a standard feature in all browsers.

Favicons are no longer an optional “nice-to-have” — users come to rely on them as a usability aid, so those 256 pixels are an extension of a company’s brand. Add to that the fact that people generally don’t like change, and the result is hundreds of blogs complaining about how ugly the new icon was.

Personally, I don’t mind it. The new icon threw me at first — the big G was instantly recognizable, and being able to jump to a tab based on that visual aid is a crucial part of how I navigate. However, after a few days of getting used to it, I realized that change was inevitable, for a number of reasons:

• Lowercase letters just look better at small resolutions. I don’t have any data to back this statement up, it’s just my opinion.
• Lowercase logos say “friendly and hip Web 2.0 startup“. Uppercase logos say “stuffy corporate”. Google has started to make efforts recently to open up and engage with their user base more; this supports that approach.
• The G was starting to look a little old. With mobile services forming an integral part of Google’s future offerings, it would have been difficult to make a big impact with a tired logo.

Google’s Marissa Mayer obviously isn’t completely sold on the new look though — Google is crowdsourcing the next stage of the icon’s design, in case someone outside of Google can come up with an improvement:

The design process was much harder than we thought at first. By no means is the one you’re seeing our favicon final; it was a first step to a more unified set of icons. If you have your own notions about the Google favicon, please send them to us … maybe your idea will be the one that people see billions of times per day.

If you think you can do a better job, Google have opened submissions for improvements on the little g. You have until June 20 to submit your image.

1. You’ll need to have an account at Adobe and login.
2. You’ll then be directed to the download page. The downloads are 336 MB for the Win version and 633 MB for the Mac.
3. Once installed and launched, you’ll be asked for a serial number. Warning: This is NOT your current CS3 serial (which is what I tried originally). You’ll have to go to this page, enter your CS3 serial, and then you’ll be issued with a new Fireworks CS4 serial to enter into the app.

Maybe it’s just me, but when you’re told you’ll need your old serial number, and soon after an ‘Enter your serial here’ screen pops up, it seems perfectly logical to enter your old serial there — which, of course, failed and left me feeling silly.

I backtracked and figured it out, but I bet others are making similar mistakes — and flooding Adobe support. Perhaps issuing the new serial THEN offering the download would be a better process. Once the download has begun, I’d imagine most people would leave the Adobe site — sans serial number.

The first thing you notice on launch is the new interface. Adobe have gone with the monochrome icons on light charcoal. It gives everything a very cohesive look, but I found myself taking longer to locate some tools — for instance, the ‘Crop’ and ‘Export Area’ tools share a button and look very similar without the red and blue of the CS3 icons.

Adobe have also followed the growing trend of ignoring the OS chrome in favor of their own custom application interface. Apart from the fact that I can’t see any advantages to the user in doing this, it’s very much a hit and miss affair in this beta, with OS-styled dropdowns and panels mixing with Adobe tabs and dialogs. Seems more like a ‘good for Adobe’ than a ‘good for user’ decision, but I’d be happy to hear the reasoning behind it.

Anyhoo, I’ve only been poking around in it for a little while, but two really nice new features are apparent.

Improved Type Engine

Firstly, the Adobe Type Engine has been integrated into Fireworks CS4, which gives Fireworks users access to properly designed bold, italics and other font variants when they are available. Up till now, Fireworks has only offered a ‘programmatically generated’ bolding and italicization.

As the example above shows, this is better than nothing, but gives an inferior result every time.

Improved Path Editing

The other new feature I’m really enjoying is the new path editing panel. I’ve used Fireworks as an illustration tool for years because it has such a great balance of vector and pixels, but this new panel really adds some more punch to the vector editing side. Along with the standard punch/crop/unite and scale and rotate functions, the new panel adds stuff like path extrusion, path blending (my wishlist feature — thanks Alan), fisheye, deform to path, invert shape and point selection tools to the toolbox.

Although some of these tools have been available before via extensions, the new panel pulls it all together into a much more coherent working environment.

I’ll write up a more comprehensive run-down when I know more, but things are looking good at this point.

I learned a lot though!

There’s no argument that the Web is a relatively technical medium, so it’s with good reason that we all spend a lot of time thinking about, discussing and practicing the technical skills of the Web.

Nevertheless, when you boil it all down, the Web is really just one big, overly-complicated pipe that humans use to shout information back and forward to each other.

A cursory look at the millions of pages written on code, standards and other technical matters suggests we may be spending a little too much time thinking about how our shouting gets through, and not nearly enough time thinking about how we’re shouting.

The theories behind what makes good shouting are broadly referred to as the soft skills of the web — areas such as user experience design, information architecture, usability testing and research design — and that is exactly what Web Directions: User Experience was all about.

Andy Budd is arguably the world’s best-known “user experience designer”, and kicked off the morning with what was for me the best presentation of the day.

Andy’s key idea was to look hard at those great experiences that we have in the offline world, and see how we might apply them to the Web.

For most of us, vacations are some of our most intense and memorable experiences, and Andy spent a lot time discussing some of the techniques that luxury hotels use to brand your experience with good feelings. In Andy’s view, the most crucial times for setting these good vibes are the very beginning of your experience: when you’re asking yourself “Will this be a nice place?”, and as you leave, when you’re asking “Was this a nice place?”

Hotels tackle this challenge by putting their most experienced and savvy staff — managers, doormen, porters and receptionists — at these most sensitive places in the “experience chain.” They’ve figured out that if the hotel can nail the start and finish, it will take a major disaster in between those two times to wreck the customer’s experience.

This also explains the immense time, money and effort poured into hotel lobbies, from Vegas to Paris to Moscow. Most of us have a hard time shaking the feeling of starry-eyed wonder we get as we pull up to a cavernous, lush lobby fizzing with smartly-dressed people being unusually nice to us. Years later, that memory is often still one of the strongest we have.

Now, to be fair, yes, it is very hard to build online applications that can truly compete with the immersive, sensory overload of a grand hotel.

But, for me, what it does demonstrate is how hotels have managed to take what could be a necessary but emotionally empty experience — after all, the check-in process is for the hotel’s benefit, not your’s — and re-engineer it into a happy, memorable highlight of your trip.

Very clever trick, that.

According to interaction designers, experiences should fit somewhere into a “hierachy of needs” — from functional at their most rudimentary, through to meaningful at their best.

The sad truth for all of us the vast majority of “web experiences” fall into the bottom half of that triangle. We all know the online world is packed to the rafters with emotionally empty experiences.

For example, how many times have you seen the following:

• No access. Please log in to continue.
• Sorry, page could not be found. Please try again.
• Loading…… 64%…65%…
• User Error! Duplicate entry “24″ for key 1

We’re probably all guilty of designing sites that speak with this voice at some time — I know I am. Our intrepid user needs some feedback, and rather than calming and reassuring them, we slap them with all the warmth of a parking inspector.

The truth is that we probably don’t think a lot when we write these little communications. They’re usually vaguely functional, so we pump them out by rote and move on to more important and interesting things.

The thing is, when we do this we miss a huge opportunity. I’ll explain.

At SitePoint, we all regularly work on customer support email (even the CEO). One thing we’ve learned over the years is that a mistake (for instance, a delayed book order) can often be a rare opportunity to create a fan for life.

Generally, at the time these customers come to you, they’re grumpy (often rightly so) and spoiling for a fight. When you make them feel special by solving their problems quickly and politely, they’re often quite surprised and deeply appreciative. The real irony is they are often more impressed and delighted than if their order had gone through without a hitch. You actually get more chance to make a lasting impression if you’re on the back foot.

Photo by duncan

In a very similar way, people can be more easily affected when you manage to inject a “human touch” into places where they aren’t expecting it.

Andy showed a great example of this principle in use on the Innocent Smoothie box.

The bottom face of any box is generally the least useful surface on any product package. However for the cost of a tiny amount of black ink, the Innocent package designers have provided anyone who happens to glance at the bottom an “Awwwww,.. that’s cute!” moment. Printed in tiny letters on the bottom of the box is ‘Stop looking at my bottom’.

For a tiny moment, a humble package has cut through, given you a wink and spoken to you like a real person. A week later, there’s every chance those “warm and fuzzies” will echo back to you as you’re standing in front of a towering wall of cold beverages.

So, how exactly might this principle transfer to the web?

One of the best examples I’ve seen recently is Picnik.com.

Now, make no mistake, Picnik is a really nice application to begin with.

It’s awfully pretty, slickly designed and has a great set of features.

But it’s often the little things that make the most lasting impression.

As Picnik begins the very necessary download and setup process, their garden-variety progress bar is accompanied by some random “progress commentary”.

• Picking blackberries…
• Making sandwiches…
• Floating kites…
• Laying out blankets…
• Warming breeze…

Yes, it’s fluffy and a bit silly. No, it doesn’t tell the user a single thing they need to know. Nevertheless, with very little effort, the Picnik design team have managed to take an empty, totally valueless experience (watching a progress bar) and turn it into an experience that similtaneously builds their brand and the user’s sense of anticipation.

A loss becomes a win.

So, where to now?

For me, perhaps the first step is simply becoming aware of where these “dead spots” are — it’s easy to follow the same patterns that have not been questioned in the past. Learning to look at progress bars and error messages with truly fresh eyes is harder than it sounds.

Have a think about your most recent site developments. Can you identify any “empty experiences” that you might be able to turn around?

If you’re interested in hearing more of Andy’s views on the user experience and the Web in general, Matt was lucky enough to spend some quality time with Andy after the conference. You can read a transcript of Andy’s interview on SitePoint.

Republished from Design View #45

That’s right, the entire 278 page book, yours to keep, forever!

The Photoshop Anthology: 101 Web Design Tips, Tricks & Techniques is the ultimate Photoshop compendium for web designers.

It’s brimming with tried and tested real-world Photoshop solutions that will add impact to your next web design project. If you’ve ever been stuck for inspiration, have puzzled over just how to create a shiny aqua-style button, or wanted to create that seamlessly tiling background image you saw on a site recently, you need to download this book.

Download it now!

This book is free to download thanks to the generous support of 99designs. If you’re looking for a place to give your new-found Photoshop skills a run, why not earn some extra cash along the way?

The team at 99designs are giving away a shiny new MacBook for the best logo design or web design, so be sure to check them out.

In the interview, Richard talks about why he chooses to enter design contests, how he uses contests to solicit follow-up work, the process he follows when tackling a brief and his thoughts on the NO!SPEC philosophy. Here’s a choice snippet:

I have to confess that quite often the follow-up work is not as exciting. If I’ve been given a brief, and it’s just for me… there’s no thrill of the win, you know? Of course, it’s a safer option, because you know you’re going to get paid. But it’s not really about the money for me. It’s become more about the competition, and the excitement of competing against so many other talented designers.

It was definitely interesting hearing an alternate take on the concept of design contests and how they affect a designer’s livelihood — in Richard’s case, in a positive way.

Read the interview and have your say. There are bound to be plenty of different opinions!

A recent post by Christopher Phin, called Top Ten Typographic Mistakes Everyone Makes really exemplified that for me (sorry Chris, nothing personal!) with remarks like this:

there’s little chance that using a period instead of an interpunct will obscure or confuse your meaning – but they are nevertheless wrong

And this:

those aren’t proper quote marks; they should be sixty-six and ninety-nine quotes

The use of interpunct is not more correct than period, the use of straight quotes is not wrong, and (my personal bugbear) the use of three dots instead of ellipses is perfectly fine. Exactly as with grammar, the details we’re talking about here are not rules, they are conventions, and no more right or wrong than the collective will that made them conventional.

We see similar examples in grammar, for example over split-infinitives. According to the prescribed rules of grammar it’s wrong to split an English infinitive: to go boldly rather than to boldly go. But language is a living thing and it changes all the time. Really, the finer points of grammar are arbitrary; grammar should serve only to make sure that language is collectively understood. To correct grammatical mistakes in order to ensure clarity and understanding is one thing, but to correct them simply in order to adhere to an arbitrary set of rules is just anal.

And I feel the same way about typography. Who cares what kind of quotes you use, what kind of dashes, or whether you put ellipsis or three dots? Who even notices the difference, apart from typography nazis?

The only possible reason I can see for caring about this is accessibility, and how assistive technologies describe particular characters.

But as Jason Kiss’ recent research into how character references are spoken by popular screenreaders shows, there is huge variation and discrepancy in how many characters are handled, such a discrepancy that there cannot be a strong argument for using them based on this behavior alone. But even if there were, I suggest it might be counter-productive.

I mean who the hell knows what ellipsis means? Conversely who understands what dot dot dot means? Everybody understands the latter, but very few understand the former. And what is an ellipsis after all, other than a formalization of three dots?

So I won’t use uncommon typographical symbols. I think the fewer different characters there are, the better our collective understanding will be. For me there is only one kind of double-quote mark, one kind of period, and it’s dot dot dot every time.