Recomendados
Más contenido relacionado
Similar a Beautiful & Useful
Similar a Beautiful & Useful (20)
Último
Último (20)
Beautiful & Useful
- 6. P add ing + About the human eye.
- 10. No.
- 12. What users want.
- 13. 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.
- 14. Go forth and build awesome things.
Notas del editor
- 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.
- 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 -->
- 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
- 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
- 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
- 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
- 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!
- 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
- 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
- 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!
- 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!
- 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
- Lets have some questions!