Skip to content

Instantly share code, notes, and snippets.

@Explosion-Scratch
Created July 21, 2024 18:27
Show Gist options
  • Save Explosion-Scratch/c0413583125a00ca90d8144707f3906d to your computer and use it in GitHub Desktop.
Save Explosion-Scratch/c0413583125a00ca90d8144707f3906d to your computer and use it in GitHub Desktop.

Rule 1: Good Design is as Little Design as Possible

• Focus on essential features and make them better and more useful for users • Avoid clutter on the screen by using fewer colors, words, and elements • Start with the key functionality or main selling point of the website, such as a heading, input field, and button • Design as little as possible, as this is often all that is needed

Rule 2: Use the Law of Similarity and Proximity to Simplify Design

• Use shape, size, color, and spacing to group elements and create a simple design • The law of similarity makes the design better and more consistent, and is easier to implement • The law of proximity gives a better understanding of layout and spacing • The design should be scannable within seconds, making it easy for users to understand

Rule 3: Elements Need More Spacing Than You Think

• When designing a specific element, the space may seem too much, but users scan the whole UI before focusing on individual elements • Start with a lot of spacing and look at the design as a whole, then remove spacing until you are happy with the results • Use a system in place to ensure consistent spacing, such as using values that are divisible by four

Rule 4: Use a Design System

• A design system is especially useful for big and complex websites or apps • It is made up of essential elements and components, and helps to create a consistent design • Define key design elements, such as spacing, fonts, and colors, and assign them as global variables • Use a design system to style websites, rather than relying on a CSS framework

Rule 5: Hierarchy is Everything

• Emphasize certain elements on the page to help users navigate and find important actions • Use size, weight, and color to emphasize important elements, but start small and avoid overdoing it • Ask yourself what the first thing the user will look for, and emphasize that element • Use contrast, font weight, and font size to emphasize important elements

Additional Tips

• Introduce depth to add character to the design, using colors and shadows to elevate important elements • Use accent colors to highlight important elements • Replace solid colors with subtle gradients to add excitement to the design • Work on lists and tables to make them more fun and engaging for users • Use cards to make bland elements more interesting • Read design books and study top-tier websites to get inspiration and learn practical tips • Use design inspiration tools, such as Mobbin, to find inspiration and save designs to a library • Trust your instincts and take breaks from the design process to come back to it with fresh ideas • Don't fall in love with your design, and be open to adjusting it based on feedback from friends, colleagues, and users.

Based on https://www.youtube.com/watch?v=qyomWr_C_jA

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment