Tracy Osborn, @limedaring
- Background:
- Wedding lovely
- Learnt Python, Django
- Insight into state of programming tutorials…
- …led to book series: Hello Web App
- Now…
- How to teach design to programmers
- Just enough design to create better interfaces
- Tips
- Clutter
- Cut down on it == fastest way to better design
- Widget
- Grid == lining things up, misalignment looks like clutter
- Bootstrap grid
- Color
- Complimentary
- Mostly neutral, + 1 brighter
- Smashing Magazine article
- 💥 HACK: colourlovers.com 🇬🇧
- Fonts
- No more than 2 per website
- Cleaner fonts to avoid clutter
- Vary weights
- HACK: beautiful web type, typewolf
- Other ways to reduce clutter
- Whitespace! Less ⬇️ is more ⬆️
- Hacker news needs more
- NYT redesign, more whitespace between columns
- Can help site perform better
- Whitespace! Less ⬇️ is more ⬆️
- TL;DR Reduce visual clutter:
- No. fonts, colors low, add whitespace, line things up
- User experience guidelines
- Make it easy to find and use primary action
- Brighter colors for primary action
- Pay attention to your goals, use analytics
- Make it easy to find and use primary action
- Content
- People don’t read on the web, they skim
- Break big paragraphs into bullets
- Bold them important bits
- Add whitespace
- Headlines
- Short, concise, focus on benefits not details
- Natural, friendly. Don’t talk like a 🤖
- Again, helps with conversion rates 📈
- Philosophy
- Good artists copy, great artists steal
- Not sure if I’m a good developer or just great at Googling 😆
- Find a design you like, try to pick out what they’re doing well, train your design mind
- Thought process:
- “crap crap crap crap crap crap crap crap crap crap crap crap crap crap … yesssss!” 😆
- Not a bad designer… simply a designer ❤️
- This ☝️ is just the start 💥
- Practice, practice, practice
- hellowebapp.com/web-design
- Clutter
Wed Jun 29 13:58:10 PDT 2016