User Interface

2022/05/08 (增加連結)
2022/05/14 (增加連結)
2022/05/16 (增加連結)
2022/05/17 (增加連結)
2022/05/21 (增加連結)
2022/06/05 (增加連結)
2022/06/09 (增加連結)
2022/06/13 (增加連結)
2022/07/11 (增加連結)
2022/07/30 (增加連結)
2023/04/13 (補充內容)

User Interface Design

• User interface design best practices 

  • Consistency is Key

  • Use Patterns

  • Apply Visual Hierarchy

  • Don’t Leave the User Hanging

  • Plus One Design

    • always provide alternatives to design elements you’re trying to make

• User Interface Design 

  • Choosing Interface Elements

  • Best Practices for Designing an Interface

    • Keep the interface simple

    • Create consistency and use common UI elements

    • Be purposeful in page layout

    • Strategically use color and texture

    • Use typography to create hierarchy and clarity

    • Make sure that the system communicates what’s happening

    • Think about the defaults

  • How to make Great UIs

  • How to optimize user interface design

• All you need to know about UI design Shapes and Objects (part 1)

• UI design shapes & objects basics: fills and borders (part 2)

• UI design shapes & objects basics: Shadows and Blurs (part 3)

• UI design basics: Screens 

  • 99% of UI = pixels on a screen

  • PPI or Pixels per inch

  • Here’s all you need to remember about designing for all types of screens:

    • Always design for the 1x pixel density

    • All design tools have the right screen sizes built right in (no need to remember them)

    • Make your main navigation easy to reach on mobile devices

• 10 Key Takeaways from Google’s Material Design Guidelines 

• How To Design Emotional Interfaces For Boring Apps

• Applying the Panofsky method to your own design 

  • Level 1: Primary Analysis: What you see…

  • Level 2: Conventional Analysis: What you feel…

  • Level 3: Intrinsic Analysis: What You Intuit…

• Is Your UI Messy? 7 Common Mistakes to Avoid 

  • Ignoring Scope/Bad Planning

  • No difference between primary and secondary actions

  • Frustrating error states

  • Poor alignment

  • Low Contrast

  • Poor Iconography

  • Not thinking cross platform

• 5 simple ways to improve your website UI (for developers) 

• Three principles to better present your UI designs 

  • Principle one: Objective, not subjective

  • Principle two: Don't tell your stakeholders a story; take them on the journey with you

  • Principle three: Bit by bit

• 8 Principles of Screen Design 

• How to Design Good Products

  • Why I want to write about how to design good products 

  • What does simplicity really mean for product design? 

  • How spatial logic can make your product design more intuitive and high-craft 

  • Toast or no toast? Tips on providing feedback in product design 

相關名詞解釋

• User interface ontology — UI jargon

• Cheat sheets: UI terms

UI vs UX

• Why UX and UI should remain separate

• UI & UX 差別是什麼，看圖大整理

• UI UX設計是什麼？用9個提高網站轉換率的方法告訴你

• That awful UI vs. UX ketchup meme

• UX vs. UI: Design Stages, Participants, Roles, and Skills 

  • What is UX design — The why of a product

  • What is UI design — The how of a product

  • UX design specifics and deliverables

設計原則

• 7 Rules for Creating Gorgeous UI (Part 1)

  • Light comes from the sky

  • Black and white first

  • Double your whitespace

• 7 Rules for Creating Gorgeous UI — Part 2 (Updated for 2019)

  • Learn the methods of overlaying text on images

  • Make text pop— and un-pop

  • Only use good fonts

  • Steal like an artist

• 10 Principles of Good (UI) Design / TEN PRINCIPLES FOR GOOD DESIGN

  • is innovative

  • makes a product useful

  • is aestheic

  • makes a product understandable

  • is unobtrusive

  • is honest

  • is long lasting

  • is thorough down to the last detail

  • is environmentally friendly

  • is as little design as possible

• Fundamental design principles for non-designers

  • Contrast

  • Consistency

  • Occam’s Razor

  • Space

    • Proximity = Relatedness

    • Negative Space

    • Importance and order

• A Simplified Revision of Common Design Principles 

  • Feedback

  • Findability

  • Visibility

  • Constraints

  • Consistency

    • Consistency in UI Design : Why Consistency is Damn Important in UI Design.

  • Affordance

• 10 ways to spice up a UI design

  • Inject life into your copy

  • Throw in some icons & emojis

  • Make your product more human with Illustrations

  • Add a dark mode option silly

  • Use high-quality imagery

  • Make error states that don’t suck

  • Give your design some motion

    • A guide to Motion Design principles 

  • Focus on the small details by including micro-interactions

  • Throw in some patterns and gradients

  • Utilize shadows to add depth

• 10 Commandments for UI Design: Design principles that are frequently missed.

  • Empty States

    • Thou shalt make blank states more than just an empty display

    • How to Design Better Empty States? 

    • Empty State in SaaS Applications — How to Design Better User Experiences 

  • Sliders

    • Thou shalt not use sliders for quantifiable values

  • Dropdown Menus

    • Thou shalt only use a dropdown menu if there are many options

  • Targets

    • Thou shalt make controls large enough for human fingers

  • Infinite Scroll

    • Thou shalt use infinite scroll for feed style content only

  • Pagination

    • Thou shalt use pagination for content that has a beginning, middle, and end

  • Show don’t tell

    • Thou shalt not require laborious reading to understand how a program works

  • Labels

    • Thou shalt give descriptive labels to icons

  • Native Components

    • Thou shalt use device native interface components where possible

  • Loading

    • Thou shalt use a spinner if the task will take an uncertain amount of time

    • Spinners versus skeletons in the battle of hasting 

• Design Principles & Elements to Enhance UI Design 

  • Dots, Lines and Shapes

  • Alignment

    • Alignment is one of the core fundamentals of UI design as it provides a sense of orderliness in any interface.

  • Hierarchy

  • Contrast

  • Proximity/Space

  • Colour

• A Comprehensive Guide To UI Design

  • Get Started With An Interface Inventory

  • Build A Pattern Library

  • Designing Interactions And Animations

• The Ultimate Guide to Becoming a Great Designer (Part 1 of 3)

  • Start using a grid

  • Stick to a type system

  • Be strict about color usage

    • Color should always serve a purpose. If you’re adding color just to add color, then you probably don’t need to.

  • Embrace the capabilities of your design tool

• The Ultimate Guide to Becoming a Great Designer (Part 2 of 3)

  • Extend the capabilities of your design tool

  • Build your own reusable tools

    • Recognize when you’re repeating a process over and over, then figure out a way to “templatize” it, either on your own, with other resources, or by using extensions.

  • Stop reinventing common design patterns

  • Find auxiliary design resources

• The Ultimate Guide to Becoming a Great Designer (Part 3 of 3)

  • Design less

  • Write more

    • Writing about design is about reflecting on your beliefs, your technique, and your process.

  • Emphasize outcomes

  • Work collaboratively

• Cutting The Interface For Good

  • Why need an interface

  • What to cut

  • Interface text

  • Don’t fight your own shadow

• How to Achieve Friendly, Lightweight and Consistent UI Design

  • General visual consistency

  • Achieving that soft, dreamy vibe on elements

  • Making gradients look more smooth and delicate

  • Choose the right color for the font, so it matches the background.

  • Think about the little details that will make your project more appealing.

  • Be so extra, that you change colors on your user’s avatar, so it matches the interface.

• How to declutter a screen?

• API design is UI design — a way to collaborative handoff

• Re-thinking the user experience of the daily UI challenge

  • Difficulty Level 1: Daily UI Challenge for a beginner..

  • Difficulty level 2: For someone who has walked few steps further in UX design

  • Daily UI Challenge for a Unicorn..

• Daily UI Challenge Impose — Sign in form (step by step tutorial) 

• How UI innovation happens and why we should be humble about it

• Crafting Smarter Interfaces with Anticipatory Design

  • What ‘Anticipatory Design’ Is

  • How to Design Experiences that Anticipate Intent

  • The Downside of Anticipatory Design & How to Mitigate it

    • Being Wrong

    • Creepy Data Privacy Issues

    • Lack of Empathy and Context

    • “Stuck in a Bubble”

• 3 Common Ways To Use Illustrations in UI Design

  • Make UI more informative

    • Describe concepts

    • Communicate the context of a text

    • Motivate users to perform an action

  • Delight users

    • User reached a goal

    • User is confused or frustrated by something

  • Communicate personality

    • Illustrations as the identity of your brand

    • Mascots

    • Create mood

• 10 rules of thumb in UI design

  • Design for density, not pixels (with dp)

  • Use 8dp increments

  • Remove lines and boxes

  • Pay attention to contrast

  • Familiarity is good

  • Use color weight to establish hierarchy

  • Avoid using more than two typefaces

  • Recognition, not recall

  • Don’t slow me down

  • Less is more

• Golden Rules Of UI Design

  • Consistency

  • Shortcuts

  • Feedback

  • Easy Reversal

  • Error Handling

  • Minimalist Design

    • A guide to minimalist design : The reign of white space.

    • Design: Minimal is not equal to intuitive 

      • Minimal design focuses on removing things, while intuitive design creates a sense of familiarity and comfort. When designing, it’s important for your product to be intuitive.

    • Why minimalism never goes out of style 

      • Intuitive Coloring

      • Imagery

      • Analogous Color Schemes

    • Reduce Mental Effort

• Golden Rules of UI/UX Design based on Designing the User Interface: Strategies for Effective Human-Computer Interaction (5th Edition) 

  • Make user interfaces consistent

  • Allow users to navigate easily via shortcuts

  • Provide informative feedback

  • Prevent error as much as possible

  • Allow users ways to reverse their actions easily

  • Support internal locus of control

  • Minimize memory load

  • Design dialog to yield closure

• 6 Basic Design Tips 

  • Don’t use 100% saturated black.

  • Limit font choice.

  • Alignment as foundation.

  • Balance by eye, not by tool.

  • Not everything has to be spaced equally.

  • ALWAYS consider visibility

• UI/UX Tips To Significantly Enhance Your App Design 

• Some short, useful tips for UI and UX designers 

• The UI & UX tips collection — volume one

• The UI & UX tips collection — Volume two

• UI & UX micro-tips: Volume one 

• UI & UX micro-tips: Volume two 

• UI & UX micro-tips: Volume three 

• UI & UX micro-tips: Volume four 

• UI & UX micro-tips: Volume five 

• UI & UX Micro-Tips: The Ultimate Collection: A collection of 64 powerful tips to help improve your designs instantly

• UI & UX micro-tips: Volume six 

• UI & UX micro-tips: Volume seven 

• UI & UX micro-tips: Volume eight 

• UI & UX micro-tips: Volume nine 

• UI & UX micro-tips: Volume ten 

• UI & UX micro-tips: Best of 2021 **

• UI & UX micro-tips: Volume eleven 

• UI & UX micro-Tips: Volume twelve 

• UI & UX micro-tips: Volume thirteen 

• 5 Pro Tips For UI Design 

• UI/UX Design: Pro-Tips Vol.1 

• 5 research based UX/UI Tips 

• 9 tips to quickly improve your UI designs

• 8 (more) tips to quickly improve your UIs

• 6 (more) tips to quickly improve your UIs 

• How to maintain quality with a UX checklist 

  • Usability

  • Visual design

  • Content

  • Accessibility

  • Mobile

• A checklist to improve your product UI

  • Typography

  • Spacing and Margins

    • Junior designers, please design with numbers 

  • Color and Images

  • Common Sense

• 5 Design tips to help create effective User Interface Designs

  • Tip 1. Create typography hierarchy

  • Tip 2. Be consistent

  • Tip 3. Create natural greys

  • Tip 4. Don’t rely on opacity

  • Tip 5. Don’t be afraid of white space

    • Principles for using white space in your designs (and in your life) 

      • Principle 1: Clear the clutter, focus your attention

      • Principle 2: Get fancy

      • Principle 3: Watch out for hidden velociraptors

      • Bringing it together: finding stillness

    • Applying white space in UI design 

      • Follow the Law of Proximity.

      • Start from a baseline of generous white space.

      • Use white space to focus attention on particular design elements.

      • Use the same method for measuring space in both design and implementation.

      • Use a spacing system.

      • Avoid using spacing values that are visually too similar.

      • Reduce the line-height (ie. leading) as text size increases.

      • In an information-dense UI, rely on other techniques besides white space to convey how elements in the UI relate to one another.

    • White Space in Design: Important Guidelines Every Designer Should Know 

• 5 UX Tricks You Must Know in 2022 

• Which UI is better? The importance of contextual design 

• Kind UIs: Creating interfaces that promote user wellbeing

  • Dangers In The Current Digital Ecosystem

    • Information Overload

    • Applications are stretched too thin

    • Choice Overload

    • JTBD over Happy User Models

    • The Settling vs. Density Divide

  • Metrics for a kind UI

    • Obvious Product Purpose

    • Clear Information Hierarchy

    • Building Transparency

    • Intrinsically Motivated Applications

    • Providing Affordances

    • Customization

    • Playful Components

• The secret behind amazing interfaces 

  • The blissful alignment

  • The glorious consistency

  • The heavenly balance

  • The sensational small tweaks

• Bad UX Design — 13 Worst UX Design Fails to Avoid in Your SaaS 

• Affordance

  • Understanding affordances in UI design

  • UX Design Glossary: How to Use Affordances in User Interfaces 

    • **文後的回應: Donald A. Norman who introduced term “affordances” states that it is a relationship (not properties) between a phyhiscal object and a person. Affordance determine what actions are possible. Signifiers communicate where the action should take place.

      • Signifiers, not affordances 

    • Types of Affordances in UI (這些似乎是Signifiers)

      • Explicit (Obvious) and Implicit (Hidden) Affordances

      • Graphic Affordances

      • Copy (Language) Affordances

      • Pattern Affordances

      • Animated Affordances

      • Negative Affordances

      • False Affordances

• I redesigned the infamous IOWA App in 30 minutes

• 7 reasons your interface designs look worse when they’re coded, and why it’s probably your fault

  • You didn’t fully embrace responsiveness

  • You designed a series of posters instead of a system

  • You didn’t design all the states needed for interactive elements

  • You don’t understand how sizing on the web works

  • You lack the vocabulary or knowledge to explain your ideas

  • You didn’t allow for variable content

  • You didn’t ask enough questions

• 8 Overlooked Details by Beginner UI/UX Designers 

• 10 Common Mistakes UI Designers Make

• SpaceX: Simple, beautiful interfaces are the future

• 10 Insights from Apple’s Human Interface Design Guidelines

  • Test your app’s color scheme under a variety of lighting conditions

  • Delay sign-in as long as possible

  • Comply with the appearance mode people choose in Settings

  • Show content as soon as possible

  • Take advantage of the system-provided colors for text, fills, glyphs, and separators

  • Use familiar, understandable words and phrases

  • Anticipate the need for help

  • When necessary, help people avoid information loss

  • As a general rule, use standard gestures

  • Don’t include sensitive, personal, or confidential information in a notification

• 47 Key Lessons for UI & UX Designers ** 很棒的統整性文章

  • 4 Rules of Thumb in UI Design

    • Design for density (dp), not pixels (px)

    • Use 8dp increments

    • Use color weight to establish hierarchy

    • Don’t slow me down

  • 5 Principles of Ethical UX Designs

    • Notify Me

    • Highlight negative information

    • Stop Spamming

    • Privacy transparency

    • Make it easy as pie to cancel

  • 4 Ways to Spice up a UI Design.

    • Inject life into your copy

    • Add a dark mode option silly

    • Make error states that don’t suck

    • Throw in some patterns and gradients

  • 5 Commandments for UI Design

    • Empty States

    • Targets

    • Infinite Scroll

    • Show don’t tell

    • Native Components

  • 5 Ways to Improve Dropdowns in UI & UX Design

    • Smart Default

    • Simplify

    • Individual Usage Patterns

    • Use Visual Elements

    • Use Listboxes

  • 6 Soft Skills for UI & UX Designers

    • Feedback

    • Active Listening

    • Every Communication is a UX project

    • Lose the ego

    • Autodidacticism

    • Adaptation

  • 4 Common Mistakes UI Designers Make

    • Disregarding scope

    • Overlooking the user’s context

    • Focusing heavily on how it looks, not how it works

    • Missing design states

  • 5 Insights from Apple’s Human Interface Design

    • Delay sign-in as long as possible

    • Show content as soon as possible

    • Anticipate the need for help

    • When necessary, help people avoid information loss

    • Don’t include sensitive, personal, or confidential information in a notification

  • 5 Behavior Patterns for UX Design

    • Safe Exploration

    • Instant Gratification

    • Habituation

    • Deferred Choices

    • Streamlined Repetition

  • 4 Tips & Exercises to Develop Your Creativity

    • No judgment

    • Quantity over quality

    • Unplug from inputs

    • Try new things

• Menus, Metaphors and Materials: Milestones of User Interface Design

• Interface Design Patterns & Principles More Ubiquitous Than You Think 

  • Pattern #1: Anticipatory Design

  • Pattern #2: The Law of Continuity

  • Pattern #3: Micro (and Macro) Interactions

• 5 steps to improve your UI skills 

  • Learn to use human perception laws in your interfaces

  • Try different design styles and trends

  • Simplify your font collection

  • Learn about the Cognitive Load and try to minimize it

  • Always check the accessibility

• Why Designing Your Own UI Style Guide System Matters 

• The ultimate guide to UI design for men and women 

  • Women

    • Women prefer darker and softer tones

    • Women could experience more fatigue with small text

    • Women perceive motion lesser than men and need more movement

    • Women have less hand reach and need smaller UIs

    • Women do great with speaking UIs but perform less under 2000hz

  • Men

    • Men prefer brighter tones

    • Men have perception problems with small peripheral UI

    • Men need more contrast and saturation

    • Men hear worse and are less susceptible to female voice

Trends

• Future of User Interface Design ** (2022) 事實上是四篇文章的摘要

  • Different user interface designs in future (reference)

    • Brain-Computer Interface

    • Gesture Recognition

    • Wearable Computers

    • Voice User Interface

    • Augmented Reality

    • Virtual Reality

  • Current-generation UI design tools (reference)

  • Next-generation UI design tools (reference)

    • Integrating Design and Code

    • Parallel creation that will replace designer and developer hands-off

    • Design UI Tools and developer software will align

    • Mock-ups Will Become Obsolete

    • A World of Developer Tools and Third-party Browser Extensions Will Open Up

  • Impact of the future of User Interface Design on everyday life (reference)

    • Gesture interfaces

    • Light Ring

    • RoomAlive

    • Skin buttons

• 2022 UI design trends guide 

• 2022 Design Trends 

• The future UI trend of 2025? (2020)

  • One style to rule them all?

  • Modern UI 2020

  • So what will?

    • Neuralink (Brain-computer interfaces)

    • AR Glasses

  • AR UI?

• 7 predicted UX trends for 2021 

• What should we expect for UX in 2021? 

• UI design trends of today and how to apply them in your apps : From outline icons to switch designs, the UIs of major OSes are all starting to look similar.

• 10 Newest and promising UI design trends

  • New Neuomorphism

  • Soft gradients

  • Geometric elements

  • Pastel backgrounds

  • Illustrations and 3D

  • Abstract shapes

  • Dark mode

  • Elements at an angle

  • Soft shadows

  • Simple, thick typography

• How Apple makes soft-UI the future

  • (more) Rounded corners

  • Transparency and Background Blur

  • Unified symbols (sort of)

  • Skeuomorphism?

  • Others

• What will happen to designers if there’s no interface to design?

• The 5 main anti-trends in design 

Neumorphism / Skeuomorphism / Glassmorphism / Squirclemorphism / Claymorphism

• Tridimensionality: skeuomorphism, flat design, and neumorphism 

• Neubrutalism

  • Neubrutalism is taking over the web 

• Neumorphism

  • Neumorphism in user interfaces

  • Neumorphism will not kill the skeuomorphism star

  • Neumorphism: can we make it more accessible?

  • Neumorphism will NOT be a huge trend in 2020: So… what will?

    • Directions for 2020

      • Dark mode

      • Illustration and 3D

      • Animation

      • Isometry?

      • Ultra minimalism for mindfullness?

      • Voice interfaces?

  • Neumorphism — the zombie trend: Everyone is excited / frustrated by the style, yet nobody is making products with it. Still, neumorphism refuses to die

  • Loading: Neumorphism 2

  • Anti-neumorphism or pro-neumorphism? Well, here is a better solution

• Skeuomorphism

  • A Look at Skeuomorphic UI Design 

• Glassmorphism

  • Glassmorphism in user interfaces : Another year, another UI trend is becoming increasingly popular among designers. Do you know it yet?

  • 6 Steps to Make Glassmorphic Card 

  • New Glassmorphism? How to Create Neon Glass Effect UI Design 

  • Glassmorphism in 2021 

• Claymorphism

  • Claymorphism in user interfaces 

  • How To Create Claymorphism Using CSS 

Interaction

• My take on language selectors

• A look at “Incorrect password” messages in Apps

• Design Guide: Alerts

• UI copy: Remove vs Delete

• The worst volume control UI in the world

• Design Based On Transparency

• Faster user experience: Optimistic UI 

  • The main goal is to eliminate the feeling of freezing and not loading on the screen.

Visual Design

• 6 Principles of Visual Design

  • Whitespace is Your Friend

  • Pick a Solid Font

  • Be a (Color) Minimalist

  • Nix Lines and Borders

  • Use High-Quality Images

  • Leverage Icons

• How to Test Visual Design

• Quick test of visual design: A reflection of what I have learned from over 100 usability tests

  • Five-Second Test

    • If you want to test the very first impression of a content-based page, go for Five-Second Test.

  • First Click Test

    • If you want to test the interaction on a page, go for First Click Test.

  • Confounding

    • Order Effect

    • Query Effect

• 5 Things Visual Designers Should Learn in 2019

  • Logo Animations

    • 10 eye-catching logo animations you’ll wish you made 

    • 10 more eye-catching logo animations you’ll wish you made 

  • Daily UI or Daily Coding Practice

  • SVGs

  • Protoyping Software & Talking with Devs

  • CSS Animations

• Why Visual Design Skills are a Must-Have for Good UX

• 10 Ways to Make a Fully Personalized UI

  • Left-handed

  • Autoplay

  • Font sizes & styles

  • Sounds

  • Dark mode & color theme

  • App icon

  • Haptic feedback

  • Accessibility

  • Notifications

  • Gestures

• 4 Ways To Communicate the Visibility of System Status in UI

  • Visual feedback that shows user location or progress

  • Visual feedback that confirms user action

  • Visual feedback that shows system status

  • Triggered events

• Handy design tools for everyone

  • Animation

    • Haiku Animator

    • Lottie Web Player

    • Animated Icons from Icons8

    • Tilda Publishing Animations

    • Good to great UI animation tips

  • Color

    • Khroma

    • Flat UI Colors 2

    • HueSnap

    • CSS Gradient

    • Color Management

    • Coloro Workspace

  • Design Tools

    • Framer X

    • InVision Studio

    • Artboard Studio

    • Paste

    • Webflow

    • Sketch2React

    • ProtoPie

    • Vectary

    • Rotato

    • Meet Alva

    • Solis

    • Supernova Studio

    • Zdog

  • Inspiration

    • The Inside Story of Reddit’s Redesign

    • Failory

    • Pages

    • SaaS Pages

    • Playbook

    • Mobbin

    • Prototypr.io

    • UIJar

  • Sketch Plugins

  • Typography

• Which UI design tool should I use in 2020?

  • Sketch

  • Figma

  • Adobe XD

• Figma vs. Adobe XD: How we picked our next design tool

• 5 visual design tools for UX designers

  • Visual Design and Prototyping Tools

    • Sketching

    • Wireflows & User Flows

    • Wireframing

    • Mockups

    • Prototypes

• UI designer’s toolkit for professional mockups, prototypes, and product illustrations

  • Sketch App / InVision

  • iPad / Apple Pencil / Procreate

  • After Effects / Lottie

• Shadow

  • Where to use drop shadows in UI?

  • How to make Perfect Shadows in UI Design

  • Make your shadows awesome 

• In defense of the “look and feel” : Visual design is an essential part of the user experience and practitioners that distance themself too much from the craft might end up impacting the usability of their products.

Color

• How to Choose the Correct UI Design Colors for Your Product to Reinforce Your Business **

  • Learn the psychology of colors

  • Stick to color harmony

  • Follow the 60–30–10 rule

  • Bear in mind cultural differences

  • Balance the contrast

  • Focus on grayscale first

  • Get inspiration from nature

• The quick, practical guide to picking colors for your designs

  • Define your purpose

    • What’s your key message?

    • Why are you creating this design?

    • How do you want your users to feel?

  • Identify your users

  • Get inspired

  • Pick your palette

• Color theory for designers — a crash course (with infographic)

  • Color is relative

  • Hue impacts value

  • Color is psychological

  • Unconventional colors stand out

  • Color has cultural significance

  • Saturation affects vibrancy

  • Simultaneously contrast is visually powerful

  • Color has a 60-30-10 rule

  • The relationship between text and color is crucial

  • Color accessibility can't be ignored

  • Any two colors can be harmonious

  • Basic color schemes are best

• What are the 10 commandments of color theory?

  • Thou shall know thy color wheel

  • Thou shall match thy colors

  • Thou shall not be afraid to clash thy colors

  • Thou shall be mindful of contrast

  • Thou shall not be afraid of variation

  • Thou shall know what triadic means

  • Thou shall know when to go achromatic

  • Thou shall know thine hues, tints and shades

  • Thou shall know the difference between RGB, CMYK, and Pantone

  • Thou shall know when to go monochrome

• Ultimate Guide for a Good UI: Color 

• Color Fundamentals for UI Design 

• UX Design Colour Psychology, Theory & Accessibility 

  • Accessibility

  • One or two colours is best

  • Colour psychology

• The Greys in UX Design

  • Backgrounds and cards

  • Forms and fields

  • Improves readability

  • Makes other colours pop

  • Elegant gender targeting

• Using gray, shade, and tint in UI design

  • Context

  • Contrast

  • Consistency

• Gradients

  • Are Gradients The New Colors?

  • How to Design Sexy Gradients

  • 5 innovative gradient tools you can use to design your own backgrounds  

• Tips on color for interface design

  • It’s all about emotions

  • Understanding your audience

  • Balance of colors

    • 60% of your design should be a neutral color

    • 30% of the design should be your secondary brand color

    • 10% of the design should be your core brand color

  • Brand personality

  • All hail blue

  • Contrast / Color blindness

• Free Color Tools For Designers

• Free Color Tools for Designers — Vol. 2

• The why and how of designing a color variant and accessibility tool

  • Generate a palette using Coolors

  • Pick variants for each color using SASS Color Generator

  • Pair variants together into background/foreground combinations.

  • Check that the pairs are accessible using the color contrast checker.

  • Add my chosen colors to my design tool of choice (Figma).

  • Tweak colors and repeat from step 2.

• How to perfect the art of combining colors?: Strategies for choosing colors combinations that work.

  • So, what is color theory exactly?

  • So how do we use the color wheel?

  • Two different types of color wheel

    • The RYB (red, yellow, blue color wheel)

    • The RGB (red, green and blue color wheel)

  • What are these rules and how can we use them?

    • The Five Color combinations

      • Complementary

      • Monochromatic

      • Analogous

      • Triadic

      • Tetradic

• Interface Exploration: Depth and Color

• A Guide to Color and Conversion Rates

  • Color Theory: complementation, contrast and vibrancy

    • Color Wheel

    • Create an Effective Color Scheme

    • Colors In Text

  • The Impact of Color on Conversion Rates

    • Contrast is a Key

• Fundamentals of color in interface design (UI)

  • Link

  • Harmony

  • Contrast

  • Scale

  • Proportion

  • Interaction

• The Psychology of Colour

• How to use the psychology of color for good

• 10 Principles for Color Usage in UI Design 

• Color psychology & visual hierarchy for UX & behavioral design 

• How to Suck Less at Colors as a Developer : How to use the different color formats, create variations, and make your colors awesome

• 20 Basic Color Related Terms You Need to Know As a UX/UI Designer 

• Get better at using color palettes with choropleth maps 

  • Sequential

  • Diverging

  • Qualitative/Categorical

• Designing emotional color palettes without the fake science 

• 5 Best Tips on Choosing the Perfect Color for Your Website 

  • Choose a primary color

  • Choose your additional colors

  • Choose a background color

  • Choose a typeface color

  • Don’t go overboard

• Designing Color Systems — Transparent vs. Solid Shades 

• How to create a color palette easily? 

• Create a Color Scheme Around Any Color in 8 Easy Steps 

  • Set your color model to HSL

    • Hues, Saturation, and Lightness

  • Pick a color, any color

  • Make variations of the L value

  • Create 10 copies of your original color

  • Replace the L values

  • Find your partner in crime

  • Select a primary and secondary variant

  • Choose your side kicks

• Ultimate Guide to Color in UX/UI Design 

  • How to choose, mix & match colors in UI Design

    • Monochromatic

      • How to effectively design a monochromatic user interface : You only need one hue to create a stunning UI design as long as you keep these few tips in mind.

      • How to apply monochromatic color scheme in design? : Many shades of one color.

        • Step 1: Pick any color

        • Step 2: Make 10 copies of your main color

        • Step 3: Change the Brightness value

        • Step 4: Pick colors accordingly

        • How to apply? (using 60/30/10 Rule)

    • Analogous

      • How to use analogous color scheme in design? : Adjacent to each other.

        • Step 1: Pick any color

        • Step 2: Make 5 copies of main color

        • Step 3: Change the Hue value

        • Step 4: Choose accordingly

    • Complementary

      • How to use a complementary color scheme in design? : Opposite to each other.

        • Step 1: Pick any color

        • Step 2: Hue value

        • Step 3: Shades and tint

        • Step 4: Make your color scheme

        • Step 5: Apply

    • Split Complementary

      • How to use a split complementary color scheme in design? : A narrow triangle.

        • Step 1: Pick any color

        • Step 2: Make copy

        • Step 3: Change Hue value

        • Step 4: Apply

• How to use triadic color scheme in design? : An equilateral triangle.

  • Step 1: Pick any color

  • Step 2: Make copy

  • Step 3: Change Hue value

  • Step 4: Shades & tone

  • Step 5: Apply

• How to use a tetradic color scheme in design? : A rectangle of colors (double complementary)

  • Step 1: Pick any color

  • Step 2: Make a copy

  • Step 3: Change Hues values

  • Step 4: Adjust

  • Step 5: Apply

• Color psychology in UX 

  • Colors and Perception

  • Colors and Emotions

  • Colors and Culture

  • Colors and UX Design

    • It expresses that 60% of the room should be a predominant color, 30% should be the secondary color and the last 10% should be a highlight.

• How to use color to improve user experience 

• The “Dark Yellow Problem” in Design System Color Palettes 

• Dark Mode

  • Why is Dark Mode so captivating? **

  • The future is dark.: Things to keep in mind when designing a dark mode for your app or websites

  • Dark UI Design: A step-by-step guide

  • Turn the lights off — designing for dark mode: It’s not just about flipping colors and inverting white to black

  • Moving towards a future of Dark UI: The benefits and current support for dark mode

  • Dark Mode — the fad that wasn’t

    • Origins of the Dark Mode

    • Why do people move over to the dark side?

    • Mythbusting

    • Is Dark Mode really better for the eyes?

    • What about the battery life savings?

    • So then why is dark mode so popular?

  • Dark Mode UI: the definitive guide: Part 1: Color

  • How to Design for Dark Mode: Creating Dark UI for Snapchat 

  • Dark Mode UI Essentials part 1

  • Dark Mode UI Best Practices 

  • Dark UI design best practices 

  • Shedding Light on Fiverr’s Dark Mode Creation Process : A well-defined color system with a semantic layer allows us to easily implement new color-related features like dark mode.

  • Dark mode: personal preference, hype or health issue? 

Space

• UI cheat sheet: Spacing friendships 

  • Why is spacing important?

  • An introduction to point grids

  • Spacing Friendships

  • The three Cs of spacing

• Spacing guide for designers 

• Growing (and Shrinking) Pains : How to fix a broken spacing system

  • Audit your system components, decide how many different visual densities you need, and name them.

  • For each density, define values for content size, container padding and shape, and layout spacing in terms of your base pixel grid (bonus: involve system users in the decision making process)!

  • Apply standardized visual density names and values to all existing components (this is the bulk of the work and may take months and an airtight communications strategy to complete — but it is worth it).

  • Create new components so each component has a version for each visual density.

  • Publish visual density changes in bulk to your libraries to reinforce the fact that this is a holistic, attribute-level, change.

Typography

• Typography can make or break your design: a process for choosing type

  • Identify your purpose

  • Identify your audience

  • Look for inspiration

  • Choose your fonts

  • Determine font sizes

  • Create a typography styleguide

  • Typography is all about experimentation. It’s both a science and an art.

• Transfer friction: typography as the surface between ideas & you

  • The secret life of paragraphs

  • Off to the side of center

  • Of faces and character

• 5 Keys to Accessible Web Typography

  • Set your base font size in relative units

  • Check the colour of your type and only then its contrast

  • Use highly legible fonts

  • Shape your paragraphs well

  • Correctly use the heading levels

• Intro to Typography: Learn how to choose fonts, why certain fonts look great in your app, and what to consider when choosing a font

  • Learn to Identify the Various Elements of Typography to Choose a Font

  • Text Hierarchy

  • How To Pick a Typeface

  • Typography Tips

• Fundamentals of typography in user interface design (UI) 

• 8 Tips — Choosing the Right Font for your Design

  • Font Families

  • Legibility, Readability, Versatility

  • Font Communication

  • Font Paring

  • Font weights

  • Look for Inspiration

  • Stand Out to Be Noticed

  • There Are No Rules

• 7 typography tips for interface design

  • Promote clarity using a hierarchy

  • Let your text breath

    • Line Height

    • Letter Spacing

    • Line Length

  • Choose font based on context

  • One family, one look

  • Align left for better readability

• Improve your designs with these typography tips 

• 10 Principles for Typography in UI Design 

• Attention to detail №1: Type: Good typographic practice makes digital designs better

  • Digital limitations

  • Font choice

• A swift guide to better typography for iOS

• A guide to recognising font styles

• 5 UX Principles You Must Adhere to for an Awesome UX Design 

  • Don’t use more than two typefaces

  • Users Already Have Fonts on Their Computers, So Use Them

  • Use Type Size to Depict Information Hierarchy

  • Headline that tells you something

  • Use a Sensible Default Size for Body Copy

• Text Alignment Best Practises 

• 7 tips to help improve your web Typography skills 

• UI Tips to Improve Your Heading UX : Actionable tips to help you make effective typography decisions and improve headings' call to action.

• UI Design: Emotions of Typography 

• How can your UI designs stand out through typography? 

Responsive

• Responsive logos: our well-deserved web innovation: Do you still believe resizing is enough?

• Being responsive - from a checklist to a BINGO card

  • device responsive

  • user (e.g. age) responsive

• Responsive grids and how to actually use them: common UI layouts

• The World Wide Responsive Web 

• Are You Forget to Design this? 

  • Not designing the missing data states

  • Not designing for proper content

  • Not designing according to different background

  • Not designing for every breakpoint

  • Not specifying hover states

Grid

• UI cheat sheet: list vs grids

• UI Grid Best Practices 

• Is Youtube following a grid system? Then why is Google Images breaking it? 

• How to create stronger layouts with the 8pt Grid System : The 8pt Grid is one of the most commonly used Layout Grid Systems there is, and for very good reason.

• Everything you should know about 8 point grid system in UX design 

Web site

• Five simple design patterns to improve your website 

  • Flat Navigation: Give your users the top level view

  • Module Tabs: When you’re facing space constraints

  • Article Lists: Give your users options to stay engaged

  • Fat Footer: Keep your users on your site for longer stretches

  • Cards: Organize different pieces into one coherent piece

• Why are governmental sites so overwhelming?

• The 6 Mistakes to Avoid When Building a Business Website (and What to Do Instead)

• How to Design for the Web in 2019

• 6 UX Design tips to reduce your Website Load time: A Designer’s role in making websites faster.

  • Avoid Rare Fonts

  • Be judicious with Social media buttons

  • Rollover buttons should be imageless

  • Accordions are your friend

  • Optimise your images before sharing them with your developer

  • To Parallax or Not to parallax

  • How to manage User Perceived Wait time?

    • Short loading time (<6s)

    • Longer loading time (>6s)

    • Skeleton screens- the reigning King of loading animations

      • The What, Why, and How of Using a Skeleton Loading Screen 

• 5 Website Features to Avoid (and how to fix them)

  • Floating Action Buttons

  • Entry Pop-Ups

  • Auto-playing Videos (and Video Ads)

  • Text Re-sizing Widgets

  • Dropdown Menus and Hidden Navigation (Specifically, Navigation Dropdown Menus)

• Designing a successful eComm site

  • RESEARCH

    • User Personas

    • Competitive Research

    • Information Architecture

    • Sitemap

  • DEVELOPMENT

• Breaking Down the UX of Switching Accounts in Web Apps

  • Design Principles

    • Make account switching an overtly obvious action

    • Make accounts visually distinguishable

    • ​​Remind users when they perform important actions

• UX Design: the things people don’t tell you

  • Buttons

  • Button States

  • Scroll Behaviour

  • Naming Your Art Boards

• Strikethrough using HTML5

  • <s> vs. <del> vs. <ins>

• 7 shopping cart design guidelines

  • Cart Notification

  • Detailed Summary

  • Edit Option

  • Show Total Cost

  • “Sign In” Barrier

  • The Mini-Cart

  • Save For Later

• To make a great web application — create an awesome website

  • Links everywhere

  • Every page is shareable

  • Every page is completely searchable

  • Everything is copyable

  • Every page is printable

  • Less loaders, instant content

• Designing better sign-up screens 

  • Signing In vs Signing Up

  • Social vs Email

  • Do the heavy lifting

  • How to do passwords

  • Less is better

  • Asking for permission

  • Try it out, test it and tweak it

• 22 rules for designing sign up & sign in journeys

  • Rules for Sign-Up (or registration)

    • Rule 1 — Ask for only the basic information you need to create the account

    • Rule 2 — Mark what is required and group it together

    • Rule 3 — Indicate password policy, but only stop the common ones

    • Rule 4 — Implement inline field validation & indicate errors onFocusOut

    • Rule 5 — Don’t block access to the account for unverified email

    • Rule 6 — Don’t just indicate that an account exists with the email — give options

    • Rule 7 — Social logins should be the norm!

    • Rule 8 — A tab key press should to go to the next field

    • Suggestion 1 — Users email should be the users identity to login

    • Suggestion 2 — After a successful sign up, send a welcome mail

  • Rules for Sign-In

    • Rule 9 — Apply inline validation for the email field

    • Rule 10 — Reset password should carry the email into the new form

    • Rule 11 — Offer password reset on the third try

    • Rule 12 — Send a password reset link and not a system generated password

    • Rule 13 — Allow the password managers to capture the users login credentials, if the user wants

    • Rule 14 — On mobile apps, allow users to use their on-device authentication to login

    • Rule 15 — SSO as a sign-in option

    • Rule 16 — Two step authentication should be a norm for sites that contain sensitive and payment information

    • Rule 17 — Understand the users cognitive load for deeper journeys and design ‘outs’ for errors

    • Rule 18 — Persistent logins should be the norm for non-sensitive sites

  • Rules for in-journey sign-ins

    • Rule 19 — Don’t force the user to login when, without login, the user can complete the journey

    • Rule 20 — Upon login, if the user has items from a previous session, OVERWRITE IT!

    • Rule 21 — Prompt account creation after the primary journey has been completed

    • Rule 22 — Order status links should not ask for logins

    • Rule 23 — Abandoned Carts links should not prompt for login

• 10 inspiring hero image websites

• Swiss style web design: Everything you need to know

  • Create clarity with fewer UI elements

  • Restrict your typography choices

  • Build a typographic hierarchy

  • Favor photography over illustration

• Layout

  • How to better design website layouts and elements part 1

    • Layout, Buttons

  • How to better design website layouts and elements  part 2 

    • Navbar, Inputs

  • 9 ways which website layouts have evolved since the web was created

    • The first website (1991)

    • Html standard (1994)

    • Table based design (1995)

    • Flash sites (1996)

    • Dynamic html (1999)

    • Css starts to take off (2000)

    • Popularity of mobile phones (2007)

    • Birth of responsive design (2010)

    • Present and future (now and future)

      • new css measurement units exist, like vh, vw (viewport height and width), which allow much greater flexibility to position elements.

      • flexbox is another concept which is part of CSS

      • Web components are a set of elements bundled together, and introduce an easier workflow, where elements become building blocks that can be reused and updated separately.

• Web design theory: Comparison and Equivalence

• The Baymard Institute: A glorious, evidence-based trove of UX best practices

• Using Material Density on the Web 

• UI cheat sheet: The 5 love languages of the web 

  • Like

  • Save

  • Favorite

  • Rate

  • Views & listens

• UX Design Practices: How to Make Web Interface Scannable 

  • Tips on Improving Scannability

    • Prioritize the content with visual hierarchy

    • Put the core navigation into the website header

    • Keep the balance of negative space

    • Check that CTA is seen at once

    • Test the readability of copy content

    • Apply numbers, not words

    • Place one idea in one paragraph

    • Use numbered and bulleted lists

    • Highlight the key information in the text

    • Use images and illustrations

• 10 easy tricks to improve your website design 

• UI/UX Design: Pattern Blocks 

• Designing persuasive banners that don’t ruin your UX 

  • Types of Banners

    • Actionable

      • Time-based

      • Login / Signup Persuasions

      • Inspiration-based

      • Offer-based Persuasion

    • Informational

      • Status Based

      • Highlighting USPs

  • Things to keep in mind while Designing Banners

    • Banner Placement

    • Making them stand out

    • Design for Scalability

    • Banner Blindness

    • Abuse and Overuse

Mobile

內容移到Mobile User Interface 

Accordions

• UI cheat sheet: Accordions 

Animation

• The 8 most important UI animations of all time

• How tiny Animations improve the user experience

• Animation principles for UX and UI designers

• How to use overshoot to upgrade your UI animations 

• Disney’s 12 principles of Animation in everyday UI design? 

Breadcrumbs

• Design Guide: Breadcrumbs

  • Breadcrumb width should not exceed half of the page

  • Collapse breadcrumbs by default if they have 4+ items

  • Items with long name should leverage ellipses

  • Separator icon should mimic movement

  • Last Item should not be clickable

Buttons

• 5 Best Practices for Designing Effective Buttons 

  • Explain buttons with what they do.

  • Make the important button stand out.

  • Design buttons that everyone can understand.

  • Avoid making too many buttons.

  • Most importantly, make buttons look like they are buttons.

• 5 tips for better button design

  • A button should look like a button

  • Size

  • Alignment is everything!

  • Work on your shadows

  • Readable labels

• Button Design — UI component series

  • Buttons vs Links

    • Links vs. buttons 

      • a button does something a link goes somewhere

  • The button state communicate its status to the user

  • Buttons come in various colors, shapes, and sizes.

  • Styles communicate the importance of an action

  • Sometimes there is no “default”

  • Don’t Make Me Think

  • Consistency improves speed and accuracy

  • Make buttons large enough for reliable interaction

  • Design for accessibility

  • Gestures become fairly widely adopted

  • Good button label invites users to take action

  • Ok/Cancel or Cancel/Ok? Either is fine

  • Disabled buttons suck

• When Cancel Buttons Should Not Say “Cancel”

• 5 Rules for Choosing the Right Words on Button Labels

  • Rule 1: Use Action Verbs

  • Rule 2: Use Precise Diction

  • Rule 3: Use Task-Specific Language

  • Rule 4: Use the Active Imperative Form

  • Rule 5: Use Sentence-Style Capitalization

• UI cheat sheets: buttons

• Rounded Corners

  • Make sense of rounded corners on buttons

    • Are round corners more recognizable?

    • Should I use fully rounded buttons?

    • When do fully rounded buttons NOT work?

    • The aesthetics of rounded corners

  • The Rounded User Experience 

  • Rounded Corners Over Sharp Corners 

  • UI/UX Design: Corner Smoothing (with Figma)

• Level up — Designing better buttons

  • Appearance and behaviour

  • Styling your button

  • Content and microcopy

  • Limit yourself to just 1

  • Where should I place my button?

• Design better buttons

  • Most important thing to know: A BUTTON SHOULD LOOK LIKE A BUTTON

  • Familiar = good

  • Button dissection

  • Spacing and alignment

  • The right size

  • Good practices.

    • Important buttons also work well with icons.  

  • Rounded corners

  • Aligning icons

  • Edge balancing

• The anatomy of a button

  • Characteristics

    • Text and Icon

    • Color

  • Variations

    • Skeuomorphism

    • Flat Design

    • Ghost Button

    • Illustrative

  • Technicality

    • Reactive States

    • Size

    • Border

    • Corners

  • Usage

    • Events

    • Higher-level controls

• Choose Perfect Corner Radius for your Buttons. 

• Learn to Design “Buttons” from Spotify, YouTube, Dropbox, Twitch, Uber, Airbnb, etc. 

  • #1 Design the Buttons with Consistency.

  • #2 Make The Labels Short and Clear

  • #3 Don’t Forget About Whitespace

  • #4 Make Buttons Easy to Find

  • #5 Describe, What Buttons Will Do!!

  • #6 Size Them Properly.

  • #7 Align the Content Inside Buttons

  • #8 Mind The Order

  • #9 Avoid Using Too Many Buttons

  • #10 Provide Feedback

• Button Metadata 

• OK-Cancel or Cancel-OK? The Trouble With Buttons. 

• Simple Tips on UX Button Design 

Card

• Successful card design in 3 steps: UX, UI, and Framework

  • Information Architecture/UX Phase

  • Visual/UI Phase

  • Framework for Implementing Cards

• 8 rules for a perfect card design

• Simple Design Tips for Crafting Better UI Cards

• Ultimate guide for designing UI cards 

• 4 popular types of cards in UI design 

• How to design better cards 

Carousel

• The Usability of Carousel Design

• Tips for Designing Carousels 

Dashboard

• Dashboard Design: Key Performance Indicators and Metrics: How to select the right data for your dashboard

• How to design a sleek dashboard UI

• 9 best practices when designing a dashboard

  • Understand the Needs of the User

  • Decide on an End Goal

  • Pick a Dashboard Type

  • Use the Five-Second Rule

  • Go Minimalistic

  • Put Emphasis on Information Architecture

  • Choose Your KPIs Carefully

  • Provide Context

  • Don’t Forget about Aesthetics

• Dashboard Design: Useful Tips 

• Dashboard: Creating a Smart Assistant 

• How to Design better dashboards? 

Dropdown Menu

• 7 tips for dropdown menu design

• UI cheat sheet: dropdown field

Filter / search

• 5 things to be mindful of when you design filters

  • No filter state

  • Define your filter logic and be clear about it

  • What are the users’ next steps after filtering

  • Always try to test out your filter design

  • Let users share their filter result by URL

• Designing an omni-search 

  • You might build a separate search field for each entity, or you might combine them all into one input field. This is known as omni-search.

Form

• 11 form design guidelines

  • Keep it short

  • Visually group fields and their labels

  • Show your requirements clearly

  • Avoid using the placeholder text as the field label

  • Use auto-focus

  • Inform user that caps lock is on

  • Use visual constraints

  • Don’t hide your error messages

  • Mark option fields clearly

  • Use images to increase engagement

  • Use Predictive Search Whenever Possible

• An ultimate guide to form design: How to design converting online forms

  • Main components of a form

    • Greet your respondents: Title and introduction

    • Place related headers and subheaders

    • Break questions with dividers

    • Decide whether you’ll use multi-page or single page form

    • Emphasize Calls-to-Actions (CTAs)

    • Identify your form fields

    • Never forget “Thanks” page

  • How to write so people will listen

    • Speak simply

    • Make it personal

    • Eliminate passive sentences

    • Cut as many words as possible

    • Use contracted versions of words

    • Cleave long sentences

    • Review the written content

  • The psychology of forms

    • Compare costs and benefits

    • Chunk text

    • Define formatting requirements

  • Hicks Law

    • Cut ruthlessly (again)

    • Reduce the need for typing

    • Shorten your form with conditional logic

  • Dual-Coding Theory

    • Visualize the information

    • Consider the colors

    • Make your form beautiful

  • The Endowed Progress Effect

    • Stagger questions from easy to hard

    • Illustrate the progress

  • Questions, answers and grouping

    • Brainstorm the questions

    • Group the questions correctly

    • Define a logical question sequence

    • Decide on “compulsory vs. optional vs. ‘nice-to-have’”

    • Ask one thing at a time

    • Give shortcuts

  • Audience, purpose and context of a form

    • Know who are you talking to

  • Form visuals and structure

    • Align labels top-left

    • Avoid placing questions side-by-side.

    • Try one-thing-per-page

    • Use field length as an affordance

  • Errors and the path to completion in form design

    • Don’t rely on color alone

    • Specify errors inline

    • Use field validation

    • … but don’t be too strict

  • What is a payment form?

    • Limit the steps in payment

    • Use visual indicators of security

    • Clearly explain why you’re asking for sensitive information

    • Save the data

    • How to add a payment integration with JotForm

  • When you’ve finished the form…

    • Test your form before sharing

• Designing complex user forms: 12 UX best practices

  • Reassure users on the duration of the flow

  • ️Make users feel like they’re not working

  • Present all steps in a clear and understandable way

  • Explain why you’re asking for each piece of information

  • Remove distractions

  • Reassure users that their information can be saved

  • Show the real-time impact of the user’s action

  • Give some hints

  • Add some human touch

  • Bring in some credentials

  • Make it clear where users are and where they’re going

  • Enable users to review their information

• Best practices for form design 

• 5 UI/UX Tips to Design Forms in Web Applications 

• Making forms more user-friendly : Practical tips for designing simple and inclusive forms for the web.

• Best practice for date-of-birth form fields 

• What’s the best way to display dates to international users? 

• The role of password verification at sign up 

• How to indicate required fields in forms 

• 21 rules for an intelligent form design — Part 1 

• 21 rules for an intelligent form design — Part 2 

• 21 rules for an intelligent form design — Part 3 

• 21 rules of intelligent form design 

• How we design forms at Doctolib 

• Best Practices to Reduce Cognitive Effort on Checkout Forms 

Headspace

• 7 Laws of UX that Headspace Follows : How Headspace Uses Laws of UX to Design better Interface.

Icon

• Where to? The journey to Uber’s iconography

• How To Design An App Icon When The Logo’s Not Enough 

  • Strive for memorability and uniqueness, analyze your competitors

  • Take business values and branding into account

  • Stick to minimalism

  • Follow the app stores guidelines

  • Design with scalability in mind

  • Focus on consistency and conveying the app’s message

  • Bonus: Trends in app icon design

    • Flat icons with some dynamic

    • Gradients

    • Letterpressed design

• UI cheat sheet: Icon categories + icon style reference guide 

• How to Design Better Icons 

  • Tip 1 — Set up a grid

  • Tip 2 — Make it consistent

  • Tip 3 — Make it clear

  • Tip 4 — Use equal spacing

  • Tip 5 — Optical correction

  • Tip 6 — Fill the space

  • Tip 7— Combine styles

  • Tip 8 — Handy tools

• The ultimate guide to designing icons 

• Create icons like a PRO 

• Redesigning an Entire Icon System 

Landing page

• The new landing page is to have no landing page at all

• 5 things that are killing your landing page 

• 13 Tips For Improving Landing Page Design 

• Unprofessional Landing Pages: How To Make Your Pages Look Like a Design Team Was Behind It. 

  • Headline + CTA + Video or Image

• Things great SaaS landing pages have in common 

  • First impression matters

    • Having clarity

    • The problem you’re solving

  • Showcase your product

  • Let the users speak for your product

  • Don’t get too technical

  • Tell a story

• Landing page design best-practices that increase conversion 

  • Friction reducers

  • Consistent call to actions

  • Using subheadings to address user questions

  • Testimonials that address user objections

  • Strong storytelling

• 10 tips to building a landing page that converts 

Link

• You’re not still using “Read More” are you?

  • Accessible Link Checklist:

    • Step 1: Valid HTML

    • Step 2: Grammar and what not

    • Step 3: Styling

• How to design and style better links? 

Modal

• Modality Is the One UX Concept That Most Designers Don’t Fully Understand

  • How should Modality be used?

    • Always show a close button

    • Cancel buttons on iOS and Android are most commonly placed on the top left side of the navigation bar.

    • A fixed floating placement at the bottom of the screen or inline at the end of the page is an alternative placement that I personally recommend.

• Removing Nested Modals From Digital Products 

• Best Practices For Modal Window Design 

• Anatomy of an Optimally Designed Modal 

Navagation

• Navigation design: almost everything you need to know

  • What is navigation design?

  • Why navigation design is so important

  • Common navigation design patterns in UX design

    • Hamburger menu

      • Hamburger Menus — A Challenge to Accessibility and UX Design Principles? 

        • Cons

          • They keep important information hidden from the user.

          • Their position is less reachable on touch screens

        • Pros

          • Their popularity outweighs all concerns.

          • The versatility is endless.

      • Alternatives of hamburger menu 

        • Bottom navigation for mobile

        • Tabs

        • Navigation with vertical lettering

        • Progressively collapsing menu

        • Menu scattered around the perimeter of the fold

        • Labeled Menu Button

    • Tabs

    • Vertical navigation

    • Call-to-action button

    • Breadcrumbs

  • What makes successful navigation design?

    • Create and maintain clarity

    • Use meaningful labels, not formats

    • Use mega menus not dropdown menus

    • Align navigation design with user goals

    • Navigation design is more than just a back button

    • Prototyping (and testing!) your navigation design

• The Power of Good Website Navigation, and How to Harness It for More Conversions

  • Use Clear-Cut Categories For Your Navigation

  • Search

  • Breadcrumbs

  • Product page

  • Conventional patterns

• Re-Imagining The Bottom Navigation Bar

• The Fastest Navigation Layout for a Three-Level Menu 

• Top vs side navigation: Which one is better for your product? 

• How to design friendly sidebar navigation? 

• Rules for Modern Navigation 

• 10 UX Design Tips for Better Navigation 

Notification

• 4 Interesting Mobile Notifications Concepts 

• What Is Alert And 11 Alert Example CSS Javascript For Website 

Scroll

• UI cheat sheet: pagination, infinite scroll and the load more button

• Infinite Scroll Vs Pagination in UX Design 

• Scrolling is boring, predictable, two-dimensional… right? 

  • Information Integration

  • User Awareness

Selectors / radio buttons / checkboxes / Toggle Switch / Toggle Token

• UI cheat sheet: radio buttons, checkboxes, and other selectors

• Selection controls — UI component series

• How to Design Better Checkbox, Radio and Toggle Buttons? : Let’s take a deep dive into checkbox, radio and toggle buttons.

• Why Toggle Tokens Are a Better Alternative to Checkboxes

• The Confusing State of Toggle Switches

  • Indicating Status

  • Interaction Consistency

• The good, the bad and the toggle : A dissection of the toggle, checkbox, radio button, and related components

• Tree Lists With Indeterminate Checkboxes in React 

Sticky

• Things to consider when designing sticky UI elements 

Table

• 11 table design guidelines

  • Fixed Header

  • Fixed Column

  • Customizable Columns

  • Pagination

  • Filter

  • Data Sorting

  • Collective Actions

  • Simple and Minimalistic

  • Plain Font Style

  • Item Link

  • Hover Action

• Best Practices for Pricing Table Design 

Textfield

• Guidelines for text fields design

  • The different states

  • Clear Text Label

  • Vertically aligned labels

  • Use visual constraints

  • Show error feedback

    • Why you should add a visual indicator to your inline error messages 

  • Feedback icons

  • Use auto-formatting

• UI cheat sheet: text fields

• Text fields & Forms design — UI components series

• How to Style any Input Field – Tips and Techniques 

• Regular Labels Are Better Than Floating Labels 

Tooltips

• How to design and style better tooltips? 

• How to use and design a Tooltip that helps the user 

工具

Diagram

• User Interface Flow Diagrams (UI Storyboards)

• UML Activity Diagrams: Detailing User Interface Navigation

Storyboard

• Storyboard

• User Interface Flow Diagrams (UI Storyboards): An Agile Introduction

• Storyboarding in the Software Design Process

• The 8 Steps To Creating A Great Storyboard

• Storyboarding in UX Design

Storybook

• Why You Should Always Use Storybook When Developing User Interfaces

• Storybook Addons 

• Storybook 6.1

• Storybook 6.3  

Front End Design

• Rethinking the Front-end

  • Component Composition  (Part 1)

  • How to Start Designing Front-end Architectures (Part 2)

Voice User Interfaces

• Design guidelines for voice user interfaces

  • Show the system status

  • Match to concepts in the real world

  • Maximize user control and freedom

  • Be consistent and follow standards

  • Prevent errors

  • Expect users to recognize rather than recall

  • Enable flexibility and efficient operation

  • Apply minimal design

  • Help users recognize, diagnose, and recover from errors

  • Provide help and documentation

• Designing better voice interfaces for everyday life

• 3 key takeaways from learning how to design for voice

  • If you have designed experiences before, some things are going to stay the same

  • If you have designed experiences for GUI-based products, some things are going to be different

  • VUIs are yet another territory of inclusion/exclusion

• Voice isn’t ‘the next’ interface, it’s just ‘a new’ interface: It’s not the future of user interface, but another new interface that we must design for and deliver on.

  • Advantages that visual interfaces lack:

    • Shorter and faster flow

    • No hands required

    • Intuitive control

  • The drawbacks of voice

    • Generic input

    • Slow and inaccurate input

    • Zero privacy

• How Dieter Rams’ new advice applies to voice