You're a designer; CodeStock 2015
•
0 likes•673 views
Too many developers think they can never learn to design. While it may be true that you'll never be a master graphic artist, there are tons of tips and tricks to make sure your application or website looks professionally designed. In this talk, we'll cover the basics of good design, view examples of both good and bad design and discuss how to incorporate design thinking into your development process.
Recommended
Recommended
More Related Content
Recently uploaded
Recently uploaded (20)
Featured
Featured (20)
You're a designer; CodeStock 2015
- 1. You’re a Designer; I promise Bryan Robinson, bryanlrobinson.com
- 2. ` Bryan Robinson bryanlrobinson.com Who is This Guy? @brob
- 3. Bryan Robinson bryanlrobinson.com Let’s Define Some Terms
- 5. ` Bryan Robinson bryanlrobinson.com DESIGN Design is a funny word. Some people think design means how it looks. But of course, if you dig deeper, it’s really how it works. - Steve Jobs Defining Terms Source: http://www.impactinterview.com/2011/08/steve-jobs-on-product-design-2/
- 7. ` Bryan Robinson bryanlrobinson.com USABILITY 1. Learnability 2. Efficiency 3. Memorability 4. Errors 5. Satisfaction Defining Terms Source: Nielsen Norman Group
- 9. ` Bryan Robinson bryanlrobinson.com INFORMATION ARCHITECTURE Information architecture (IA) focuses on organizing, structuring, and labeling content in an effective and sustainable way. Defining Terms Source: usability.gov
- 11. ` Bryan Robinson bryanlrobinson.com INTERACTION DESIGN Interaction Designers strive to create meaningful relationships between people and the products and services that they use, from computers to mobile devices to appliances and beyond. Defining Terms Source: IxDA.org
- 13. ` Bryan Robinson bryanlrobinson.com INTERFACE DESIGN • Information architecture defines the structure of information. • Interaction design lets people manipulate and contribute to that information. • Visual design communicates these possibilities to people. The user interface is the sum of all these things. Defining Terms - Luke Wroblewski via http://www.freshtilledsoil.com/what-is-user-interface-design/
- 14. Bryan Robinson bryanlrobinson.com Let’s talk process Are you ready to interact?
- 16. ` Bryan Robinson bryanlrobinson.com Step 1: Who are the users (or user type)? Process Redesigning CodeStock.org
- 17. ` Bryan Robinson bryanlrobinson.com Step 2: What are our business objectives? Process Redesigning CodeStock.org
- 18. ` Bryan Robinson bryanlrobinson.com Step 3: What information does a user need to complete our business goals? Process Redesigning CodeStock.org
- 19. ` Bryan Robinson bryanlrobinson.com Step 4: Sketch Process Redesigning CodeStock.org
- 21. Bryan Robinson bryanlrobinson.com Design Guidelines Informational Layout | Aesthetic Judgement
- 23. ` Bryan Robinson bryanlrobinson.com WHITESPACE Whitespace doesn’t have to be white. It’s merely the space that does not contain content whether through padding, margins and gutters. Sometimes referred to as Negative Space. Information Layout
- 28. ` Bryan Robinson bryanlrobinson.com GROUPING Items grouped together on a page have either an implied or an inferred relationship to one another. Make sure you’re implying the relationship, don’t let your user make the inference. Information Layout
- 31. Grouping Bryan Robinson bryanlrobinson.com Source: Twitter for iOS Information Layout
- 32. ` Bryan Robinson bryanlrobinson.com VISUAL HEIRARCHY Using size, color, weight and layout to create a visual flow for a user through content. Information Layout
- 38. ` Bryan Robinson bryanlrobinson.com RULE OF THIRDS A theory of design that stems from art and photography stating that in a square format, placing the focal points of the composition at the axes of vertical and horizontal lines along the thirds of the piece. Information Layout
- 39. RULE OF THIRDS Bryan Robinson bryanlrobinson.com Source: http://webdesignledger.com/tools/rule-of-thirds-in-web-design Information Layout
- 40. RULE OF THIRDS Bryan Robinson bryanlrobinson.com Source: http://codropspz.tympanus.netdna-cdn.com/codrops/wp-content/uploads/2012/05/neve.jpg Information Layout
- 41. RULE OF THIRDS Bryan Robinson bryanlrobinson.com Source: http://www.webdesignerdepot.com/2014/01/design-to-the-nines-and-the-rule-of-thirds/ Information Layout
- 43. ` Bryan Robinson bryanlrobinson.com COLOR CHOICES Colors influence users strongly, but often in subconscious ways. Designers don’t pick colors because they’re pretty, they always have a plan utilizing color theory and color psychology. Rule of thumb: Stick to neutrals with one accent color if you’re unsure of your color skills. Aesthetic Judgement
- 44. COLOR PSYCHOLOGY/ COLOR THEORY Bryan Robinson bryanlrobinson.com Source: http://boutiquemc.co.uk/general/colour-pyschology-why-we-chose-our-brand-colours/ Aesthetic Judgement
- 45. COLOR PSYCHOLOGY/ COLOR THEORY Bryan Robinson bryanlrobinson.com Source: https://upload.wikimedia.org/wikipedia/commons/5/55/Color_star-en.svg Aesthetic Judgement
- 46. COLOR PSYCHOLOGY/ COLOR THEORY Bryan Robinson bryanlrobinson.com Source: kuler.adobe.com Aesthetic Judgement
- 47. COLOR PSYCHOLOGY/ COLOR THEORY Bryan Robinson bryanlrobinson.com Source: kuler.adobe.com Aesthetic Judgement CONTINUED READING AND TOOLS • Using Color Theory to Create a Better Color Palette • Color Theory for Designers, Part 1: The Meaning of Color • kuler.adobe.com • paletton.com/
- 48. ` Bryan Robinson bryanlrobinson.com FONT CHOICES Start using non-standard fonts. Open Sans (san serif), Droid Sans (san serif), Roboto (san serif), Josefin Slab (slab), Prociono (serif). Rule of thumb: Use a slab or serif font for an “accent” font (headlines) and a sans-serif for body copy. Aesthetic Judgement
- 50. ` Bryan Robinson bryanlrobinson.com SHAPE AND SYMMETRY Just like colors and fonts, various shapes and layouts convey different meanings. Aesthetic Judgement
- 51. Bryan Robinson bryanlrobinson.com Aesthetic Judgement SHAPE AND SYMMETRY Source: http://www.zevendesign.com/mood-lines-giving-designs-attitude/
- 52. Bryan Robinson bryanlrobinson.com Aesthetic Judgement SHAPE AND SYMMETRY Source: http://speckyboy.com/2013/02/06/symmetry-in-web-design/
- 53. Bryan Robinson bryanlrobinson.com Aesthetic Judgement SHAPE AND SYMMETRY Source: http://speckyboy.com/2013/02/06/symmetry-in-web-design/
- 54. ` Bryan Robinson bryanlrobinson.com Squint Test - Look at a design. Squint your eyes. Can you tell the hierarchy of the page? Provide a next step - Direct the user. They want to know where to go next. Calls to Action are your friend. The Noun Project - Get a subscription to The Noun Project. Unlimited icons for $10/month. Totally worth it. Subtle Patterns - Background patterns can be a great way of adding texture and class to your site, but they can be annoying to create even if you’re a designer. Subtle Patterns is an awesome resource for repeating patterns. Don’t Use Rotators - It’s been proven that rotators and carousels actually hurt conversion rates. Don’t use them. Be Careful with Convention - Just because Amazon does it, doesn’t mean it will work for you. Tips, Tricks and Advice
- 55. ` Bryan Robinson bryanlrobinson.com Be Careful with Convention
- 56. ` Bryan Robinson bryanlrobinson.com Be Careful with Convention Baseline Bordered Menu Unbordered MenuMenu and icon bordered Source: http://exisweb.net/mobile-menu-abtest
- 57. ` Bryan Robinson bryanlrobinson.com Be Careful with Convention Baseline Bordered Menu Unbordered MenuMenu and icon bordered Source: http://exisweb.net/mobile-menu-abtest X X
- 58. ` Bryan Robinson bryanlrobinson.com Be Careful with Convention Baseline Bordered Menu Unbordered MenuMenu and icon bordered Source: http://exisweb.net/mobile-menu-abtest X X
- 59. Bryan Robinson bryanlrobinson.com How do you get better?
- 60. Who to Follow Bryan Robinson bryanlrobinson.com Source: kuler.adobe.com How to Learn Who to Follow • Brad Frost - @brad_frost • Luke Wroblewski - @lukew • Una Kravets - @una • Jared Spool - @jmspool
- 61. ` Bryan Robinson bryanlrobinson.com Now’s the time… or… you know… later in one of these places: Twitter: @brob LinkedIn: http://linkedin.com/in/bryanlrobinson Questions?