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.
3. 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/
6. Bryan Robinson
bryanlrobinson.com
WIREFRAME/SKETCH
A way of solidifying a page’s layout utilizing
placeholders in lieu of imagery and content in order to
rapidly define information architecture for a page.
Defining
Terms
Source: My Own Brain
7. 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
8. 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/
22. 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
32. 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
33. RULE OF THIRDS
Bryan Robinson
bryanlrobinson.com
Source: http://webdesignledger.com/tools/rule-of-thirds-in-web-design
Information
Layout
34. RULE OF THIRDS
Bryan Robinson
bryanlrobinson.com
Source: http://codropspz.tympanus.netdna-cdn.com/codrops/wp-content/uploads/2012/05/neve.jpg
Information
Layout
35. 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
37. Bryan Robinson
bryanlrobinson.com
COLOR PSYCHOLOGY AND THEORY
Colors influence users strongly, but often in
subconscious ways. Designers don’t pick colors
because they’re pretty, always have a plan.
Aesthetic
Judgement
40. 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
46. Bryan Robinson
bryanlrobinson.com
Squint Test - Look at a design. Squint your eyes. Can you tell the
hierarchy of the page?
Don’t Use Rotators - It’s been proven that rotators and
carousels actually hurt conversion rates. Don’t use them.
The Noun Project - Get a subscription to The Noun Project.
Unlimited icons for $10/month. Totally worth it.
Provide a next step - Direct the user. They want to know where
to go next. Calls to Action are your friend.
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
reason for repeating patterns.
Tips and
Tricks