Could you be a web designer?

[justswim]

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!

[russelldjimmy]

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.

[elliottkember]

> Try this fun, online quiz

I think you missed the word “fun”

[russelldjimmy]

Heh. You're right, I did. Yet, I did not have fun. YMMV.

[maxbond]

> Could You Be a Web Designer?

[100721]

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?"

[justhw]

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

[maxbond]

Yeah, framing it in a gatekeep-yy way is in poor taste. I've taken these sorts of quizzes with languages I use professionally, and they always kick my ass but I learn from them. Presenting it as a tricky challenge or parlor trick is much better.

[culi]

I went in to that one really confident because of my knack for bikeshedding. Unfortunately for me I forgot I've been doing my work with my browser screen zoomed out because I've been working on a 13in macbook

[davidmurdoch]

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

[dsmmcken]

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.

[sublinear]

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.

[wilg]

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.

[bgoldste]

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.

[shahahmed]

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

[graypegg]

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.

[rikroots]

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.

[Lalabadie]

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

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

[atiragram]

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

[thepors]

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