First, function oriented

The most important thing in design

  • Get the function right
  • Contracted design
  • Use simple authoring tools
  • Design simple, complete features: that is, start with MVP (the simplest executable product) as the design goal

Ii. Design principles

  1. Hierarchy: Hierarchy
  2. Consistency: Users observe the use of color, spacing, shadows, placement, fonts, and word weight in all corners of the site, all within a limited set of frames, a set of frames that quickly establish intimacy.
  3. Design Book for Everyone

Iii. Design system

  1. layout

    1. Put in the middle

    Unless large screen viewing is your core scene, content should be between 600 and 800px wide

    1. Multi-column layouts

      • Core: Keep the content at the right width to maintain readability
      • Rule: Main content column elastic shrinkage (can have minimum width); Secondary content column fixed width

    2. spacing

      • Keeping basic space between elements is the most basic design technique
      • Options: More than ten spacing options are designed based on multiples of 4px
      • Multi-white: Debug spacing from loose to tight: focus on [which elements are relevant], pull them together, and then tune [from local to global]
      • Express relevance relation

    3. The text

      • Option design:
        • Setting font options
        • Set the hierarchy by combining word weight and color (gray scale)
      • Alignment: Based on baseline alignment, the lower edge of the text
      • Line height: The line height is roughly inversely proportional to the type size

    4. color

      • Color options
        • gray
        • Theme color: Theme color that runs through the world, appearing above buttons, logos, backgrounds, and other decorative elements
        • Function color: red: conveys error information or prompts dangerous operations. Yellow: warning; Green: Some positive change that signals success or growth
      • Use a color palette: use the lightest white for the main title and a lighter version of the background color for the secondary title
      • A note of caution when using color: Using color incorrectly can upset the page hierarchy balance

    5. Depth: Complements spacing and represents hierarchy from another dimension

      • Shadow options

    Small shadows make elements stand out a little, but not steal the eye

    Medium shadow applies to small pop-up modules, as shown in the drop-down box below

    The deepest shadow is used for scenarios that completely separate modules from pages

Four, practical skills

  1. The hierarchy on the picture

    1. Add the mask and the contrast will be clear

    2. Add a shadow to the text to increase the contrast of the text without affecting the whole image

  2. Clear user avatars

Add an inner shadow, which is equivalent to the outer border of the user’s avatar

  1. Kill line

Shadows can be used instead of borders

Different background blocks can also be used instead of borders

Clear spacing does not require dividing lines

Five, resources,