Make your home page your own
You have a live website, but it looks like the template. Before we learn CSS next week, decide what you actually want your own home page to look like — in the tool you already know.
Steps
- Get your page into Figma. Use the Figma plugin for Chrome to get your version of the website into Figma so you're starting with the same layout and not a blank canvas.
- Change the words first. Your name, how would you introduce yourself, your actual work and other projects. Design decisions are easier when the content is true.
- Change the type. Pick heading and body fonts and set a hierarchy — heading, subheading, body. Notice how much of the page's character this alone decides.
- Change the colours. Background, text, links. Keep it to two or three; check it's still readable.
- Make a mobile version. Recreate your layout at 400px wide.
- [Optional] Then push further, if you want. Add more sections, a projects grid, an about page, images.
Things to keep in mind
- Design for a browser, not a poster: it will be viewed at many widths, and text reflows. Make a phone-width version too.
- Don't worry about how anything will be done in code, but note down any thoughts or questions — next week is exactly about turning this into CSS.
- Keep your Figma file. In Lecture 2 - Git and Web TypographyLecture 2 - Git and Web Typography
Designing your Website
Last week we shipped a page! This week we'll figure out how to ship your page.
Sidenote: Can anyone tell me why do we ship software?
Git terms
Git: The tool that trac... you'll rebuild your live page to match it, and we'll compare the two.
Submission
- Your Figma file (share link, view access) and your live URL, posted to the class group before next class.