So, You’re a Web Designer, Right?

What is the role of a web designer nowadays? An article about the changes that came with the awareness of responsive web design and the new workflow of designing in the browser.

Unicorn

The Web of yesterday

When I started doing this we were what you’d call a petit-comitè. I called myself a developer and worked with a great graphic designer, one of a kind. Our roles were crystal clear back then.

Seasons came, seasons went and we started getting deeper and deeper into it. As our imagination kept moving forward, our websites grew more and more complicated. We soon found ourselves in a crossroads and we were forced to rethink our whole model.

My journey into design started with typography, perhaps the only field where my man Felipe was not stunningly fluid. I never called myself ‘designer’, though, until I cut off from Adobe’s Creative Suite cold-turkey. Slowly but steadily my role evolved on to designing for functionality and interactivity, copywriting, structuring content, making layouts responsive, building strange custom web applications… Then I was designing. Felipe’s role evolved too, as he started getting gradually into development, my former side of things. It was from working together that we both expanded our notions and eventually our process. We were naturally responding to a new kind of situation.

The Web, today

Andy Rutledge is bolder than me when he says: ‘A designer who does not write markup and css is not designing for the web, but drawing pictures’. He’s right.

‘Most people make the mistake of thinking design is what it looks like. That’s not what we think design is. It’s not just what it looks like and feels like. Design is how it works’ – Steve Jobs

It’s been about three years now since the Mobile-First/Responsive meteorite shook the Web community. It has been an arduous but beautiful process. Hard in rethinking the way we work but beautiful in that it opened up a wild ground for madly intense collaboration between everyone involved. We’ve seen every field of the profession coming together and sharing their wonders: techies on Progressive Enhancement, typographers on lettering, grids and layout, designers on workflow, content strategists on sensible structure, top-notch freelancers on how to handle clients… To remain on top of the situation, every kind of Web professional has had to cross enemy lines to create symbiotic partnerships, in some cases lifelong friendships. And of course, the up-and-coming generation finds itself full of strange creatures that don’t fall under any of the previous categories. They are something in and of themselves.

‘Web Design is Product Design’ – Andy Rutledge

Some time ago, thinking of a designer as just a ‘Graphic designer’ wouldn’t have made much sense. Designers were actively involved in obscure parts of the process. Carving wood, painting, modelling, sometimes building, gardening…

So who killed the product designer?

I haven’t been around long enough to have a clear view, but my guess would be compartmentalization. The sudden boom in demand might have driven companies to define enclosed cells of roles and responsibilities, or as Kim Goodwin puts it, ‘silos’; then to hire disposable professionals that would fit, silently contributing to the creation of a thick, standardized, leaden model that would stand the test of time and ensure high-level productivity.

People like Jared M. Spool are making public the interest of high-end companies in finding a new sort of profile. He calls it the Unicorn. He even went as far as creating the Unicorn Institute to groom this sort of designer. He is defining a position, a new Experience designer or UX Generalist, whose skills make them ready for this entirely new scenario.

unicorn01

He makes a clear division between Specialists (experts in one field over others), Generalists (experts in more than one field) and Compartmentalists (having expertise in only one area). He argues that neglecting the possibility of expanding your boundaries and falling into the compartmentalist category is a career-limiting decision. Plus it’s no fun.

Today’s way of things calls for a new kind of Web designer. A Jack-of-All-Trades, master of none. Startups are looking for the kind of folk that can follow the process end to end. Big enterprises for a more flexible worker that can move swiftly between the many aspects of a project, without hiding behind the barriers of their specialty.

The Web of tomorrow

A designer today has to be able to dodge dangers of many kinds. Today’s Web is dynamic, fast, adaptive, mobile-optimized, ready for the modern consumer, which is pretty much everywhere and thus totally unpredictable, very intelligent and thus easily annoyed; and capable of showing an unbelievable capacity to dive blindfolded, headfirst into information overload and not only survive but make something of it.

We’ve been exposed to some groundbreaking design work recently:
The journalistic community has seen incredible new layout techniques that may get to redefine the way content will be presented. [1] [2] [3]

More and more services are going online. We are seeing smarter, faster, stronger web applications that are way closer to software than what a blog ever was. Plus many either benefit from the advantage of being an online tool. Many are based upon collaboration, and what better place than the web?
[4] [5] [6]

Experiments with 3D graphics that resemble high-end videogames, straight in the browser. And so on.

We are not in a header-nav-content-sidebar-footer scenario anymore.

The skills needed to achieve the Web of tomorrow will mutate with the scenario. So changing the way we do websites starts by revising our process.

In Search of the Holy Grail

The First step is the hardest

There’s always a phase to devise how to build a product. It is critical that designers and their teams are aware of the technology at their disposal and show little fear in trying something new. Most of the time all this new tech is out there to make our lives easier, and yet you see so many people reject it every day.

Then there’s a time for envisioning the application.
Jacey Gulden smartly states: ‘Hanging on to older processes that include creating static wireframes and pixel-perfect mockups for design is counter-productive […]. Instead of spending time designing for […] device widths […], designers now have to focus on designing for content’.

The static mockup has seen its time in the spotlight. We are designing for dynamic scenarios now, so we need dynamic prototypes.

unicorn03

In her talk ‘Designing in the browser’, the awesome Divya Manian said: ‘Print tools give you an illusion of control that doesn’t exist on the Web’. She goes on to point out a number of things a Photoshop mockup will never be able to account for:

  • Pixel perfection: never happened
  • Feature uncertainty: browsers differ when handling effects, even the syntax is different
  • Things never designed to interact together will end up interacting
  • No control over content: take Google+ as a modern dynamic application. Never will anyone be able to mockup something such as this on Photoshop without a million problems.

So what better way to achieve this than diving straight into HTML? Here are some of her reasons. Out of the box, it makes you able to:

  • Design around content and user interaction
  • Design for complexity and uncertainty
  • Find where design breaks the user experience
  • Find where data breaks design
  • The outcome is a template ready for any use
  • Use print tools later on to optimize prototypes

There are tools out there to prototype in HTML in a very visual and easy way, like Easel, Divshot or JetStrap.

Good ol’ Photoshop and the Designer’s panacea

Fireworks and Photoshop can’t cut it for responsive design — they’re bringing a knife to a gun fight – Andy Clarke

Yeah. Andy Clarke also came up with one of the best reasons why Photoshop is no longer the best friend of the designer. Create a new document and it will ask you for its dimensions. Damn.

In a great short article -with a title pretty much straight to the point-, Kill Photoshop, Josh Long provides a very intelligent number of reasons why Photoshop should be murdered:

  1. It’s Double the Work
  2. Clients Can’t Use It
  3. You Can’t Make Changes Live
  4. CSS is Ready
  5. Photoshop is Expensive
  6. Photoshop is Static
  7. Photoshop Has No Prototype Value
  8. You Start with Content, Not Style

Some people are already looking for a strong contender.
To Jason Santa Maria, ‘How something behaves is interdependent on how it looks, sounds, reads, moves, and responds.’. We’d need a tool that can account for all this pieces of the puzzle.

The famous Project Meteor launched as a ‘campaign to demonstrate the demand for a modern web design app’. Some tools out there today do pretty good at handling the whole process, like Macaw, Webflow, or Adobe’s much expected Brackets.
Devin Halladay considers tools like this ‘Are making the web designer lazy’.

To me all of them are good choices. There is space for everything, and I actually find it very amusing to find new tools while thinking of new projects. It’s the exciting bit.

We shouldn’t be focusing on finding the perfect tool though, the panacea for the new designer. How about building a set of tools instead?

Take it apart, steal the parts that you like, and adapt them to your own way of work­ing. — Joni Korpi

Luckily enough, there are great applications out there that handle specific parts of the process like no clairvoyant tool can do. There is Typecast, that lets you experiment with Web typography so easily that it makes you feel like an orchestra conductor. Then there’s Gridset, that can handle incredibly complex to downright simple responsive grids. And the Modular Scale, that started being really helpful for typography scaling and ended up visually teaching me to arrange layouts like I’d never done before. And so on. A designer can go crazy with all these shiny toys.

If you agree with Oliver Reichenstein in that ‘Web Design is 95% Typography’, what is best than ditching Photoshop’s weird type rendering and using a browser based tool, so you can build and test straight where the magic happens? This is invaluable stuff.

But not only typography can be worked in the browser. Ready to dive in?

Designing in the browser

I’ve seen way too many comments on blog posts saying something like ‘But that’s not designing in the browser, you’re using an editor!’. So let’s clear some assumptions first. Designing in the browser is not about using the browser as the one and only tool for designing.

Let’s change the phrase “designing in the browser” to “deciding in the browser.” – Dan Mall

It is all about having direct communication between design, code AND the browser. Start designing, see it in the browser. Change stuff, see it in the browser. And if you get to do it in mobile at the same time, all the better.

There are a number of concerns in Web design that can be cleared straight away with this method. For instance, your site’s readability. It is a great way to gain time too: when you’re deep into designing for different states and screen sizes you tend to focus and lose that habit of moving stuff one pixel up or down. The perfectionist inside of you will be too busy checking relationships between elements, fine-tuning interaction details, etc. The big picture will benefit from this as well, as you are producing something that works, as opposed to a picture of it. It feels like moving from a flight simulator onto the real deal… kinda.

In the browser I learned the value of letting content drive my way of developing. For example, I stopped using device media queries altogether. I started relying on visual cues when deciding where to insert a breakpoint. There was another time when suddenly it made no sense to make complex calculations anymore to account for margins, paddings, positioning… I started trusting my gut and experimenting with Developer Tools and learning to accept what was happening before my eyes. I grew so used to inspecting elements, rearranging them, playing with measurements, content and interactions that the habit ended up trickling down onto my everyday Internet activity. Now, whenever I stumble upon something that catches my eye – some layout detail, typography or anything interesting -, I find it very difficult to stop my urge to inspect it and play around with it. Questions start arising, like ‘What would happen to this thing if it had more text in it?’, ‘How does this guy float that there?’, ‘How in hell are the inline comments on Medium laid out?’. That last one I just had to include.

In the end, it’s all about learning how the browser handles the Web. It is not only possible but easy to learn to speak its language.

The first website I ever did I did in Chrome. I had no idea that by simply switching to Firefox it would look completely screwed. And my troubles got worse because I started testing it when I felt I’d finished it. It was a terrible week. But I’ll never stumble two times over that same stone. From that moment on I integrated visual testing in the development phase. And later on it became a crucial part of the design process. I ask myself how could I be OK with something if I never knew it would work?

Today I design and develop with my devices connected to the computer and I kind of catch problems before they even appear, this way. It’s become essential to me. I don’t trust my beautiful Apple stuff to fully represent the Wild, Wild Web, though. I never do 480, 768 or 1024px media queries anymore. And it feels liberating. If you haven’t yet, try Brad Frost’s awesome testing tool, Ish.. That’s a favorite of mine. It doesn’t rely on standard device resolutions. Instead, it chooses random values each time (Small-ish. Medium-ish. Large-ish). Your site should look great in all of those. For the mad ones, it includes a ‘Disco’ mode, like those old Casio keyboards, ‘to watch the viewport bounce around like a maniac’. Is your site up to this?

The Leap of Faith

In Spain, a lot of us speak English. Most of us don’t, really. It’s more like this: we think of something in Spanish, in our heads we translate it into English and then we verbalize it, with an accent. And we look like morons. That’s not really speaking languages. It’s more like half-assed interpreting. The day you start thinking in English you start speaking in English. The more confident you grow, the better you speak.
But the key lies in the method. What makes the fluent speakers different from those who plainly interpret languages? It’s the lack of fear when challenged with a conversation. You learn to speak by speaking.

As I see it, this is very related to a designer learning to code. After all, it’s language we’re talking about. It’s not until you make that leap of faith that you’re starting to truly learn how an application works. It might look scary but there’s many people that have already done it and loved it.

The time you spend in learning to design for the Web comes back full circle.

unicorn02

Back in the day it was an odd feeling for us. On one hand we felt like we were somehow breaking out a proven way of working. On the other hand it felt like we were gradually let in on a big secret. We were making up our own rules as we went along. We were making our journey more interesting and as we grew more confident, the result was becoming stronger.

We were redefining ourselves as designers.

Reference

[1] Christian Cantrell – Adobe Explores the Future of Responsive Digital Layout with National Geographic Content

[2] The New York Times – Reshaping New York

[3] Teehan+Lax – A Place for Sharing Ideas and Stories

[4] Storify

[5] Spotify

[6] Editorially

The Thinking

Oliver ReichensteinDesign is How it Works

Andy RutledgeWeb Design is Product Design

Jared M. SpoolWhy the Valley Wants Designers that Can Code

Julie ZhuoHow to Survive in Design (and in a Zombie Apocalypse)

Notes from Kim Goodwin’s‘Silo-Busting with Scenarios’ by Luke Wroblewski

The Unicorn

Braden KowitzHiring a designer: hunting the unicorn

Jeffrey Dalton – The Hybrid Designer

Jolie O’DellHOW TO: Be a Hybrid Designer/Developer

Tristan DenierRedefining Web Designers, Web Developers, and Web Hybrids for the modern market

Andy BuddDesigning in the Browser is Not the Answer

The Workflow

Stephen HayResponsive Design Workflow @Mobilism 2012

Miranda MulliganYour Survival is Designed

Andy ClarkeEncouraging Better Client Participation In Responsive Design Projects (Article)

Harry RobertsNormalising designs for better quality CSS

Jacey GuldenGreat Responsive Web Design is a Matter of Process

Simon FosterThe Responsive Designer (Video)

Josh LongI Have No Idea What I’m Doing with Responsive Web Design

The Tools

Brad FrostThe Post-PSD Era

Jason Santa MariaA Real Web Design Application

Tim BrownUniversal Typography @ Ready To Inspire

Jeffrey ZeldmanAn InDesign For HTML and CSS?

John Nack“CSS is the new Photoshop” (?)

Project Meteor Manifesto
Josh LongResponsive Web Design in the Browser Part 2: The Tools

Photoshop

Javier GhaemiIs Photoshop Dead?

Josh BrewerPhotoshop you are a liar

Josh LongResponsive Web Design in the Browser Part 1: Kill Photoshop

Mockups

Meagan FisherMake Your Mockup in Markup

Dan RubinHands-on Prototyping with HTML & CSS

Designing in the Browser

Divya ManianDesigning in the Browser @Front-Trends 2012

Max LuzuriagaDesigning In-Browser: A Manifesto

David KizlerDeep dives into the browser

Sarah ParmenterI can’t design in the browser

Previous:
Next:

Tagged with:

Gorka Molero is a self-taught Web designer, musician and sound engineer and heavy Internet enthusiast. He believes in the universality of the web and the free-flow of information, regardless of platform or situation. He is moved by innovation and originality, despite time or field, tries his best to keep up with cutting-edge technology and always stay tuned to artistic and technical vanguards.

View all contributions by

Website: http://gorkamolero.com/

Related Articles

Feedback 102

  1. 2

    You are very hard on Photoshop. I don’t use it much myself, but I expect it will catch up and be useful again sometime in the next couple of years.

    • 3

      I know, a lot of people have told me. I thought I was being pretty light on it, seeing how people treat it out there in the Web but I guess I just gave in to the lynch mob. I still use it every day, I promise ^_^

  2. 5

    Still waiting on examples created on the fly… I even found some from people here agreeing with the article by their usernames, and they’re pretty average as well.

    • 6

      Hi Phill!

      I understand what you’re saying, I completely agree but you know, I’ve been trying hard to find any examples. It seems not many people have made this process public. It might be because it is in its initial phases still and people are kind of embarrassed.

      I found this though, I hope it is worth it. It’s about how british Vogue magazine redesigned their website with the help of typecast. The first is a little teaser and the second one is a sort of short conference

      http://vimeo.com/57105069

      http://brandperfect.org/index.php/knowledge/case-studies/442-typecast-and-british-vogue

      P.S.: sorry for taking so long..

    • 8

      I have used Linux since the mid 90′s and any time I have made a site the only way you can do it is with a text editor and your browser. My GF has been doing it the same way since she started too, and many of my friends do it the same way, one is even a mac user and uses a editor called jed. I code php, so usually I usually don’t even make a html mockup of what I want to make, I write the code and let it create the page as I’m building it, and I have seen friends doing the same. I think for a lot of us we started with html before there were (decent) editors and it was easier to just design it real time in your editor.

  3. 11

    Designing in the browser is way too much work, tried it, it isn’t a good practice. You have to at the very least have a wireframe before going to the browser but I prefer Photoshop, its not hard to use when you take the time to learn it and you have a solid idea to go from even if you change it up a little bit down the road.

  4. 12

    It is critical that designers and their teams are aware of the technology at their disposal and show little fear in trying something new.”

    This is exactly it.

  5. 15

    Gorka, your article is very informative. How you compare the past and present with your opinions is very enlightening to read. You are absolutely right when you say that ‘It is all about having direct communication between design, code AND the browser.’ This is the most easy way of implementing changes to see how all the design elements will look like when compiled together.

  6. 17

    How can Photoshop be static and dull ??? This is THE program that is required to make your web visuals or illustrations attractive. Enough of this minimalistic web design and ugly or bland templates. Clients always require creativity from the web designer, not just empty designs. You can animate your website, make your website responsive or copy and paste anything jquery can provide, if basically you have nothing else to show than parallax effects, animated icons or WordPress skills, you should be the one to step up.

    I’d be curious to know how, you, so skilled and modern web designers deal with clients that require photo montage or illustrations for their website ? Do you tell them you don’t deal with Photoshop ?

    A good web designer embraces every possibilities to move forward with clients’ needs with no limitations when it comes to proper web design.

    Dewey

    • 18

      Hey Dewey,

      I very much agree that flat design’s overtaking of the internet has to be stopped at some point, but I think its success illustrates a need for a less heavy Web, more adaptable, quick and to the point.

      To understand my point, I am separating two stages of design: design of the application and detailed visual design. I’m just saying that they should not be all mixed up in Photoshop, cause as much as it is the required application for that second stage I was talking about, it is like a mammoth for the first one. Big, slow and weak against predators :P

      I do think too that we need to see more complex websites in visual terms. But you can work on these aspects in parallel, without compromising the design of the application to make it fit for a very complex design. It would be a blast for me to see more artistic websites around but what I’m referring to is the 90% of websites we see everyday, where the concept is more simple but a lot of times done wrong anyway.

  7. 20

    This is nothing more than left-brained propaganda. :P

    Very impressive writing and it’s awesome you added resources. I appreciate the time you have spent on this and how well written it is. All that said, this article is extremely short sighted, much too wordy and completely void of any foresight.

    In my opinion, your points on the direction of our industry is spot on, your comprehension of design tools are not. It’s almost like something “clicked” inside your head about the process and you ran with that thought vs really thinking it through. Maybe to justify your weaknesses in the overall process.

    Yes, you are right… you can “UPDATE” in the browser but if any part of the process is becoming irrelevant, it would be the front-end code and engineers who only know front-end. Photoshop is a release or two from exporting the html/css/js. It’s a lil dirty today, but they will work out the kinks.

    Let me make it quick by responding to all your points::

    Pixel perfection: never happened
    —- uh, yes it did. look around man, pixelperfect design is very alive. maybe you need to work with better designers.

    Feature uncertainty: browsers differ when handling effects, even the syntax is different
    —- please see: Graceful Degradation

    Things never designed to interact together will end up interacting
    —- true but what does this have to do with photoshop?

    No control over content: take Google+ as a modern dynamic application. Never will anyone be able to mockup something such as this on Photoshop without a million problems.
    —- I wouldn’t know… I don’t think you know either if you were being honest.

    Design around content and user interaction
    —- yep.. again… iterations.

    Design for complexity and uncertainty
    —- huh?

    Find where design breaks the user experience
    Find where data breaks design
    The outcome is a template ready for any use
    Use print tools later on to optimize prototypes
    —- learn photoshop before you knock it.

    Fireworks and Photoshop can’t cut it for responsive design — they’re bringing a knife to a gun fight – Andy Clarke
    —- anyone who knows anything about fighting would actually tell you a knife is always better. guns are stupid.

    I understand a need for non-designers to validate his/her design abilities, but ripping apart one of the most important tools in the industry is a bit ignorant. Photoshop can do many things … yep, prototyping is one of them.

    The point is… you don;t know what you’re talking about when it comes to design tools. Photoshop is not dead and will not be going anywhere for the foreseeable future.

    Thanks.

    • 21

      Whoa dude, it seems it really hit you. I will only tell you to chill, I don’t think Photoshop will stop being useful and neither the author does. Please don’t get offended or anything because it is not my intention, but while reading your comment I was thinking the same thing you point out: you don’t know what you are talking about. Why? because it seems your didn’t exactly get the author’s point, which is not “Photoshop is dead” at all.

    • 22

      Alright

      First, thank god for a harsh comment, I was thinking when would it come…

      I accept your criticism. As I say I think somewhere in there, I haven’t been around much. I’m telling it as I discover it. But let’s have an open talk no?

      I think you need to clarify your intention. I notice two trends in your comment:
      One is actually close to making a point about Photoshop and the industry and the other one goes along the lines of ‘This is nothing more than left-brained propaganda. :P’, ‘maybe you need to work with better designers’, ‘It’s almost like something “clicked” inside your head’ or ‘you don’t know what you’re talking about when it comes to design tools’.
      Arguing with the second line of thought one is pointless, I’m not going to start insulting you back. Using it yourself shows that you’re not too sure of the first line of thought.

      You can’t say Photoshop is a release or two from exporting HTML, CSS and JS. It was never meant for that. It already does it and does it very badly. Even if you look at what the company does, Adobe has taken a different direction by focusing on Brackets, a top notch editor with extra capabilities like this will show you, and tools like Adobe Shadow, etc. They know what’s coming and they are way prepared for it.

      All the rest are other author’s points, and they’re pretty smart people. I think, though, what you are doing here is openly denying as many points as you can. I started writing a reply for all of them but I’m getting tired as I don’t think they need any justification. ‘Pixel perfect design’ is nowhere around. Graceful degradation is not related to how diff modern browsers handle effects. Photoshop cannot account for unwanted browser interaction. Etc, etc, etc.

      But seriously, ‘a knife is better than a gun, a gun is stupid’? Dude…

      Any of the other points you can discuss with me on private, just skype me: gorka.molero

      All this said thanks for mentioning the writing, that I appreciate very much!

      Have a great day sir

  8. 23

    Damn I love when people are arguing like this over the internet. Easier for me to digest (kidding). I’m still new to web design though, in terms of solid practice since most of the time I’m just like you, inspecting over the website when I stumble upon something catchy. I might add that it might not be proper to use Adobe Photoshop on its own when it comes to wireframing, but then you can unleash its full potential by combining it with Edge Reflow and Adobe Generator which I’ve tried and I personally think it works great especially for those who are new to responsive web design. Combine together with Adobe Illustrator features of copying shape as SVG code, man, that really save you a lot of time when it comes to designing your wireframe. I haven’t tried Bracket yet, might give it a try later. Thanks anyway for well written articles.

  9. 24

    The first website I ever made I did in a textarea field on Geocities back in 1996. Maybe that’s why Photoshop still works great for me ;)

    Good read although I don’t agree on everything :)

  10. 27

    This is nice post . My GF has been doing it the same way since she started too, and many of my friends do it the same way, one is even a mac user and uses a editor called jed. I code php, so usually I usually don’t even make a html mockup of what I want to make, I write the code and let it create the page as I’m building it, and I have seen friends doing the same.

Follow this discussion

Leave a Comment

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>