Tag Archive for: Design

As web designers, we all seem obsessed by HTML5 and CSS3 at the moment. Endless posts, tutorials and discussion about them dominate the blogosphere. But how much are we learning that can be applied today?

Don’t get me wrong. We all need to understand HTML5 and CSS3. And a lot of it can be used today.

My point is that we seem to be spending a disproportionate about of time reading up on the subject when so many other areas deserve our attention.

While others are reading yet another tutorial on CSS animation, why not broaden your horizons by researching subjects that will allow you to offer an even better service to clients?

I’ll share with you five areas that I believe are much neglected and that we need to learn more about.

Demo of a 3D sphere created in CSS3

Do you really need to know how to create a 3-D sphere in CSS3? (Image: Paul Hayes)

1. Customer service

“Customer service?!” you cry. “I don’t work at Starbucks!”

If that’s your attitude, think again. Customer service lies at the heart of everything we do as web designers, and yet we rarely think about it, let alone read anything on the subject.

A member of staff working in starbucks.

You may not work at Starbucks, but customer service is intrinsic to our role as web designers. (Image: ChiBart)

We need a good grounding in customer service for a couple of reasons. First, we are in the service business. We like to think that we build stuff, but actually we are offering a service to our clients. We don’t just build websites: we guide clients through an unfamiliar process and provide a lot of advice and support along the way.

Secondly, the majority of websites that we build have a strong element of customer service. We provide a service to end users in the form of either an application or, more often than not, information.

Whether we want to offer a better service to clients or end users, the message is the same: we need to brush up on our customer service skills.

My recommendation is to start by subscribing to a few customer service blogs. Customer Experience Matters a good starting point.

2. Psychology

Understanding of psychology should be woven into every aspect of our job, from sales to project management to user interface design to design aesthetics. Everything we do as web designers should be informed by knowledge of how people think.

Unfortunately, few of us have taken Psychology 101. What we do know we have learned instinctively rather than through any formal training. We design based on gut reaction rather than informed knowledge.

Being able to get inside the heads of others is crucial, whether it’s users or clients. Whoever it is, we have to know our stuff.

Stephen Anderson's psychology resources

A great introduction to the field of human psychology, curated by Stephen Anderson. (Image: Mental Notes)

Thankfully, Stephen Anderson has pulled together a great set of resources to introduce the field of human psychology. If his extensive list is a little intimidating, I recommend starting with “Made to Stick” or “Nudge.” “Neuro Web Design” is very good, too.

3. Context

There was a time when you could make an educated guess at the user’s context. Surfing the web was done at a desktop computer in relative quiet. Unfortunately, despite those days being long gone, many of us still assume that context when designing websites.

The reality is very different. For starters, we rarely have the user’s full attention. They are surrounded by distraction, both offline and on. The computer is now as likely to be in the family room with kids running amok as in a quiet study. While looking at your website, the user is probably also checking email, catching up with friends on Facebook and tweeting.

The problem doesn’t end there. We no longer just surf the web on a desktop computer. There are netbooks, tablets, televisions and mobile devices of all shapes and sizes.

Girl using a mobile phone while on a train.

We can no longer assume that people access the web from a desktop computer. (Image: Shutterstock)

Unfortunately, not a huge amount has been written on the subject, beyond my own rambling thoughts. But I am convinced this will be a defining factor in web design over the coming years.

If we want to continue creating cutting-edge websites, then we need to take context seriously. Ultimately, good web design is more about context and content than HTML5 and CSS3.

4. Content strategy

How did we ever decide that content was the client’s problem? Why should we expect them to know about writing for the web when we, as self-proclaimed web experts, do not?

Content is the foundation of every website. This includes content in all its forms: images, text, video, audio and functionality.

How a website is built and what it looks like pales in comparison to the content. Still, many of us regard it as the client’s problem.

Clients will be demanding a lot more help to get their content right, and if you don’t offer it, then they will turn to your competitors. I would be willing to bet my company on it.

Don’t get me wrong. You don’t need to become an expert content strategist. As McCoy would say, “Damn it, Jim! I’m a web designer, not a copywriter.” (Okay, he was a doctor, but you get the point.)

But just because you are not a content strategist doesn’t mean you can ignore the basics of writing for the web. You should know what a content audit is, how to make copy more scannable, and what goes into a style guide.

If you can’t answer these (and many other similar questions), then it is time to upgrade your skills. A good starting point is anything by Relly Annett-Baker, or get your hands on Kristina Halvorson’s book Content Strategy for the Web.

contentstrategy.com/

Kristina Halvorson’s book Content Strategy for the Web is great for learning the basics of content strategy.

5. Strategy

Things used to be so simple for the average client. They came to you, and you built a website that sold whatever service they were selling. Now we ask them complicated questions about business objectives, success criteria and calls to action. Compounding their worries, they have to think about Facebook, SEO, Twitter, user engagement and endless buzzwords.

In short, the average client is no longer looking for someone to just build a website. They are looking for a consultant to guide them through the confusing online world. They need someone who can look at their business and answer one simple question: how can the web best help them?

The problem is that most web designers are either frustrated artists or code monkeys (okay, maybe that’s a stretch). But we are not business advisers.

Geek Dressed as Business consultant

How much do we really know? (Image: Shutterstock)

We like to think that we know how the web can benefit a business. But we really don’t know that much. We are not schooled in business theory, marketing or economics.

Again, we don’t need to pretend to be something we’re not. But we do need to improve our basic understanding of these topics so that we are at least capable of having a discussion with business folk about how the web can help them.

When was the last time you read an article on direct marketing or corporate restructuring?

The problem

Herein lies the problem. We are so busy reading HTML5 tutorials and looking at CSS3 demos that we miss these other areas.

We are scared by what we do not know, and so we tether ourselves to subjects that we have a handle on. But as the web becomes more complex, we will need to broaden our horizons.

I am not suggesting that we all become generalists. I am saying that our skill set should be T-shaped. We need broad superficial knowledge of a lot of subjects and then deep insight into one area. The problem is that most of us don’t look beyond that one area of expertise.

If you don’t broaden your outlook, clients will look elsewhere.

Written exclusive for WDD by Paul Boag.

Typography is defined as the style, arrangement, or appearance of typeset matter. A look around your surroundings will reveal how much typography has influenced the world. But does it matter, particularly with the likes of YouTube, Flickr, and other forms of media growing so rapidly?

It doesn’t have depth, color, motion. It doesn’t generate feelings or emotions. It provides us with information; line after line of monotonous information. It’s text!

The YouTubes, Vimeos, Flickrs, and Instagrams of today’s generation feed those who want to forget about typography. They want information with visual and audible cues. As one would expect, gobs of text doesn’t exactly inspire them.

But the Web is still young. Things are growing at a rapid pace, much faster than before. We could, in a large part, thank Internet Explorer 6′s demise for this progression. Now we have the freedom to run wild, explore our creativity, and make typography something that does more than present information.

Will we take advantage of this rare opportunity?

Time is of the essence

Remember back to a time before there was broadband. Remember how impressive it was to see big blobs of information after clicking on this thing called a “webpage.” Sure, there wasn’t much in the way of images, sparkly graphics, or video — and also not much in the way of distraction, either — but there was a great sense of appreciation to be had; this is a new world of information, and it’s all accessible with the tap of a fingertip. Sure, it might have taken a bit longer than it does today, but when all was said and done, we were all floating on cloud nine.

That was then.

It no longer has the same magical feel that it once had. I know that I take it for granted. Maybe we all do. We expect images, videos, and visual feedback. We want things to gracefully fade in and out. We want to see the subject matter, in as many pixels as our screens will allow. And we want to see video, just in case the point wasn’t made clear the first time (bonus points if you include cute kittens).

We expect more than we did back then — rightfully so; this is 2011, and we have the technologies available to us as developers and consumers to enjoy information and new and inspiring ways.

Beautiful typography stands out throughout Mattt Thompson‘s personal website.

Designers and developers are producing content for a new age of consumerism. Those consumers don’t have all day to sift through information. There is too much of it. We know that. What we spent hours doing a decade ago, they spend mere minutes, if they can even last that long. They want information, and they want it now, and they want it in easily digestible formats that will get them in and out in the fastest way possible. If this means writing something in three pages that normally required three hundred, then so be it. They don’t have time to watch 10 minute long YouTube videos — they want it in a single minute.

In the battle for attention, the “TL;DR” is the admission that the battle has been lost. Yes, this ADHD-filled world is going to take its toll on the Web. It’s going to get a whole lot worse before it gets any better.

So who has time for text? We have audio and video at our disposal. It can present information much faster than text could. Indeed, whoever said that a picture is worth a thousand words was not lying; people these days prefer it that way.

But what if there was a way to regain their attention using nothing more than typography?

Typography’s resurgence

Thanks to a growing number of improvements in Web typography, we might not have to worry about the fate of the written word. Instead of diminishing the value of typography, we are seeing a resurgence in it. Interest in typography, especially from Web designers, has skyrocketed. The tools used to render typographical elements are improving — from enhancements introduced and continually developing with CSS3 to JavaScript tools like Lettering.js and jQuery. It is now feasible to create a webpages that look beautiful by using nothing more than a little vision, creativity, code, and typographical know how.

CSS3 has introduced a fair share of flair for typographers. A number of new properties have enabled them to radically expand their usage of typographical elements: transform, transition, column, text-shadow, rotate, and blur properties are just to name a few. The @font-face property, in particular, has also done plenty for Web designers that services like TypeKit are now solely geared towards supplying Web designers with beautiful, Web-ready fonts, something that wasn’t even possible a few years ago.

Designing Monsters uses CSS3 to create bold, eye-catching typography.

JavaScript is also contributing to typography’s resurgence. Lettering.js, in particular, is one of a few tools that have been produced to aid in the creation of beautiful typography on the Web. A JavaScript library called jQuery, which is arguably one of the most discussed on the Web these days, is also stirring things up. JavaScript doesn’t have all of the limitations that CSS3 has, particularly when it comes to the Web browser support; it isn’t perfect, but it gives Web designers more abilities to expand their typographical ambitions.

All of this has culminated into a plethora of typographical experiments that look beautiful in native Web browsing environments (if the given browsers support CSS3 and JavaScript); however, many of these impressive experiments lack consistency throughout the browser market. Some experiments result in variances in different browsers, others won’t render at all.

Unfortunately, this leads to questions as to whether or not all of CSS3′s latest features are ready for the primetime. Sure, Web developers will freely explore their creativity on personal websites; however, exploring these advanced features on a site that receives thousands to millions of hits on a daily basis is risky without planning for the worst case scenarios.

There is plenty of optimism, though. It just might take awhile before we see something like this, this, this, or even this appearing on your everyday webpage.

The future

There are many questions about the Web’s future. What impacts will the rise of video have on media consumption. What impact will the drastic increase in media being presented to users have (and will those consuming it be able to manage)? What will the transition to mobile devices bring? How will the open Web compete with application platforms like iOS and Android?

Naz Hamid utilizes the latest techniques to create a stunning typographical experience.

But the question about whether text/typography will be relevant in the future, that is simple: text is one of the best ways to present information. Web typography will continue to make advances that will ensure that the look of text on the websites will remain fresh and beautiful as ever. Also, the way we perceive text will adapt to these improvements.

Embrace all of the various media formats, but remember that typography is still the most important type of media that exists on the Web today. It was there when it started, it’s here now, and it will continue to be for the distant future. So be sure to explore ways to continually maximize its beauty and usefulness.

Written exclusively for WDD by James Mowery.