SlideShare a Scribd company logo
1 of 14
Download to read offline
Beautiful & Useful
Some	rules	of	thumb	for	building	software	
that	looks	and	feels	great	without	designers.
A. Guy
ash@ashguy.com /	@theashguy
SOME RULES
You	don’t	talk	about	fight	club.
Innovation
A	note	on	not	freaking	your	users	the	hell	out.
consistency
Making	design	easy.
P add ing +
About	the	human	eye.
Simplification.
Colour
What	things	look	like	to	everybody.
Font / Type
Opposites	attract.
No.
-Theft-
The	art	of	heist.
What	users	want.
THE
1. Only Innovate one thing in any design. Save this for your main mechanic. Everything else should be
established patterns.
2. Decide on a set of rules, and stick to them throughout. This helps establish brand, and focus your
user.
3. Whitespace is important. Include your padding rules in your consistency. Separate groups of things
by a larger gutter than things that should be grouped together.
4. Once you’ve got something, start looking at every single line & shape and ask yourself– what the
hell is this thing for?
5. Don’t rely on Colour to distinguish one thing from another, but do use as part of your solution.
Couple with pattern and shade. Lighten and darken 10% to create levels. Use swatches from Kuler.
6. Pair a Body and Header typeface. Make sure your body copy is at a min 14pt, but more like 16pt’s.
7. Friends don’t let friends use gradients.
8. Keep a design you love up while you work and constantly look at your design next to it. This will
stop you falling in love, and give you plenty of inspiration.
9. Never forget what the user is trying to achieve on any screen. Make sure you’re giving them
feedback on how they’re doing.
Go forth and build
awesome things.

More Related Content

Similar to Beautiful & Useful

Getting Sign Off Larissa Meek
Getting Sign Off Larissa MeekGetting Sign Off Larissa Meek
Getting Sign Off Larissa Meek
Carsonified Team
 
PRINCIPLES OF LOGO DESIGN.ppt
PRINCIPLES OF LOGO DESIGN.pptPRINCIPLES OF LOGO DESIGN.ppt
PRINCIPLES OF LOGO DESIGN.ppt
LitsKho
 

Similar to Beautiful & Useful (20)

Top Graphic Designing Hacks to Make You a Designing Pro Today
Top Graphic Designing Hacks to Make You a Designing Pro Today Top Graphic Designing Hacks to Make You a Designing Pro Today
Top Graphic Designing Hacks to Make You a Designing Pro Today
 
Identity Makeover
Identity MakeoverIdentity Makeover
Identity Makeover
 
Todorstoyanov.com - 22 logo design mistakes to avoid
Todorstoyanov.com - 22 logo design mistakes to avoidTodorstoyanov.com - 22 logo design mistakes to avoid
Todorstoyanov.com - 22 logo design mistakes to avoid
 
29 180330 Basic GSM (Graphic Standards Manual)
29 180330 Basic GSM (Graphic Standards Manual)29 180330 Basic GSM (Graphic Standards Manual)
29 180330 Basic GSM (Graphic Standards Manual)
 
Main task
Main task Main task
Main task
 
Principles of logo_design
Principles of logo_designPrinciples of logo_design
Principles of logo_design
 
Getting Sign Off Larissa Meek
Getting Sign Off Larissa MeekGetting Sign Off Larissa Meek
Getting Sign Off Larissa Meek
 
How to create a Logo on your smartphone.pptx
How to create a Logo on your smartphone.pptxHow to create a Logo on your smartphone.pptx
How to create a Logo on your smartphone.pptx
 
A Systematic Approach to Design Critique
A Systematic Approach to Design CritiqueA Systematic Approach to Design Critique
A Systematic Approach to Design Critique
 
Discussing Design: The Art of Critique
Discussing Design: The Art of CritiqueDiscussing Design: The Art of Critique
Discussing Design: The Art of Critique
 
Discussing Design: The Art of Critique
 Discussing Design: The Art of Critique Discussing Design: The Art of Critique
Discussing Design: The Art of Critique
 
Principles of good web design no1- unity
Principles of good web design no1- unityPrinciples of good web design no1- unity
Principles of good web design no1- unity
 
Ideas and Planning
Ideas and PlanningIdeas and Planning
Ideas and Planning
 
3 Rules Front End Developers Must Follow!
3 Rules Front End Developers Must Follow!3 Rules Front End Developers Must Follow!
3 Rules Front End Developers Must Follow!
 
PRINCIPLES OF LOGO DESIGN.ppt
PRINCIPLES OF LOGO DESIGN.pptPRINCIPLES OF LOGO DESIGN.ppt
PRINCIPLES OF LOGO DESIGN.ppt
 
Branding for nonprofits
Branding for nonprofitsBranding for nonprofits
Branding for nonprofits
 
Top 10 Things I Learned About Public Relations
Top 10 Things I Learned About Public RelationsTop 10 Things I Learned About Public Relations
Top 10 Things I Learned About Public Relations
 
Top 10 Things I learned in PR Practicum
Top 10 Things I learned in PR PracticumTop 10 Things I learned in PR Practicum
Top 10 Things I learned in PR Practicum
 
Being a designer
Being a designerBeing a designer
Being a designer
 
Help i need a designer!
Help i need a designer!Help i need a designer!
Help i need a designer!
 

Recently uploaded

一比一原版谢菲尔德大学毕业证成绩单如何办理
一比一原版谢菲尔德大学毕业证成绩单如何办理一比一原版谢菲尔德大学毕业证成绩单如何办理
一比一原版谢菲尔德大学毕业证成绩单如何办理
cyebo
 
Heuristic Evaluation of System & Application
Heuristic Evaluation of System & ApplicationHeuristic Evaluation of System & Application
Heuristic Evaluation of System & Application
Jaime Brown
 
Presentation on 3D Printing.pptx presentation
Presentation on 3D Printing.pptx presentationPresentation on 3D Printing.pptx presentation
Presentation on 3D Printing.pptx presentation
ajroy0196
 
Knowing, Understanding and Planning Cities- Role and Relevance Physical Plan...
Knowing, Understanding and Planning Cities- Role and Relevance  Physical Plan...Knowing, Understanding and Planning Cities- Role and Relevance  Physical Plan...
Knowing, Understanding and Planning Cities- Role and Relevance Physical Plan...
JIT KUMAR GUPTA
 

Recently uploaded (20)

一比一原版谢菲尔德大学毕业证成绩单如何办理
一比一原版谢菲尔德大学毕业证成绩单如何办理一比一原版谢菲尔德大学毕业证成绩单如何办理
一比一原版谢菲尔德大学毕业证成绩单如何办理
 
Claire's designing portfolio presentation
Claire's designing portfolio presentationClaire's designing portfolio presentation
Claire's designing portfolio presentation
 
Heuristic Evaluation of System & Application
Heuristic Evaluation of System & ApplicationHeuristic Evaluation of System & Application
Heuristic Evaluation of System & Application
 
Heidi Livengood's Professional CADD Portfolio
Heidi Livengood's Professional CADD PortfolioHeidi Livengood's Professional CADD Portfolio
Heidi Livengood's Professional CADD Portfolio
 
Recycled Modular Low Cost Construction .pdf
Recycled Modular Low Cost Construction .pdfRecycled Modular Low Cost Construction .pdf
Recycled Modular Low Cost Construction .pdf
 
Design lessons from Singapore | Volume 3
Design lessons from Singapore | Volume 3Design lessons from Singapore | Volume 3
Design lessons from Singapore | Volume 3
 
Presentation on 3D Printing.pptx presentation
Presentation on 3D Printing.pptx presentationPresentation on 3D Printing.pptx presentation
Presentation on 3D Printing.pptx presentation
 
Redefining Globalization, urbanisation and Localisation
Redefining Globalization, urbanisation and LocalisationRedefining Globalization, urbanisation and Localisation
Redefining Globalization, urbanisation and Localisation
 
BIT Khushi gandhi project.pdf graphic design
BIT Khushi gandhi project.pdf graphic designBIT Khushi gandhi project.pdf graphic design
BIT Khushi gandhi project.pdf graphic design
 
Abdulaziz Tariq Abdulaziz Mustafa CV 2024
Abdulaziz Tariq Abdulaziz Mustafa CV 2024Abdulaziz Tariq Abdulaziz Mustafa CV 2024
Abdulaziz Tariq Abdulaziz Mustafa CV 2024
 
Design Portofolios - Licensed Architect / BIM Specialist
Design Portofolios - Licensed Architect / BIM SpecialistDesign Portofolios - Licensed Architect / BIM Specialist
Design Portofolios - Licensed Architect / BIM Specialist
 
Knowing, Understanding and Planning Cities- Role and Relevance Physical Plan...
Knowing, Understanding and Planning Cities- Role and Relevance  Physical Plan...Knowing, Understanding and Planning Cities- Role and Relevance  Physical Plan...
Knowing, Understanding and Planning Cities- Role and Relevance Physical Plan...
 
Dos And Dont's Of Logo Design For 2024..
Dos And Dont's Of Logo Design For 2024..Dos And Dont's Of Logo Design For 2024..
Dos And Dont's Of Logo Design For 2024..
 
Eric Parein CV. Parein in English is best pronounced as PARE-IN
Eric Parein CV. Parein in English is best pronounced as PARE-INEric Parein CV. Parein in English is best pronounced as PARE-IN
Eric Parein CV. Parein in English is best pronounced as PARE-IN
 
spColumn-Manual design column by spcolumn software.pdf
spColumn-Manual design column by spcolumn software.pdfspColumn-Manual design column by spcolumn software.pdf
spColumn-Manual design column by spcolumn software.pdf
 
Spring 2024 wkrm_Enhancing Campus Mobility.pdf
Spring 2024 wkrm_Enhancing Campus Mobility.pdfSpring 2024 wkrm_Enhancing Campus Mobility.pdf
Spring 2024 wkrm_Enhancing Campus Mobility.pdf
 
Bit Dhrumi shah Graphic Designer portfolio
Bit Dhrumi shah Graphic Designer portfolioBit Dhrumi shah Graphic Designer portfolio
Bit Dhrumi shah Graphic Designer portfolio
 
Week of Action 2022_EIT Climate-KIC_Headers
Week of Action 2022_EIT Climate-KIC_HeadersWeek of Action 2022_EIT Climate-KIC_Headers
Week of Action 2022_EIT Climate-KIC_Headers
 
NO1 Popular kala jadu karne wale ka contact number kala jadu karne wale baba ...
NO1 Popular kala jadu karne wale ka contact number kala jadu karne wale baba ...NO1 Popular kala jadu karne wale ka contact number kala jadu karne wale baba ...
NO1 Popular kala jadu karne wale ka contact number kala jadu karne wale baba ...
 
iF_Design_Trend_Report_twentytwenrythree
iF_Design_Trend_Report_twentytwenrythreeiF_Design_Trend_Report_twentytwenrythree
iF_Design_Trend_Report_twentytwenrythree
 

Beautiful & Useful

Editor's Notes

  1. Been up for 48 hours making games Apologies for any yawning This is my presentation <Title> Housekeeping First attempt in this format Always relevant topic I’d like this to become a stock talk Ask for questions & feedback. I’m not an academic. Presentation is entirely experience based. Rules of thumb that I use. You can break them and do great design. I’m just here to increase your velocity and reduce your stress.
  2. Name, email, twitter, etc. UX/UI Focused Full Stack Dev, with a Business Background. Currently spend my time... Biarri Rail (Plug) ...Working with really smart super technical, non-designy people trying to make tools for use in incredibly complex environments by crusty old people in antiquated industries. Which is a hard problem, and hard problems are fun! Love of UX came from wanting to make games. Specifically Immersion Everyday Immersive Experiences This talk = raising the bar by helping more software projects move towards creating immersive experiences becasue -->
  3. I believe Anyone can be a great designer. Process of building great anything = time & iteration. Given 1000 times as long a newbie can do the work of an expert. Experts then are folks who have build up patterns and rules that get to that place faster. I’m here to give you some of my rules Reduce mistakes & Time This talk is about 9 things, Easy enough for me to explain Easy enough to understand Some are technical, some are more process, most are opinions all are useful. Without further Adieu 
  4. One of my favorite fantasy authors is an Australian chap– Ian Irvine. He does a lot of tips for writers, writing school stuff Read some of his articles “Reader expectations” …you only want to innovate on one part of your story. Build a world that feels familiar, that follows the same rules that your audience already knows, and use that to deliver the one obscure thing that creates interest. And I thought to myself… I’ll have that. Users hate friction, everything in your app creates it. UXer’s job is to reduce that friction. Rule: Save your innvoation for the core mechanic that makes whatever you’re building unique and great, and for the rest use stock standard patterns. For example: Apple, Google and Microsoft all have defined systems that play on the well established patterns taht you’re users understand. Bonus: Massively increased velocity / time spent on the important stuff. Double bonus: Reducing support burden on you will be way lower! Triple bonus: Not innovating too much helps early on in creating 
  5. I’m assuming everyone here is of a technical nature. Rule number 2 is about defining your design as rules! Everything on your screen should have a reason for being where it is, and looking how it looks, based in your rules. New devs confusion. Rules for type: Typeface, Sizing, Weights, How much type! Language stuff Rules for layout: Where navigation is and what kind it is, where and why to use widgets, spacing and positioning of elements. Rules for colours, and patterns: What does a green button mean in your app? For imagery: How are you logos & iconography be used? What needs icons? When you define these things, also tell the reader why. Don’t just say. It matters less what these are, and more that you have them! Get started by basing your document off one of those big ones that the apples / googles / microsoft’s of the world has already done for you. Spin up a git repo, and your favourite text editor, and write some markdown. Make decisions once. Advantages: Brand Velocity & Onboarding REDUCES FRICTION Some of the things in the rest of the talk make great candidates for establishing consistency rules 
  6. I don’t know why, but In my experience highly technical people often try to get as much onto the screen as possible at once. Pixels are a finite resource. Whitespace is your friend. Two things that whitespace gives you: Consistency tool to link like things. Associates common elements. Example. Describe panels, title, list, icon, icon content. Pull away all of the paneling. Rule: For any type of block on your page (title / button whatever), create rules for how it relates to the things around it. Interestingly, on mobile devices whitespace is your principal lever for layout. Also, as a bonus exercise why not try adding some whitespace to group common components in your code too. Onto the next one we have 
  7. Often when we’re designing on the fly, we block things out. By the time we fill up the screen with everything we want, there are going to be a lot of artifacts around the place. Don’t necessarily see them by that point. Steve jobs popularised the idea of minimalism and simplification in design. Simplification process is to ask for everything. If you’re experienced at this you can do it on the fly and still understand what the whole is going to be like, Rule: Once you’ve got any screen and ask yourself “Is this critical for me to achieve the thing that I need to achieve here”. If its not, remove it. If you don’t know, remove it. If it is, leave it. Make sure you do this for each line, each panel etc. Advantages: Less stuff to implement! Less friction for the user!
  8. Very brandy and emotional topic. Vibrancy. Don’t want to talk about that stuff, more the technical stuff. Think about colour as rules Start with a core pallette Kuler Image extraction Make sure it includes ones for your common button actions: positive, negative, warning Colour blindness. Green might mean stop! Know it was autumn because the leaves were a different shade of green. Shades & Patterns & Iconography Colour blindness plugins
  9. Terminology lessons! (Super technical subject) Font vs typeface. Snooty type designers will complain if you say it wrong. Baseline – the bit that runs along the bottom of all the words, that the hangy ones (or decenders) hang over. Leading – The space between the baseline of one line, and the baseline of the next line. Make it bigger than the font-size or its going to overlap! Combination of these two is like padding and whitespace for your fonts. Serif – The pokey bits designed to make words easier to read. Sans Serif – When you have a font without serifs… Different people cite either being easier to read in differen situations– no conclusive studies. When you’re designing as a general rule of thumb choose a header and a body typeface. For headers feel free to choose typefaces with flair– use them super big. For the body, keep them simple so it always obvious to the user which characters are which. Add to the brand Help with grouping mechanisms A note on sizes... Type is measured in points. Use 16 or optionally 14 for your body copy. Make headers bigger. This is good because people can actually read your content! Other folks don’t need to go get glasses! Reduces friction. Some good resources Google fonts. Adobe Typekit Fonts.com Beware of licensing
  10. Just no. Skip forward a slide. Skip back a slide. Ok ok, so gradients are one of my favourite topics to rant about– but the simplification is as follows. In the real world gradients are mostly understood to demonstrate depth. If you demonstrate depth incorrectly, it makes people feel uncomfortable. When building an interface you don’t want to make people uncomfortable. So in general, just don’t use gradients. Don’t even think about it and you’ll be fine. There are acceptable places to use gradients. When done right, they disappear. Advantages Not making your users feel gross without knowing why Reducing friction!
  11. There is nothing new under the sun, so don’t be afraid of a little theft. Two things I want to talk about. Use the big libraries The big guys have spent millions of dollars on research to figure out that a button should bubble when you click it Its free! Use it Having things you like When you spend a lot of time building something out, you’re going to be proud Which means you’ll be blind to the faults of the thing you’re building. Harder to build something that is actually polished. I ran a web shop that employed a bunch of designer. Have a similar design / tool open next to you while you work & constantly compare. Advantages: Saves time Helps ensure consistency Helps question the reasons for things Gives you ideas about how you could solve something more concisely So reduces friction!
  12. Begin with the end in mind / Never forget the goal of the user who will be using your screen. If you can get the job done with one click, do it No extra screens, including logos and junk. Decisions that the users have to make affect how quickly they can get things done. Limit the decisions they have to make. Pre-fill forms, if you cant lets show what it should look like Simplification principal, does this thing need to be here! Give the user feedback on how they’re progressing Work to be done Choose a metric that aligns with the goal Always display the current remaining work to be done front and center
  13. Lets have some questions!