Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Design

Keith Monaghan
Keith Monaghan
9,494 Points

From Idea to Paper -- How do I Make a Mock-Up That Doesn't Suck?

Do you ever have an idea that simply doesn't look good on paper? I have an idea for a web app but every mock-up that I draw seems flat.

What are your techniques for adding depth and action to your mock-ups?

9 Answers

Hey Keith

Have you considered doing a mockup using markup and Bootstrap? Great way to get real fast!

Ryan

James Barnett
James Barnett
39,199 Points

Here are some of my suggestions when working on a new concept:

Start out thinking hard about the use case Remember: The first rule of UX is you are not the user


Get some inspiration:

Take some inspiration from the physical world

"A designer knows he has achieved perfection not when there is nothing left to add, but when there is nothing left to take away." -- Antoine de Saint-Exupery


Study typography:

Study Color:

Finally, read a great book about design

Marc Casavant
PLUS
Marc Casavant
Courses Plus Student 7,417 Points

First off, the best way to arrive at a good mock-up is to not limit yourself to just a few ideas. Get inspired! Usually I like to listen to music, and hit up every design blog imaginable. You also want to make sure to start with a wireframe. The wireframe can have almost no imagery, you just need to have a plan for how you want to lay content out on the page. Once you have a wireframe, you can start playing around with a design in Photoshop/illustrator.. whatever program you are using. Not every idea works, so don't get too clingy with your original idea. If an idea is exceeding your artistic ability / technical knowledge of a program, do some tutorials similar to the image you are trying to make, you'll learn more about the program, and get more inspiration! Apply basic art concepts to your designs as well (Repetition, Focal Point, Proximity, Line/Shape, Continuance, Balance), and learn color theory which will help you understand how to create a harmonious color scheme. Learn typography as well, and how to mix fonts.

Useful tutorials:

http://vector.tutsplus.com/tutorials/tools-tips/quick-tip-typography-skills-basic-kerning/ http://www.noupe.com/design/mixing-multiple-fonts.html http://smashinghub.com/tips-for-mixing-and-matching-fonts.htm http://www.smashingmagazine.com/2010/11/04/best-practices-of-combining-typefaces/

Font Sites:

dafont.com fontsquirrel.com

Color Tools:

kuler.adobe.com

Inspiration:

www.webdesignledger.com

Patterns:

www.subtlepaterns.com

Unity in design:

http://webdesign.about.com/od/webdesignbasics/p/aaunity.htm

Keith Monaghan
Keith Monaghan
9,494 Points

Fantastic! Thanks for the feedback.

I really appreciate all the resources. They are so very, very helpful.

Keith Monaghan
Keith Monaghan
9,494 Points

Thanks Ryan, I've used Bootstrap on one project. Hadn't thought about using it to mock-up. I'll give it a try!

Nir Benita
PLUS
Nir Benita
Courses Plus Student 3,905 Points

I personally could not really relate to it, but Meagen Fisher talks about designing in the web browser.

Really interesting.

I was wondering, where might I learn basic Art/Design concepts ("Repetition, Focal Point, Proximity, Line/Shape, Continuance, Balance") on the web?

James Barnett
James Barnett
39,199 Points

Check out these online materials for a class on Design Layout

It includes among other sections:

For Repetition, Focal Point, Proximity check out http://urlnextdoor.com/ai/design-layout/week03.php

For Point, Line, and Shape check out http://urlnextdoor.com/ai/design-layout/week04.php

Deleted User

+1 to Ryan. Mockup in the browser. So fast so easy. Bootstrap is king.

Keith Monaghan
Keith Monaghan
9,494 Points

Thanks Ryan! Bootstrap was the right tool in this case.