12

There is more and more talk of web designers moving away from the idea of spending an incredible amount of time wireframing and then designing in Photoshop and I wanted to get everyone's opinion on this and if there is a better, more efficient way to design websites especially in the light of responsive becoming ever more the daily norm?

I for one still spend a lot of time in Photoshop but would love to know if there is a better way?

EDIT:

As I'm listening to you all I'm also finding other sources. Here for one is something from CSS Tricks on Modern Web Design Workflow

http://css-tricks.com/video-screencasts/124-a-modern-web-designers-workflow/

Improve this question
7
  • 9
    What are you 'designing' in Photoshop when it comes to the web? Pixel-perfect webpage layouts? Wireframes are a blueprint for the IA and what belongs where, but Photoshop is a photo editing tool - the web is not a pixel-perfect domain; people have phones, tablets, Macbooks... Even two people on the same laptop will have different toolbars installed and have the browser open at different sizes instead of full-screen. Not to mention that different browers render fonts / shadows etc differently to others... Photoshop is for photo editing not for web design.
    – JonW ♦
    Jan 3, 2014 at 15:38
  • So if I may ask Jon, how do you convince your client of what the product will look like when it is done? I hear what you are saying but clients still want to see the end product and what better tool to use than Photoshop?
    – SixfootJames
    Jan 4, 2014 at 11:08
  • We'd take their brand guidelines and once they're happy with the general concept presented in the wireframes we'd put some prototypes together. Either do this internally before showing it to the client, or ideally work with the client to put the prototype together and that way you're building something real and the client is involved from the start.
    – JonW ♦
    Jan 4, 2014 at 11:25
  • 2
    @SixfootJames they shouldn't be 'visualizing' things from the start. In doing that, it's common to lose site of the more abstract goals...such as business objectives and the like. Premature high-fidelity visuals can be dangerous.
    – DA01
    Jan 5, 2014 at 22:58
  • 2
    I don't use Photoshop for design, I go from pencil/paper to prototype code.
    – obelia
    Jan 6, 2014 at 23:12

8 Answers 8

Reset to default
6

I started out doing front-end development, and shifted into specializing in UX so I spent a lot of time doing the Photoshop/Illustrator to Browser routine.

When I joined the team I'm on now, I had to adapt to an Agile environment and have managed to find a balance that works well. Mind you, on the small team I work on I'm one of those 'unicorn' types that does front-end development, design and UX - so my methods might not work in every situation.

We've got a lot of whiteboards in our space so during the first iteration of projects I spend my time figuring out the strategy and the purpose of the project, then I dive right into quick and dirty sketches of flow and layout options on the whiteboard.

Once I've got some feedback from the other people on my team for which makes the most sense, I move into wireframing and show the concept to the client. I clean up the flow where it's needed based on that feedback, and either start prototyping (if the concept needs testing before development) or dive right into development.

What I've found running through this routine is that the branding and any necessary 'design' happen naturally based on the functionality and architecture of the application or website. During later iterations, if any further design is needed it tends to be complementary to the functionality. What I like about this (and what I've found clients like about this) is the design works to accentuate the functionality, instead of the usability having to work around the design.

Improve this answer
1
  • 1
    Just like you insinuated, I also don't think this will work in larger teams where there are no 'unicorns'. Designs are necessary there, but that doesn't mean functionality has to suffer under the restrictions of a design, because 'you have to work around it'. Safeguarding functionality is something I do in a large team and most work is done even before designing and I keep a sharp eye on it during development.
    – Paul van den Dool
    Jan 8, 2014 at 9:04
5

I've heard and had this talk too. In my view, people walk away from wireframing and designing in Photoshop or any other tool because with RWD we no longer design for a fixed width. Some people also walk away because they think creating mockups and then designing and then developing seems cumbersome. So then what you do? The answer I hear the most is 'in browser design'. I haven't looked into that a lot, but to me it sounds like designing on the fly while developing. To me this seems strange, because shouldn't you have a basic idea first? Some first sketches? Some wireframes to see where everything will go? ...And we're back at creating mockups and designing. Maybe responsive design tools are the answer, like Adobe Edge Reflow. I haven't tried it yet and I'm reluctant to do so, because I'm used to my own workflow.
The fact is I haven't seen good implementations of in-browser-design and responsive design tools, yet. I still think creating wireframes and creating some designs to represent different viewports is still the best way to go.

Improve this answer
1
  • If there are other tools to replace Photoshop I would more than willing to try them out but yes, I would have to agree, if you develop a house, you would not jump right into the design tool. You would first sketch, then blueprint and then use one of the the AutoCad applications to complete a design of the house for the client. I understand that we're talking about a flexible house now but some design work still needs to be done...thanks Paul.
    – SixfootJames
    Jan 5, 2014 at 13:06
3

I'm a UX person who does a bit of web design on the side.

In terms of workflows without Photoshop - well I have created several sites using standard wireframing/prototyping tools then had that implemented by a designer using HTML/CSS. My wireframes have increasingly become 'mid fidelity' - that is with colours and fonts but not pixel perfect.

Photoshop is a useful step to get an idea of how colours and fonts will work but, once you've got a good understanding, this is possible to some degree using code. It's possible to use photoshop less by just trying out limited ideas.

Improve this answer
3

I tend to use Sketch or Omnigraffle for basic wireframing (I'm a UX Architect) and i workshop the responsive logic with the front-end designer/dev, annotate the specific logic on the wireframes (most of it is fairly basic but I like to flag specific elements that require complex logic, like a job search results page with filters) and then I hand my wireframes and the art director's style tile / creative directions over to front end to build a responsive prototype.

I try to keep the wireframing light so the dev can have more hours to experiment with different layouts and so I have a few hours for oversight / feedback.

If it's a client that requires full oversight via signed-off PSDs and/or wireframes, I usually explain that they're asking for a massive amount of prework and that will require either more time and money, or that they can have indicative PSDs of particular screen sizes (desktop, tablet and mobile, usually) and that we will build responsive logic for the in-between stages (and they can sign that off in the build phase).

Improve this answer
3

I'm experimenting with this approach on the wireframe-design workflow: do everything in Adobe Illustrator. This approach require some initial time to set things up, but later on you get much faster than in Photoshop. Basic steps:

1) Wireframe in Illustrator. Even if it's not a specialised mockup tool it can become one. You should create personalised library of vector symbols representing the most common UI elements (you can import those symbols from other sources/mockup software). Once you put together a decent library you can wireframe perfectly in Illustrator.

2) Design in Illustrator. Once your mockup is complete you design you website completely inside Illustrator, working directly on your mockup! Your vector symbols are already there you should only enhance them by adding custom graphical styles and add details. This save time comparing to Photoshop workflow, where you need to recreate you mockup structure from scratch.

3) Export UI in SVG from Illustrator. This is the nice part, since you design your elements in vector you can export you graphics in SVG, this helps you a lot when designing responsive layouts, since SVG can be scaled to any size your devices require.

Some considerations:

  • Illustrator vector graphics make you designes look "cleaner", which is the last trend (look at Google and Apple UIs)
  • After a little practice with Illustrator you can reach the same design freedom than in Photoshop
  • doing all in one software and reusing your library of vector symbols and graphical styles speed up production workflow for the future projects

Hope this gives you some fresh ideas.

Improve this answer
2
  • I couldn't agree with you more. Creating text-based layouts in Photoshop was always a pain in the butt, but it's simple in Illustrator. I create 4-5 canvases to cover the basic responsive breakpoints, and do all my wireframing right there.
    – Dan Gayle
    Jan 9, 2014 at 1:18
  • Also, you're absolutely right, you can start in on your actual mockups/designs right there from your wireframes. Usually for the final actual html/css, you can copy the rgb values and pixel measurements straight from AI and it will work exactly as expected.
    – Dan Gayle
    Jan 9, 2014 at 1:19
2

@Paul I have to agree. Wireframing, PS design and then development can be overlay complicated BUT it works and generally we all understand the process. Like any system, its only as efficient as the people who operate it.

Design in browser IMO is only useful for the simpler websites/applications as changes aren't too difficult to make - however it would still require some form of planning ie wireframe/uidesign/scamp.

I recently worked on an application that required some heavy UX thinking and design in browser could never have worked as 70% of the work was thinking/discovery. This was followed up with wireframes/scenarios that were discussed with the client on a daily basis (agile). As sections of the wireframe were signed of the UI was started on and as the UI was signed off the Dev was started and so on...

It all comes down to the client, the project type and resource. I think design in browser does have a place but its about using the right tools for the job.

Improve this answer
1
  • Lots of iterative wireframing can be great, but that's not Agile. Agile focuses on getting that into code ASAP. The wireframe -> sign off -> build process is very common, but leans more towards traditional waterfall. As such, it has its issues (namely no matter how hard you try, a wireframe is never code, and things often have to change once code is brought into the equation).
    – DA01
    Jan 5, 2014 at 23:05
2

I was using Photoshop years ago aswell and I think it is too overcomplicated for web stuff and not responsive enough. If you are editing a photo or designing something very challenging and complex I would use PS.

I don't do wire-framing that often anymore and I don't think it is necessary for good UI, but a lot of my colleagues do it (mostly on paper) because they simply like it and can apply changes easier after getting feedback from the customer.

Now I'm using Sketch (Mac app) for logos, web design and mobile apps which really saved me a lot of time. After I am done designing in the application I convert it to CSS3/HTML manually without any images. I tried a lot of tools and find that to be the best.

Only on a very complex UI I do wire-framing.

However, regarding wireframing / web-design & co tools like Sketch are the way to go.

Improve this answer
1

PhotoShop can't do responsive. In fact, it never could do 'the web browser'. It's just that responsive has finally driven that point home to a lot of folks that were still holding on to PSD files with their cold dead hands. :)

PhotoShop is great at making a pretty picture and sometimes that is the goal of a project: make it pretty.

But typically the goal is much broader than that...it involves creating things that PhotoShop just can't do very well...interaction design...content design...prototyping...device variances...responsiveness...user testing, etc.

There is no one 'better' way, as it will all depend on opinions, preferences, and the specifics of any particular client and project. But a few techniques to explore:

  • interactive prototyping: This can be on paper, or using a tool such as Axure. Benefit is you focus more on flow, functionality and interaction at the start.

  • in-browser prototyping: This is ideal, IMHO, as you are working in the proper medium from day one. This is often a part of Agile development.

  • both of the above: My preference. Prototype quickly and lightly, but get into code ASAP.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.