Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

Design

Dan Ridley
PLUS
Dan Ridley
Courses Plus Student 14,839 Points

Browser Designing or Mockups

Hello everyone,

I wanted to see how everyone feels about mockups or designing the browser. Which one do you prefer and why?

This is something I am very interested in because I never know which way to go and I would like to see how my fellow member fell.

Talk to you all soon

6 Answers

John Locke
John Locke
15,479 Points

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.

Michael Gillihan
Michael Gillihan
11,774 Points

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.

Dave Campbell
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Dave Campbell
Front End Web Development Techdegree Graduate 31,314 Points

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.

Dan Ridley
PLUS
Dan Ridley
Courses Plus Student 14,839 Points

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?

Dave Campbell
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Dave Campbell
Front End Web Development Techdegree Graduate 31,314 Points

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.