Demo Critique

Shadow Palette Generator

This demo is very straightforward to use. There are a handful of elements to interact with and use to change the shadow around the demo rectangles. In terms of learnability, it is relatively easy for new users to understand how we are changing the shadows with the exception of the description. The demo chooses to describe two featrues of the shadow as "Oomph" and "Crispy". As someone new to this CSS feature, these titles don't feel as intuitively descriptive to the effect of changing them.

On the other hand, I really like how they chose to allow the user to change the position of the light that produces the shadow. It is immediately clear how my choice of positioning causes the changes seen in the preview and makes use of the demo very efficient. The ability to change the background color and the provided pop-up selection for that is also intuitive and easy to use.

One design choice that I wish was maybe different was the decision to align the resolution slider with the bottom of the light position box. With the aspect ratio of my screen, I didn't know that was an option like the other ones until I went down and was a bit surprised it was there.

The choice I really liked was the decision to have the available CSS code generated at the bottom be immediately reactive to my changes of the sliders. When I make the changes of the shadows, I can see that reflected in the code that I could use for myself in my own applications.

I did not experience issues with safety or making unrecoverable errors when using this demo since I can see the numbers that help me relate the degree of changes I make to the preview.

Clip-Path Maker

This demo was relatively easy to learn from. It is mainly a click-based demo that allows easy selection of shapes and intuitive draggable points to customize the masking shape further. The colors associated with the points you are able to drag match the colors of the text at the bottom indicating how the code for that shape changes reactively based on your adjustments. The interface allows for efficiency by automatically expanding the window for shape selection when you hover over it and automatically collapses it when you leave the selection pane.

One aspect that particularly hindered efficiency was the necessity to switch to keyboard to type numbers when wanting to change the demo size. I think I would have found a selection of sizes that I could click on to be more in-line with my experience of the rest of the demo.

Some errors that can be hard to recover from include when you aren't careful with moving the control points for the shapes. The experience of dragging the points themselves are very smooth however it is very easy to arrange them in such a way that you misorder them and the shape of the mask becomes a bit wonky. There's no means of undoing this but it is easy to restart and try again. This would be the primary security issue for this demo.

Another good point for learnability was the description of the feature along the side when you scroll down. It was effective to provide the user the demo itself immediately and allow for experimentation and then provide further context to help the user understand what they are working with after they have been familiarized with it through their own attempts.