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 trialKeith Monaghan
9,494 PointsFrom 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
Ryan Carson
23,287 PointsHey Keith
Have you considered doing a mockup using markup and Bootstrap? Great way to get real fast!
Ryan
James Barnett
39,199 PointsHere 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:
- Practical Guide to Typography on the Web
- Great tips on typography
- [http://webdesign.tutsplus.com/articles/design-theory/understanding-visual-hierarchy-in-web-design/](Organize your page with a good hierarchy)
Study Color:
Finally, read a great book about design
Marc Casavant
Courses Plus Student 7,417 PointsFirst 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:
Patterns:
Unity in design:
Keith Monaghan
9,494 PointsFantastic! Thanks for the feedback.
I really appreciate all the resources. They are so very, very helpful.
Keith Monaghan
9,494 PointsThanks 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
Courses Plus Student 3,905 PointsI 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
39,199 PointsCheck 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
+1 to Ryan. Mockup in the browser. So fast so easy. Bootstrap is king.
Keith Monaghan
9,494 PointsThanks Ryan! Bootstrap was the right tool in this case.