1. Layoutit!

Learnability

Improvements

The section header vocabularly could have been more intuitive. For example, it is hard to discern immediately the differences between self-placement, implicit grid, grid placement, and area box. Further those terms weren't the terms of the css styles used either.

Efficiency

Positives

I like that there is a general undo and redo feature that gives the user breadcrumbs

Improvements

I didn't like that the header for the coding section scrolled with the code. Its an unexpected action for learnability and inefficiencent because when I wanted to go over and copy the code I had to scroll all the way back up and hit copy.

On the left sidebar, there is really only room on a normal computer for one tab to be open at a time. Thus, when I open a new tab it would be nice to have the other automatically close so that I don't have to scroll, or manually move my mouse to do this instead.

Safety

Positives

I like that they didn't allow us to edit the code, but rather just showed the code produced to us because this prevented code that wasn't functional from being added.

Improvements

You can add as many "areas" as you wanted and could continue to overlap them. Realistically, people would rarely want to overlap and at a max 3 so you aren't preventing potential incorrect actions that might result in extra boxes added to the code you copied that you didn't even realize.

2. Josh Comeau Gradient Generator

Learnability

The simplicity of this application makes it easy to pick up fast. The left side updates automatically as the 5 features on the right are changed. There are only 5 feature sections and a lot of them are draggable, so as you drag you can see the affects immediately.

Efficiency

Positives

The application was automatically populated with the most common feature settings so that the user starts with a basis to move forward from.

Positives

I like that they included the ability to type in color names and hex codes, as well as the gradient drag feature so that you don't need an outside source to choose your colors. Additionally, for safety accepting the color names prevents a lot of errors, espacially because in code you can type color names as well.

Safety

Positives

Again, I like that they didn't allow us to edit the code, but rather just showed the code produced to us because this prevented code that wasn't functional from being added.