Peter Nowell

Peter Nowell

Designer at Peter Nowell Design Joined over 9 years ago

  • 15 stories
  • Posted to Using Sketch’s Symbols as Links for Big Projects ⚡️, May 02, 2018

    Hey fellow designers!

    On a recent design project I discovered this super easy trick to get around huge Sketch documents more efficiently. The implications are so exciting (hint: a hyperlinked table of contents for your Sketch document), and I’ve also provided a Sketch template to get you started.

    I'd love to hear what you think about the links workflow, having a table of contents, and how you leverage those in your own projects!

    0 points
  • Posted to Different Design Process, Different Result—Lessons from an 18 Month Design Project, Apr 23, 2018

    Hey there fellow designers!

    I recently finished a massive 18 month project for a filmmaking and creative agency, completely redoing their brand identity and website [link]. I’m proud of the results, and excited to share this article about the lessons I learned along the way.

    Early in the process, we were inspired by iconic posters and jazz albums from the 1930-50s, and envisioned a website made out of cut-out paper and basic printing—a digital product seemingly made with pre-digital tools. So even though the final deliverable was a website, the creative process bore little resemblance to a typical web design project.

    I hope you enjoy, and please do let me know if you’d like to read more about this! I’m also hoping to write an article about the unexpected technical solutions I discovered for achieving responsive layouts when everything is an irregular shape.


    0 points
  • Posted to Master SVG Workflows in Sketch, in reply to Devin Fountain , Jul 06, 2017

    Sure, Devin! I'm always interested in perfecting design workflows. Shoot me an email at

    0 points
  • Posted to Master SVG Workflows in Sketch, Jul 04, 2017

    Hey fellow designers. I'm so excited to share this new course with you all, after 8 months of work!

    The videos go over the best practices for adapting your layers to SVG’s constraints, the basics of how SVG works under the hood, advanced tricks for working with vector shapes, and how to optimize the SVG you export so that it’s perfectly suited for your project.

    Happy learning!

    1 point
  • Posted to Stuff at the Top of an SVG - A Guide & Cheat Sheet, May 24, 2017

    Fellow designers and developers! If you’re like me, you’ve probably wondered about all that mysterious code at the beginning of an SVG file. What is it, and when can certain pieces safely be removed?

    This article explains all of that—a cheat sheet that I always wished I had. Enjoy!

    0 points
  • Posted to SVGito: Little Optimizations for SVGs, May 03, 2017

    Hey fellow designers and developers! I just released this free web-app for optimizing SVGs—especially those exported from Sketch. SVGito is launching with a few optimizations that you won't find in other SVG optimizers (so it’s a companion, not a replacement, for tools like SVGO/SVGOMG). The big one is cleaning up Sketch's extra fill + inside/outside border markup, which I wrote about recently.

    Check out the release article (above) and please share your feedback and suggestions.

    Happy optimizing!

    0 points
  • Posted to Sketch’s Brilliant New Way to Export Borders as SVG, in reply to Gabe Will , Apr 12, 2017

    To paraphrase my understanding of their reasoning:

    • Putting the stroke and fill on the same layer—and therefore removing any trace of what the original path was—could be considered "flattening." They argued that certain users may not expect it to be flattened in this way.

    (Personally I think that recreating the border in the first place is flattening. It's already happening, so why stop short?)

    • They also felt that developers often need to keep the original path/layer intact in some way... retaining it's dimensions and position.

    (I think there's theoretical truth to this, but I haven't heard of anyone actually in this scenario. People in this situation can so easily create 2 separate layers for their border and fill before export. Also, I think developers might be far more frustrated that Sketch codes 'in/out border + fill layers' differently from 'centered border + fill layers', despite the fact that both end up in SVG as centered strokes.)

    I think there's some merit to their arguments, and I admit that it can be difficult to make these decisions... especially as Sketch seems to be committed to a one-click SVG export experience instead of providing more options like AI or Affinity do. Hard to have it all!

    1 point
  • Posted to Sketch’s Brilliant New Way to Export Borders as SVG, in reply to Marc Edwards , Apr 11, 2017

    Totally, and that's obviously the best way to handle inside/outside strokes! I left a little note about this in the article, but it's unfortunate that SVG 2 has yet to be implemented in any browser yet. Which means that it's going to be quite a while before the stroke-alignment feature can be relied upon for consistently displaying inside/outside strokes.

    1 point
  • Posted to Sketch’s Brilliant New Way to Export Borders as SVG, in reply to Jack Bach , Apr 11, 2017

    Hey Jack, are you referring to the center of the bordered path being 0,0 (effectively giving it a centered transform-origin in SVG's coordinate system), or just having one of the vector points on the bordered path be positioned at 0,0?

    0 points
  • Posted to Sketch’s Brilliant New Way to Export Borders as SVG, Apr 11, 2017

    Hey fellow designers! There’s an amazing hidden feature in Sketch’s v43 update... Sketch’s SVG export just took another giant leap forward with this new inside/outside borders feature. No other design software comes close. Enjoy the article!

    3 points
Load more comments