design-workshop

This is the accompanying document to a three hour design workshop being delivered to students of Constructor Labs development bootcamp in London. http://constructorlabs.com/

The presentation slides are here

---

Excercise 1 - Help Dmitri plan his new CV (~30mins)

Dmitri has decided to apply for a new job. The jobs he's looking at are:

• Antiques dealer
• Rave DJ
• Academic
• Photographer
• Circus performer
• Outdoorsman
• Womens fashion blogger
• Surgeon
• Travel writer
• Software Engineer

It's your job to make sure his CV is looking top notch. Based on the design language of your chosen career, sketch out and decide on a layout for Dmitri's new online CV.

1. Choose a career
2. On paper, sketch what his CV should look like based on that career path
3. Pick a typography style and a set of images for a colour palette

Exercise 2 - apply your styles to the web (~60mins)

You're going to turn this vision into an online typographic digital CV page.

1. Find the cv.html and cv.css files
2. Change the name in the cv.html file to your own (and feel free to add your own details!)
3. Using https://type-scale.com/ and google fonts, add your font pairing and hierarchy for your CV
4. Edit the spacing values to give the CV room to breathe
5. Use https://colorbook.me/ to choose a set of colours

You have about an hour to make this vision come true.

Excercise 3 - make his new CV look good on mobile (~30mins)

Now you're going to make your CV look good on mobile and desktop.

1. Use https://www.surge.sh to push your CV to your own static website
2. On your phone, have a look at your CV. Oops!
3. Make your website look good on mobile using your cv.css file
4. Find the responsive.css file and using the desktop breakpoint, add the classes you need to return your desktop cv to its former glory

---

Resources

Typographic Tools

• https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=en whatfont chrome extension
• http://typ.io/ - browse font pairings
• http://typespiration.com - font pairings with quick use
• https://fonts.google.com/ - all google free fonts

Color Tools

• https://imagecolorpicker.com/ - pick colours from an image
• https://colorbook.me/ - colour palettes on dribbble

Inspiration

• https://www.typographicposters.com/ - typographic poster archive
• https://www.awwwards.com/websites/typography/ - what's good right now?