Browser Designing or Mockups

Hi Dan:

If I'm designing something for myself, I just sketch really quick on a notepad the general layout. Then I might go into Adobe Kuler and set the color scheme and make sure there is some sort of pattern that works there. Then I pretty much do most of it in the browser. Since you're going to be making it responsive anyway, to me, that makes a ton more sense. Occasionally, I might make a very basic Photoshop mockup, nothing overly detailed, and that's good too.

If it's for a client, of course, you have to spend a ton of time doing mockups, but I try to avoid that really. (When working for others), the mockup process adds a ton of time to the whole deal, and I create more with CSS than I probably ever will with Photoshop.

My advice is don't worry if it's your own site for yourself, do it in the browser. If it's more someone else, play to whatever your strength is. I'm OK with Photoshop, but there are tons of Visual designers who are better at intricate details. I work faster iterating in the browser. Hide your weakness, play to your strengths.

My process is almost identical to John's.

I iterate faster using local dev and browser tools than I do with Photoshop/Keynote/Whatever. When I do things in PS I find that I will spend more time nudging pixels and adjusting things that will just end up being done in css again when I start coding.

It's really up to you. There is no wrong. There is only learning to do it better.

Hi,

I'm happy to do both really.

But often this can depend on the client and their requirements. Many clients will want to see designs before you jump straight into the building and wont always understand in browser designing. They like to feel part of the process and have their say on the design/project.

Personally I like to start on paper and sketch out any ideas, from there its either Photoshop, Illustrator or straight to code depending on whether the mockups are required.

I'm currently working on a large site with a client that trusts me and is happy for me to jump straight to the browser as we know the direction the design will be taking. The key is that how however you do your designing the client needs to be kept up to date and be able to track the progress as they are the ones paying you.

At the end of the day you need to find the best workflow for you! Try everything and see what you like, there is no right or wrong way to deliver your designs.

Thanks everyone for your advice and opinions. I was thinking what I could do to play my strengths and I was thinking that when. I have an idea in my head I can see it in my mind they way I want it to look but it is hard to get it into the browser. I was never a fan of sketches or wireframes but I think I may have to be. It might be easier for me to sketch it out and have something to follow when building it and checking it in the browser.

The problem that I am dealing with right now is the fact that I know what I want in my head but I sit down and open up my text editor and do our the basic structure and my mind goes blank.

Any advice?

I have an idea in my head I can see it in my mind they way I want it to look but it is hard to get it into the browser.

Pretty common issue!

The design doesn't always come straight away. Often I will work on the functionality when stuck on the design or if designing in browser and refine the design secondary, I find this way I am still producing and progressing the work, rather than getting tied up and frustrated with the design.

It might be easier for me to sketch it out and have something to follow when building it and checking it in the browser.

This too can be good too, following a design especially if signed off from a client can be the way to go, and is probably how many people will work. The plus here is that you dont get lost in the code side of the design and waste hours (or create bloated CSS) as you are recreating your mockup in HTML/CSS.

As a designer I find that I get inspired at random times and sometimes its just a case of getting stuff down when ever I feel at my best!

Mockingbird is a nice online wireframing tool. Quick to throw something together.