Academy is open. New beginner lessons every week, free.
Lesson 3 of 6 · beginner

A design critique of the existing site

Designer Dani reviews the original site and picks out what to keep, what to cut, and what to try.

Prefer to listen? This video is also an episode of the CodeYam podcast: A Design Critique of an Existing Personal Website Being Rebuilt with CodeYam & Claude Code.

In this lesson6 chapters
  1. 0:02A first look at the current site
  2. 0:20Give the hero more room
  3. 0:59Say who you are and what you do
  4. 1:52Bring the writing into the site
  5. 2:33Make the ending easier to act on
  6. 3:00Two directions worth trying
TranscriptClick any timestamp to jump the video there.
0:02

A first look at the current site

Nadia shared some images I may use, and this is the website she started creating, which honestly is not bad as a first version. Here is the feedback I would give on it.

0:20

Give the hero more room

This part needs a little more space. The typing animation is pretty cool and it conveys her being a builder, so I like that. I would give all of this more space so it sits more centred between the main screen and the hero. I would also make this one big scrollable page, and remove the calls to action from here, putting them either in the navbar or at the very bottom.

0:59

Say who you are and what you do

Three buttons, and I would align them so this takes up less vertical space. I would reflect your position at CodeYam, so put CEO or something like that, and then an image that conveys CodeYam or a way to learn more. Describe your position a little more and what it is you actually do.

1:52

Bring the writing into the site

For the writing section I would remove one part and just have the call to action to read on Substack. Opening Substack, all of this is very interesting and tells a lot about her, so I would import those posts into the main website and put them here. In the about section I would keep or replace the icons, but also include the photos, because they add a lot.

2:33

Make the ending easier to act on

The ending is very good, with all the ways to connect with her, but I would lay those out horizontally and make them stand out more. It says based in New York, and I would add something like previously in Denver or previously in California, because that is interesting too. It says built with Next.js and love, and I would probably say built with CodeYam and love.

3:00

Two directions worth trying

Keep this so people can scroll directly to where they want to go, especially contact. This is nice, but I would have one very simple layout like this in light mode, and then another with a lot of colour, or very different typography, that makes it stand out.