I sat down and sketched all the new pages and ideas on paper, before making the final wireframes in Axure.

well, no shit then. decent Axure wireframes turn Photoshop into a coloring exercise.

I'm tired of reading "design in the browser" articles. If it works for you, great. But it doesn't for me and I'm not going to feel bad about it, or feel that I'm falling behind the times, or not a real designer.

I don't even like sketching that much. Occasionally I sketch out illustrations, but not really for layouts. Honestly it's too slow. I'm probably just not very good at sketching, but it's a lot easier for me to run through some ideas in my head, quickly create something in PS and then duplicate it if I want to try some variations.

If I'm designing something that I'm going to code, my mockups are not perfect. I don't waste time making sure everything is perfectly spaced and aligned correctly, because I'll make it perfect in code.

But if I'm designing something that someone else is coding (like at work), I usually make it pretty perfect, because developers don't always know that you thought it was a given that something should be perfectly aligned, centered or have 30px of spacing between each element etc. But even that doesn't take long because I have create a style guide and I have a psd with all our normal elements. If I'm adding a feature to an existing screen, I take a screenshot of it and then add it in. It might not be super flexible, but it's quick.

So what ever way you do things, if it works, is the right way.

I double-dog dare him to take a more complex project on without Photoshop. Especially when he's working with a team of developers that don't share the same vision he did.

is it just me or does every bootstrap website look the same? I can't stand looking at them anymore. I love how small frameworks like purecss.io try to stay away from anything that creates the look and feel of a website. Bootstrap and Foundation just dig in way too deep with their predefined panels and stuff. So that way all the website kinda look the same.

Stay tuned for my upcoming article, "How I built a website with a stick, a glass of water, and a tablespoon of soil."

Wow what a great explanation of the process. I really like how everything cleared up and became a more pleasurable viewing experience.

So what

Super useful article. Thank you.

Have been pushing towards similar process in agency that I work in. Interesting to see how important wireframes become when you throw out the middle-man (Photoshop). This method also shows the client how it’s more about function not the visuals.

I noticed you seem to have very fragmented SASS file structure, carefully divided between files. You have specific idea how you go about structuring stylesheets or it heavily depends on the project?

I wrote something similar around a year ago : https://medium.com/what-i-learned-building/76f8d1e67a4d

I feel my processes have moved on a lot since writing this. In other projects, I ran into some problems designing in the browser. My way of working is much more lean now, and changes for every project to best suit it's need. For me, that is the secret: it's about doing what's right for the project and not relying on a pre-defined process because it worked for your last project.

Some pointers below...

1. The big idea is still important. When you spend time prototyping, this is easy to forget. Working with frameworks like Bootstrap can be a restraint on creative thinking. Ideas are usually created on paper/whiteboards by groups of people. Don't get locked down in copying and pasting code from pre-made components and expect innovation.

2. Remember what your being asked to produce. If you deliver a working front-end instead of a set of flat PSD files then great, this is awesome for the client to test the experience and functionality on multiple devices. But if the client then skips paying for a front-end build because they feel they have something that is good enough, make sure you are not liable for a lower standard of code. If they ask for a new feature, you then need to code more and this might be fairly complex, time consuming and require help from an external team. Doing it in a design programme would then be much quicker and easier.

3. Your code would probably be a much higher standard if you built your front-end from finalised designs. Prototyping is essential in my opinion, but don't get this mentality mixed up with final code.

4. A lot of developers understand Photoshop much better than any other design programme. Although it may be more ideal for you to use Sketch or Ai, this isn't always an option.

Tweet me @lawsmith_

At Tastebuds.fm we stopped using Photoshop a long time ago for design. Everything was done in-browser (except for some logos that had to be bitmap). It's really not a big deal to circumvent the Adobe suite or even Sketch nowadays.

I designed the entire Tastebuds iOS app in Sketch, but of the things I designed on the actual site (I didn't have time to do all of it before I left the company) nothing on there touched Photoshop.