Button Cheat Sheet Summary:

1. Button Actions:

• Call to Action (CTA): Directs users to specific actions like "sign up" or "buy now."
• Primary Action: Helps users complete a task, e.g., "next" or "start."
• Secondary Action: Alternative to the primary action, e.g., "cancel" or "go back."
• Tertiary Action: Less frequent actions like "edit" or "add friend."

2. Common Button Styles:

• Solid Buttons: Plain buttons with a solid fill.
• Line & Ghost Buttons: Outlined buttons, with line buttons on light backgrounds and ghost buttons on dark ones.
• Rounded Buttons: Fully rounded edged buttons.
• FAB (Floating Action Button): Prominent, circular buttons for primary actions.
• Text Link: Simple textual links.
• Icon with a Label: Buttons combining an icon and text.
• Icon Button: Buttons with only an icon.

3. Button Coloring & Styling:

• Color: Ensure colors are accessible to all, considering potential cultural connotations.
• Border-radius: Determines how rounded the button corners are.
• Shadows: Can be used to make the button stand out or indicate states.
• Label Styling: Focus on legibility of the button's text.

4. Button States & Feedback:

• Active & Disabled: Shows whether a button can be clicked or not.
• Hover & Hover Off: Indicates the button can be clicked when the cursor is over it (desktop-specific).
• Focus: Highlights the current button of interest, especially for keyboard navigation.
• Pressed: State when a button is being actively clicked/tapped.
• Clicked: Indicates that the button was successfully pressed.

5. Button Labeling:

• Use consistent and clear verbs.
• Choose a consistent font case.
• Maintain consistency in labeling throughout the interface.

6. Touch Targets:

• Desktop: Smaller touch targets can be used due to precision of mouse cursors.
• Touchscreen: Aim for a minimum touch target size of 10mm to accommodate finger sizes.

7. Button Position: Debate over whether the primary button should be on the left (option A) or right (option B) when two buttons are placed side-by-side.

8. Button Hall of Fame: The Material Design System is highlighted for its well-thought-out button designs.

9. Closing Thoughts: Buttons are essential in interfaces. It's crucial to understand their design and function for a seamless user experience.

Button Design and Interaction Summary:

• Historical Context: Physical pushbuttons served as predecessors for today's digital UI components. Their ease of use allows users to initiate actions without understanding complex mechanics.
• Buttons vs. Links: Buttons perform actions (e.g., "submit," "upload"), while links navigate to other areas.
• Button States: They should be distinct and include:
• Normal
• Focus
• Hover
• Active
• Progress/Loading
• Disabled
• Button Styles: Popular styles include:
• Rectangular with rounded corners
• Styles that signal the importance of an action (Primary, Secondary, Tertiary)
• Design Principles:
• Instant Gratification: A button's function should provide immediate feedback.
• Don’t Make Me Think: Interface should be intuitive and consistent.
• Consistency: Helps improve user accuracy and speed.
• Touch Target Size: Should be sufficiently large (48 x 48 dp recommended) for easy interaction.
• Accessibility: Buttons should be accessible for everyone, including visually impaired users.
• Gestures: Can be integrated as alternative interactions for advanced users.
• Button Labels: Should be action-oriented and descriptive.
• Disabled Buttons: Should be avoided. If a button can't be used, provide feedback as to why.
• Dialog Decision: The placement of "OK" and "Cancel" varies (OK first in Windows, OK last in Apple). Both are acceptable.

The article also suggests reading further on text fields, forms design, and selection controls for a comprehensive understanding of UI components.

Modern UI Design: How to Create Impressive Shadows in 6 Steps

1. Avoid Shadow Defaults: Default shadow presets in design tools like Sketch, Figma, or Adobe XD are often not ideal. Customize them for a modern appearance.
2. Soft Shadows are Key: Enhance shadows by reducing opacity (10–30%) and increasing blur levels (16px-40px) to give them a softer look.
3. Use Blur as a Layer for Shadows: Instead of the standard shadow style, create a separate layer with blur for the shadow. This gives more control over shadow placement and size, though developers might find it challenging.
4. Natural Shadow Colors: Instead of pure grey, add a touch of your UI's neutral color to the shadow for a more natural appearance.
5. Incorporate Material Colors: Shadows from semi-transparent real-world materials often reflect the object's color. Emulating this in UI can provide a unique look.
6. Draw Inspiration from Reality: Observe real-world objects and materials. Note how they cast shadows and how light interacts with them to inspire your designs.

Improving shadow design enhances the overall quality of your work. For more insights, the author points to extended blog posts and Instagram tutorials.

Guide to Creating Gorgeous UI

Who's This Guide For?

• Developers who need to design UI quickly.
• UX designers who want a better-looking portfolio.

Main Message: You don't need an innate sense of beauty to design great UI. Analysis and deliberate practice are the keys.

UI Design is Practical: This guide is about practical application, like Krav Maga martial arts — effective and direct.

Key Rules for Beautiful UI

1. Light Comes From the Sky
• Shadows help us identify UI elements.
• Shadows are usually at the bottom of objects because light typically comes from above.
• Even in 'flat' design, subtle shadows help identify what we're looking at.
2. Black and White First
• Start designing in grayscale. It helps focus on layout and spacing.
• Color should be added purposefully. Often, a single color or a single hue with variations is effective.
• Tools and resources:
• Learn UI Design course.
• Article: "Color in UI Design: A (Practical) Framework".
• Tool: Adobe Color CC.
• Dribbble's search-by-color.
3. Double your Whitespace
• Whitespace (or spacing) makes your design breathe.
• By default, most designs (like HTML) have very little spacing. Increase it for a cleaner look.
4. Learn the methods of overlaying text on images. This is a great way to add depth and interest to your UI. There are a few different ways to overlay text on images, so experiment until you find a method that works for you.
5. Make text pop — and un-pop. Not all text needs to be the same weight or color. Use different weights and colors to create a hierarchy of importance. You can also use bold or italics to make text pop.
6. Use only good fonts. The fonts you choose can make a big difference in the overall look and feel of your UI. Choose fonts that are easy to read and that complement each other.
7. Steal like an artist. Don't be afraid to borrow ideas from other UI designs. This is a great way to learn new techniques and find inspiration.

1. Hierarchy with Color & Weight:
• Don't rely only on font size to denote importance.
• Use bolder fonts and different colors instead of just bigger text for important items.
• Stick to two or three colors and two font weights for clarity.
2. Grey Text on Colored Backgrounds:
• Grey text works best on white due to reduced contrast.
• On colored backgrounds, either:
• Lower the opacity of white text, or
• Choose a color similar to the background.
3. Natural Shadows:
• Offset your box shadows vertically to simulate a natural light source.
• For more on shadows, refer to the Material Design Guidelines.
4. Fewer Borders:
• Instead of always using borders:
• Try box shadows,
• Use different background colors, or
• Increase spacing between elements.
5. Icons and their Sizes:
• Small icons can look disproportionate when enlarged too much.
• Instead, enclose small icons in shapes with a background color.
• Consider premium icon sets for larger icons.
6. Accent Borders for Flair:
• Add colorful borders to certain UI elements to enhance design.
• If unsure about colors, use constrained palettes like Dribbble’s color search.
7. Button Designs and Hierarchy:
• Not every button needs a colored background.
• Design buttons based on their importance: primary (solid, high contrast), secondary (outline or low contrast), or tertiary (like links).
• Red buttons shouldn't be used for every negative action, but only when it's the main action.

In essence, these tips guide non-designers in making design decisions that improve the visual appeal and user experience of their projects.

Animation in UX: Key Points

1. Purpose: Animation in user interfaces helps guide users, show relationships between screens, and grab attention.
2. Duration & Speed:
• Optimal animation speed: 200-500 ms.
• Too fast (<100 ms): users might miss it.
• Too slow (>1 second): feels like a delay.
• Adjust speed based on device: mobile (200-300 ms), tablets (400-450 ms), and wearables (150-200 ms).
• Web animations should be even quicker (150-200 ms) to feel smooth.
3. Size & Movement:
• Animation duration depends on the object's size and how far it moves.
• Avoid bounce effects; they can be distracting.
• Avoid motion blur; it's not commonly used and can be hard to reproduce.
• List items should appear quickly, within 20-25 ms.
4. Easing: Makes animation look natural.
• Linear motion: constant speed, feels unnatural.
• Ease-in: starts slow, speeds up.
• Ease-out: starts fast, slows down.
• Ease-in-out (standard curve): acceleration then deceleration. Most commonly used.
5. Choreography:
• Equal Interaction: All elements animate with the same pattern.
• Subordinate Interaction: One main element grabs attention, others follow.
• Objects changing size should move in curves for a natural feel.