There are some exciting web design tools out this month. September's picks include an AR reality system for Shopify, a huge UI wireframing kit, a collection of sounds for your apps and some great colour tools. Read on to find out more...
Hitting the right tone with your microcopy makes a huge difference to how people feel about you and what you’re offering. To help you strike the right note, Sridhar Rajendran has curated this online collection of good bits of copy that demonstrate how to communicate well while adding some personality to your site.
They’re divided into helpful categories such as 404 pages, cookie consent, newsletters, error messages and so on, and will hopefully serve as inspiration for writing your own entertaining and engaging copy.
Here’s an alternative way to get started on your colour schemes: Picular is a search engine for colours. Just enter any colour and get a range of swatches. It’s useful because we’ve all got a slightly different idea of what we mean by ‘fuchsia’, ‘vermilion’, ‘dusky lavender’ and so on, so Picular helps to get everyone on your team speaking the same language. The swatches come up with hex values that you can click to send to the clipboard.
This is another really great tool for making colour palettes. Unlike other palette tools, this one is focused on making palettes out of colour scales. The RGB values at the top control the overall colour theme, and once you’ve set that you can further tweak things using the sliders underneath.
The palette is divided into light and dark colours, so you can play with either end of the scale without affecting the whole thing. You can use this to create scales that go from very dark to very light, or stick to a middle range.
One advantage that bricks-and-mortar shops will always have over online retailers is that they give customers direct access to products for close inspection. Now Shopify is closing the gap a little with Shopify AR, which enables retailers to easily create augmented reality experiences for customers using Safari in iOS 12. This gives users a chance to closely examine products from every angle and get a much better sense of what they’re buying. Check out Shopify's blog to see what some online shops have already done with it.
05. Dense Discovery
Don’t miss out on this one: it’s a wonderful newsletter put together by Kai Brach, publisher of Offscreen magazine, which contains an excellent selection of useful tools, apps and sites, as well as the most interesting and inspiring design-related podcast episodes, articles and conversations.
If you’re trying to wean yourself off Twitter a bit, you can use newsletters like this one to reduce FOMO – all the best bits are in here so you don’t need to worry about missing out on something by reducing the time you spend on social media.
06. Ship 2.0
Product Hunt has released a major update to its Ship tool, which is a toolkit to help you with all the things you need to do to get your digital product off the ground. There are tools for making a landing page, building an email list to stay in touch with your users, conduct surveys, A/B test your website and much more. The new version has improved customisation features, as well as the capability to add a chat room to your homepage.
No matter how much effort you’ve put into the design, if your site is slow it’s going to be a frustrating experience for your users – so speed should always be a priority. Image optimisation is a low-hanging fruit in this situation. Mat Marquis is chair of the Responsive Issues Community Group, so he’s an expert on these matters. In this e-book, he guides you through everything you need to know to get your images up to scratch.
Sometimes the simplest tasks can be frustratingly difficult to accomplish, and converting HTML documents to PDFs surely fits into that category. PDFShift offers a decent solution to this problem: with a single POST request it will generate a PDF of the required HTML document, and it provides plenty of options for customising the output – you can add a header/footer, a watermark and customise the CSS. There’s a free option which gives you 250 conversions per month, or you can pay to get more.
09. UI Sound Kit 2
This is a great collection of UI sounds from composer and sound designer Roman Zimarev, which you can use to give a nice tone to your app or website. The sounds are arranged into categories for notifications, alerts, complete and success, cancel and errors, and miscellaneous – but of course you can make your own judgement about which sound goes where. There are 130 sounds and it’s $38 for the lot – not bad for a good library you can use for multiple projects.
Drawing interface screens from scratch probably isn’t worth your time; this kit has over 240 fully customisable screens for Sketch that you can use to put your app together at top speed. All the common purposes are there such as registration, user profiles, settings and so on, and the designs are divided into categories so you can find what you’re looking for easily. It’s easy to adjust colours and typography to put your own spin on the designs and avoid a cookie-cutter look. The library is $39, which sounds like a good deal to us.