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.

From our sponsor: Create stunning brand assets with the help of our AI-driven Creative Assistant. Get started today.

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

Tagged with:

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 107

Comments are closed.
  1. Personally I don’t do mock up in Photoshop instead I rely on Frameworks and do my customization inside the browser this makes my job faster and serves a demo at the same time. I once question this to myself if my practice is right because traditionally “Designers” do static design but after reading this article I guess I am not a black sheep. I also don’t consider myself as a designer nor a developer just a Jack of all trade and master of none.

  2. Superb article, quite funny at parts. Only note is that the Typecast link is broken currently

  3. Thanks, well and truly bookmarked. I’ve often asked myself what exactly it is I do… designer / developer / strategist / content creator / sketcher / conceptualist. Maybe the main thing we should to remember that there really aren’t any rules. If there aren’t any rules, how can we give labels to our roles?

  4. Well said!
    Even I didn’t agree with some thoughts about the Photoshop, I love this article very much.

    Thanks a lot!

  5. This is probably the first opion-based article I have read in years and definately the first I have ever commented on. I’m not one for public interaction, but I want to take the time to say that this was an incredibly great read. As a designer, you have touched on the exact points which had irked me for the past few years: Photoshop Mockups, Pixel Perfect Placement, and the difficulty of people to adjust to the mobile world. I hope that Designers begin to appreciate the process more and more, as you seem to.

  6. Completely agree !,
    but for the photoshop, I think it still pretty useful for designer,
    we need to retouch photo content, or background,
    and in photo based website, we will need more than just a photoshop, lightroom maybe ?,

    so, just don’t shout up about killing it just because you don’t use it anymore #respectphotoshop.

  7. Great article, I very much enjoyed reading it, and found a few new tools to play with! However, I cannot agree about removing Photoshop from my designers arsenal (yet)… I just think to each their own. I personally work very quickly in Photoshop and have no problem accounting for content & responsiveness while building a design. Taking the design to HTML/CSS takes 20% of the time on average, including responsiveness (certainly not double!) and in the end I feel the design is much stronger than if I were to go straight to code.

    I think most of the issues are because too many designers are not as strong developers, or vice-versa. They don’t know how to turn their stunning Photoshops into clean and responsive code, or they’re too slow in Photoshop and simply work faster directly in the code.

    So while I do agree that web is vastly different, I also think Photoshop can still be used to create stunning design depending on your individual skill set. Even if you don’t use it for an entire layout, the ability to create custom design elements for your site is still unmatched.

  8. Nice article !,
    yeah, I also prefer to work with illustrator dan photoshop, the artwork system is really helpful,
    but we still need photoshop for retouch everything :).

  9. This is SUPERB article and much needed for those who still think that if they are working Photoshop and they think that enough…but that not the case any more..this is the perfect way and future of how to design for web…

    Great one guys ..really appreciate and follow the same

  10. Yeah… people seem to like extremes, but they’re usually not the right way. The right way is somewhere in between… Kill Photoshop? In my opinion not. Learn to code so you understand how web actually works and you stop designing some bullshit products that in reality won’t work? What are you waiting for?

  11. Wow. I don’t know what to say, this is unbelievable feedback.

    Thank you all, beautiful people 🙂

    I’d like to say I’m not in favour of killing Photoshop either. Maybe just a life sentence… ^^ No, really. I still use it everyday. To me it’s a great member of an awesome power trio, along the browser and the editor. There’s just no market for it being a solo artist anymore.

  12. Excellent article. I wish everyone in the industry would read and comprehend this–clients most importantly. Really great.

    In terms of my own workflow, I actually start in Illustrator and avoid Photoshop as much as possible. But even illustrator is only used to get a good idea for color, typography, and feel. The real work happens in the code. I always avoid pixel perfect design. Things always necessarily change when designs are implemented, so it is generally a huge waste of time to spend hours in photoshop moving things a few pixels up or down.

  13. This is probably the best article I read on webdesign anno 2013 and years to come.
    Design in the browser/decide in the browser, whatever you want to call it, a static comp is just that, a static comp, an image.
    It’s not the web, it doesn’t let you see issues with real content, real browsers, real performance, real phones and real tablets.
    You can only see that by using a real browser on the various platforms and devices.
    The PSD is a clue, not a contract.

    I design in the browser for 2 years now, fully mobile-first and responsive, adding eye-candy later with gfx tools.
    I also saw that you learn a lot more, by designing from the content out, rather than from a “fixed frame” in like I did years before with a PSD…

    Not specifically wanting to plug myself, but I wrote a few articles on the subject before (overview of & comments on the talks at Responsive Day Out earlier in 2013 and a presentation on RWD in 2012), which adress these same points, sometimes in more detail.
    http://tomhermans.com/blog/my-view-on-responsive-web-design-after-responsive-day-out-2013
    http://tomhermans.com/blog/responsive-web-design-wordcampnl-2012-2013

    and I also suggest reading A Responsive Workflow by Stephen Hay and The Modern Web by Peter Gasston.

  14. Excellent article! Very inspiring. It’s amazing how many tools are out there on the web that support this phenomenon of “Kill Photoshop”. I think it’s the right direction. At the end of the day, what we’re creating isn’t a static mockup.. that was for the days of print. What we’re building is an engaging experience that needs to be treated different, and the fact of the matter is.. one tool WILL NOT do it all. We need to be thinking about “workflow” and relating it to the story we’re trying to tell. If “content is king,” we should be thinking about what we’re really trying “say” and figure out what tools let us do that best. As we should know that “great artists steal,” we should also be considering the artists and designers before us and learn from them. Cheers!

  15. very good article. you have felt the trends. the profession is changing, with the tools … the choice of the tool determines strongly the finality of a project. the responsive is more than a solution to the multi device. it was a new thinking, a designer. and you said very well in your article.
    PS. Thx Google for the translation…

  16. *applause* Excellent, outstanding article in every way. This is one of those once-a-year pieces that is actually worth sharing.

  17. Brilliant. Well said, well researched and definitely at the forefront of where we all should be going. Thank you!

  18. Didn’t read the full article but what i read kept me thinking am i doing it right ?? am i moving with time ?? One Gotta keep learning if you want to survive 😉

  19. De lo mejor que he leído con respecto al diseño web…
    Una muy buena visión de como está el panorama actualmente.
    Y la gran verdad: “In Spain, a lot of us speak English. Most of us don’t, really”

  20. Great article Gorka. I too have emerged from what I would class as a traditional graphic design background (logos, printed literature, advertising design etc) into an emerging and ever changing digital market place. If you’re going to adapt and become a proficient web designer you have to embrace source code and database functions. I don’t profess to be a jet hot coder but I understand the technicalities and that makes me a better designer. I know what will work and what wont.

    I’ve taken on the task of building other designers websites from painfully layered psd files (complete with rounded corners and drop shadows) and it’s apparent that they have no understanding of coding architecture.

    You make a valid point about the boundaries between web designer and web developer merging. It’s time to grasp the nettle and better understand these new technologies to help improve user experiences and build better websites and applications.

  21. I love the article. I still think photoshop is a great place to plant a seed, but it definitely falls short in displaying interactivity. I am in full rebellion against the WordPress + slider combo that 98% of websites have and only 2% of websites need. I am strongly encouraging my clients to simply the message and reduce clutter. I started designing because of flash websites. Now that you can do the same things with HTML, CSS and Javascript is allowing for the rebirth of the beauty on the web. I have been lucky to witness this evolution.

    In regards to Designer/Developer argument: Designers know HTML, CSS and Javascript. Developers know PHP, Phyton, PERL,C etc.. There are many who may fall into both categories but they are not skill sets that are easy to develop simultaneously. UX and UI people are designers. Understanding the power of the browser is crucial for every modern designer. Even if you cant code you have to know how to use modern web design techniques to deliver the message. The article was refreshing and empowering.

  22. Awesome article i really enjoyed reading it

    you said “switching to Firefox it would look completely screwed” so what about IE? hahahahahaha

  23. Over the year CSS has evolve from a way to rule out some html properties to a must use with html, but for sure people who used to make graphic mock up in those graphic suite should learn to code, it’s not that hard anyway with all those framework out there to start with.
    By the way, nice writing.

  24. Excelente artículo, gracias por compartir toda esta información y sobre todo las herramientas .

    Empezaremos a utilizar muchas de ellas con mi equipo de trabajo 😀

  25. At what point did you realize you don’t “do websites in a browser” ? I learned that the tedious, hard way back in the ancient times of 1998 when trying to balance a few browsers that had their own standards with content. Lots of code forks, zero CSS. That lesson has diminished and become actually very nuanced as you now need to know about the “rare cases” when something won’t work moreso than just assuming you need as many versions of the site as there are browsers. Hi there, layer tags!

    Also, Photoshop is like any other tool: don’t complain a screwdriver isn’t working if you’re trying to hammer something with it.

    They’ve taken some steps to make it more seamless with web development, but really they have basically missed an opportunity with making Fireworks more robust still, even after all these years since the macromedia acquiring.

    Yes, in the last few years in-browser comping tools have become common/popular, yes webfonts, yes dynamic CSS and reactive/responsive designs… yes, all of those have diminished Photoshop’s role as it is easy to rapidly express complex interactions and user experiences with more realistic mockups with less work. Kill it? No, just use it appropriately.

    • I love that “don’t complain a screwdriver isn’t working if you’re trying to hammer something with it” hahaha. Exactly the point! Screwdrivers are very usefull still

  26. Hi Gorka, loved the post. Was very insightful getting to know someone else’s journey in the world of web design and development.

    Like you I came from loving development and not ever really touching design to loving them both equally. Thanks for the great post 🙂

  27. Hi, great article! As a Web Designer (being a Graphic Designer) first we used Editorial Design into this new web thing (back in those days!), Along we the experience gained we understood this Web Thing has it own logic, was different. I think as a Designer how comes from the Graphic/Visual area some things you can learn it by doing and reading, but there’s a lot of things I see when I select… a type, that a Developer doesn’t. And is understandable, he didn’t course “Typography I, II”. Same with other areas, Morphology, Composition… This doesn’t mean a Developer can’t do a good design and a Designer a bad one. But I often listen that “you should make a… javascript training, or php, or whatever” Why?? I’m not interested in that!!
    Imagine a Designer with programming, developer skills, would be a Designer? a Developer? or a Designer with Developing Skills?
    My english sucks, hope what I said has sense.

    • Of course!

      There are aspects of Web development that fall way beyond the threshold of a designer. To be honest, PHP, Ruby, Python, Node and such are out of line when ‘designing’ products. But for instance, a basic knowledge of jQuery, I think, is a must. It’s so easy and nice!
      Get this element. When you click, this does that and that other thing does another thing. That is interaction design, plain and simple. Click this and that expands. Change this here and change a colour there. Cause-effect design

  28. As a web design student, I should be prepared to take on new changes and challenges to my thought process and how I work. I’m coming to realize more and more that it’s not about being a web design student, which I won’t be for much longer, but it’s about being a web designer, focus on the WEB. It’s incredible how much things have changed in the long term, but so much more in just the short term– look how far we’ve come since the initial spur of CSS3. I remember the first time I saw this and how excited I was. How it all just hit me, how much potential the web has and all the great places we’re all going to go as designers, developers, and just.. as people. It’s incredible. Reading this article gives me that feeling all over again. I’m just.. so excited for my future in my career.

    I really appreciate the resources and information you’ve given me in this article. I’m currently working on my portfolio site, and just in this is taking on many new things for me: designing responsively, starting from a basic photoshop mock up for only the desktop version just to have my concept, using technologies such as Foundation 4 & LESS, using new editors besides Dreamweaver such as Aptana Studio and Sublime Text, watching tutorials on Lynda and reading many articles from my favorite sites such as Codrops, tracking my project time using applications such as Harvest, utilizing sites like Stack Overflow for help and resources, etc. Even though all of these things themselves are new to me, I know I’ve got a lot more to learn. I kind of feel though, with reading this article, that I’m on the right track at least!

    Whew! I need to hurry up and make my blog so I can blog about your blog while I blog…. Haha. Sorry for the long post, but I’m really glad I read this today. Thank you so much! I look forward to reading more from you.

    • Hahaha I loved your comment, Jacquelyn! I think you’re on the right track too. That’s the attitude! Tweet your blog to me when you’re done with it

  29. You’ve written a real thought provoking article. As a beginner in the field you’ve given me a lot to think about and a lot of tools and ideas to investigate. Still in my degree program, though lip-speak is given on how the site appears cross-browser, we’ve certainly not designed that way in classes yet. Thanks for the eye opener.

  30. This is excellent articles by far I have read so far. Fustrated web designer now can fully understand and the tools that are available time to be the Photoshop (well after couple of weeks). Many thanks for sharing your thoughts and it has been very useful.

  31. Wow this is a fantastic article and has given me much to ponder and investigate. It is very a liberating article and fantastic to read of your process and the different emphases you place on creating “complete” mockups first in PS, FW etc.

    I never really liked making full-blown mockups in PS anyway—But then again, I was never really that great at that anyway. I usually opted for a couple of rough sketches of concepts then moved straight to the browser not because I am a revolutionary but because for me making complete mockups first blows. That and the lack of talent thing hahaha. I’m more of a developer guy than graphic designer. And this brings me to my next point:

    Today’s way of things calls for a new kind of Web designer. A Jack-of-All-Trades, master of none.

    Wow, this is definitely food for thought right here.

    Many thanks for a brilliant piece. And the imagery you’ve used here STUNNING! Also I’m guessing the reference to the unicorn is that of a mythical creature that doesn’t exist, as in folks/businesses/clients have unrealistic expectations of designers and developers right? Clever :-]

    A great piece, fantastic read.

    • really fantastic article to read, sometimes i make my design from sketch and implement it to the web directly using html and css.

  32. What a great article. Very insightful with many great resources you have posted.
    I have been in the web industry for about 8 years now, and I am starting to take on board some of these new tools and ways of building.
    I do agree that building in the browser is a much better approach, but sadly, a lot of clients don’t like that, as they want to see a design mockup first off. It is faster than building it (sometimes).

    I hope that over time, this changes and the clients appreciate us building straight in the browser so they can easily visualise how everything works and moves together.

    Thank you for the resources. I have lots to think about and learn now!