Typographic web design
How to think like a typographer in HTML and CSS.
initial solution
Revisions are integrated into the final piece.
Student Example
Lesson 12: A Recipe, Part 2
(Finding and Building the Grid)
Josh Terceira, Fall 2011
Josh explored good line lengths for the different kinds of text, and decided to set up two columns for his text on the page. He used a single column for the content. His navigation lives in a narrower column on the left.
All of Josh's recipe pages
Recommendations
First of all, it looks like the two-column approach can work. There is no reason to create a more complex layout if the text remains legible and well-organized.
But you've merged your navigation, and the relationship between the two levels (main and section) isn't working.
Your main navigation is big and right aligned. Your section links are small, left aligned, and bulleted. The section links look too much like a list, and not enough like links in this context.
I realize you are trying to create visual contrast because you want them to have unique voices (hi! I'm a main navigation link!) but this is too much contrast. Definitely align them similarly. You may need to bring their sizes closer together as well. Subtle shifts in color or weight might serve you better here.
The red is becoming too prominent on the page. It says, "look at me! I'm red!" It also creates a very strong vertical line between the navigation and the content. This separation is not wrong, but it's too strong. The line is becoming more important than the content. It is even separating the logo. You've replaced the logo I gave you with your own version, and that's fine. But treat it with respect. That bold, black pie is very strong, graphic, almost industrial. It looks neither French pastry influenced, nor organic, fresh, and local.
Which brings me to the web font you've chosen. I didn't expect you to pick another font until lesson 15, but it seems like once you've learned to use them it's hard to resist. Again, this is fine. But let's look at the font you've chosen. It's a geometric sans serif. Mathematic. Precise. But this is a website full of warm family memories. And pastry. And things that grow from the earth (like apples and wheat). Why this font?
The changes in line length and voice are good. Keep going.