Design for Non-Designers — Beyond Tellerand Dusseldorf 2018

BEYON D TELLERA ND 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) slides (also speakerdeck username)

OR N @limedaring I will be tweeting all links: @limedaring (“daring” — not “darling”) #talkpay

OR N @limedaring

OR N @limedaring image credit: Dan Saffer

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

OR N @limedaring We will cover:

OR N @limedaring We will cover: •The one visual design principle to remember — and how it applies to major design concepts.

OR N @limedaring We will cover: •The one visual design principle to remember — and how it applies to major design concepts. •An overview of the design process, to help beginners go from an idea to execution as fast as possible.

OR N @limedaring Not a beginner? This presentation will help you teach design.

OR N @limedaring Why should everyone know a bit about design?

OR N @limedaring Design for Non-Designers Basics of designing so you can make effective, lovely interfaces. #talkpay

OR N @limedaring

OR N @limedaring Design for Non-Designers Basics of designing so you can make effective, lovely interfaces. #talkpay

OR N @limedaring Let’s get started

OR N @limedaring Let’s talk about clutter

OR N @limedaring Pay attention to clutter #talkpay

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 definitely unconsciously noticed. 

OR N @limedaring Shortcut: Use integrated grid systems   and guides!

OR N @limedaring getbootstrap.com

OR N @limedaring foundation.zurb.com

OR N @limedaring getskeleton.com

OR N @limedaring mozilla.org/en-US/developer/css-grid/

OR N @limedaring

OR N @limedaring COLOR

OR N @limedaring Color hints: Keep your colors complementary.

OR N @limedaring

OR N @limedaring Color hints: Keep your colors complementary. 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 Shortcut: Use color palette websites!

OR N @limedaring color.adobe.com

OR N @limedaring material.io

OR N @limedaring colormind.io #talkpay colormind.io

OR N @limedaring

OR N @limedaring TYPOGRAPHY

OR N @limedaring Keep the number of fonts low — two different fonts is usually a good rule of thumb.

CO DE EURO PE T RAC Y O S B
OR N @limedaring

OR N @limedaring Keep the number of fonts low — two different fonts is usually a good rule of thumb. Use fancy/display fonts sparingly —   can be very cluttery.

OR N @limedaring

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

OR N @limedaring Shortcut: Use curated font websites!

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

OR N @limedaring fontpair.co

OR N @limedaring

OR N @limedaring WHITE  SPACE

OR N @limedaring The ultimate clutter reducer

OR N @limedaring

OR N @limedaring White space makes a website feel more professional and luxurious.

OR N @limedaring

OR N @limedaring White space makes your website easier to use —   affecting your bottom line.

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

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

OR N @limedaring

OR N @limedaring vs sign up email address I believe folks who know a bit about design will be more likely to hire a professional designer when the time is right. I’m a designer, and even I hire designers for things bigger than me. And if you agree, you should join my newsletter. I believe folks who know a bit about design will be more likely to hire a professional designer when the time is right. I’m a designer, and even I hire designers for things bigger than me. If you agree, you should join my newsletter.

OR N @limedaring

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

OR N @limedaring This is where you   should pay attention to   data and analytics.

OR N @limedaring CONTENT

OR N @limedaring Content hints: • Less is more.

OR N @limedaring Please note that although Chrome is supported for both Mac and Windows operating systems, it is recommended that all users of this site switch to the most up-to-date version of the Firefox web browser for the best possible results.

OR N @limedaring For best results, use the latest version of Firefox. Chrome for Mac and Windows is also supported. Please note that although Chrome is supported for both Mac and Windows operating systems, it is recommended that all users of this site switch to the most up-to-date version of the Firefox web browser for the best possible results.

OR N @limedaring Content hints: • Less is more. • Big paragraphs are a sign of clutter.

OR N @limedaring Content hints: • 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 Headlines hints: • Keep them succinct. • Use natural, friendly language. • Talk benefits, not details.

OR N @limedaring

OR N @limedaring IMAGES & IMAGERY

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

OR N @limedaring

OR N @limedaring unsplash.com unsplash.com

OR N @limedaring photopin.com photopin.com

OR N @limedaring fiverr.com

OR N @limedaring

OR N @limedaring ON THE IMPORTANCE OF IMITATION

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

OR N @limedaring

OR N @limedaring THE 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 find and use.

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

OR N @limedaring Practice, practice, practice.

OR N @limedaring tinyurl.com/hellowebdesign #talkpay

OR N @limedaring

OR N @limedaring Thank you! Chat with me online: @limedaring

Design for Non-Designers — Beyond Tellerand Dus...

Design for Non-Designers — Beyond Tellerand Dusseldorf 2018

More Decks by Tracy Osborn

Other Decks in Technology

Featured

Transcript