(Re)Adopting the Design-in-Browser Approach

I sat down and was going back from drawing a website to actually coding in a browser.

It seemed hard and maybe even impossible. I was scared. Could I do this? But how hard could it be? I’ve done this before …

Code

I got so used to designing (drawing) websites in Adobe Photoshop that I didn’t know where to start. Then I realized that I had already done it in the past with far worse tools then the ones we use now. Web design is not graphic design. It may consist of some of the elements of graphic design but it’s not the same.

So why did we start drawing websites in Photoshop in the first place?

What Happened to Web Design?

To find an answer we have to go back to the definition and the core of web design.

Are you looking for WordPress Theme?

Get Startup Framework for WordPress now!

According to Wikipedia, the term web design is normally used to describe the design process relating to the front-end (client side) design of a website including writing mark up.

When I started taking interest in web design all we had was Notepad to work with. We learned the basics of HTML and designed websites with just that. Later CSS came along, so we learned and started using it. What else do you need?

It’s not that simple. Websites started to evolve. More and more, we started using graphics to enhance websites and make them prettier. Higher bandwidth speeds made that possible. Soon, PHP, ASP, SQL, CMS, SEO, JavaScript and Flash animations all became a part of the web design we know today. It became too much for a web designer to have all the knowledge needed to build a website from scratch. So we divided the role like this:

Web designer

We killed the web designer. We replaced him with a graphic designer that had to draw the website design in Photoshop and send it to a web developer to start transforming the PSD to HTML and CSS. Consequently, the web designer forgot how to code and started drawing most of the time. He drew all the pages of the website and all the interactions and website elements in Photoshop. He drew lines, backgrounds, images text and other typographic elements. He drew everything. It’s easy to draw a pretty website in Photoshop once you master the tool. It was up to the web developers to actually build the website, based on those drawings. We ended up with an overcomplicated process that either didn’t bring the best results or took a very long time to do.

Responsive Web Design Comes Along

When the internet became mobile, we finally realized that drawing websites in Photoshop isn’t ideal. Mainly because there’s a lot of devices with different screen sizes, and drawing a website for each is really a waste of time. We wanted a solution that would speed up the web design process and produce an adaptive product that works regardless of device.

Bring back the web designer.

Web designer

We should never have replaced the web designer. We should have added other types of designers, developers and copywriters to the web design team, but keep the web designer. That’s what we’re doing with designing in browser concept. We’re bringing back the role a web designer used to have. And now, you’re not a web designer if you don’t know how to code. You may be a designer that knows how to use Photoshop to draw pretty interfaces and websites. But you’re not a web designer. To become one, learn HTML, CSS and at least basic JavaScript. Then, build a website with your text editing tool.

It doesn’t have to be perfect. The first website I ever built was utter crap — text, links and images (mostly animated gifs) on a dark background. But I learned how websites work.

You can’t design something if you don’t truly understand how it works.

Merely drawing a website in Photoshop is not designing. You don’t build anything with that. What you do is draw the instructions for developers to follow. You draw, you don’t build and most certainly you don’t design. It’s like if an architect drew plans for buildings, without knowing what materials would be used.

Wire-framing

Wireframing

When I was happy with the sketches I decided to make some high-fidelity wireframes. And I used Photoshop to do that —  I found out that it’s quicker than any other tool. But the goal is to simply quickly redraw sketches. In Photoshop it’s very easy to start focusing on details that don’t matter yet. That’s why this step should be done quickly (especially if you use Photoshop, Illustrator or any other graphic editing tool).

Prototype

The next step, which is important from the UX point of view, is to create a prototype. By now, I already had an idea of how the website will look. Now I had to find out how it would feel using it. And since I decided to go mobile first, I made a prototype for the iPhone. I used high-fidelity wireframes I made in Photoshop and uploaded them to Marvel. (Marvel is a great tool allowing you to quickly make prototypes from images or .psd files.)

Visual

After I tried out the prototype, I decided to make quite a few changes. The website didn’t as easy to navigate as I anticipated. (That’s why you build a prototype early in the process.) I could also make the prototype directly in the browser, but I think that Marvel app made it a lot quicker in this particular case.

Visual Design

Visual Design in Photoshop

In my plan for the website redesign, I initially had a task called “Visual Design.” It was planned to be executed after the creation of the prototype. The idea was to draw each page in Photoshop and take care of the details. But I changed my mind. I cancelled this task and went straight to coding.

Coding

I started with a blank HTML document. I decided to focus on typography with some real content first. So I took an old article I wrote and put it in the HTML. I tried out various combinations of typefaces and sizes. There was no logo, no graphics and no navigation elements. I wanted to focus on how the content on the website will look on different screens, very much in the way Tim Brown explains it here.

When I was happy with the typography, I started adding other elements. Photo background in the top area, logo and navigation were the first additional elements. That’s when I realized that the basic layout of a page and an article should always be the same — unlike what I had done in the wireframes and prototype.

And that’s why going straight to coding really is productive. You can make the changes as soon as you realize that there’s a problem. And it’s more likely that you’ll find these problems sooner, because you’re working on the actual, working product.

Final Touches and CMS Integration

In the end, the decision to skip the drawing saved me a lot of time. Drawing each of the pages would be very time consuming (not to mention that my perfectionism doesn’t allow me to make something halfway). So instead on focusing on details in Photoshop, I was focusing on details straight in the browser. After I made the mobile first website as I wanted it, all I had to do is adjust it for bigger screens and integrate it with a CMS. I decided to try a flat-file CMS Kirby instead of WordPress. (I’ll share that experience with you later.)

Final Touches

I Skipped Photoshop & Saved Time

I planned to launch my website in the second half of March. But because I skipped the drawing of the website in Photoshop and went straight into the browser and coding, I launched it on March 2. The decision to skip drawing each page in Photoshop saved me at least two weeks.

I Improved My Coding Skills

But saving time is not the only good thing about going straight to coding in browser. The other cool thing about it is, that I improved my coding skills drastically. Moving an element or changing a color takes more time and effort. But I learned all the principles of web design technologies and the abilities they offer.

Before, I only knew the basics of JavaScript and jQuery. I used to take snippets of code, change them and use them over and over again. Now I can write my own scripts. It’s something I always wanted to learn, and I did — by actually using it.

What Tools Can We Use?

Making changes in the code and refreshing the website in the browser can become slow and annoying. There are some tools that can help optimize the process. I used Brackets because it automatically refreshes the website every time a change is made to the code.

I’ve also seen developers coding in tools such as CodePen and JSFiddle, simply because these tools make it a lot easier for them to see the results to the changes in code. Brian Kall also wrote a post about designing in browser and mentions some tools that are available.

Should We Really Forget About Photoshop?

I don’t think so. The web design process includes user interface design, user experience design and graphic design. Complex user interfaces are easier to draw in Photoshop. Graphic elements can also be drawn in Photoshop. To be honest, I still draw most of the interfaces we need at Wondermags, simply because it’s way quicker.

Photoshop is a great tool. For drawing. So, should we think about websites and how they work from the Photoshop’s point of view? This is what we have been doing so far and what it got us is a very complicated and unnecessarily long process.

I think it’s time to go back to the core of web design and skip the Photoshop part where not really needed, by simply start coding our websites in the text editors again. We, web designers, should never have completely abandoned that.

Matej Latin is a Germany based Web, UX & UI designer currently working at a kickass startup Wondermags. Before that he worked as a freelancer for several years. He's passionate about simple, clean & usable design. You can follow him and find out more about his work on his website, Dribbble, Google+ and Twitter @matejlatin.

Newsletter

47 Comments
  1. Matt Litherland Apr 3, 5:57 pm

    This is a great article. It’s my own opinion that if you’re designing flat images and giving them to a developer with no knowledge of code. Then you’re being over paid for what you do & you’re certainly not a designer (at least a UI/UX/Web designer). So much design is based on user interactions with the interface that it’s impossible to truly benefit from the capabilities of whats possible to do. I think it’s about time these graphic designers pulled a finger out their arse and learnt some front-end code.. it’s not rocket science after all.

    Reply
    +5
  2. Giancarlo Apr 3, 6:22 pm

    This was a great article. I don’t really like having Photoshop in my process. It’s a bit of an outdated standard, and just as the old debate states, interactivity is truly hard to display in a static mockup. Also, with responsive web design being the current buzzword, layer comps aren’t always the best method to show this. I believe in wireframes and moving to the browser afterwards!

    Reply
    +7
  3. Ryan Hicks Apr 3, 7:10 pm

    This article is a joke. Someone doesn’t just simply draw pretty designs in photoshop. It consists so much more of then just drawing. User research, enthographic research, design, prototyping, knowing the technologies your designing for, etc etc etc etc etc.

    If you actually want to read something on this subject that’s written well i suggest the following – http://blog.webflow.com/designers-will-rule-the-web

    Reply
    +9
    • wilburlikesmith Apr 4, 4:50 am

      That does look like a good read too, will have to get back to that someday.

      Reply
      -1
    • Matej Latin Apr 4, 9:14 am

      I think you should read the article again because that’s exactly what I said. The know-it-all attitude is really out of place and calling an article a joke is offensive. Just say that you don’t agree, if you don’t, period. But in this case I think it’s about misunderstanding.

      Reply
      +22
      • Ryan Hicks Apr 4, 4:21 pm

        Hidden due to low comment rating. Click here to see.

        Reply
        -19
    • Matt Litherland Apr 4, 2:44 pm

      lol dude. Read the article.. and think about your answer. Of course Photoshop or any design software is necessary and a fundamental part of the design process. But the gist of the article is that ONLY knowing Photoshop without understanding the very basic anatomy of the web including is capabilities doesnt make u a designer (web). it makes you good at drawing boxes on a page that looks like a screenshot and nothing more.

      Reply
      +7
      • Ryan Hicks Apr 4, 4:22 pm

        Hidden due to low comment rating. Click here to see.

        Reply
        -12
    • Stan Apr 8, 4:24 pm

      Going to have to completely agree. If you run your own company then if this process works for you great. But when you work at a larger company like I do. You don’t just go straight from design to coding. You have to get those designs approved, you have to make many options for the myriad of people to choose and discuss from. And while those designs are getting approved you have to move on to other projects that need designing. By the time you finish those, the changes for the first set of designs come back. It’s a long process before you even touch coding.

      Imagine having to code 10 different variations on every single page. Another 5 variations on backgrounds, another 5 variations with different typography, buttons, etc. That’s when photoshop or whatever software you use to design is going to outshine any coder, no matter how fast you are.

      And what’s even worse is that the assumption here is that the OP assumes that the website you are coding is just a standard site with images/links and a few js scripts here and there. In my case I often work on sites that will take months just to code because of the complex functionality necessary. Sure you could fake some of it with coding and add in real functionality later on but either way you will end up hitting a design process to fake those parts of the site that would take too long to code.

      There are so many other problems with this post I won’t even bother going into it. It’s written with very short sight. Written with only the OP in mind and how his workflow works at his workplace…which is unique to him.

      Reply
      +9
      • Jeff at Huemor Apr 8, 6:57 pm

        I pretty much came here to say exactly this.

        As a owner of a small creative agency (And a UI / UX professional myself) this ‘streamlined’ suggestion falls flat with large production work.

        When you’re building a website that realistically takes a development team of 2 or more to code, ‘drawing pretty pictures’ becomes pretty essential to the process. Without a proper road map, people get lost. Additionally, I much rather have a developer that knows heavier languages (PHP, in-depth Javascript, Json, Java etc.) knocking through a front end style guide rather then a novice HTML / CSS coder.

        That being said, should a designer with no understanding of the limitations of the web, and what best practice is for certain platforms be designing websites? No. However, does an individual need to know how to physically code within a responsive framework (such as Bootstrap or Zurb) to know that the interface must be paired down and work in 1 column? No.

        Being able to code in HTML / CSS is definitely a plus when you’re a designer, but I don’t believe it’s what defines you as a web designer. Understanding best practice usability, the constraints of your web platforms, and how to design experiences that capture users is.

        Reply
        +7
      • Matej Latin Apr 9, 12:10 pm

        I understand that you might think of this article as short sighted as it’s based on only one example. And that was the whole idea to be honest – to share how I managed to do it in this case. I also worked with a medium sized agency from Germany that completely excluded Photoshop from their web design process. And they weren’t building only simple websites but web based applications and eCommerce websites too. The article is meant to suggest an idea / alternative to the current process that is very common, but became quite complex and long, especially with responsive web design. It may be radical but it’s nothing new, others have written articles about this.

        I also explain in the end that it’s not that easy to just skip Photoshop and that it’s still a great way to draw complex interfaces and websites, I still do it at work. Maybe I should state that more clearly. So I disagree that the article is short sighted, it does suggest a radical idea / alternative. I believe both this way and the Macaw, WebFlow and other tools are future of web designing.

        One more thing I firmly believe doesn’t belong in Photoshop, that you mentioned, is choosing typefaces for the web. There’s so many tools out there that allow us to see the typefaces, that are meant to be used on web, actually in the browser. Simply because Photoshop does a very poor job rendering typefaces. But more on web type some other day.

        Reply
        -3
  4. wilburlikesmith Apr 4, 4:47 am

    This was a lekke article.. still is, I was looking for the share button and found the comment button :) Must say I’ve always preferred Fireworks over Photoshop, because it’s faster for the simple image editing you’re planning on doing, the rest really is just up to markup.

    That infographic you have of how web designer job splits up, reminded me of how many people are doing jobs now that didn’t even exist two years ago!

    And on the self-reflecting side I should really aim at finding a niche now really, this knowing something about everything is getting to me now. On the upside and buzz talk we started a company yesterday with the tagline “Digital & Social Media Phenomenalists” haha, it’s what I came up with at the time… I’ll finish reading this article now thanks.

    Reply
    +1
  5. Peter Finlan Apr 4, 9:01 am

    Have to agree with Ryan on this.

    This article tends to bash designers a bit (especially if you are passionate about producing award winning design).

    We know that a designer should know the technologies they are designing for, that’s a given. I’m yet to meet a designer that doesn’t know at least basic FED.

    To simply state that all we do is draw pretty images in Photoshop is a bit naive. A designer essentially has the most important job of the whole project – deciding how the application is going to look and function and then incorporate how the user is going to interact with each element of the application.

    You can’t just scribble some wireframes and start coding. You need a decent visual interpretation on what to code. I’m wondering if OP has ever heard of collaboration between designer + developer – happens in most agencies, and has done for years.

    Reply
    +8
  6. Pascal Apr 4, 10:38 am

    Really interesting article about webdesign, but I personally always need a visual representation of what I’m going to do on Gimp or Inkspace before jumping to my text editor.

    Reply
    +3
  7. Cédric Verstraeten Apr 4, 11:12 am

    Nice article, and well written. An alternative to your paragraph about auto-reloading the webbrowser with Brackets. You could check out “Grunt”, it contains a file-watcher + autoreload plugin, so you can work with your favourite code-tool, others than Bracket.

    Reply
    -1
    • Matej Latin Apr 4, 11:57 am

      Thanks for letting us know. I’ll definitely check it out.

      Reply
      -1
    • Matej Latin Apr 8, 5:08 pm

      And there’s also Takana – with it you can preview all the changes you make in the Sublime Text instantly.

      Reply
      +1
  8. Patrick Apr 8, 12:11 pm

    Nice idea, but quite idealistic in my opinion. Whilst I would favour this approach for designing my own site, for clients it’s not going to cut it. Sadly they need to visualise a design before building the site which means we have to use photoshop.

    The agile design approach might suit agencies who “assert” their choices strongly on the clients, or are lucky enough to have clients that simply pay them a great deal of money to get on with the project, but for smaller clients they need to “see” things simply because they don’t grasp the process of building a website.

    Reply
    +5
    • Matej Latin Apr 8, 4:57 pm

      I know exactly what you mean. Majority of people have trouble to visualize the same way as designers do. They have to see the actual product, or at least the drawing of it. But once, I worked with a German company that completely excluded Photoshop from their process and they don’t miss it at all. Once they completely adopted it, the process became even more agile and quick.

      Reply
      0
  9. Warren Apr 8, 2:05 pm

    This is a bit like “Video killed the radio star” in web terms! I totally agree and I too made sites back in the nineties with basic html and animated gifs.

    But when css and flash came along I found it easier to visualise things first before I coded up stuff since there were no longer any restrictions on what could be done.

    I’ve used Illustrator since 1989 (yes I am that old!) and I still use it today. Its fast, easy to style and change the shape of elements quickly, add gradients etc so beats Photoshop hands down. When my clients are happy with everything I use MacRabbit Espresso and Chrome to code everything up.

    Each to their own and what ever floats your boat really, as long as the end results works and can be found then jobs a good one.

    Great article BTW,
    Cheers Warren
    (UK)

    Reply
    0
  10. Jon Apr 8, 2:18 pm

    indesign generating CSS would be a good idea.

    Reply
    0
    • Matej Latin Apr 8, 4:53 pm

      Webflow and Macaw try to do that I guess… Haven’t tried them out yet.

      Reply
      +1
      • Patrick Apr 8, 5:30 pm

        Thanks for reminding me of Macaw, I spotted it a while back and it hadn’t been released – going to give it a blast. Webflow looks nice, the examples of sites built with it are impressive but it’s a stinky Saas offering.

        Reply
        0
  11. Ned Flanders Apr 8, 4:10 pm

    I’ve been trying to convince my company to ditch the photoshop aspect of our design process. We have to many “web designers” who dont know how to write a single line of HTML, and we waste weeks on photoshop mockups. Especially when our websites have budgets of 2-5k, it doesn’t make financial sense to waste weeks of time drawing mockups in photoshop and eating up 75% of the budget

    Reply
    +1
  12. egiova Apr 8, 6:08 pm

    I never ceased to design directly on the browser. Mainly because it saves me adding unnecessary elements.
    In addition, to improve the user experience, ideas are faster and easier to implement, and the whole is rapidly more sober and functional.
    The arrival of responsive design has strengthened me in my idea.
    As a draft, I always install a “functional” model on my demo site for my clients. It’s more efficient and “speaking” to customers who can immediately be aware of the user experience.

    Good article that depicts very well the dilemmas that confront web designer every day.

    PS. If I had to choose between PS and AI for a mockup, I’ll always choose AI.

    Reply
    0
  13. Corey Apr 8, 7:15 pm

    I see several benefits of prototyping different aspects of a user experience with code. While the raw design is obviously important, there comes a time when the interactions on a page/app require coding.

    On that note, I just released Fenix 2.0 (http://fenixwebserver.com) a few hours ago. It provides simple GUI or CLI-managed web servers with a goal of making the prototyping phase simpler… i.e. sort of bridging the gap between design and prototyping. It’s IDE independent, and while it doesn’t have livereload like Brackets (yet), it does have native SSH tunneling capabilities to make it easier to collaborate on prototypes/demos… i.e. show someone a working prototype for initial feedback, approval, etc.

    Reply
    0
    • Patrick Apr 8, 11:59 pm

      I found brackets to be very…..very….slow running on an i3 iMac, thus I dumped it. It’s quicker to just refresh my second screen with Chrome.

      I agree, sometimes interactions are important but they can normally be explained or client’s “get” that mockups are not clickable. The big issue I feel is that in going agile (in design with small clients) you can spend equally as much time making so many minute changes that you end up re-developing a static site / proto, sometimes its much quicker to fire out a new itteration in photoshop – and avoid the “give an inch, take a mile” problem – where a well presented / designed site is turned into Frankenstiens bastard runk offspring with scrolling marquee’s.

      Your product looks interesting, and the site is pretty, but I don’t get any elevator pitch from the site..what is it? How does it help me as a designer (and developer) do things more efficiently – is this an MAMP / WAMP replacement?????

      Reply
      0
      • Patrick Apr 9, 12:04 am

        We are just trying to subtly assert our expertise (in design, UX, functionality) on clients that treat us like interior designers, taste is not always practical and sometimes just fucking ugly, unusable – so much so you wouldn’t put you name in an author meta tag, but rather “stubborn” as a plague like marker to the next poor soul who lifts the hood.

        (I hope that’s a quote some day)

        Reply
        +1
      • Corey Apr 11, 9:11 pm

        Patrick – I’m still finalizing a Medium.com article for Fenix that answers your question. I released some early YouTube videos on fenixwebserver.com (though the audio is REALLY off… vocals are way too low and the system alerts are absurdly loud) that need to be recreated.

        In a nutshell, Fenix is a replacement for IIS/Apache/NGINX, specifically designed for desktop use (as opposed to server use). It targets early stage prototyping…. i.e. post-Photoshop, pre-DB. It’s a static web server, so I wouldn’t consider it a replacement for WAMP, just different.

        I use it for two primary purposes. First, I serve mockup JSON/XML over HTTP to make more realistic prototypes. In my experience, the data requirements change as much as the design requirements do… so this helps iterate quickly until arriving at a final data model. Basic HTTP serving alone isn’t any different from Apache, but the GUI is different.

        Second, I use it to tunnel localhost. In other words, my local machine temporarily becomes a publicly accessible web server. I typically share the private link with reviewers over IM, get feedback, and then shut it down.

        There are some other features I use, but I feel those are the most relevant to this article. At the end of the day, Fenix is really just a number of technologies packaged up into an easy-to-use manner.

        Reply
        0
  14. Dave Apr 8, 9:11 pm

    I’m a designer who learnt HTML CSS back in the day, I never got my head around JavaScript — as I’m fundamentally a designer!
    So many advances in the industry left me behind in the coding dept. So I just kept up to date with the technologies and how they worked, but didn’t try to code them, just worked with the developer to implement them.
    Photoshop was the tool, but all that has definitely changed now as we now have to design responsively, and do it well! So in comes illustrator or indesign (I hear you gasp). Illustrator can start to slowdown, on the larger jobs so indesign is my choice, it’s very fast to layout and the style sheets are brilliant, and it can handle shadows very well — unlike illustrator. All we need now is a friendly style sheet export from indesign to ‘aid’ the developer in his build (not write his code, just support the design).
    Designers design — developers build. It really is as simple as that. They are two very different professional skill sets.
    Anyhow that’s my tuppence on the subject. I always enjoy a good robust Web 3.0 web bashing :)

    Reply
    0
  15. someguy Apr 9, 12:28 am

    Can’t agree with this article. When designing/building a $100K site on a e-commerce platform, you can’t just whip together a wire-frame and then start coding. Maybe you can get away with it on a WordPress site using flat design qualities, but not at a higher level.

    To be fair, I have seen situations where designers don’t understand enough about web technologies and “overdesign” things, without knowing how hard it would be to build, without considerations about speed, optimization, etc.

    But when you get into the $100K+ range, our managers don’t want our designers limiting their imagination with technical limitations, so their tech knowledge ends up not mattering anyway. It is similar situation to Steve Jobs. He imagines something, Apple’s developers and engineers FIND a way to make it happen. Doesn’t always work that way (sometimes it turns into a huge cluster****), but that’s the goal.

    Reply
    0
  16. David Blanchet Apr 9, 4:02 am

    I was on the fence with this article then bent toward the author after reading ryans disrespectful comments :(. but continuing on to more mature comments i gotta agree that the photoshop phase of design is needed if for no other reason than you need to be able to show a client the finished product before you finish the product. Even as a solo web designer/developer, I’ve never been able to (for client work anyway) start in the browser. hell im currently redesigning a section of a website ive had as client for some years and still have to show them a mockup of my idea before i touch any code… PS is dead. Long live PS.

    Reply
    +1
    • Ryan Hicks Apr 10, 6:35 pm

      Hidden due to low comment rating. Click here to see.

      Reply
      -6
  17. Ivan Lopez Apr 10, 4:31 pm

    I will have to RESPECTFULLY disagree with the post. As I have experienced (and this is my personal opinion) designing using the common tools (photoshop, illustrator, etc.) is ridiculously important in a company environment. I could not simply create a site without the prior steps, approvals, changes, and content design before starting the code. Everything has to be approved… several times. Here is where I switch gears and say that I wish I could design the way the article suggests. If it were up to me I would simply sketch everything out and then start working in the code. Making adjustments as necessary. Would save tons of time. BUT I do think it would totally throw me off. hmm…

    This is a good article. Really got me thinking!!!

    Thank you Matej!

    Reply
    +1
  18. Stefan Apr 11, 5:53 am

    It’s entertaining to read the naysayers holding onto crappy tools that were meant for completely different purposes than web design. I strongly encourage you to check out mixture.io. It features powerful templating capabilities, HTML includes, JSON for models/storage – just check it out and spend the time to read through the documentation. It’s now faster for me to build a fully interactive web app in HTML/CSS/JS than any other tool.

    Reply
    0
  19. Some guy Apr 11, 9:30 am

    @stefan, let me just show up, plug a product real quick, and bounce.

    Reply
    +1
    • Stefan Apr 11, 1:30 pm

      Sigh – It’s not a plug – I don’t care if you like another tool. It’s something that works really well for me and wanted to share.

      Reply
      0
      • Ryan Hicks Apr 11, 8:00 pm

        Key words….

        “It’s something that works really well for me….”

        Looks like an interesting tool set though. Others have thrown it around in the past.

        Reply
        -3
  20. Steve Apr 11, 6:51 pm

    After 15 years in the industry, I’ve never worked anywhere or with any company where a graphic designer hands a PSD file to a developer. There’s always been a flow where the web designer creates the wire-frames, moves to concepts, moves to html/css/jQuery etc. and then to CMS integration. If needs be, a back-end developer will get involved. I’ve been branded a UI designer, UX designer, front-end-developer… but I’m a web designer at the end of the day.

    Reply
    -1
    • Ryan Hicks Apr 11, 7:59 pm

      You must of been working for yourself for the past 15 years.

      Reply
      -2
      • Steve Apr 11, 8:40 pm

        No I haven’t. I’ve been working in both agencies and companies with their own products (some are even multinational). Most companies don’t have the level of staff you mention just to create websites as it’s not cost effective and it’s more than doubling up on people who all have mostly the same skill set.

        Reply
        -1
  21. Ryan Hicks Apr 11, 9:34 pm

    “Most companies don’t have the level of staff you mention just to create websites as it’s not cost effective and it’s more than doubling up on people who all have mostly the same skill set.”

    That is a completely false statement based on no fact.

    Reply
    -2
    • Steve Apr 11, 10:23 pm

      No it’s not Ryan. Learn to take criticism. In a real world environment, everything needs to be concepted for approval before coding begins. And most design departments in companies or stand alone design agencies do not have individual staff for every individual skill set needed to create a website. The proof is in the job descriptions for available positions. They’re all multi disciplinary. Your article is interesting but it’s not based on a real world environment and your idea for coding straight from wireframe works for personal projects but for large scale projects, it’s not feasible.

      Reply
      +1
      • Ryan Hicks Apr 12, 12:37 am

        I am a designer. I take criticism as apart of my career idiot. Connected and sitting next to me right now are 5 other designers not including me that NEVER TOUCHES CODE in my agency. In my previous 4 jobs i have been apart of startups from 2 people to large companies of 100+ employees. EVERY one has never had their designers touch code. It has always been a designer, front end dev, back end dev, etc etc etc. You need to get out in the real world and out of your 15 year old antiquated cubicle or stop trolling. You’re not even making sense. Go back and read your comments.

        Reply
        -4
    • Some guy Apr 11, 10:50 pm

      I WORK for a digital creative company with 6 designers, 5 full time developers, and 2 project managers. The designers never touch code, ever. Every PSD is handed to a dev. Company been around for 10 years. Apparently you haven’t experienced much in your 15 years.

      Is it the best situation? No. I’m just saying that you are wrong Steve.

      Reply
      -3
      • Steve Apr 11, 11:18 pm

        I fail to see how I’m wrong just because your company operates like this. You say yourself it’s not ideal. I know of one company where I’m living who operate with designers who don’t code. My experience of talking with them is that they see it as a stop gap in their career as all it does is let their skill set fall behind making it more difficult for them to move forward in future.

        Reply
        0
  22. ahdr Apr 12, 9:19 pm

    I agree with many of the points in this article, mainly because it is something I had to come to terms with; Yes, I had a love affair with my beloved PS, for the longest time I wouldn’t use anything else, I now use Axure for producing wireframes, and avoid creating high fidelity versions as for the most part I have found it to be an incredible waste of time.

    Disregard the cost and client issue for a moment, but look at the creation side of what a web designer does instead. Lets say a designer starts working on a personal “pixel perfect” user interface concept in Illustrator and Photoshop, but as they progress through with the project they begin to realize that they want to add (real) interactions to the mockup, or even turn their concept into a working prototype, like Designmodo does with their GUI kits, then they would need to know how to code, but they can’t code so the most they can do is create an animated gif or video, which might be enough to give you a general idea into how the product will function, but is that enough?

    For example, I have been working on a concept project for a while now, it’s a mockup (web/tablet/tv) for what I would envisage to be a better solution to current video streaming platforms such as Amazon Prime, Hulu or Netflix. I have found however that having spent so long on the project working on everything from the IA/UX, UI and branding, it would be a a shame to leave it as merely a static series of images, something like that beckons genuine interaction, rather than quasi-interactions with Marvel – not bashing Marvel I use it regularly, but in that instance a real prototype would make more sense, which is why I am now trying to learn JavaScript so I can take the mockup and plug it into a responsive framework to add basic interactions and make the UI come alive! :D

    Reply
    0

Leave a Reply

*
* Minimum length: 20 characters