The New Web Design Philosophy

The world of website making is always evolving, but in the last two years there has been a massive shift – in fact more like an “inversion”.

The Old Way: PSD Mockup > Code

For the last decade, we have been designing extremely layered PSD’s, which we save as JPEG mock-ups, and once approved we painstakingly re-create that design in HTML and CSS and images. It took forever sometimes to get out of the “mock-up” stage. Multiple revisions to decide background textures, button gradients, and how much drop shadow to drrrrrrrrop! It got pretty crazy at times, working until 3am on “version 15c” of the home page, but we did it. All to get the “go-ahead” to finally start coding the actual working site.

Then, once you show them the first HTML/CSS test version, the real evaluation begins. Now the functionality doesn’t quite work as well as the gorgeous, layered PSD’s somehow made your clients/bosses/overlords believe. In place of doing any user test, you are now submitted to multiple rounds of revisions – both functional and aesthetic – to make the site “magic” again. Often websites would get lost in the miasma of “issues” that were a combination of personal preferences and unestablished usability conventions. No, you can’t have the button on the right in blue, it needs to be on the left in blue!

The New Way: Functionality > Appearance

Several things came together to create this new philosophy:

1. The idea that websites are “functional” things not “pretty” things
2. Minimalist Design (Metro/iOS7/Google/etc/etc)
3. Open-source HTML/CSS “Bootstraps” being distributed (Twitter Bootstrap, Foundation)

The days of making your website look as “magic” or “sexy” are gone! (Well…going…as I hope to convince you). I have seen the light, my friends, and I can tell you it’s much better over here in the Modern Era.

First, we start with the most important thing about a website: The Functionality. Websites are meant to be “used” like tools, not admired for being “pretty” like art. A toaster must be a “useful” thing more than being a “pretty” thing, and that is how a toaster is designed. They start by making something that turns bread into delicious crunchy rectangles and put some kind of shell around it that can sometimes be aesthetically pleasing.

If you designed a car from the outside in, how well do you think the car would run? How often do good looking things “work” better than the simple, plain solutions? So why are you still trying to design a website in Photoshop?

The solution, is to get yourself familiar with the concept of “Rapid Iteration” (also sometimes referred to as “Agile Development”). The idea is to start with HTML/CSS code and “scaffold” the site’s functionality and basic content before you even think about fonts or colours or background textures. In the last 2-3 years we have seen a maturation of what is now known as “boilerplate” or “bootstrap” templates, where experts/leaders create the “best” minimum code that can be used to code a modern, standards compliant website.

Using things like Bootstrap, you can create a basic – but functional – website in a fraction of the time it would take to do your first Photoshop mock-up. Test users can actually click around a real HTML/CSS website – complete with Javascript and jQuery animations – within a few days. This is a huge shift from the many weeks it might take to get to the first line of code while you are buried in PSD layers. I’m sorry, your scratch disks are almost full.

The hardest part of this process is convincing your client that you will have a “ridiculously good looking” website by the end of the contract. Most clients want to see something gorgeous up front before agreeing to the high cost of a great website. But that’s not what users care about, is it? We know this now; we have the usability studies to back us up. Users care about gettin’ sh*t done, and nothing else. If you aren’t thinking that way, you aren’t thinking like a user, you’re thinking like a client.

Obviously I can’t convince the whole world, but we’re looking for the type of client who’s open to the idea that the web is still an evolving world, and the way people use the web is constantly changing. We’re doing our best to stay ahead of the curve and make the best websites for our clients. If we get stuck on the amount of drop shadow behind a button now, it’s only one line of code to change. And we’ll get to those items just as soon as we have confirmed the location, size, wording and functionality of that there button!

TL;DR: It doesn’t matter how good your website looks. If users can’t use the site within 10 seconds, they are gone. Build from the code up and work in small iterations to slowly improve both functionality and aesthetic.