Web Design State of the Nation: One Designer's Journey

Simon looks at how web design and build workflows have changed for him over the last eighteen months.

Web Design State of the Nation

Eighteen months ago, I wrote an article for Elated about the shortcomings of Photoshop as a digital design tool, and how I thought a proper design tool for the web should work. Indeed I said of Photoshop:

"Photoshop has become an all-purpose, go-to tool for everyone... this all-purpose approach is its biggest failing."

In that piece I focused on what I thought I needed instead of Photoshop. In other words, a visual design tool to produce flat mockups to show to clients and for developers to build from. Well, the good news is that a year and a half on, I have that tool (or something close to it), but the environment has somewhat changed around me. More on this later.

Those of you who subscribe to the Elated Extra, our email newsletter will have noticed a few pieces relating to this subject over the last few months. This longer, more detailed article aims to capture the current moment in web and digital design as seen through my eyes. As such, it's a personal look at how I'm now developing sites and web applications.

The new Photoshop

My current design tool is Bohemian Coding's Sketch 2. It does a lot of what I said I needed in "The New Photoshop". It's a dedicated digital design tool with:

  • Styles
  • Nice sharp-edged vectors
  • Grids
  • Slices
  • Multi-page design and export to PDF
  • Multiple artboards
  • CSS style copying
  • Multiple fills
Sketch2 Screenshot
Bohemian Coding's Sketch 2

Yes, it has a few rough edges, but these are being gradually resolved with point updates. The interface is really nice and Mac-native, and by and large it does fine as a digital design tool. Sadly, there is one elephant in the room - it's Mac-only I'm afraid, so Windows users may have to look elsewhere. Actually, help me out in the comments. Is there anything like Sketch out there for Windows?

So. I no longer produce original design work in Photoshop. After 15 years of professional use, it was a massive wrench to move away from it, like leaving behind an old friend who's no longer good for you. That said, it's a brave new world out there, with modern software that helps you along and works the way you want it to. I do still go back to Photoshop though, when I have to update older designs or do work that has to be shared with a developer.

A word about the price. At $49 USD it's heading towards an impulse purchase, and for a pro tool that's nothing. All Mac-based digital designers should give this a go. Adobe, this just makes your software look massively over-expensive. AND I can talk directly to the developer - the lovely @pieteromvlee.

Finally, a quick airing of my utter joy at not using Photoshop's deeply awful gradient editor. Bliss.

The lay of the land

New ways of doing things are inevitable. Eighteen months ago my workflow still mostly revolved around flat designs to show to clients. The process went something like this:

  1. Receive brief
  2. Do a series of flat designs in Photoshop
  3. Send them to client
  4. Tweak and adjust based on feedback
  5. More flat designs
  6. Signoff on designs
  7. Build the site (or send to developers)
  8. If you're lucky, review built site for usability and design accuracy
  9. Site goes live
  10. Review it every couple of years

In eighteen months, this has changed dramatically. I almost never do flat designs straight away anymore. The process now looks much more like this:

  1. Receive brief
  2. Talk about the brief for a couple of days. Scribble in a pad as you go.
  3. Agree creative and technical approach internally
  4. Wireframe, separating functionality from visual design
  5. Wireframe sign off from client
  6. Start building the site (sometimes using a framework like jQuery Mobile). The design happens as you code.
  7. Show that to the client as early as possible
  8. Adopt a constant review process as you go for usability
  9. Put it live
  10. Review constantly, and regard it as a work in progress

This is a massive shift in workflow, prioritising actual functionality over traditional graphic design. I still regard this as design work though, it's just a wider definition of the term to encompass new disciplines like information architecture, user experience and user flow/journeys.

This approach also allows you to experiment with other new ideas, including building complex interactions using jQuery or similar. This is incredibly hard to do when designing a site using flat visuals, where theres little-to-no sense of how the final thing will work "under the mouse" at all.

Another current trend is to design with live data. This is only possible when you're working with code, rather than flat visuals. The great thing about it is that you can see quickly when things need to change. If you use Lorem Ipsum to design with, you're not really reading the text, but using live data means you're constantly adjusting to improve readability and functionality.

Tip: Try pasting some important text into your HTML. View the page and read the text. Is it easy to read? Adjust the CSS until it is!

Designing in-browser
Here I'm designing a web-app in-browser (or rather, a browser within a web editor). Markup on the left, CSS on the right, web inspector at the bottom.
This went straight from wireframe to HTML/CSS, with no visual mockups. Apart from speeding up the process, this allowed us to be more flexible, experimenting with different interactions.

My use of a visual tool is often now to create purely pictorial elements to be added straight to the code. Even things like buttons, which traditionally are often images, I now more often do in CSS. CSS3 has made it possible to create all sorts of nice effects without using images, and load times are tiny in comparison. Yes, older browsers are often left behind here, but so long as they work, that's OK by me. Which leads me to the following statement …

All browsers are not created equal

Some browsers, lest we forget, are a bit rubbish. It used to be that Internet Explorer 6 was the web developer's bugbear, but traffic analysis is now telling us that this browser has been largely eradicated. Instead, IE 7 & 8 are now the villains that annoy on a daily basis, especially as regards their support for CSS3.

But don't worry - it's all going to be OK. While we can't completely ignore these older but still-in-use browsers, we can come to terms with their limitations. I've come to realise that so long as sites fulfil their primary requirements in these browsers, they don't have to look the same as they do in Google Chrome version 60, or whatever we're on now (actually version 21 at the time of writing, which is clearly madness).

Let's say that again for clarity: sites do not have to look the same in all browsers.

Progressive Enhancement in action
Progressively-enhanced design means that sites can look different in different browsers. IE7 has square corners, no shadows and no gradients, which is fine. It's not as pretty but it works just as well.

This is a concept called progressive enhancement. With this technique, you start with basic markup that works across even older browsers, then gradually enhance the page to take advantage of the features offered by modern browsers. That way, people who keep their computers up to date are rewarded with a great experience, but the people who don't (often on glacially-updated corporate networks) still get to use your web app or website in a perfectly functional, albeit less elegant manner.

Mobile

It has got to the point now where I would never do a site from scratch without considering mobile. The browsing statistics from many of the sites I deal with suggest that as much as a third of traffic is coming from mobile, and most of that is coming from Apple iOS devices.

Bizarrely, it seems that despite Android's market share being close to 50% or above, lots more traffic comes from iOS devices, which suggests that Apple owners are using their devices more as portable computers than are their Android counterparts.

The most-used current approach is to produce a site that is responsive (or adaptive, or whatever term we're using now). These sites respond to the screen size they're being viewed on to give the best experience possible across the board.

IE7 vs Safari 6
Responsive/adaptive design in action, producing the best experience on all platforms. Here we have a desktop browser on the right, and a smartphone on the left.

This means that your site's page layout and, sometimes, functionality are different when viewed on a smartphone and on a desktop browser. It's a great technique, and while users may not care in principle about it (and indeed may well never even notice), they'd likely thank you if confronted with the mobile-optimised version side-by-side with the desktop browsing experience on a smartphone.

By any means necessary

My earlier thoughts on how I now work do not, I admit, always reflect the wider reality. I work within an organisation where functionality is valued, and we're not often at the cutting edge of brand and identity work, where traditional graphic design is more highly prized. I also rarely have to do pitch work, which is still (sadly) the province of the traditional flat mockup.

The truth is that sometimes I have to use Photoshop when working with others. Sometimes I don't bother with wireframes, instead going straight to the code and effectively combining the two disciplines. Sometimes I do proper flat mockups for more promotional, marketing-led designs. Indeed I occasionally still do them just for myself when confronted with a thorny problem. I don't always sketch first, talk through (or even receive) a brief or get to properly review for usability.

The point is that you learn to recognise what process a particular job needs, and adjust accordingly. That might be at your behest, or at that of another party. In the real world, you might skip steps based on cost or time. You use the best tools and techniques you have available.

Wrap up

The biggest change in my workflow over the last couple of years has not been my choice of tools or techniques. Instead it's a mental approach, which can be summed up as to "always be the advocate for the user".

I see it as absolutely my job to stick up for the poor soul who has to use the software or site at the other end of the process. It's important that their life be made as easy and as pleasant as possible. I try to keep that in mind at all times.

It's not always a popular stance. Pressures of time, budget and politics often get in the way of creating great products, but those issues are someone else's problem. My job is to simply to get the best product I can out the door and into the hands of the people who use it.

Stand up for the user. Stand up for quality.

Follow Elated

Related articles

Responses to this article

7 responses (oldest first):

09-Sep-12 17:41
How does Fireworks stack up ?
I just started playing with it - following the Adobe book 'Classroom in a book'.
I'm a graphics pleb So would be interested in your thoughts ?
But I do have one advantage - I do have access to my Wife's Mac
And Sketch2 does look very nice !
Cheers, Dave
10-Sep-12 02:18
Well, as I said in my "new Photoshop" piece a year or so ago, Fireworks isn't for me. I don't get on with Fireworks. I don't like the way it performs tasks, nor the interface. Actually I never got on with the Macromedia interface at all, which is basically the same now as when Adobe bought them. So that's Fireworks, Dreamweaver & Flash that I can't get on with!

Your mileage may well vary though - lots of people love Fireworks.

Simon

[Edited by simon on 10-Sep-12 02:22]
10-Sep-12 02:24
Thanks Simon,

Sorry I've not read you earlier articles - but will do !

I'm not shy of spending money, but would much rather give $50 to a small company than $500 to adobe

I've been a user of the Xara Designer program for a while, but If you don't use these things regularly, it's easy to forget how to do the basics - but so far Sketch-2 seems to have a nice 'obvious what to do' interface!

Thanks again for the article !
Dave
10-Sep-12 03:22
Hi Dave,

I used Xara to illustrate an entire children's once in the mid 90's. Very innovative at the time.

Sketch2 does a lot of what apps like Illustrator do, but with a much more approachable interface. For me what's so good are the touches that make it a great design tool - stylesheets, multi-pages etc.

Simon
03-Oct-12 10:49
Great post, thanks for that. I'm a freelancer working mostly on my own and have been trying to get away from mock-ups too.

Although providing a mock-up is sometimes the only way to seal a deal, I've had better experiences with clients who have trusted me & forgone the desire to see what it looks like before I've made it functional.

Funny, since the "look" of a website is only half the story.
03-Oct-12 12:14
That's right Ben, and if you have clients who trust you enough to go straight to function and in-browser design, then good for you - you're obviously cultivating some lovely clients!

I, conversely, have been back to multiple Photoshop mockups this week. Feels like a step back in time!

Simon
12-Oct-14 04:33
oh, looks great ,thanks a lot then you can learn more here on that forum about the web design

Post a response

Want to add a comment, or ask a question about this article? Post a response.

To post responses you need to be a member. Not a member yet? Signing up is free, easy and only takes a minute. Sign up now.

Top of Page