Developers CAN make great designers
•Download as PPTX, PDF•
0 likes•229 views
My talk from Droidcon Stockholm on a few basics of design to help developers, and simplify their lives with designers
More Related Content
What's hot
Viewers also liked
Viewers also liked (19)
Recently uploaded
Recently uploaded (20)
Developers CAN make great designers
- 1. Before we begin One quick show of hands
- 3. Raveesh Bhalla Product Manager & Lead UX Designer @ Haptik Google Expert for UX/UI Design
- 4. I am an engineer, and I have proof
- 7. Most graduates move out of the engineering domain
- 12. Size
- 14. Color
- 16. Contrast
- 18. Alignment
- 20. Repetition
- 22. Resources • google.com/design/spec • webdesign.tutsplus.com/articles/understanding- visual-hierarchy-in-web-design--webdesign-84 • http://www.computerworld.com/article/2909897/mate rial-design-apps-android.html • medium.com/@raveeshbhalla
- 23. Tools I recommend • A Macbook • Sketch • Zeplin • Popapp
Editor's Notes
- A quick show of hands, who here hates their product manager or designers guts?
- This is what a typical day of working with them is like: they’ll just think of some crazy ass animation with things flying around the screen, leaving you with the hard work to actually get it done. And then after you’re done, they’ll realize it doesn’t actually look great.
- Fun fact, that’s literally the only time my degree has come of any use.
- People in tech circles tend to talk about how rare it is to find a person who can both design and develop: I don’t buy that.
- IIT, for those of you who don’t know, is a collection of the most prestigious engineering colleges in India where over half a million students compete to get into, with only a few thousand seats available. Kids from 7th or 8th grade actually start special classes to prepare themselves for the entrance examinations.
- Several key design positions at companies in India is filled with people with engineering backgrounds. I personally prioritise candidates for UI positions with an engineering background due to their technical understanding of platforms.
- A good understanding of visual hierarchy immediately makes you exponentially better at design, regardless of which design language you are dealing with. Visual hierarchy goes way back historically.
- Art is often about running wild with your imagination. Design is about constraints, put in place by what the product is, what the platform is, what is the device capable of, and more.
- Design is all about communication, where your goal is to make a user immediately feel at home, to understand at a glance what the app is capable of and what they need to do.
- The basis of visual hierarchy lies in our human desire to classify or group objects, based on implied relationships. Such as size, color, or shape.
- Size is the primary tool used by newspapers to establish a visual hierarchy. Most newspapers contain a crazy amount of information, but using size they’re able to quickly convey to the reader what is important, and the reader can scan through and find what they’re genuinely interested in, then go to a smaller typesize near that to get more information on a topic.
- The Material Design Spec has an extremely detailed section to guide in you in terms of what type size and weight to use for which section of your UI
- Maps rely almost entirely on color to establish a visual hierarchy and give the reader deeper information about a region, such as height of a region.
- Have a look at the Material Design color specs to see best practices for use of various colors from your palette in different places, such as the use of the pink accent color above for a TextInputLayout’s label and EditText’s underline.
- If you’ve seen the American TV Show Mad Men, which about advertising in the 1960s, there’s a scene where the male lead is completely flummoxed by the simplicity of a Volkswagen ad. They would always use a large image, and use a small bit of text at the bottom to get their message across. This was completely against anything that you’d see in magazines in those days, making the ad so much more powerful and different, and you couldn’t help but notice them. The reason I chose this image is the addition of the wind-up key, adding another contrasting element that makes you think “what’s this about?”, and entices you to read the text at the bottom.
- The Floating Action Button is a great example of the use of contrast in Material Design. In the spec, it’s simply called a “Promoted Action”, and you’re recommended to use just one such button at any point in the screen. The FAB’s design, with the use of a contrasting color and a powerful icon, can really draw the attention of users and make them perform an action you really want them to do.
- Going back to newspapers again, alignment is a really useful tool which helps you define the order in which you get your users to scan your content. Your goal with alignment is to really chart down the path in which their eyes move to quickly grasp all the information you have laid before them.
- Once again, Material Design offers very detailed information for you to help you align your UI elements perfectly.
- The text on the right is from my blog on Medium. Medium offers a very small set of options to the blogger to establish a visual hierarchy, when compared to other publishing platforms, yet always seems to be better designed. One of the reasons for that is repetition. Readers on Medium feel at home regardless of whose blog that they’re reading, as they jump from one recommended post to another. And, as a blogger, if I use some of the simple options to break repetition, like a quotation here, I can still design my blog to be something that a reader can quickly glance through and capture the important information.
- A lot of people have complained that material design is too strict and makes apps look very similar to one another. I tend to look at it the Medium way: yes, several components are similar across apps, but this makes it so much easier for a user to understand a new app that they might come across. In addition to that, there are enough tools available for you to customize the experience you want to provide to your users and create your own app’s identity.