16 comments

  • Radley MarxRadley Marx, over 3 years ago

    Useful tip: in Figma, layout grids are not set globally. You can make as many as you want, save them as Layout Grid styles, and apply them per frame (artboard). This means you can set up specific grids for desktop, tablet, and mobile.

    0 points
  • Stuart McCoyStuart McCoy, over 3 years ago

    Call me old but this is the same basis for ALL graphic design. Good layout is good design. Great design is knowing when to bend these rules but still stick to the spirit of the grid. Also, UI/UX isn't just the purview of mobile app and web development either. It's part of what ALL designers do every day, it's just not as obvious.

    0 points
    • Dan GDan G, over 3 years ago

      honestly this pov is just as damaging as the people with non graphic design backgrounds who see visual design as the skin on top or an afterthought.

      Also, UI/UX isn't just the purview of mobile app and web development either. It's part of what ALL designers do every day

      this just isn't true, and underplays ux as a subject. it requires a lot of training and thought, it's not just basic usability. you cannot tell me that most designers would be capable of running a ux research piece.

      1 point
  • Florian GrauFlorian Grau, over 3 years ago

    I've never understood the baseline grid: For body text you usually set the line height to 120-150% of the font size. How does this work out with a fixed 4px base line grid?

    0 points
    • Raphael LoderRaphael Loder, over 3 years ago

      It can definitely work, but only if you have very few text styles and sizes. Basically you just make sure that your line-height is a multiple of 4.

      It is, however, extremely impractical for development work, so I don't really understand why anyone would advocate for it in digital. Visually, they align nicely if you design with a baseline grid in mind. But why would any dev implement a work-around just to make this happen for minor visual improvements?

      Just make sure that the "soft" grid (individual relative spacing between elements) aligns to the 8-point grid and you're good to go.

      0 points
      • Dan GDan G, over 3 years ago

        This isn't really true.

        It's totally practical and not remotely difficult to align around a 4pt grid. You're still using the "soft" grid rather than an enforced "hard" grid, you're just making sure that your type sizes have a sensible line-height.

        It also makes it way easier to use the soft grid as when you're setting up spacing in Figma or whatever, you don't have to worry about odd distances as you've left the line-height at Auto or something like 14/19.

        0 points
        • Florian GrauFlorian Grau, over 3 years ago

          Can you elaborate on your second paragraph? How do you align to a baseline grid, when you leave your text styles at auto line height (or some other odd number)?

          0 points
          • Dan GDan G, over 3 years ago

            No I'm saying that's why you should use a baseline grid (of sorts). I make sure every type style has a line-height that is a multiple of 4 so that spacing never gets ruined elsewhere.

            You don't need a visible baseline grid, it's just there in the background.

            0 points
        • Raphael LoderRaphael Loder, over 3 years ago

          I'm not sure if you've misunderstood. Designing around a baseline (whatever value you choose) is not very difficult. I'm talking about implementation, especially at larger projects. It becomes relatively messy and very convoluted to support it. At smaller projects that focus on such details it can be definitely worth it (see here for example: How We Implemented a Baseline Grid Using CSS or CSS Baseline: The Good, The Bad And The Ugly ).

          In the end it all comes down if you want put in the effort and time to support and update this.

          0 points
          • Dan GDan G, over 3 years ago

            I work on a global product so no i haven't misunderstood. I'm not saying you should be using some specific CSS baseline grid, just having all of your type styles using a line-height that's a multiple of 4 is enough for 80% of cases.

            0 points
    • Dan GDan G, over 3 years ago

      Design isn't just a list of best practices ticked off from memory.

      1 point
      • Florian GrauFlorian Grau, over 3 years ago

        What do you mean?

        0 points
        • Dan GDan G, over 3 years ago

          it's more nuanced than "For body text you usually set the line height to 120-150% of the font size" which a lot of people who come in from a non graphic background don't necessarily get (not having a go at you specifically).

          1 point
          • Florian GrauFlorian Grau, over 3 years ago

            Of course it's more nuanced. But most of the times you still land at those values for readable body text.

            1 point