After a week off ( for sun, mojitos and swimming ) I have another web design / development inspiration for you. However, because I can’t stop researching – even when on holiday – the list is slightly longer than usual, and full of some pretty interesting links.
Website Inspiration
Kin Movie
I’m not usually a fan of film websites, but the way the film snippets work alongside the parallax and particles is really something. Worth a look.
Designer Resources, Examples and Inspiration
The key lessons I learned creating a popular Design System
In 2012 Matt Bond started working on a small side project to standardise design patterns and user experience at Atlassian. This is what he has learnt!
Search Colours – Using Keywords!
Think Google for colours. A sleek interface to help inspire your designs.
Colorable
A brilliantly simple colour generator to show if your colour pairings are accessible or not. Definitely worth saving!
Development Snippets, Samples, and Articles
How to Build Complicated Grids using CSS Grid
With CSS grid now available in all popular browsers it’s possible to reliably define the rows and columns that make up any kind of grid. This article details how toachieved the designed layout using CSS grid without any silly workarounds or java-script magic necessary.
https://danwebb.co/journal/how-to-build-complicated-grids-using-css-grid
Universal PWA Builder
A universal, framework-agnostic PWA builder that could works along side most of the major JS libraries. Can be run as is, with no need to configure, but it is fully extensible.
Create your Design System
A 6 part rundown of all aspects required in creating a design system. This link starts at the beginning, with typography. A concise and well thought out piece to lead the way.
https://medium.com/codyhouse/create-your-design-system-part-1-typography-7c630d9092bd
SCSScale
Typographic modular scale starter based on body’s font-size built on SCSS
https://github.com/alectro/SCSScale
CSS Icons
An icon set made with pure CSS. No dependancies. Just grab the icon and go. Perfect for a small web project with only a few icons.
Emotion JS
I am so happy to have found this. Emotion is a performant and flexible CSS-in-JS library. Building on many other CSS-in-JS libraries, it allows you to style apps quickly with string or object styles. It has predictable composition to avoid specificity issues with CSS. Perfect time saver.
https://github.com/emotion-js/emotion
Styled Components
Same as the above, but has been around for longer. Better documentation, large community. Worth looking into both.
https://www.styled-components.com/
A bit of everything
Could Value-based Pricing be the Key to Higher Revenues
A recent survey of design and development firms revealed a tantalising statistic: Freelancers who use value-based pricing were more likely to report annual income over $50,000 per year than freelancers who weren’t. Could it raise revenues for your practice?
https://www.webdesignerdepot.com/2018/08/could-value-based-pricing-be-the-key-to-higher-revenues/
Honoring a great man – The Story Behind Rebeccapurple
A child’s passing is memorialised with the name of web colour.
https://codepen.io/trezy/post/honoring-a-great-man
