20 comments

  • Evan DinsmoreEvan Dinsmore, over 8 years ago (edited over 8 years ago )

    I've never heard anyone say that the physics center is not the visual center of the play button. What is true is that using design tools with built-in rulers, the physical center will always be based on a square, so you need to rely on optics (or in some cases, and if you need to be precise, circular bounds as shown here).

    I have issue with a circle being better at finding the physics center of a complex shape, however. It works on a triangle, but in this image, there is much more white space above the Twitter icon, and slightly more above the Github and Dropbox icons in the circle version: https://d262ilb51hltx0.cloudfront.net/max/1440/1*Dx2l0auXze0i3yX0j1_nTA.png

    That image is more of an argument why optical alignment is important, because relying on numbers can easily lead to awkward alignment, with the false belief that it's objectively correct.

    13 points
    • Account deleted over 8 years ago

      I agree. I don't think there is one "be-all, end-all" solution for this. This also doesn't account for optical illusions and such created by whitespace, "weight" etc.

      To be honest, I just kind of figured this stuff was a given... and was surprised to see it presented as some revolutionary new solution to something. Maybe it's the way it was written?

      1 point
    • yuki guyuki gu, over 8 years ago

      https://www.dropbox.com/s/b5fv0la5qlz9tgx/example.png?dl=0

      0 points
      • Evan DinsmoreEvan Dinsmore, over 8 years ago

        Alignment is rarely ever about math, it's what looks correct. Neither is perfect, but optically I prefer the top row better. The Twitter bird, for example (and particularly when placed in a circle) has a gap between the wings that makes it appear to have much more whitespace above in the bottom row. Horizontally, however, the bottom row's Twitter icon is better aligned. The ideal Dropbox icon would be halfway between the two. And the top row for both Facebook and Github look better to me.

        Keep in mind, the optical center is usually higher than the true vertical center depending on the context. It's taken into account in architecture, typography, and should be taken into account when aligning icons as well.

        0 points
    • Adrian SchaedleAdrian Schaedle, over 8 years ago

      You don't see this as a deficiency in existing tools though? What's preventing our tools from being more mathematically aware of the relationship between shapes?

      I think it would be nice to reify the idea of a weight, to have the program guess where it lies in some geometry, and still give the user the ability to nudge where necessary. But there's a big difference between nudging some pixels, and nudging a useful, higher-level abstraction.

      1 point
      • Evan DinsmoreEvan Dinsmore, over 8 years ago

        I think a computer trying to figure out how to align something optically is going to be very difficult until we have AI with context awareness. It would be awesome if it were possible, but at the same time, unless it's perfect every time, people will use it as a crutch (like they do currently with vertical/horizontal alignment, but potentially more often).

        For example, Photoshop has something called optical spacing in the text palette which tries to kern text to the best of its abilities. It's decent, but it's not a replacement for taking the time to do it manually.

        0 points
        • Adrian SchaedleAdrian Schaedle, over 8 years ago

          I think a computer trying to figure out how to align something optically is going to be very difficult until we have AI with context awareness.

          There are many methods for finding the centroid of an object, all expressed in simple algorithms. And I don't think people would rely on it as a crutch — it would be an affordance to be able to override the precise position of a shape by being able to express "align this shape 5% south of the centroid" rather than "set this polygon bound by a rectangle to pixel coordinates 400x666".

          Most of the time though, it would just look correct, and good defaults are the hallmark of good software.

          2 points
          • Evan DinsmoreEvan Dinsmore, over 8 years ago

            I think people would rely on it as a crutch just as they do now for built-in alignment and optical text spacing. I'm not saying I don't want something with better defaults, either, I just think it's incredibly hard for a computer to understand the context of an object. Is it single colour or many colours that may cause optical illusions? Is it a small icon that's going to be centered in a button, or a large watermark that's going to be centered on a large page, again, causing optical illusions? But maybe something as simple as putting a marker on the centroid and having the option to align that to smart guides, or a toggle to center via centroid vs the default center point, and rotate around that point would be enough to make designers' lives easier.

            0 points
    • John FlynnJohn Flynn, over 8 years ago

      The circle works great for icons that have symmetry on at least one axis—not so great for Twitter's, that doesn't.

      0 points
  • Cihad TurhanCihad Turhan, over 8 years ago

    Congrats Yuki, great job. It was also discussed here, maybe you've seen.

    I think I should create a plugin to calculate center of mass of complex shapes and see how it goes but I do have a feeling it will feel right :)

    3 points
  • Maurice SvayMaurice Svay, over 8 years ago

    How come nobody mentions the concept of barycenter?

    2 points
  • Derryl CarterDerryl Carter, over 8 years ago

    I found this strangely enthralling

    1 point
  • Moeed MohammadMoeed Mohammad, over 8 years ago

    This is awesome.

    0 points
  • Joshua SöhnJoshua Söhn, over 8 years ago

    Put a circle on it

    0 points
  • Darby ✌Darby ✌, over 8 years ago

    Thanks, I learned something. I'm rotten about geometry so the tricks here are going to help me out.

    0 points
  • Account deleted over 8 years ago

    Brilliant..

    0 points
  • Joe Crupi, over 8 years ago

    Mind blown

    0 points