MA Web Design + Content Planning materials for applied art for the web • major project

Learning the pen tool

The vector pen tool might present a challenge to get to grips with while you are not used to it. But time, patience and practice will pay off. Have a go at completing these tracing templates and you’ll soon get there :)

These are very old files by now – and are still very popular. I'm being told they are brilliant for getting you past the first hurdles – so give them a go!
Note that the colour of the guides, i.e. the elements for tracing will depend on the colour settings for guides, in preferences, for easier working, you might want to adjust that to your liking.
download tracing templates

My advice is to persist and learn how to work with vectors. It might take a little while but it will be well worth your time and effort. SVG is now one of the most popular file formats for anything from interface icons, to data visualisations and visual design for interactivity and motion.

Or try Adobe’s offering which explains this very clearly in a video with files to download and work along with:
Start creating with the Pen tool

Can’t tell you that it’s an easy learning curve. Some people seem to find it intuitive and easy to learn, most struggle initially ~ but, well, you know: patience and practice :)

Scalable vector graphic

SVG is the graphics format that crosses over between a purely visual and a code-accessible file, meaning you can manipulate the graphic directly with code. This opens up endless possibilities and it’ll serve us well to be able to work with both aspects: the production of the graphic as well as its implementation in your design.

Whether we're working in design or development - SVG is the one format which allows equal access to the visual by both. Knowing how to edit the SVG graphic and then be able to do so much more via code will serve us well, and hopefully be lots of fun too :)

vectors for web

As with any visual we're planning to use online, an SVG will also require some preparation and optimisation. While our bitmaps can be compressed to reduce file size, a SVG can surprisingly be equally heavy — and the code itself produced by the various apps can vary in amount and quality.

When we work on your graphic, I'd recommend that we save our work in the app-native format to keep as working version. To prepare the file for web, we can usually use the 'save' or 'export', choosing from the options available.

SVG output and optimisation

Before we use the SVG in our web project - make sure to optimise :)
This is typically done in two steps: firstly, to prepare the graphic itself, minimising complexity. And secondly, to clean up the code. We will work through this today in our practical exercise.

Have a quick look at this simple SVG - view in browser. This graphic was created in Illustrator and saved as SVG. The comparison below shows the original output on the left, and the final optimised code on the right.

optimised SVG code

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72">
	<path fill="#FFF" stroke="#000" stroke-width="1.567" d="M26.4 71.973V52.896l-4.238-4.223-6.846-6.822L36.312 1.938l20.667 39.913-6.356 6.217-4.939 4.828v19.077" />	
	<path fill="none" stroke="#000" stroke-width="1.567" d="M18.859 58.415h35.653" />	
	<path d="M31.283 71.973h14.401V58.415H31.257z" />	
	<path fill="none" stroke="#000" stroke-width="1.567" d="M36.344 1.938v30.626" />
</svg>

Learn from Heydon

• Inclusive Design Principles

  These Inclusive Design Principles are about putting people first. It’s about designing for the needs of people with permanent, temporary, situational, or changing disabilities — all of us really.

  Co-authored by Heydon Pickering, Henny Swan, Léonie Watson, and Ian Pouncey.

• Webbed Briefs

  WEBBED BRIEFS are brief videos about the web, its technologies, and how to make the most of them. They’re packed with information, fun times(TM), and actual goats.

• Making Future Interfaces

  Your guide to making and wrapping shapes in CSS, using things like border-radius, clip-path, the CSS Shapes spec’, and paint worklets.

Sara Soueidan

Sara - one of our 'people of the web'

Sara is amazing! You will have come across her work before. Sara is a brilliant front-end developer (and author - and speaker), her expertise includes CSS and Javascript. She has also written many in-depth articles covering some of the complexities and powerful features of SVGs.

Highly recommended!

Understanding SVG Coordinate Systems and Transformations

• Part 1 - The viewport, viewBox, and preserveAspectRatio
• Part 2 - The transform Attribute
• Part 3 - Establishing New Viewports

Expert insights

• Tips for Creating Accessible SVG, Léonie Watson
• Icon System with SVG Sprites, Chris Coyier
• An Overview of SVG Sprite Creation Techniques, Sara Soueidan
• Making Future Interfaces, YT channel, Heydon Pickering
• A Complete Guide to SVG Fallbacks, Amelia Bellamy-Royds and Chris Coyier.

People & sites

• Veerle Pieters (for design/creation of vector graphics)
• Sara Soueidan (for the now-old tutorials + some new upcoming articles)
• Carie Fisher (for SVG + A11y)
• Chris Coyier / css-tricks
• codrops
• a11y style guide – SVG

Cassie - one of our 'people of the web'

Do check out Cassie's site and work - you can find her lovely and fun experiments via codepen.io/cassie-codes, plenty of inspiration.
I really like this little interactive demo - move your cursor over the result window :)