Hacker News Reader

Comment by Cthulhu_ | Hacker News Reader

One of my first real learning experiences with implementing a design was when I was building an app. We got a design from the designer, I implemented it and thought, this looks pretty good.

I showed it to the designer and he basically said it looked like shit. I was like, what, why? He took a screenshot, dragged it into Sketch and used some of those little red rulers to point out that in his design, everything was aligned to the left with a fixed padding to the side, whereas in my implementation it was all over the place.

Basically, I didn't have the eye for design or alignment yet. I mean I still don't and I'd rather not anyone ask me to do visual design, but I got better at it by being taught what to look for.

"Teaching how to see" is an important lesson that a lot of developers haven't had yet, I think, which is why there's tropes about UIs designed by developers.

View on HN

Yeah, you have to learn to see those things... but don't be hard on yourself. HTML was never meant for doing anything resembling print layouts, and yet we're expected to do it for a dozen different screen sizes, using one hack on top of another - tables, floats, flexbox, grid, absolute positioning...

When I got moved from doing print design to the early web, we'd literally design an entire website at one size in Photoshop and use slices to cut all the interactive/hover bits out and put it all in a table. Nothing about web/app design has gotten simpler since then. Compare with the absolute ease and freedom of working with a layout program like InDesign or Illustrator, targeting a known print size. It's easy for a nontechnical designer to look at a mockup and say what's wrong with it, but it's infinitely harder to know what levers to pull in the giant puzzle of CSS and HTML to attain all the details of the static design. And sometimes the static design is just a launch point. In a case like that, if I were in the graphic design / art direction role, I would provide a logical style sheet, basically a list of rules about alignment and sizing, because I wouldn't expect the coders to be able to visually extract my intent or what I considered important just from looking at a comp.

Good learning experience, though one might argue that the original design should have noted those sorts of important aspects, rather than expecting them to be obvious. Probably would have saved you both some effort.

Or not, that way GP learned something for life, so saves them time in the long run

I'm curious about this. If everything in a design file is aligned left, do you need an annotation on each object telling you that it is aligned left?

No, but I might include a general note on alignment. And rarely is literally everything going to be aligned down the left side of the page, so you could also include some annotation to show what's aligned to what (and maybe why).

I'm no designer, but I know I appreciate when designs include that kind of info.

Reply on news.ycombinator.com