6 ms·

As a designer, I find it genuinely perplexing and distressing that UI design apps continue to get created that don't support automatic layouts. Dragging and nud

As a designer, I find it genuinely perplexing and distressing that UI design apps continue to get created that don't support automatic layouts. Dragging and nudging things around is horrendously inefficient. The one app that does this – Antetype – has been almost entirely ignored by the design community. Here's an example: http://bendansby.com/antetype.gif http://bendansby.com/antetype.gif

gavinpc 10y ago
Absolutely. I can't stand precision mousing (or "pointing"). Just watching that demo makes me tense. There will always be a place for people who want pixel perfection. I think that place is called print. Eventually, we're going to let go of the idea that we control layouts at the concrete level (as opposed to a more semantic level, i.e. describing relationships and constraints), but that future is harder to see.
- barryhoodlum 10y ago
  I've thought about this - the existing method of designers coming up with a couple of static designs ("small" and "large" - "medium" if you're lucky) means the developer is burdened with interpreting these static designs and deriving a set of relationships and constraints between them. It seems obvious that the designer should be considering how the design responsively "breaths" at all sizes, rather than putting this on the developer. It's still design, just an added dimension that isn't present in print. But how do you give the designer the opportunity to "sketch" but also describe relationships and constraints? You could use code, but then the designer is then also a de-facto developer. And having to consider relationships and constraints too much can lead to those considerations dictating the design, rather than the other way around.
  - pvorb 10y ago
    New CSS technologies like formulas (calc) and variables (or Sass, PostCSS) will allow designers to do this without programming.
    - endergen 10y ago
      Calc is programming.
      - pvorb 10y ago
        No, it's just basic maths.
        pavlov 10y ago
        And writing HTML isn't programming either, it's just markup. To the average designer (and almost anyone else) these distinctions don't exist - if you write "code" or something that looks like math, its programming.
  - captain_crabs 10y ago
    The line between developer and designer has been blurring for some time and will only continue to do so (hopefully! if our tools and abstractions keep becoming better). Often I find myself on the other side of what you stated, where the designer leaves me (the developer) as the de-facto designer. And the main reason why is that the designer is only capable of thinking in their toolset, which happens to usually be photoshop. PS simply doesn't cut it dealing with the complexity of web applications in all the different form factors it needs to work on. This has lead me to believe that if you're a web designer, your medium is HTML/CSS and potentially JS. So you should understand and be fluent in it. The designer is responsible for actually building out the html templates/styling used, and the developer is responsible for bringing those to life, but each has a lot of input at every step. A lot of crossover builds better projects :)
- ethanbond 10y ago
  Figma has constraint based layout though?
panic 10y ago
Automatic layout systems can constrain your thinking. Especially early on, you want to be able to tweak things and try lots of different options. Once something is in the automatic layout system, it's easier to explore the space of options the system can handle. But making even a small change outside that space is much harder.
- webwielder2 10y ago
  Totally disagree. Being able to adjust flow direction, padding, etc. and then perpetuate those changes across multiple elements makes me more likely to experiment. Also, I'm not necessarily referring to setting up complex constraints and rules, but more just not having to move a bunch of stuff around with the mouse every time I make a change.
  - panic 10y ago
    Being able to adjust flow direction, padding, etc. and then perpetuate those changes across multiple elements makes me more likely to experiment. That's exactly my point. It makes you more likely to experiment in that way and less likely to experiment in other ways. That's not necessarily a bad thing, but I think it's one reason why designers and design tools don't focus on automatic layout as much.
spdustin 10y ago
Thank you for sharing AnteType. Seems brilliantly done, and I'm downloading a trial right now.
dharma1 10y ago
Sketch has some plugins for constraints. In fact one of the nice things about Sketch is the plugin ecosystem to extend the features - I wonder if Figma will become extensible.
nip 10y ago
Affinity Designer [1] will offer a similar feature [2] in the next build, currently in beta [3]. [1] https://affinity.serif.com/en-gb/designer/ https://affinity.serif.com/en-gb/designer/ [2] https://vimeo.com/169816724 https://vimeo.com/169816724 [3] https://affinity.serif.com/forum/index.php?/topic/22644-affinity-designer-customer-beta-15-beta-5/ https://affinity.serif.com/forum/index.php?/topic/22644-affi...
piotrkubisa 10y ago
Antetype reminds me two tools which are based on SVG/HTML elements: 1. Macaw - http://macaw.co/ http://macaw.co/ 2. Google Web Designer - https://www.google.com/webdesigner/ https://www.google.com/webdesigner/ But Antetype provides way better solution for managing padding/margins and moving elements. Thank you for sharing.
toddmorey 10y ago
Yes and ignores the multi-device climate where the designs ultimately will live. Makes me think the pixel-perfect prototype is creating a bit of a fiction. Of course most good designers keep that in mind, but I agree that it's really disappointing that more tools aren't built to have a responsive canvas where you can play with sizing and set how the design responds. The answer I hear is to get to HTML prototypes as soon as possible, but it's not as fast to "sketch" in that medium (thus frameworks like bootstrap), so I think potential ideas are left unexplored.
ageektrapped 10y ago
That resize to mobile form factor at the end of the gif! Made me watch it twice. I'll be checking Antetype out for that alone.
deleted 10y ago
[deleted]
on_and_off 10y ago
This. I always bang my head against a wall after getting new mockups from our design team. what happens for small screens ? what happens in landscape ? what happens for tablets ? are questions they entirely ignore. They just conceive one screen size (large smartphone) in sketch and can't be bothered to consider any edge case.

gavinpc 10y ago

Absolutely. I can't stand precision mousing (or "pointing"). Just watching that demo makes me tense. There will always be a place for people who want pixel perfection. I think that place is called print. Eventually, we're going to let go of the idea that we control layouts at the concrete level (as opposed to a more semantic level, i.e. describing relationships and constraints), but that future is harder to see.

barryhoodlum 10y ago
I've thought about this - the existing method of designers coming up with a couple of static designs ("small" and "large" - "medium" if you're lucky) means the developer is burdened with interpreting these static designs and deriving a set of relationships and constraints between them. It seems obvious that the designer should be considering how the design responsively "breaths" at all sizes, rather than putting this on the developer. It's still design, just an added dimension that isn't present in print. But how do you give the designer the opportunity to "sketch" but also describe relationships and constraints? You could use code, but then the designer is then also a de-facto developer. And having to consider relationships and constraints too much can lead to those considerations dictating the design, rather than the other way around.
- pvorb 10y ago
  New CSS technologies like formulas (calc) and variables (or Sass, PostCSS) will allow designers to do this without programming.
  - endergen 10y ago
    Calc is programming.
    - pvorb 10y ago
      No, it's just basic maths.
      - pavlov 10y ago
        And writing HTML isn't programming either, it's just markup. To the average designer (and almost anyone else) these distinctions don't exist - if you write "code" or something that looks like math, its programming.
- captain_crabs 10y ago
  The line between developer and designer has been blurring for some time and will only continue to do so (hopefully! if our tools and abstractions keep becoming better). Often I find myself on the other side of what you stated, where the designer leaves me (the developer) as the de-facto designer. And the main reason why is that the designer is only capable of thinking in their toolset, which happens to usually be photoshop. PS simply doesn't cut it dealing with the complexity of web applications in all the different form factors it needs to work on. This has lead me to believe that if you're a web designer, your medium is HTML/CSS and potentially JS. So you should understand and be fluent in it. The designer is responsible for actually building out the html templates/styling used, and the developer is responsible for bringing those to life, but each has a lot of input at every step. A lot of crossover builds better projects :)
ethanbond 10y ago
Figma has constraint based layout though?

panic 10y ago

Automatic layout systems can constrain your thinking. Especially early on, you want to be able to tweak things and try lots of different options. Once something is in the automatic layout system, it's easier to explore the space of options the system can handle. But making even a small change outside that space is much harder.

webwielder2 10y ago
Totally disagree. Being able to adjust flow direction, padding, etc. and then perpetuate those changes across multiple elements makes me more likely to experiment. Also, I'm not necessarily referring to setting up complex constraints and rules, but more just not having to move a bunch of stuff around with the mouse every time I make a change.
- panic 10y ago
  Being able to adjust flow direction, padding, etc. and then perpetuate those changes across multiple elements makes me more likely to experiment. That's exactly my point. It makes you more likely to experiment in that way and less likely to experiment in other ways. That's not necessarily a bad thing, but I think it's one reason why designers and design tools don't focus on automatic layout as much.

spdustin 10y ago

Thank you for sharing AnteType. Seems brilliantly done, and I'm downloading a trial right now.

dharma1 10y ago

Sketch has some plugins for constraints. In fact one of the nice things about Sketch is the plugin ecosystem to extend the features - I wonder if Figma will become extensible.

nip 10y ago

Affinity Designer [1] will offer a similar feature [2] in the next build, currently in beta [3]. [1] https://affinity.serif.com/en-gb/designer/ https://affinity.serif.com/en-gb/designer/ [2] https://vimeo.com/169816724 https://vimeo.com/169816724 [3] https://affinity.serif.com/forum/index.php?/topic/22644-affinity-designer-customer-beta-15-beta-5/ https://affinity.serif.com/forum/index.php?/topic/22644-affi...

piotrkubisa 10y ago

Antetype reminds me two tools which are based on SVG/HTML elements: 1. Macaw - http://macaw.co/ http://macaw.co/ 2. Google Web Designer - https://www.google.com/webdesigner/ https://www.google.com/webdesigner/ But Antetype provides way better solution for managing padding/margins and moving elements. Thank you for sharing.

toddmorey 10y ago

Yes and ignores the multi-device climate where the designs ultimately will live. Makes me think the pixel-perfect prototype is creating a bit of a fiction. Of course most good designers keep that in mind, but I agree that it's really disappointing that more tools aren't built to have a responsive canvas where you can play with sizing and set how the design responds. The answer I hear is to get to HTML prototypes as soon as possible, but it's not as fast to "sketch" in that medium (thus frameworks like bootstrap), so I think potential ideas are left unexplored.

ageektrapped 10y ago

That resize to mobile form factor at the end of the gif! Made me watch it twice. I'll be checking Antetype out for that alone.

deleted 10y ago

[deleted]

on_and_off 10y ago

This. I always bang my head against a wall after getting new mockups from our design team. what happens for small screens ? what happens in landscape ? what happens for tablets ? are questions they entirely ignore. They just conceive one screen size (large smartphone) in sketch and can't be bothered to consider any edge case.