Design for Non-Designers: Self Conference

SELF CO NFERENC E T RAC Y O S B
OR N @limedaring Design for Non-Designers Basics of designing so you can make effective, lovely interfaces.

OR N @limedaring Hi, I’m Tracy! @limedaring (daring, not darling)

OR N @limedaring

FLU EN T CO NFER ENC E T RAC Y
OS B OR N @limedaring

OR N @limedaring

OR N @limedaring image credit: Dan Saffer

OR N @limedaring Design: Making an interface that   works well.

OR N @limedaring

OR N @limedaring How can we create effective, basic designs?

OR N @limedaring Let’s talk about clutter

OR N @limedaring Fastest way for better looking designs: Cut down on clutter.

OR N @limedaring

OR N @limedaring grid

OR N @limedaring Line things up — pixel differences are deﬁnitely unconsciously noticed. 

OR N @limedaring

OR N @limedaring color

OR N @limedaring Color principles Keep your colors complimentary. Use mostly neutrals + one brighter color for important bits.

OR N @limedaring https://www.smashingmagazine.com/2016/04/web-developer-guide-color/

OR N @limedaring

OR N @limedaring fonts

OR N @limedaring Keep the number of fonts low — two different fonts is usually a good rule of thumb. Use fancy/display fonts sparingly — very cluttery. Vary weights (bold), style (italics), and transforms (uppercase, etc.) to differentiate bits.

OR N @limedaring http://hellohappy.org/beautiful-web-type/

OR N @limedaring

OR N @limedaring white space

OR N @limedaring The ultimate clutter reducer

OR N @limedaring

OR N @limedaring “By replacing the extra links around the Add to Cart buttons with whitespace, Xerox saw a 20% improvement in engagement, 5% boost in products added to cart, and a 33% improvement in customers continuing through purchase.” https://studio.uxpin.com/blog/ux-case-study-designing-whitespace-to-improve-conversions/

OR N @limedaring

OR N @limedaring Reduce visual clutter, by keeping the number of fonts and colors low, add white space, and line things up. Aim for a “clean” design.

OR N @limedaring User experience principles

OR N @limedaring What’s the most important   action on your design? Make it easy to ﬁnd and use.

OR N @limedaring

OR N @limedaring Pay attention to your goals. Make them easy to ﬁnd and use.

OR N @limedaring Content principles Less is more. Big paragraphs are a sign of clutter. Break into bullets if you can.

OR N @limedaring We made a bunch of changes: The registration chapter has been split in two, between adding registration and then associating users with objects. The chapter was giant before so this makes it more manageable. Screenshots of the admin have been updated to reflect the new Django 1.9 styles. The few minor typos have been fixed. Updated the version of django-registration-redux that we use to 1.3. Last but not least, the Introduction has been updated. We made a bunch of changes: • The registration chapter has been split in two, between adding registration and then associating users with objects. The chapter was giant before so this makes it more manageable. • Screenshots of the admin have been updated to reflect the new Django 1.9 styles. • The few minor typos have been fixed. • Updated the version of django- registration-redux that we use to 1.3. • Introduction has been updated.

OR N @limedaring We made a bunch of changes: • The registration chapter has been split in two, between adding registration and then associating users with objects. The chapter was giant before so this makes it more manageable. • Screenshots of the admin have been updated to reflect the new Django 1.9 styles. • The few minor typos have been fixed. • Updated the version of django- registration-redux that we use to 1.3. • Introduction has been updated. We made a bunch of changes: • The registration chapter has been split in two, between adding registration and then associating users with objects. The chapter was giant before so this makes it more manageable. • Screenshots of the admin have been updated to reflect the new Django 1.9 styles. • The few minor typos have been fixed. • Updated the version of django- registration-redux that we use to 1.3. • Introduction has been updated.

OR N @limedaring We made a bunch of changes: • The registration chapter has been split in two, between adding registration and then associating users with objects. The chapter was giant before so this makes it more manageable. • Screenshots of the admin have been updated to reflect the new Django 1.9 styles. • The few minor typos have been fixed. • Updated the version of django-registration- redux that we use to 1.3. • Introduction has been updated. We made a bunch of changes: • The registration chapter has been split in two, between adding registration and then associating users with objects. The chapter was giant before so this makes it more manageable. • Screenshots of the admin have been updated to reflect the new Django 1.9 styles. • The few minor typos have been fixed. • Updated the version of django- registration-redux that we use to 1.3. • Introduction has been updated.

OR N @limedaring

OR N @limedaring Headlines: Talk beneﬁts, not details. Keep it short. Use natural, friendly language.

OR N @limedaring

OR N @limedaring Images and imagery

OR N @limedaring Images: Stock photos usually look like stock photos. You can accomplish a lot with just type and screenshots. Remember to pay attention to ﬁle size. Don’t forget retina-quality images.

OR N @limedaring

OR N @limedaring unsplash.com

OR N @limedaring

OR N @limedaring You don’t need to   be original

OR N @limedaring Great designers steal   (and use shortcuts) #talkpay

OR N @limedaring

OR N @limedaring Quick overview of a design process

OR N @limedaring 1.  Collect inspiration and   sketch ideas.

OR N @limedaring

OR N @limedaring 2.  Mock it up?

OR N @limedaring

OR N @limedaring 3.  Build it.

OR N @limedaring

OR N @limedaring My thought process, every time:

OR N @limedaring My thought process, every time: “crap crap crap crap crap crap crap crap crap crap crap crap crap crap crap crap crap crap crap crap crap crap crap crap crap crap crap   … yes!”

OR N @limedaring This is only the starting point!

OR N @limedaring Reduce visual clutter — Keep the number of fonts and colors low. Add white space. Line things up. Keep content short and easy to skim.

OR N @limedaring Make sure your goal is easy to ﬁnd and use.

OR N @limedaring Keep your content simple, friendly,   and to the point.

OR N @limedaring Practice, practice, practice.

OR N @limedaring hellowebapp.com/web-design

OR N @limedaring Thank you! @limedaring

Design for Non-Designers: Self Conference

Design for Non-Designers: Self Conference

More Decks by Tracy Osborn

Featured

Transcript