We’re finally going to make something that should look like an actual piece of design you might encounter on the web! You’ve taken your recipe through a couple of phases – HTML skeleton and basic CSS. For this week you’re going to need to rework both in order to be able to produce a version that looks like this:
So this is going to be an assignment that is a summative of all the HTML / CSS you’ve learned to now – plus a few new design requirements to consider.
So you’ve found a number of colors using your image and coolors.co. You then constructed light and dark versions of your primary, secondary, and tertiary colors using another tool. Also I encouraged you to work with a ‘white’ and ‘black,’ as the true main colors in your design.
It’s time to step back and read a little about how and why we use color this way in our designs. We’re going to look at Google’s Material Design system which is a set of rules and guidelines for building user interfaces. In particular we’re going to look at their color system. The start should look familiar enough, picking primary and secondary colors, but then it digs deeper into how to implement them in more complex interfaces.
We’re also going to look at their color palette and their tool for building custom palettes. We’ll use these and a couple other tools to simply your recipe palette and make sure it follows a clearer set of design rules.
Reading text and looking at images are the two core pieces of media that we have to layout on our web pages. For this project we’re going to focus on how text passage layout is a “solved” problem. It’s based on the longest line length that’s considered readable. Once you recognize this, you see it implemented in design on most websites.
You’re going to measure a good example of this standard and implement that width into your design.
Finally the model layout that I’m asking you to build involves researching and experimenting with CSS tricks that you don’t necessarily know yet. For example, how do you layout text over an image as shown in the figure above? Or how do you style the numbers in an ordered list? Where are the numbers to select and style? And how do you make an image responsive (you’ve been introduced to this) or more difficulty a responsive Youtube video embed?
You’ll need to follow the steps of the instructions below, and see what you can accomplish building from the model. Good luck!
The HTML and the Box Model
- Consider the how you will need to rewrite and update parts of your HTML to be able to take advantage of the two primary CSS tricks –
margin: 0 auto
- Note which portions of the layout are at one max width and other parts are narrower. Also notice how all parts are centered on the page.
- You should draw a wireframe in your dot journal to help you figure this out.
- Implement a CSS Reset look at the bottom for an example (which actually includes a responsive image solution as well)
- Responsive images and if you can do it responsive Youtube embed.
Redefine your color palette
- Note that there is only a primary and secondary color in the final design, and they are used very sparingly.
- Pick one color from your previous palette. Choose something bright and vibrant. Find its complement. Then use material design’s color tool to generate light and dark versions. Also feel free to pick new color pairings from the material design palette at the bottom of that page. Besides your primary and secondary colors, you will need to use their grays.
- Look closely at the mockup recipe and note the use of color you’re trying to reproduce. There’s really not a lot!
- Using a minimal CSS reset (helps with styling tables and lists in particular).
- The figure at the top makes use of the relative positioning of the parent and the absolute positing of the serving and caption. This is a bit new, but here’s a resource to help.
- Making a Youtube embed responsive
- Styling the numbers of an ordered list (this one is probably the toughest).