Notes about Design
According to Joe Natoli materials
Design
Design is solvilng problems. Not drawing pictures. Bad design have consequences. The principles of good graphic design are the same principles that dictate good UI design.
Don’t look at themes: Themes look nice but they offer no explanations of what, how and why.
These collections don’t tell us anything about the problems they were created to solve.
We have no idea how decisions were made to use/implement these examples.
We’re looking at pretty pictures, but we have no sense of whether what we see is appropriate.
Don’t look for inspiration.
I want you to understand that you will not find inspiration looking at the work of others.
What you will find is someone else’s solution to someone else’s problem.
The problem you have to solve belongs exclusively to you, your client and your users.
Do not seek to follow in the footsteps of the wise. Seek what they sought. Matsuo Basho
Don’t look at trends
- Designers are adopting the look without considering whether it’s appropriate for the situation, or whether people will understand what they see.
Design vs. decoration
Designer: thinks hard about the appropriateness of the visual decisions s/he makes, and those decisions are informed by research, investigation and fact.
Decorator: relies on his/her instincts as to what looks good and what doesn’t. Most designers who’ve never learned the timeless principles of design are in this category.
Context of use is the key. Stop solving other people’s problems.
5 planes of UX
| Planes | |
|---|---|
| Surface | Visual UI design |
| Skeleton | Navigation + layout |
| Structure | Information architecture |
| Scope | Requirements/specs |
| Strategy | User needs/biz goals |
Users are most often frustrated and confused when confronted with visual form that strictly reflects technical function. Implementation model reflects technology Represented model what design & dev create better closer to Mental model reflects user’s understanding. As users, we don’t care how it works. Our focus is on the experience specifically, our expectation of that experience. Form should be determined by success criteria * not by function or personal aesthetic preferences. Function is only a single, isolated aspect of what drives + influences form.
Form doesn’t (and shouldn’t) follow function.
“Every force evolves a form. Mother Ann Lee”
Audience needs
Client desires
Ethical obligations
Aesthetic inclination
Technology constraints
Cultural presuppositions
Functional requirements
Material properties
Avaliable time
Avaliable budget
Avaliable resources
The form of a digital product is also the result of an elaborate balancing act between: UI design, information architecture, front-end html/css, middle tier logic, bachend data structures, programming and processes Don’t use form follows function as a prescription. On small screens, less is truly more.
If it looks too complex, we assume it’s hard to use (or at least time-consuming)
Icons without labels are worse than labels alone
Designers believe that icons or pictures provide a greater degree of recognition while saving screen space.
In fact, they often go unused * because they’re vague.
Less chrome means users have work harder to discover it, particularly when it’s hidden beneath a gesture.
If an opportunity to interact isn’t visible, people assume it isn’t available.
Five rules for small screen design
Focus on context of use.
Simplify: each screen should contain one primary action.
Design for thumbs.
Design for fat fingers: controls and their associated tap targets should be a minimum of 9mm (48px) in diameter.
Minimize the need to type.
Principles of Design
Balance
Balancing any layout means arranging positive elements and negative space so that no one area of the design overpowers the others (unless it’s supposed to). Everything works and fits together. When a design is unbalanced, the individual elements compete with the whole.
Rhythm
Rhythm occurs when the intervals between elements are predictable — and similar in size, shape and length. When elements repeat at regular intervals, the visual rhythm speeds identification and the user’s ability to quickly: Infer What the elements are. Understand What they do.
Harmony
When visual elements are in harmony, they relate to and complement each other. Harmony is a big part of What holds individual elements together visually, to form a greater, cohesive whole. Harmony comes largely from rhythm and from repetition. Repetition re-emphasizes visual elements, connecting and creating areas of attention. Harmony is a visual “echo”. Harmony is directional. Good design is held together by harmony.
Dominance
What’s the first thing you see? Where is your attention drawn? Dominance is achieved by emphasizing one or more visual elements. This creates a focal point, where most people will instinctively go at first glance. Dominance creates an entry point in the design; a starting from which you can lead the viewer to other parts of the screen. Dominance enables and directs flow. From a primary dominant element, design flow is achieved by creating elements with secondary and tertiary dominance. In other words, hierarchy. Dominance relies on contrast – clear differences in the visual field. By creating a dominant element, you reveal what’s most important in your design. You show people were to look first. When there’s no Clear dominance between elements, they compete with each other. Without a dominant element onscreen, users have to work to find their own entry point. We’re wired to conserve effort, which means the least amount of work may be moving on to another design – another screen, another site, another app. Greater size = greater dominance More contrast = greater dominance More negative space = greater dominance. Dominance directs user focus.
Alignment
Alignment is the most important visual design principle I can teach you —and the one I see broken most often. Even if you do nothing but use proper alignment, your designs will be infinitely more useful, usable and understandable. Which also makes them more valuable. Align everything with everything else.
Proximity
Proximity is the distance between visual elements. We use it to signal relationships between those elements. Elements visually close to each other are perceived as a single group, related by context of use. Unrelated items are visually separated, far from each other. Proximity describes relationships. Proximity often beats color+contrast. Use proximity to create context wich also creates clarity. Proximity makes cognition faster and browsing easier. Group and organize related content with proximity.
Using Color and Contrast Appropriately
Color provides visual cues
Color gets attention. Color stirs emotional response and suggests associated meaning. To prevent confusion in meaning, color has to be used consistently. To get the desired emotional response, color has to be used appropriately.
Color comunicates
The right colors draw the eye to the most important areas on the screen. Color can maximize readability and minimize optical fatigue. Color delivers symbolic meanings that support and enhance the visual experience of a design. Color pleases the eye and sustains visual interest.
Color creates connection, continuity, implies meaning
Color is subjective; our perceptions and biases affect what it says (and does) to us. Some colors have universal appeal; others are specific to geography, culture and experience. Color selection has to be appropriately useful and meaningful for your audience, your users. Do your homework here. Research, test.
Color should highlight, not determine
Color should never be the sole differentiator of things in the Ul. It should highlight and guide. For extended screen use situations, use light, muted background colors. Bright, saturated colors should only be used as visual accents. Start with one dominant neutral color, then add an accent color.
Color theory is useful
But you’re never going to have the time you need to fully understand color theory, much less apply it during a project.
Use color to communicate + influence interaction
Consider common associations:
| Black | Authority and power; timeless; cool; brooding; counter culture (arts & music) |
|---|---|
| White | Innocence and purity; cleanliness and sterility; surrender and peace |
| Red | Alarm and urgency; attencion; intensity; speed; warning of danger; love |
| Pink | Romance; gratitude; grace; admiration; harmony; compassion; female |
| Blue | Peaceful, tranquil; sky; ocean; business; technology; innovation; male |
| Green | Nature; organic; calming; refreshing; relaxing |
| Yellow | Optimism; happiness; warmth; positivity; joy; hope |
| Purple | Royalty; wealth; luxury; sophistication; considered feminine and romantic |
| Brown | Nature; Earth; home; friendship; richness; genuineness; solidity |
Consider emotional impact
Seeing red has physiological impact: it’s been proven to increase blood circulation, breathing and metabolism.
Red elements demand to be noticed, scream for attention.
Red also signifies importance and priority, like a to-do list.Blue tends to have a calming, inviting effect, due to associations with Sky and water.
This also communicates trust (banks, tech).
Lighter blues are open and friendly; darker, shades suggest security.Green is often associated with nature, success, growth and money.
Green sits right between warm and cool, making it well-balanced.
It also feels fresh, new and, in western culture, signifies all is OK.
Look at the world around you
Everything you see contains the four color variations required for good Ul design:
Shadows
Midtones
Highlights
Accents
Start with the brand colors
Most organizations have a brand color scheme they’ll want to start with (usually at least a logo).
While that’s a good place to start, be careful about using large areas of those colors onscreen –* they’re often much too saturated.
Vibrant, saturated colors cause eye strain – and fatigue.Choose color based on associations, emotions and brand.
Contrast enables readability
Text is easily readable when stark, complementary colors are used.
A design where text is the brightest element can reduce eye strain by focusing attention.
Lack of contrast between text and background strains the eyes because they don’t know which color to focus on.
The fact that colors are complementary doesn’t mean contrast is appropriate. If both colors are too bright, eye strain is again the result.
Contrast draws attention and directs focus
Areas of highest contrast draw the user’s attention first.
Contrast should be applied according to the importance of a particular element.
Primary content or actions should have the most contrast.Wherever you apply the most contrast is where the user’s attention will be drawn.
If that element isn’t the most important thing on the screen, you’re directing the user’s focus in the wrong place. To things they aren’t here to see or use.Design with contrast purposefully keeps the user’s focus where it needs to be.
The core content or action should have the most contrast.
Secondary content and actions (and everything else) should have Iower contrast, by degrees.
Contrast performs 3 essential functions
Contrast draws the user’s attention to the essential components of the interface.
Contrast helps the user understand relationships between onscreen elements.
Contrast communicates hierarchy and signifies importance within and across multiple sets of visual information.
Contrast always wins.
Color and contrast depend on context
Designing with Typography and Imagery
Typography creates emotional impact
Typography serves functional purpose
Appropriate typography choices create: Readability Accessibility Usability Visual balance All of which work together to form effective, understandable visual communication.
Typography should be purposefully designed.
Choosing a font isn’t typography
Anyone can choose a font.
Not everyone knows how to treat text as visual design – utilizing size, weight, space and style combinations – to establish visual order, signal relationships and enhance understanding.
So typography isn’t about choosing fonts.
It’s about purposefully combining letterforms to create optimal reading experiences – which deliver appropriate emotional impact.
Pattern recognition
Alignment
Kerning
The space between letters is called kerning.
Kerning is critical to legibility, readability and comprehension.
I was taught to spot good kerning like this: “The space between letters should be filled with the same volume of water.”
This applies to space between words as well.
Leading
Leading is the space between lines of text.
In terms of Ul design, we call it line height.
Increasing the leading makes text easier to scan and read, which makes comprehension a lot faster as well.
It also serves to visually group related “chunks” of information.
Seven Rules for Great Typography
2 typefaces max.: That means no more than 2 font families. Character widths and weights of each font should be complementary to the other. At the same time, font pairings need to have some visual difference; otherwise there’s no reason to use the second font.
Limit line width: When line lengths are too wide, the eye has to work a lot harder to “track” the text – following and finding the beginning of the next line. This makes reading and comprehension more difficult – and much slower. The common standard is 60 characters per line. For mobile devices, it’s 30—40 characters per line.
Choose readability: Text will be used at various sizes in your Ul, from headlines to body text to form labels to buttons to data to… A such, the typefaces you choose have to be readable at all of those sizes. Not to mention the fact that users will view your design on different devices with different screen sizes and resolutions. Your typefaces should have enough weight that letterforms don’t degrade at small sizes.
Choose legibility: Make sure all letterforms are clearly distinguishable in your typeface. Beware of “L”s that look like”l”s, for example. Some fonts have poorly specified kerning as well, which can make an “r” next to an “n” look like an “M.” Or an “f” and “l” look like an “H.” TIP: most free fonts — aside from Google fonts – have horrible kerning.
Use space between paragraphs: Visual breaks between paragraphs give the eye a place to rest; that rest actually speeds understanding and comprehension. A widely-cited study found that good use of white space between paragraphs (and in the left and right margins) increases comprehension by almost 20%. Generously spaced content is easier to focus on –* and easier to process.
Align text elements in layoult using baselines: When you have multiple text elements on a single screen, they should all share points of common alignment. Even if those ‘chunks’ are unrelated, alignment helps keep the layout ordered and makes it easy and quick to scan.
Use styles to visually differentiate content: When choosing a typeface, you want one that has at least 3 styles: regular, italic + bold. Use those Styles in your design to differentiate between types of content. Sometimes this removes the need for more than one font entirely – every level of information can be signified with styling.
Five rules for choosing imagery
Make sure it serves a purpose: And make sure you truly understand what that purpose is. What message will it send? What emotions will it evoke? How will it support/reinforce the content? How will it guide or instruct? Does it strengthen and deepen understanding, or interfere/distract from it?
Focus on people (not things): We’re wired to recognize and connect with our fellow humans. You want people to see themselves using What you’re promoting. So an image of one of us using a product will always carry more resonance than an image of just that product. Images of people looking away from the camera also tend to work best – because that makes it easier for viewers to imagine they are that person.
Cropping can change meaning: how you crop an image has a dramatic impact on how it’s perceived.
Never go for the cheap shot: Especially if it’s sexist. Or demeaning. Or in any way reduces its human subject to an object. Not only is that shallow and in poor taste – it’s also quickly forgotten.
Don’t forget the power of illustration: It’s easy to forget that illustration can be much more impactful than photography. Particularly when the subject is something we see a lot – and as a result are numb to. Illustration can be more relevant and appropriate to its content; it can provide powerful emotional support to editorials.
Imagery dos and don’ts
DO show an actual person when the reference to that person is specific.
DO use illustration when specificity isn’t possible, or doesn’t apply.
DO look for images that represent an tell realistic stories.
Don’t use posed, staged stock images that feel faked and unemotional.
DO if you’re referencing a specific product, show that specific product.
Don’t default to generic, literal stock photos.
DO use color and composition to create a focal point that communicates meaning.
Don’t make the user hunt for the hidden meanings in your image.
DO use images with only a few meaningful elements, with minimal distractions.
Don’t obscure the point of focus, which also obscures meaning and diminishes power.
DO strive for clear visual focus, which communicates the concept at a glance.
Don’t use photos whose lack of focus makes the image meaningless.
DO build a narrative; imply an interesting, informative story.
Don’t use images without context; these don’t convey mood, brand, and context.
DO show a product and people in the context of a real-world situation.
Don’t show a product and its user disassociated from that context; it’s not interesting.
Creating and Simplifying Visual Cues
Icons make excellent touch targets
When sized large enough (e.g. 48 px), they’re easily activated.
This also makes it very easy to hit them with a desktop or laptop cursor.Icons save space
Their compact size means that more icons linked to critical functionality can be displayed in a relative small space.
Icons are quick to recognize if users have familiarity with the chosen icons and have seen or used them before.
Icons should clearly convey meaning.
Four core types of icons
Similar icons are useful for simple, easily understood actions and concepts.
Symbolic icons represent an action, object, or concept at high abstraction.
Example use images of things that exemplify or are commonly associated with an action, object, or concept.
Arbitrary icons bear no resemblance to the represented concept; their meaning is learned through repeated exposure.
Icon choice starts with their environment
App icons should be based on commonly used Android or iOS icons.
Laptop software icons should be based on commonly used Windows or Mac OS icons, or commonly used software on those platforms (e.g. Microsoft Office, Google Chrome).
Website icons should be based on commonly used icons, along with those used by competing or complementary sites.If you spend more than 15 minutes trying to choose an icon to represent something, an icon probably won’t work in that instance.
Label + icon is hard to beat
A text label goes a long way in properly setting user expectation and enabling them to predict the result of the interaction.
Icons must be recognizable and memorable.
5 rules for effective icon design
Keep visual/perceived size consistent: icons that occupy the same pixel space on the grid aren’t necessarily perceived as being the same size. Check optical size with shapes – look for equal visual weight. Another way to tell that perceived size will be off is by checking the width of rules (strokes) used in the icon. When rule width varies at the same overall pixel dimension, icons will be perceived as being different sizes.
Keep the level of detail consistent: More detailed icons will attract the user’s attention first – because they appear to have more visual weight than the others.
Eliminate unnecessary detail: Extra visual elements only make the icon more difficult to perceive, even if it’s composed of recognizable objects. Think context.
Don’t mix and match styles: For example, don’t mix outline and fill styles in the same app or site. Changing from outline to fill for a hover or active state, however, is OK.
Don’t reinvent the wheel: If the concept or action depicted is common, near-universal, Stick with the established icon used to represent it. Anything else invites confusion and becomes a cognitive obstacle.
Dealing with data
Persuasive (designer-viewer): Represents a specific point of view. Meant to change opinion or reinforce an existing opinion. Bias can be unintentional.Informative: (viewer-data): Neutral presentation of facts. Meant to educate as opposed to persuade (watch bias!) Broad/deep data sets, distilled or introduced in stages (progressive).Visual art(designer-data): Encoding takes precedence over decoding. When intentional, the intended outcome is usually just enjoyment. When unintentional, can have serious, negative consequences.
Context of use dictates visual form
What does the viewer need to understand – and how quickly or easily?
What matters most - to us and to the viewer?
Do the visuals accurately reflect the numbers?
5 rules for great data design
Data is only useful if it can be understood: If I don’t understand it, I can’t act on it. If I can’t act on it, it’s practically worthless. Data isn’t the goal – it’s a tool that helps us understand and make change in the world. Data without design is noise.
You’re designing for other people: And they’re not you. You have to design for their identity. You have to design for their motivation. You have to design for their language. You have to design for learned social contexts: color associations, icon recognition, reading patterns, etc.
You’re designing for their context of use: What amount of information does the user need in order to understand or act? What motivations is s/he coming to the table with? How do those motivations influence how useful or actionable the visualization is? How much time does s/he have to spend with this information? How quickly will it be useful or effective?
The usefulness of data decreases when its volume increases: The more information in any given view, the harder it is for viewers to find What they care most about, or are depending on in order to act. Or What you need them to see. Reveal knowledge and facilitate insight – instead of overwhelming with volume.
The more brainpower required to decode your visualization, the less that’s available for understanding it: You must respect this. Every label, every shade, every dimension of data that doesn’t directly contribute to your main message or to the viewer’s core goal is noise.
Simplifying visual information
Data:
Remove backgrounds
Remove redundant labels
Remove unnecessary borders and containers
Reduce colors; highlight most important data
Remove all effects (3D, shadows, etc.)
Visually separate labels/lines from data
Remove extraneous lines and labels
Cluttered UI:
Increase negative space
Remove unnecessary rules and containers
Separate labels from content (tables & forms)
Separate primary, secondary & tertiary actions
Simpler is better.
Separating content from controls
When there are too many choices it’s easier for people to choose nothing.
When everything is interactive nothing is interactive.
Content should be separated from controls: interactive elements should be distinct from their content counterparts.
Separate primary +secondary actions
Economy, clarity, and focus is created by differentiating primary actions.
The same principle applies when there are tertiary (or even quaternary) actions.