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

Hey Keith

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

Ryan

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:

• 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:

• Intro to Color on the Web
• Choose complementary colors
• Get just the right shade

Finally, read a great book about design

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

Fantastic! Thanks for the feedback.

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

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

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?

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

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

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