from Hacker News

Could you be a web designer?

by justswim on 11/24/22, 1:49 AM with 19 comments

I made a short quiz to test web/frontend design skills. Some of the questions require knowledge of trends, but most of them test the ability to notice small details in the design and css of the page. Hope you have fun with it!

  • by russelldjimmy on 11/24/22, 4:08 AM

    I’m a product designer and I totally bombed this. Never in my career have I been required to know exact hex codes (especially of pure blue - which I have never used thankfully), or exact border radii.

    This quiz misses the idea that humans perceive the same values differently in different contexts. A button with 5px border radius might not feel “round” enough in a UI where everything else is very “round”. Or if you have two colours of the same hex value, except that one is surrounded by white pixels, and the other is surrounded by black ones, then it is unlikely that the colour will be perceived the same way in both cases (see the Checkerboard illusion). Identifying fonts immediately by just looking at them (which I can do well) has been a neat party trick, but has never found utility in my work.

    A designer’s strength is not knowing these values by rote, but having the sensitivity to understand the tools at our disposal (including knowing how human perception works) and using them to create something functional and beautiful.

    This “test” does not evaluate any of that.

  • by 100721 on 11/24/22, 3:27 AM

    It seems weird to so strongly correlate specific technical knowledge, like exact hex codes and pixel counts, with one's ability to learn web design. I'm sure many great web designers would have bombed this at one point, and perhaps some would have felt discouraged.

    Perhaps a better name would be "Are you a web designer?"

  • by justhw on 11/24/22, 3:37 AM

    Way too hard. Not a lot of people can tell the difference between a border-radius 3px 5px & 7px with their bare eyes.

  • by davidmurdoch on 11/24/22, 3:57 AM

    Why does knowing what the Q key on an old apple keyboard have anything to do with someone's aptitude for web design?

  • by dsmmcken on 11/24/22, 4:07 AM

    Um, actually question twelve is wrong. Those use two different typefaces. The iOS keyboard is SF Pro, but hardware keyboards are SF Compact. SF Compact is less round, you should be able to see the difference if you compare the O and D in the screenshot.

    I noticed that, but still only got 9/12.

  • by sublinear on 11/24/22, 4:07 AM

    I'm not a designer but have done some web dev here and there over the years based on sketch files designers send me and whatnot.

    I got the color, radius, border, and font questions correct.

    The opacity, delay, and aspect ratio ones are slightly pointless since they are rarely any particular exact value (except for the square one).

    The questions I think are completely irrelevant are the AI images and the Google logo ones.

    EDIT: also worth pointing out none of these skills matter when I can just grep the CSS and inspect the computed values for checking consistency across all browsers. Judging by eye is not really all that helpful.

  • by wilg on 11/24/22, 3:33 AM

    The pixel sizes are hard to reason about on mobile. But still got most of them. Fun idea! The Apple keyboard one should have specified it’s about OLD keyboards.

  • by bgoldste on 11/24/22, 2:27 AM

    Wow, this was tough (but fun). BTW it looks like there's an error on the help text for the opacity question:

    "The correct answer is B. In case you're curious, B has a border radius of 5px, C is 15px, and D is 7px." should likely be something about opacity.

  • by shahahmed on 11/24/22, 1:58 AM

    just did it and got 6 out of 12. I think some of the border/radius/corner ones are weird because even as a designer you think about them as buttons, seeing a blocky div makes it confusing

  • by graypegg on 11/24/22, 4:17 AM

    My first thought, it's supposed to be pointlessly hard to do by eye.

    I think it's meant as one big trick question: a web designer can use the dev tools to inspect the elements on the page.

  • by rikroots on 11/24/22, 11:18 AM

    I thought design was about how things get put together on the page to make a whole better than the parts. But then I'm not a web designer.

  • by Lalabadie on 11/24/22, 4:08 AM

    Fun test for your technical eye/knowledge, horrible title.

    None of these questions represent a barrier to being a competent web designer.

  • by atiragram on 11/25/22, 8:49 PM

    Lovely joke on many designer clichés like Helvetica fetishism :)

  • by thepors on 11/24/22, 3:26 AM

    I got only 4 correct. ok, I'm not a designer at all. lol