Skip to main content

10 new web design tools for August 2019

(Image credit: Extracss)

As we progress in our careers, our skill sets usually need to grow to fit new roles and responsibilities – maybe you’re managing other people, or your job requires ever more technical skill. The good news is that web design tools (opens in new tab) can help with the transition. 

This month, we look at Lara Hogan’s new book, Resilient Management, which explains her techniques for managing a technical team. We also look at Chris Coyier’s talk, ‘Ooops I guess we’re full-stack developers now’, which considers the ever-expanding role of the front end developer, which has ballooned to even greater proportions in recent years. 

Beyond that, we have the usual mix of useful tools and resources, including a free course on UI design by Christopher Murphy, and a great utility that automatically generates site maps for any URL. For more info on tools, see our guide to Google's web tools.

01. VisualSitemaps

visual sitemaps

Even huge sites with 1000+ pages can be mapped  (Image credit: VisualSitemaps)

This amazing, fully automated tool, VisualSitemaps (opens in new tab), generates sitemaps of any website – just enter the URL and it does it all for you. It takes high resolution screenshots and you can export as PDF should you want to display the map at a large size. It’s ideal for conducting site audits for UX, SEO, market research purposes or any other type of analysis. You can share the sitemap with your collaborators and annotate it, and also create your own, reorganised version by dragging and dropping elements. It works well even on really huge sites – check out the examples on the homepage. 

02. Resilient Management by Lara Hogan

Resilient Management by Lara Hogan

Learn Lara Hogan's methods for managing a tech team (Image credit: A Book Apart)

As you move up in your career as a tech person it’s likely you’ll start to take on management duties or a full managerial role, which requires a whole new skill set. Lara Hogan is a management coach from a technical background, so she understands how to lead technical teams. In this book, Resilient Management (opens in new tab), she passes on her expertise - you’ll learn how to mentor and coach people, how to communicate effectively, and how to build resilience in yourself and your team so that you’re prepared for tough times. 

03. Real Dev

Real Dev

Solve real-world coding challenges and build a portfolio  (Image credit: Real Dev)

The people behind Real Dev (opens in new tab) are startup founders who have found that many of the coding puzzles and problems used to screen candidates lead to mixed results – sometimes people who score well on these tests underperform in their job. The solution they’ve come up with is Real Dev – it contains tasks that are based on real technical problems that developers can solve online and submit for evaluation. This way, if you’re looking to get hired you can build up a portfolio to impress employers, and those looking for staff have another way to consider candidates. 

04. Extra.CSS

Extra Css

Some fun and useful CSS effects from Una Kravets (Image credit: Extracss)

This Houdini library, Extra.CSS (opens in new tab), by Una Kravets is a collection of cool effects to add some extra panache to your site. There are some variants of usual page elements such as borders, underlines and cross-outs, as well as some decorative additions like sparkles and confetti for when you’re creating something whimsical. 

05. Building Beautiful UIs

building beautiful UIs

Christopher Murphy's free course on UI design (Image credit: Adobe)

Christopher Murphy is a senior lecturer teaching Interaction Design at the Belfast School of Art and he has put together this free course, Building Beautiful UIs (opens in new tab), in conjunction with Adobe. It’s designed to get you going as UI designer and is suitable for those starting from scratch. 

He has road-tested the course on his students, and it comes with a library of digital course materials that you can download and use. There are a series of exercises that help you to analyse and deconstruct existing interfaces so you can understand why they’re effective and how to use the principles you learn in your own designs. It is currently unfinished and is being shared in draft form, with a view to publishing later this year.

06. SaaS Pages

Learn best practices and see how others are putting together their product pages

Learn best practices and see how others are putting together their product pages (Image credit: SaaS Pages)

SaaS Pages (opens in new tab) is a collection of landing pages from existing SaaS site that you can compare and use to improve your own offering. They’re broken down into categories such as Hero, Nav Bar, Clients, Team and so on, so you can see how your competitors are doing things. The site creators have also put together a list of best practices for each type of page to help you convey your message in the most effective way. 

07. Ooops I guess we’re full stack developers now

Ooops I guess we’re full stack developers now

On the expansion of the front end developer role (Image credit: Chris Coyier)

In this talk (opens in new tab), which you can also read if you prefer, Chris Coyier discusses the expanding responsibilities of the front end developer and how this job is looking more and more like a full-stack role. He looks at how the job is evolving – people are specialising – and what things are going to look like in the near future. 

08. Rooki

Rooki design

A new online magazine for rookie designers (Image credit: Rookie)

Rooki (opens in new tab) is a beautifully designed online magazine with a print feel for young designers who are just starting out as students or interns. The articles are tailored to be inspirational or educational for those who are new to the design industry, and there’s a resources section that provides a curated list of things that are helpful for newbies. It’s a friendly and useful jumping off point for finding your feet in the industry conversation. 

09. Superposition


Extract design tokens from an existing site to build your design system (Image credit: Superposition)

Superposition (opens in new tab) helps you to build a design system based on an existing site by extracting its design tokens - that’s the values for colours, typography, spacing and so on. The tool is still a work in progress; currently it will extract and export to CSS, JavaScript and Adobe XD, with Sketch, Figma, Swift and Android exports on the way. The creators of Superposition also plan to create a Design System Generator that will automate the process of creating a design system based on a current site. 

10. FileFern


Add file management capabilities to your email account (Image credit: FileFern)

Most of us share files with clients via email – it’s convenient as it doesn’t require any sign-ups or learning – but it’s not designed with file management in mind so things usually get messy. FileFern (opens in new tab) adds file management capabilities to your email so that clients can click through to a file dashboard that shows them everything you’ve ever sent to them, so there’s no need to go hunting through email chains to find a document from months ago. The same is true for you;  files from different clients are separate and organised. (For more file sharing options, see our post on how to send large files (opens in new tab).)

Read more:

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

Tanya is a writer covering art, design, and visual effects. She has 16 years of experience as a magazine journalist and has written for numerous publications including 3D World, 3D Artist, ImagineFX, Computer Arts, net magazine, and Creative Bloq. For Creative Bloq, she mostly writes about web design, including the hottest new tools, as well as 3D artwork and VFX.