Learn to Use Your Browser in Web Design

Categories Articles, Web Design

Photoshop has been in the news lately, except not for the regular reasons you might have guessed. More and more blogs are focusing on Photoshop because there’s an internal battle. A battle between designers who work in Photoshop, and those who choose to ignore it for the browser. I’ve grown out of Photoshop for the bulk of my work, and there are three key reasons a designer must focus on to understand the benefits I’ve gained.

Firstly, Photoshop lacks the ability to be played with. When you send off a still of that UI, how is your client expected to test it? The last thing you can do is expect your client to come to conclusions on the operation of your design by themselves. To me that’s a no-no, because that’s how we get assumptions.

Secondly, there’s how you play with your time. Photoshop is good if you want to add hours to your bill, but that’s not productive. Consider this, when you update the copy on your latest project in Photoshop, what steps did you have to take for the client to view the updated version. You of course have to edit it, but then you need to re-save it, re-upload it, and redistribute it. When you design in the browser (with Coda for example), the only thing I have to do is edit and save. The client already has the link, and knows that when I’m done a revision can be viewed automatically. Not only that, but you lose the dreaded waiting game between updates. You create a norm wherein your client won’t have to wait days for simple revisions, and that productivity and efficiency is serious business in when it comes down to your workflow.

Finally, we must remember that prototyping is about lack of perfection. Designers overlook this not just because we simply forget, but because Photoshop breeds nothing less then perfection. Why do any less when you are given a set of tools that allow you to create the perfect mockup and fine tune the details of your design? But you have to remember, mockups are about showing the direction of your project-to-be and not the final deliverable.

These three points make up a good argument, but why are people still resorting to using Photoshop as the solve-all tool? I think the problem stems down to simply not being comfortable with writing front-end markup. My experience with designing in Photoshop stemmed from the days when I wasn’t comfortable with HTML, and I think that is common for a lot of people. If you’re someone who doesn’t work with code then great, however there are a lot of us out there who do both ends of the stick on a day-to-day basis. Designers need to get comfortable with both designing and writing code, and know when to use the right tools for each individual task. You might think I write just to bash Photoshop; however, you have to remember that Photoshop is a tool and tools are used for specific tasks. You have to know what Photoshop is here for, and how to use it effectively when you work on your next project.

We provide fast success in 642-983 exams by using our high quality 642-533 prep resources. We offer up-to-dated 642-262 & 642-188 dumps with definite guarantee of CCIE-LAB success.

Kyle is currently going to school at the University of Victoria while working with the Vancouver based Flipp Creative. You can find him on Twitter every once and a while.

  • You make great points in this article – showing your client a working draft (even if it is not the final version but a “work in progress”) is truly important, and shows that you’re a professional.

    I also completely agree with your statement:

    “Designers need to get comfortable with both designing and writing code, and know when to use the right tools for each individual task.”

    I’ve been a web designer/developer for going on almost 11 years now. There’s been a lot of talk about “specializing” in one field, rather than being a “Jack of all Trades” when it comes to the web design business.

    The truth of the matter is you cannot be a great web designer if you only specialize in graphic design at the expense of usability, information architecture, search engine optimization, etc. You will always be hobbled by your lack of insight into these essential factors if you don’t make the effort to get a better grip on what good web design is truly about (it is not just the visual GUI – that is only a PART of great web design).

    I think a mistake many new graphic designers make (and this could be because they do not learn this at the outset) is that when it comes to web design it is ALWAYS function before form. What is the goal of the site, how will users get from point A to B, who is the audience, what is the client’s brand? Etc, etc., etc.,

    Learning this important aspect of web design, including how to code, will take your graphic design skills (when it comes web design, and now mobile design) to the next level.

    You can continue to “specialize” in one field, if that is what you’re suited to, but at least gain knowledge of what the rest is all about too. This is called being well rounded, and having great insight and knowledge – it will help you make sound decisions throughout the entire design process.

  • Not quite sure of the point here…how else are you supposed to visualise a visual interface? Granted it would be great to have a visual editor and code editor combined but before then it looks like Photoshop. I know there are Photoshop alternatives but a lot of designers use Photoshop for a multitude of other things as well from print to video so it makes sense to use it for deigning website interfaces. You might also be able to create a full interface with HTML and CSS but again who has the skills to be able to compete with the subtleties Photoshop allows.

  • Hi Kyle,

    I have to completely disgree with you on this one. Twelve years in the industry have taught me some lessons, one of which is that well considered Photoshop mockups can be seriously valuable.

    My HTML and CSS skills are excellent, but it’s still much faster for me to put together a Photoshop mockup showing how the final site will look than to construct the page in HTML, and exploring alternatives and variations of the design in far less painful than designing in the browser. One thing that can be virtually guaranteed is the client will ask for changes to the design.

    If you know your web design, you should be able to ensure your Photoshop mockup is entirely buildable in HTML & CSS – I generally find it’s entirely practical to make an HTML page look virtually identical to my static mockup, although it’ll obviously behave differently as a living, breathing design when ported to the browser.

    Which is where the HTML prototype comes in. Create the signed off Photoshop mockups in HTML and your client will be able to fully test them in a real world context. In my experience it’s rare for the client to request significant changes to the design at this stage, so you’ll be building just one version of each HTML template rather than having to recode the HTML and CSS every time the client asks for an amendment (you really wanna try doing this with a client who’s still running IE6?). Once the client signs off the HTML prototype templates, move on to the build.

    Keep an archive of the signed off mockups and prototypes and you’ll be able to refer to them later when the client comes back with the inevitable last minute changes. Without these you won’t have a leg to stand on when you rightly ask for more cash to cover the additional time required.

    I know not everyone will follow this approach, but to suggest incorporating Photoshop mockups into your process will cost you more money and time isn’t the case in a lot of real world situations – I’ve found it to be quite the opposite.

    It’s what woks for me in any case, though I’m sure other readers may disagree ;)

  • I agree with the commenter David Cole.

    I’ve been in this business for over 15 years now. I built my first websites using a few images I created in Photoshop and a text editor (so yes, hand coded HTML).

    The other thing is I’ve learned quite a lot over the years in dealing with clients and refining the process. Like David said above, if you really are a good designer you will make sure everything you show the client can be coded, exactly the way you show and/or explain it to them.

    I also show clients wireframes first, before embarking on a design. I’m not one those “ta da!” designers who, after meeting with a client, disappears for a couple weeks then presents them with a “finished” concept expecting them to like it just because I’m the expert they paid. Working through a solid process ensures that the client doesn’t see something they don’t want or didn’t expect.

    We also offer custom design. And custom usually means visual, even though we write most of our own code (save for the few pre-made jquery type stuff, etc.) People are not paying us to “mock up” a template or some general layout that only shows functionality. They pay us for our creativity and to get a unique web presence that doesn’t look like everyone else’s website.

    Like David said – not incorporating Photoshop mock ups because of time/money is not a real-world situation … unless the whole point of “design” it to remove design from the process.

  • I have to agree with David’s opinion.

    Creating a basis for the site design in Photoshop is far quicker and less problematic when those first styling or structural alterations inevitably come back.

    I would certainly recommend creating the concept in Photoshop and then when mock-up two is confirmed start the build. Clients are easily blinded by aesthetic likes and dislikes so this helps save a lot of work.

  • Great article Kyle, but I tend to agree somewhat with David. I prefer using fireworks over Photoshop, but that’s neither here nor there.

    I’m always trying to come up with better processes for the design portion of a website. We use ‘content centric design’, there’s actually a very interesting article on the content centric approach IBM took when creating lotus notes (even if lotus notes is pretty horrible).

    When you use this approach I’ve found wireframing can be very helpful as a first step. Once this is done you’re suggesting the design should go straight to HTML/CSS, but from my experience customers never really know what they want (to my dismay). I also feel that realistically the flat design is THE essential part of the design phase, and it’s where all your inspiration can be experimented with and fine tuned without worrying about the box model or browser issues.

    Currently I use a CSS grid system, and I find that if you create your design with a grid layout in mind, going to HTML / CSS once the flat design is finished is very quick. In terms of saving money I feel it’s better to get the final design templates approved before spending time on any code. I would imagine the code could get very messy too.

    Anyway, whatever works for you and your clients is the right decision, especially if you find it saves you time and money :)

  • I’m glad that this topic has sparked a small discussion, and that’s what I intended for this article. Feedback is great in this business, and it’s something we have to work on doing more of. 

    Although I can’t agree with some of these well-written comments, David did point out something that I did not cover – Revision Archiving. 

    “Keep an archive of the signed off mockups and prototypes and you’ll be able to refer to them later”

    Archiving revisions when you have a HTML prototype is a bit more difficult and time consuming. The simple solution, if you need a history of your designs for your records, would be to create simple screenshots; however, screenshots are by no means an effective way of doing this. When working on a large project that flip flops back and forth then my article completely falls over. 

    Thanks for pointing this out David! 

  • Good Article… this is what I do…

    I use photoshop to create the initial visual mock up then I code the entire project in dreamweaver using the photoshop file as a guide to text and image placement. I then modify the original mockup in photoshop to match the coding placements but I present both versions as a constant work in progress to my clients. This way they see what I’m spending my time on and always have updates throughout the entire process. Let’s face it… as developers and programmers we care about the code, it’s efficiency, is it seo ready etc…. But the customer in most cases just wants to see how it’s going to look when you are done. There are benefits to having both parts of your design shown at all times. You just have to gauge what your client views as most important and make that your primary focus for providing them with a visual update.

  • We have a site building tool that’s used by both professional designers and studios but also by businesses. Although with our system designers can create unlimited “snapshots” to show different approaches to their clients, in the rare instances when I design websites myself these days (so we can keep checking whether our tools are adequate for designers, incorporate changes, etc.) I still prefer to show Photoshop concepts.

    The only difference is that I simply place them into static HTML mockup pages and upload them to a sever, so the client can have a look at the layouts in their own browser. It also forces me to examine how it works within different browser windows, the surrounding areas of the page, etc.

    In my own experience this “hybrid” method tends to work better than either showing simply a jpg, or a pdf with layouts or jumping directly into an actual live site. But some designers that use our system prefer to simply show their concepts to their clients directly from our webdesign tool.

    I guess in the end it’s a combination of personal preference (for instance, I still always make countless sketches on paper — both sides of the page!) and the type of client you’re dealing with.

  • After reading through the article and the comments I wonder if everyone here is on the same page in terms of scope. What I mean is how far are we taking the proposed mockups in Photoshop?

    The reason I bring this up is because in this post Kyle talks about the amount of work required to go back and make text edits in PS and then send the mockup back to the client. However, this is no where near the process I take with my clients. Instead, I present my clients with initial “look and feel” mockups with dummy content. I always instruct them to not concern themselves with what the site says or if you want to move this button above this text, etc..

    Doing an entire site in Photoshop and delivering all of the screenshots is not an efficient way to work at all. I believe a lot of the comments here are under the assumption that we are providing one or two mocked up screenshots of a home page and a sub page, getting an approval on the look of the site, then moving to content population and revision in HTML and CSS.

    For the sake of a few initial mockups I still find PS (or Fireworks) to be the way to go. I really don’t even want my clients to know they have control to edit content at this point of the game as it will slow down the entire process.

  • Stick to the photoshop mockup! I’ve done html mockups and presented them to clients, who have happily tried to click on stuff and wondered why it wasn’t working!!

  • Mark

    Images – whether using PhotoShop or some other tool – can be explained and understood as non-functioning mockups much easier than an HTML version.

    Every time I see a “live prototype” that looks look much like the finished product I’ve heard, “So how long will this take? You have the hard part done so you just need to hook up a couple things, right?”

    Mockups should not have any functionality, even click from image to image. Heck, I see confusion over greeking from supposedly seasoned professionals. Keep it simple and minimize your work … and rework … until the design is approved.

  • Great post! There are lots of browser tools that can help design.