Skip to main content

Tag: Design

Humaaans Illustration Design System

Creative / Development Inspiration 56

Robert Marshall Leave a comment

Are you able to be the villain? What about if the product you are making has potential to harm? Also, on a more positive note. Here are some great examples of design systems, the state of UX in 2019, and more! Enjoy!

 

Designer Resources, Examples and Inspiration

Stop Showing Design Options and Commit

Normally create 20 different versions and let the client pick? But you are the expert, no?

https://medium.com/slite/stop-showing-design-options-and-commit-595d80bdb4aa

 

The State of UX in 2019

We have seen quite a lot this year. Here’s what to expect for UX in 2019.

https://trends.uxdesign.cc/

 

Humaaans

Mix and match illustrations of people with a design library. Definitely bookmark this!

https://www.humaaans.com/

 

A UX Guide For Designing Error Pages

404’s & maintenance pages. Use this checklist before you get started.

https://blog.prototypr.io/a-ux-guide-for-designing-error-pages-fb9ced1f1c8a

 

Development Snippets, Samples, and Articles

Why You Shouldn’t Split Test During an eCommerce Redesign

Comparing the performance of the old and new site isn’t as useful as other exercises during the redesign process you can run. Don’t split test this!

https://www.goinflow.com/ecommerce-redesign-best-practices/

 

Awesome Design Systems

A collection of design systems, some open source. All the way from Audi, to Cloudflare. Some great examples.

https://github.com/alexpate/awesome-design-systems

 

React Create

Simple library to create component templates for React and React native projects.

https://github.com/obiwankenoobi/create

 

Tiny Details: A Look at Hamburger Menu Reveal Transitions

Examples of the hamburger menu done well, and also not so well. A few nice takes here.

https://speckyboy.com/hamburger-menu-reveal-transitions/

 

A bit of everything

Be the Villain

They’re not going to be fun conversations. It’s not going to be easy convincing others that these aren’t paranoid delusions best tucked out of sight in the darkest, dustiest corner of the backlog. Realistically, talking about it may even harm your career.

https://24ways.org/2018/be-the-villain/

 

8 Lessons from Creating a Design System

Mono created a design system. Here is what they learnt along the way!

https://mono.company/design-systems/eight-lessons-from-creating-a-design-system/

 

Raindrop.io

Think bookmarks, but your your team. Build collections of assets, or working on a new job that needs inspiration. Raindrop makes it simple.

https://raindrop.io/

UX UI Website Examples

Creative / Development Inspiration 54

Robert Marshall Leave a comment

This week is a little more focused on UI design and development. And god damn they are pretty. Its all about those micro-interactions. On top of this, there are articles on Just In Time Design (it rhymes right!) and User Empowerment. Plus so much more! Enjoy this weeks design and development inspiration rundown!

 

Website Inspiration

BornFight

A digital agency that has been building websites and apps since 2009. Considering they have been doing it this long, I would have hoped the site would load slightly faster. However, it looks really good on desktop!

https://www.bornfight.com/

 

Designer Resources, Examples and Inspiration

Design Dots

Another design and dev article curator. But this one is so much nicer. Build on Webflow, the auther only adds 5 pieces of content a day. Each from a different sector. Well worth a look.

https://www.designdots.co/

 

UI UX Interaction Design Week 16

A collection of UI and UX interfaces. Some great examples of websites done right.

http://gillde.com/ui-ux-interaction-design-week-16/

 

Building Your Colour Palette

An article on how to build a website colour palette. Well written, helps get the job done.

https://refactoringui.com/previews/building-your-color-palette/

 

User Empowerment Through Design

It’s not just about creating stunning visuals anymore, users are seeking whole experiences that make them feel more powerful and complete.

https://www.imaginarycloud.com/blog/empowerment-through-design/

 

The UX of Registration and Login

Two of the biggest barriers to entry. Registration and Login. If not designed right can lose a lot of users.

https://www.twotalltotems.com/blog/index.php/2017/12/20/the-ux-of-registration-and-login/

 

Mobbin

A collection of hand picked mobile design patterns that reflect the best in design. A definite bookmark.

https://mobbin.design/

 

Gestalt-Driven UX: The Patterns That Drive Our World

Gestaltism is a holistic philosophy that studies how humans recognize patterns and simplify complex, disparate information.

https://hackernoon.com/design-psychology-gestalt-driven-ux-64ac01cd257a

 

Development Snippets, Samples, and Articles

Feather

Feather is a collection of simply beautiful open source icons. Each icon is designed on a 24×24 grid with an emphasis on simplicity, consistency and readability. Only loads the ones you need.

https://github.com/feathericons/feather

 

autoComplete

autoComplete.js is a simple pure vanilla Javascript library that’s built for speed, high versatility and seamless integration with wide range of projects & systems.

https://github.com/TarekRaafat/autoComplete.js

 

A bit of everything

Just In Time Design

Continuously delivering small iterations based on the team’s needs can transform the product development process. This approach shifts the focus away from highly-produced, out-of-date, difficult-to-maintain design, opening up the process to tighter collaboration and a higher standard of quality.

https://matthewstrom.com/writing/just-in-time-design.html

 

No I Don’t Want To Take Your Survey

In our industry surveys help with understanding the end user. The issue is how companies go about getting the information. Sometimes a survey on a website that interupts the user experience just isn’t the best way!

http://gerrymcgovern.com/no-i-dont-want-to-take-your-survey/

 

HolaBrief

Very few projects end up with exceptional results. HolaBrief makes it easy to ask all the right questions and nail your design brief every time. Built by designers, for designers.

https://www.holabrief.com/

Design and Development 52 Banner

Creative / Development Inspiration 52

Robert Marshall Leave a comment

Website Inspiration

Puree Maison

Although the designers have not considered usability at all, it is a good site to show the different animations and reveals that can be used across a website. Some brilliant hover states over images, and gentle fades on scroll.

https://pureemaison.com/en

 

Designer Resources, Examples and Inspiration

Palx

The last few week have been good for colour generators. Here is another brilliantly simple colour palette generator to sit in your bookmarks.

https://palx.jxnblk.com/

 

40 Orange Website Designs

Creative Overflow have pulled together 40 websites that are based on the colour orange. Some modern, some dated, but all good examples.

http://creativeoverflow.net/40-orange-website-designs-to-inspire-your-next-project/

 

Three Web Design Tools To Speed Up Things

While looking for tools to unify web designs and developers I came across three really interesting web apps. One not yet out yet. One that have been the block a few times, and the other new on the scene.

 

Webflow

Give you the power to design, build, and launch responsive websites visually, while writing clean, semantic code for you.

https://webflow.com/

Hadron

Hadron is a development environment for designers and developers who work together towards the same goal, moving ideas forward and learning from each other along the way.

https://hadron.app/

 

Bondlayer

Bondlayer empowers web designers to craft native apps and responsive websites. Without coding or template restrictions.

https://www.bondlayer.com/

 

Development Snippets, Samples, and Articles

Spectre

A new lightweight modern CSS framework. It is under 10kb gzipped, responsive and uses modern elements and components.

https://picturepan2.github.io/spectre/

 

Markdown to JSX

A lightweight customizable component for Markdown within React

https://github.com/probablyup/markdown-to-jsx

 

Playroom

A simple design environment that allows you to simultaneously design across a variety of themes and screen sizes, powered by JSX and your own component library. Create quick mock-ups and share the work simply.

https://github.com/seek-oss/playroom

 

An Annotated Webpack 4 Config for Frontend Web Development

As web development becomes more complex, we need tooling to help us build modern websites. Here’s a complete real-world production example of a sophisticated web­pack 4 config

https://nystudio107.com/blog/an-annotated-webpack-4-config-for-frontend-web-development

 

‘Atomic’ font size management with Sass

Atomic sizing with Sass should make styling fonts easier. It moves away from styling font elements like H1s, and focuses on specific classes.

https://iamsteve.me/blog/entry/atomic-font-size-management-with-sass

 

A bit of everything

Kill Your Personas

How persona spectrum’s help push real user needs.

https://medium.com/microsoft-design/kill-your-personas-1c332d4908cc?

 

We Do People Leave Your Website? Undecided Explorers

Trying to improve conversion rates? Maybe take a look at users that do convert… You may need to tailor.

https://www.hotjar.com/blog/why-people-leave-your-website

 

User Research? But Why?

If your job has anything to do with design, there is a good chance that you would have experienced the need to do some form of user research. If you happen to work with or for a group of people who have limited understanding of the design process, then you must have had your moments of frustration. This article helps answer these questions.

https://uxdesign.cc/user-research-but-why-2d399182637b

 

Meta Tags

A great tool to mock up Meta Tag views across social media platforms, as well as a teaching tool for those who are not in the loop.

https://metatags.io/

 

Netflix Web Performance Case Study

There are no silver bullets to web performance. Simple static pages benefit from being server-rendered with minimal JavaScript. Libraries can provide great value for complex pages when used with care. Netflix breaks down the process in this case study.

https://medium.com/dev-channel/a-netflix-web-performance-case-study-c0bcde26a9d9

Mawla Banner

Creative / Development Inspiration 48

Robert Marshall 1 Comment

A focus on design systems this week, with a brilliant piece on Ubers rebrand, website inspiration, and micro nudges. Plus a few more in this weeks design development inspiration rundown.

 

Website Inspiration

Mawla – Mobile & Web Development Studio

Firstly, I love these bobble shapes used across the Mawla site. That, combined with the pastel colours makes it friendly, and welcoming. Lots of white space between sections allows the user to fully digest each point. And it works well on mobile!

https://mawla.io/

 

Designer Resources, Examples and Inspiration

Uber’s Undoing Part I: Whipping Boy

Uber has been through so many re-brands, they don’t seem to know who they are any more. Eli pulls apart the company, and looks at the way their re-brands have seemingly had no grounding.

http://www.elischiff.com/blog/2018/10/10/ubers-undoing-part-i-whipping-boy

 

A Guide to Colour Accessibility in Product Design

Accessibility is getting a lot of traction now, with more designers and developers trying to get the upper-hand. With that in mind, have you ever thought about colour accessibility?

https://medium.com/inside-design/a-guide-to-color-accessibility-in-product-design-516e734c160c

 

Micro nudge: a micro animation for behavioural change

A micro nudge is a well-timed small animation that prompts a user to complete a small task. This article includes examples from Instagram, and walks us through the process.

https://uxplanet.org/micro-nudge-a-micro-animation-for-behavioral-change-dd15ecd4fab3

 

Development Snippets, Samples, and Articles

Building an Image Generator for the Number 1 Track on Spotify

DJ Snake, Cardi B, Selena Gomez, and Ozuna have released their new song, Taki Taki, into the world and it has quickly soared to #1 on Spotify’s Global Top 50. Lee Martin was asked to create a marketing concept. This is what he came up with.

https://medium.com/@leemartin/taki-taki-eb45d03a8fb1

 

Cross Browser Testing Cloud

LambaTest allows you to test your website or application across 2000+ browsers and operating systems.

https://www.lambdatest.com/home

 

A11Y Style Guide

This application is a living style guide or pattern library, generated from KSS documented styles…with an accessibility twist. A well build, well documented style library.

http://a11y-style-guide.com/style-guide/

 

 

A Collection of Design System Articles

I have recently become interested in design systems. The concept makes complete sense, allowing all stakeholders to understand the brand – as well as making future design much faster!

Designing Design Systems

Clearlefts Jerlyn walks through the process of designing a design system, and how they run workshops to encourage stack holders to work through pain points.

https://clearleft.com/posts/designing-design-systems

 

Design Systems and Agility

A piece extended from a talk at UX Australia on design systems and their importance. Who do they serve? What is the point?

https://medium.com/interactive-mind/design-systems-and-agility-part-1-of-2-b96c188acfca

 

Understanding Design Systems and Patterns

The concept of design systems is not new to creative industries, but it has only recently been picked up by the digital side.  This article breaks down what a design system is, and can be.

https://www.toptal.com/designers/ux/design-system

 

A bit of everything

You can’t do human-first design without looking after your humans.

Our industry has a poor reputation of burn-out, long hours and stress. How can you keep moral high in the office?

https://perspective.despark.com/you-cant-do-human-first-design-without-looking-after-your-humans-726a0074834f

Creative / Development Inspiration 47

Robert Marshall Leave a comment

12 articles to help inspire you from last week. This website design and development inspiration has some great pieces on UX, a few website examples, and some more code snippets.

 

Have you ever considered that web performance goes hand in hand with UX, or why you should definitely user test. Well I have some thought piece for you!

 

Website Inspiration

Torch App

A simple site that works well on desktop and mobile. An interesting product as well. Love a bit of AR.

https://www.torch.app/

 

Poor Millennials

An article by Huffington post that walks you through the issues millennials have, using modern website techniques. Good work. Interesting read.

https://highline.huffingtonpost.com/articles/en/poor-millennials/

 

Designer Resources, Examples and Inspiration

The product design tool for the day after launch

Site has gone live, but you have seen tweaks are needed. No need to write each one down and send to the developer. With this extension you can make the changes in the console and send with comments. Cannot believe its taken this long!

https://mod-dot.com/teaser/

 

Microcopy Inspirations

All those pages (like 404) that you don’t know how to style, or what copy to use. Well here you are.

https://www.microcopyinspirations.com/

 

Icondrop

One place for all your icons – easily used, easily passed on to the next user.

http://icondrop.io/

 

Understanding Design Systems

While it may seem like a new way of approaching digital workflow, the concept of a design system is not “new” to creative industries. At the core of any design system is a language of design patterns that solve common problems a designer might face.

https://www.toptal.com/designers/ux/design-system

 

Development Snippets, Samples, and Articles

 When to use target_blank

Chris Coyier breaks down when you should, and shouldn’t use target_blank.

https://css-tricks.com/use-target_blank/

 

Random Colour Harmonies

Last week I showed you how Lyft had created a colour palette generator. Well here is another one!

https://codepen.io/meodai/full/RerqjG/

 

Google Maps stopped working? This could be why…

Google recently updated their billing model, and changed the way the APIs were set up. Here I outline how to sort that.

http://thoughtsandstuff.com/google-maps-not-working-with-api/

 

A bit of everything

Breaking the Deadlock Between User Experience and Developer Experience

We cannot talk about user experience, without also including performance. This article opens this issue up. Very interesting read.

https://alistapart.com/article/breaking-the-deadlock-between-user-experience-and-developer-experience

 

Getting to Yes — Convincing Stakeholders to Invest in User Testing

Those who understand the importance of UX know that design-centric companies have a higher ROI so including user testing in a design project comes as a no-brainer. On the contrary, unfamiliarity with its potential benefits means that many product owners don’t consider testing in the first place.

https://blog.maze.design/stakeholders-user-testing/

 

No Conversions? Here are 4 Reasons that Might Help

Getting users to convert can be a tricky one. This article highlights for places where your website might be falling down, and how to fix it.

https://www.cortes.design/post/some-traffic-but-no-conversions-here-are-4-reasons-your-page-is-not-converting-any-why

Proper UX Animation Banner

Creative / Development Inspiration 46

Robert Marshall Leave a comment

So much has happened this week in web! Here is a great overview on UX animation, Lyft has created a colour palette tool. A brilliant article on why select boxes might not be the best option for users, and what to do with user mistake? All this and more on this weeks website design rundown.

 

Website Inspiration

Tubik Studio

A digital design agency based in Ukraine, this website is so smooth. The animation of information entering the page, as well as the use of 3D animation on the home banner made me a massive fan. Easy to find information laid out effectively.

https://tubikstudio.com/

 

Stripe

This is a well known company, but god damn I love this website. Designed so that the user can get to where they need, as quickly as possible, and so pretty at the same time! Subtle animations across the website add that little bit extra.

https://stripe.com

 

Designer Resources, Examples and Inspiration

The Ultimate Guide to Proper Use of Animation in UX

The main principles and rules for animation in UX, laid out in a single succinct article.

https://uxdesign.cc/the-ultimate-guide-to-proper-use-of-animation-in-ux-10bd98614fa9

 

Color Box

A tool designed by Lyft, to help select a colour range from two colours. Pick the way the colours are picked, and output the HEX codes.

https://www.colorbox.io/

 

User Experience: How to Design Onboarding for Your Mobile App

How to create an attractive, and effective onboarding process for your mobile app. It’s a pretty article as well!

https://icons8.com/articles/ux-design-onboarding-mobile-app/

 

Development Snippets, Samples, and Articles

Yubaba – React Element to Element Animator

A easy to use React package to animate between elements.

https://github.com/madou/yubaba

 

Stop Using Select Menus for Known User Input

If a user knows what option they want from the select input, maybe you shouldn’t use a select input…

http://uxmovement.com/forms/stop-using-select-menus-for-known-user-input/

 

Vapid

Vapid is an intentionally simple content management system built on the idea that you can create a custom dashboard without ever leaving the HTML.

https://www.vapid.com/

 

A bit of everything

Using Lorem Ipsum? Don’t! Just do this instead

“Eating our own Dogfood” is now a commonplace phrase and philosophy for using the products you create so you can better experience those same products through the eyes of a real consumer. Stop using fake content, and your designs might just get better!

https://medium.com/the-set-list/lorem-ipsum-generator-skip-it-do-this-instead-944124e754dc

 

What is the Design Sprint?

There are many different methodologies that help designers be more productive and efficient. One of the most popular frameworks that’s heavily focused on teamwork and collaboration with the client is the Design Sprint.

https://phase.com/magazine/whats-the-design-sprint-2-0/

 

6 Ways to Speed up Slow Clients

Frustrated with your client? Beginning to wish you’d never taken this job on in the first place? Do you just need some feedback so that you can move forward?

https://www.webdesignerdepot.com/2018/09/6-ways-to-speed-up-slow-clients/

 

What To Do With User Mistakes

How should you manage user mistakes? This article covers the common practices and points you in the right direction

https://uxdesign.cc/what-to-do-with-user-mistakes-305d084ae1f9

Fixed Menu Banner

To Sticky or Not to Sticky

Robert Marshall 10 Comments

Fixed headers are used across the web, with little to no thought to the user’s experience. I have just started working on a new project and am intrigued in how useful fixed headers actually are for the user. Do they help navigate the site faster or do they just get in the way?

 

Very simply, are fixed headers (think menu, logo, ect) good for user’s experience. Do they work?

 

Excited? I know right.

 

I came across a few articles that held both points of view. Here are the links, described, and I summarize the outcome at the end. If you can’t be bothered to read them all 😉

 

A sticky menu is quicker to navigate

https://www.smashingmagazine.com/2012/09/sticky-menus-are-quicker-to-navigate/

Pro

Navigation is the most critical part of a website. According to this study, stick menus are 22% quicker to navigate, and 100% of users preferred them. However, this study was only carried out on desktop.

Con

However sticky menus can be intrusive. The menu should be easily assessible but not compete for attention. There is also the issue of device support – does it work every time?

 

Top 5 Common UX Mistakes

https://www.toptal.com/designers/ux/top-5-common-ux-mistakes

Pros

There are benefits, but only when considered correctly.

Cons

If the menu is too big then the amount of content seen is reduced leaving users feeling claustrophobic. This also falls on mobile, especially on small 320px wide devices. When using a website on landscape, the sticky menu can take up a massive amount of screen space.

 

The Pros and Cos of Fixed Header Bars

http://creative.artisantalent.com/the-pros-and-cons-of-fixed-header-bars/

Pros

They prevent leaks. If a user is halfway down the page and cannot navigate they may use the back button – causing them to potentially leave the site.

Con

If buggy or jerky they put the user off. On top of this, when being used on a device with an on-screen keyboard, sometime the whole section of content is hidden.

 

Summary

Users seem to prefer fixed headers, but only if they are implemented correctly.

The header should be small large enough to use, but small enough to not take up too much space. The code used to keep them in place needs to be considered to stop it bugging out on all devices.

When being used on very small devices, headers need to be hidden to provide a larger content space.

The best outcome seems to be hiding the header when the user scrolls down the page and reveal it as soon as they begin to scroll up the page. Whilst they are not at the top of the page show a reduced sized menu (but still large enough to use the links), and only return it to the full height when they are at the very top of the page.

Card 2.0 Web Banner

Creative / Development Inspiration 45

Robert Marshall Leave a comment

Persuasive design, portfolio redesign, and how to run a dev sprint. This weeks design and development inspiration rundown has a great selection of articles and code snippets to keep you up to date with last weeks tech.

 

Website Inspiration

Resn

A global creative digital agency. Although hard to work out how to get their contact details, I love this site! Clever use of JS animation and video.

https://resn.co.nz/

 

Designer Resources, Examples and Inspiration

How and why I redesign my portfolio every year

Lessons this designer learned after iterating their site design over 6 years.

https://uxdesign.cc/how-and-why-i-redesign-my-portfolio-every-year-bf3bba3833fc

 

Using persuasive design and triggers to increase conversions

Learn how to improve your conversion rate and increase sales by adding persuasive design elements and triggers to your eCommerce websites.

https://webflow.com/blog/using-persuasive-design-and-triggers-to-increase-conversions

 

Cards 2.0

100 symbols and elements ready for use in any UI. Really nicely designed, with a light modern look.

http://cards2.webflow.io/

 

Development Snippets, Samples, and Articles

Prettier

An opinionated code formatter that makes your code prettier.

https://github.com/prettier/prettier

 

KY

Ky is a tiny and elegant HTTP client based on the browser Fetch API

https://github.com/sindresorhus/ky

 

Sal

A lightweight scroll libary. Just remember don’t overuse, as I explain in week 27.

https://mciastek.github.io/sal/

 

Brownian Gnats

A great JS animation (ish) example on random paths to create little animals. Although a very basic concept, you could built a lot on top of this.

https://codepen.io/DonKarlssonSan/pen/aJVxbO

 

18 Tips for Running a Successful Design Sprint

Development time is a precious resource. In order to be more efficient and responsive, product teams continuously try to use advanced techniques for product creation. One of the most popular frameworks that help the product team to achieve this goal is a design sprint.

https://www.webdesignerdepot.com/2018/09/18-tips-for-running-a-successful-design-sprint/

 

A bit of everything

Real Work vs Imaginary Work

How do you catch more problems in the uphill phase before they catch you later on in the process? The problem with uphill work is it ‘imaginary’.

https://m.signalvnoise.com/real-work-vs-imaginary-work-8bdb84a7d1da

 

The Importance Of Manual Accessibility Testing

Automated accessibility tests are a great resource to have, but they can’t automatically make your site accessible. Use them as one step of a larger testing process.

https://www.smashingmagazine.com/2018/09/importance-manual-accessibility-testing/

Design audit banner

Creative / Development Inspiration 44

Robert Marshall Leave a comment

More thought pieces than inspiration, which is sometimes needed in this industry. Take a moment to sit back, read a few and consider the direction you want to take the web. This weeks design and development inspiration I listed an article on designing for accessibility, how AMP can go to hell (it really can), how to run a design audit, and how to stay scrappy.

 

Website Inspiration

Fleur Moreau – Design Portfolio

Not my usual type of website, but I really enjoyed this. Subtle transitions and a great display of content and image.

http://fleurmoreau.fr/

 

Designer Resources, Examples and Inspiration

Fake Clients

Practice logo design using randomly generated client briefs!

https://fakeclients.com/

 

Designing UI with Color Blind Users in Mind

Colour plays an integral role in UI design. When done right, it improves user experience, influences purchasing decisions, and reflects the brands voice. So, how do you design effective, accessible, and aesthetically pleasing interfaces for coluor blind users?

https://www.secretstache.com/blog/designing-for-color-blind-users/

 

Development Snippets, Samples, and Articles

Progressive Tooling

A list of community-built, third-party tools that can be used to improve page performance. Well worth a bookmark!

https://progressivetooling.com/

 

How to Use GIT Efficiently

Apart from knowing git add, git commit , and git push , there are a bunch of other important techniques in Git. Knowing these will help a lot in the long run.

https://medium.freecodecamp.org/how-to-use-git-efficiently-54320a236369

 

AMP Can Go To Hell

An article after a piece of my heart. Google are trying to monopolise the “World Wide Web”. Can we please stop them?

https://www.polemicdigital.com/google-amp-go-to-hell/

 

A bit of everything

What is a Design Audit and Why You Should Conduct One?

Inconsistencies won’t make anyone trust you or like you. A design audit is essentially a brand checkup. They help ensure everything is consistent and on point. This article discusses what exactly they are, how to conduct them and what results to expect from them.

https://designmodo.com/design-audit

 

How to Stay Scrappy

How to keep your team “scrappy”. How to keep motivated, and fighting for the win. Well worth the read to see how Paper pushes their company forwards.

https://medium.com/dropbox-design/how-to-stay-scrappy-9c42af21c996

Kin Movie Banner

Creative / Development Inspiration 43

Robert Marshall Leave a comment

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.

https://kin.movie

 

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!

https://medium.com/asana-design/the-key-lessons-i-learned-creating-a-popular-design-system-d078c817b4dd

 

Search Colours – Using Keywords!

Think Google for colours. A sleek interface to help inspire your designs.

https://picular.co/water

 

Colorable

A brilliantly simple colour generator to show if your colour pairings are accessible or not. Definitely worth saving!

https://colorable.jxnblk.com/

 

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.

https://github.com/lukeed/pwa

 

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.

https://cssicon.space

 

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