Prioritize your design efforts so that you’re satisfying all baseline requirements first. Then AND ONLY THEN can you move on to fancier things like custom illustrations and animation.No one cares what color the stitching is on the leather seats of your fancy concept car if it doesn’t even have wheels yet.

Prioritize your design efforts

World-class products have little to no animation at all: Facebook. Salesforce. Medium.These products are worth billions and billions and billions of dollars because they solve problems and deliver value, not because they have cute animations.Start by spending your time delivering exceptional value through a best-in-class user experience.

No one cares about animation

Don’t spend your time being fancy for things that don’t need to be reinvented.

Don’t reinvent the wheel

In the spirit of not reinventing your entire being, make yourself some design templates.You’ll save yourself seven metric boatloads of time.

“Templatize” your work

The more consistently you design, the faster you’ll become.&nbsp;For one thing, you’re dramatically reducing the number of design decisions you have to make along the way.

 Consistency begets efficiency

In order to work faster, you’ll have to create shortcuts for yourself. These shortcuts can be tangible things like design resources, or more intangible like establishing and following a set of design principles.As you become faster, consistency will naturally follow.

Efficiency begets consistency

If you can deliver value to the user, you will create customers who will drive value to the business.Solve the right problem for the right person and you’ll be golden.

Business and user value usurps EVERYTHING

Visuals alone won’t carry a great design very far. They are really only about 20% of the entire presentation process.The rest? Well, that’s storytelling. If you don’t hook your audience with a compelling story, demonstrate business value, and speak on behalf of the user, then you will fail.

Great designs will fail with bad presentation

Beautiful design? Awesome! Didn’t launch? Failure.In order to be considered a successful designer, you have to actually design something that gets built.

Get. It. Built

Quick Note: I learned all of this from amazing designers like you, fantastic mentors, and lots of trial and error. If you learn something from this article, share it with another designer. I’ll love…

Stashed ideas

Here’s everything I’ve learned from designing 10,000+ UI screens as a lead product designer.

According to new research from the Kellogg School, how data are visualized can significantly impact our interpretation of what we’re seeing sometimes for the worse. Our efforts to simplify charts by grouping data into smaller numbers of “buckets” (say, two bars on a chart as opposed to ten) seemed to lead people to mistake correlation for causation. Graphs can be powerful, but it’s imperative that you know how to pick the right one for the right data. “You can lead your colleagues and customers to think more rationally about these kinds of problems.”

Correlation isn't causation

An experiment was done to find out whether these styles(bar charts, line charts, scatterplots, and plain text) differ in how "casual" they make the data appear to people. 4 correlations were chosen to display visually. 4 different visualizations for each scenario. Each participant saw 4 styles one representation of each scenario. After they controlled for the relative plausibility of each scenario, the type of style didn’t observably impact ratings For the causal statements: Participants rated information they saw in bar charts as the most causal and scatter plots as the least causal

Line Charts, Circles and Bars 📈📊

The same experiment was done, this time they developed bar charts, line charts, and scatterplots with three different levels of aggregation. This time the type of chart had only a small effect on participants’ ratings of causality. Much more significant, however, was the effect of aggregation level. Across all different visualization styles, people saw aggregated data as more causal than less aggregated data.

More Aggregation, More Assumptions of Causality

Be mindful when you aggregate, because the assumption people have may become a causal one. So think carefully about how you present your data and maybe iterate with your own design team or with your data analysts so people don’t misinterpret what you’re trying to say. Even the most sophisticated tool rarely, on its own, identifies causation. “It’s just really, really good at finding trends. So if you see an exciting trend, don’t automatically assume causality, Shapiro cautions instead, look at it skeptically.

How to Visualize Responsibly

Some data-visualization techniques lead us to assume causality where it doesn’t exist.

Sep 27 - Oct 3rd

See an Exciting Trend in That Chart? Proceed with Caution.

Designers should always ask themselves:&nbsp;<ul><li>Why is this here?&nbsp;</li><li>Does this make sense?&nbsp;</li><li>What other possibilities can I explore?&nbsp;</li></ul>Great designers know how to explore the variety of possibilities of an interface layout and the potential tradeoffs.

UI Principle #1: Clarity comes first.

We've all used a website or app where we try to click a button and wonder if the system registered the click. Or put otherwise: every action needs a reaction. If you’re a web developer, for example, changing the: hover state of a button is a common form of feedback.&nbsp;

UI Principle #2: Provide clear, meaningful feedback.

Consistency and structure will make your users feel at home. Consistency is where the interface elements or the language is placed throughout the product. As a designer, consider how you maintain consistency throughout your app. You can design your app using a consistent grid system such as the 8-point grid system or maintain a consistent colour scheme and navigational elements across screens.

Principle #3: Consistency matters.

There’s no need to reinvent the wheel if the wheel is doing a great job.&nbsp; For example:<ul><li> If you're unsure if an icon accurately represents a word, use the word in its place. </li><li>Stick to common colour patterns, such as a shade of red to warn/alert a user, or green to mark something complete. </li><li>When it comes to reading blocks of content, use the F-Shaped reading pattern. It means the most important content is placed at the top left corner.</li></ul>

Principle #4: When in doubt, use established design patterns.

Visual hierarchy is the arrangement of elements in a way that implies relative importance. It’s the designer’s effort to guide the order in which the eyes perceive the information presented.&nbsp;The way we perceive the importance of information is affected by several factors:<ol><li>Typography</li><li>White space (negative space)</li><li>Colour</li></ol>

Principle #5: Use visual hierarchy.

Good typography makes it easier to read. It consists of the following qualities:<ul><li>Legibility: Each letterform is distinguishable from one another.</li><li>Readability: It is dependent on how you manipulate a particular typeface.</li><li>Line length. If the line is too short, the reader's eye jumps from line to line, making it difficult to absorb information. The same is true if the line length is too long.</li><li>Never centre large blocks of copy. It is much easier to read text that is left-aligned.</li></ul>

I. Typography

White space helps with readability and comprehension. A study (LIN, 2004), found that good use of white space between paragraphs and in the left and right margin increases comprehension by almost 20%.&nbsp; A lot of people believe white space depends on 'taste' but we can use it intentionally to create a strong hierarchy.

II. White space (Negative Space)

Warm colours come towards you, while cool colours fade into the background. For example, a warm red can be used to bring the call-to-action forward, while a cooler blue can be used to recede the navigation further into the background. The more colours there are, the less impact each individual colour will have.&nbsp;&nbsp;

III. Color

<ul><li>At the most basic forms, UX design is what makes an interface useful.</li><li>UI design is what makes an interface beautiful, including a blend of visual hierarchy and interface elements.</li></ul>To help understand what makes a great interface, one should understand that the UI design is just one layer of the entire design process.

UI and UX

<ol><li>Strategy: Here, different research methods help to grasp the user's needs and how your product fits within a business context.</li><li>Scope: Defining functional specifications and content requirements.</li><li>Structure: Ideas should start to form a structure. Information architecture focuses on how the information is organised. User flows map out how users will move through the app.</li><li>The skeleton plane tries to achieve the structure of an interface design and information design.</li><li>Surface: This plane strives for a great sensory experience and visual design. This is where UI designers do the bulk of their work.</li></ol>

UX can be understood in five primary planes

If you’ve done any kind of research about software design, you’ve probably heard of the terms “UI” and “UX”. But what separates UI from UX? At their most simple forms, UX design is what makes an…

Crash Course: UI Design

We use small artboards while the devices we design for are huge. For example:<ul><li>The iPhone XR has a Retina display that has twice as many pixels per inch (ppi) as a regular screen, meaning the artboard is rendered at twice as many pixels.</li><li>On the iPhone X, the artboard is rendered at 3 times as much, since it has a Super Retina display and 3 times as much ppi.</li></ul>Designing for the smallest size allows scaling assets into the various sizes the different devices require while maintaining pixel-perfect rendering. 1 pt can be translated into 1,4 or 9 pixels at the @1x, @2x, and @3x sizes.

Pt  = point

<ul><li>It scales perfectly in all the different screen displays (including android’s @0.75 and @1.5).</li><li>Apple and Google advise so.</li><li>It's a good basic unit to work with. 4 and 8 are easily multiplied, are flexible and consistent.&nbsp;</li></ul>

Why the 8pt grid

While the font sizes can vary and move away from the 8 multiplication, the line height will not.&nbsp; For example, the Paragraph font size can be 15 pixels, but the line height should be a multiplication of 8, so 24px is an acceptable value.&nbsp;

Typography

Icons designed on an 8pt based grid will scale perfectly. If you want to use icons in a different size, one recommendation is to design on a 16 x 16 pixel grid or a 20 x 20 grid. This way, you're covered for any size:16, 20, 24, 32, 40 etc.

Iconography

The standard Bootstrap grid is a 12 column layout, with a 15px margin on each side of the column, resulting in a 30px gutter between columns plus 15px to the left and right of the grid.&nbsp; The entirety of the grid is called Container. A container can be either fluid or responsive in size. A fluid container will always take the whole available width. <ul><li>Customising for a desktop: Each column should be 72px wide, with a gutter of 24px or 32px.</li><li>Designing for mobile is up to you: Not all mobile devices' width dimension is divisible by 8. 12 columns aren't practical for narrow screens.&nbsp;</li></ul>

Horizontal Rhythm

Rows should be 8px tall.&nbsp; Maintaining a vertical rhythm when designing for mobile (web or apps) is vital since there isn’t much horizontal rhythm to work with. A typographic system that is designed based on the 8pt grid will sit wonderfully on an 8pt vertical grid.&nbsp;

Vertical Rhythm

... using the extended framework for the 8pt grid: Typography, Icons and Layout. The 8 point grid is the best go-to grid and can be applied to most digital design projects, especially product design.

Start your UI project right

Start your UI project right with this extended framework for the 8pt grid: Typography, Icons and Layout. This article is the 1st in a two part series — to the next chapter in which I demonstrate how…

The comprehensive 8pt Grid Guide

Material Design is continually evolving. The style of the Material text fields changed in 2017 for the following reasons:<ul><li>Users didn't know that they could interact and click on the text field (the most common way users enter and edit text in forms and dialogues).</li><li>The line under the old text fields was confused with a divider.</li><li>The label and input were confused with body text.</li></ul>

How data improved Google’s text fields

Two studies were conducted to improve the usability of text fields and to find out which text field variable to change. <ul><li>The first study aimed to get a sense of the design styles that worked best instead of finding a single best individual text field.</li><li>The second study aimed to determine what the new Material text field should look like, such as the "box style", label location, contrast, and border styles.</li></ul>

Improving the text field

The results of the two studies showed that these elements of text fields were of most value:&nbsp;<ul><li>Enclosed text fields with a rectangular shape performed better than those with a line affordance.&nbsp;</li><li>The text field box should be represented with a semi-transparent fill and a bottom line. Or it should be a fully transparent fill and an opaque stroke.&nbsp;</li><li>The Colour contrast of the text field’s lines or strokes met the minimum 3:1 contrast ratios with the background.&nbsp;</li><li>Label text should be placed within the bounds of the text field box.&nbsp;</li><li>Text fields should have rounded corners.&nbsp;</li></ul>

Main findings

This article was co-written with Michael Gilbert, Senior User Experience Researcher on the Material Design team. Dave Chiu , Staff Interaction Designer, and Sameer Bansal, User Experience Designer…

productdesign

Prioritize your design efforts

Here’s everything I’ve learned from designing 10,000+ UI screens as a lead product designer.

Correlation isn't causation

See an Exciting Trend in That Chart? Proceed with Caution.