Skip to main content
Humaaans Illustration Design System

Creative / Development Inspiration 56

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/

Dogs on CodePen Banner

Creative / Development Inspiration 55

This week is more UI focused, due to a project that I am working on. I have still managed to include some brilliant development inspiration articles, and a few thought pieces at the bottom of the rundown. Have a good week!

Designer Resources, Examples and Inspiration

Adobe XD Wireframe Kits

A collection of Adobe XD wireframes to get you off the ground in your next web project!

https://newtodesign.com/xd-wireframe-kits/

 

Accessibility before Aesthetics

It’s time we start addressing accessibility before aesthetics in our design processes to create meaningful products for our diversified societies and cultures. Before diving into the Why, How and What of it, let’s revisit the definitions of these terms to set the context.

https://uxplanet.org/accessibility-before-aesthetics-9a0fb463e149

 

Montage

Fast, easy prototyping for everyone. Using a user-generated library of components, designs can be got of the ground quicker than ever.

https://www.trymontage.com/

 

Rememberly — A UX case study to help people affected by Alzheimer’s and Dementia

A brilliant case study for a apps UX that needs to do its job.

https://medium.com/tj-egbert-design/rememberly-a-ux-case-study-to-help-people-affected-by-alzheimers-and-dementia-6a5c17a1e690

 

Development Snippets, Samples, and Articles

Zeroheight

This brings the design system closer to everyone involved. Starts with the designers, then can be fleshed out by the developers. Edited by everyone.

https://zeroheight.com/

 

The Dogs of CodePen

10 animated dogs. Thats all.

https://blog.codepen.io/2018/09/05/the-dogs-of-codepen/

 

Strategies For Headless Projects With Structured Content Management Systems

Using a Structured Content Management System (SCMS) can be a great way to free your content from a paradigm that begins to feel its age. In this article, Knut Melvær suggests some overarching strategies, with some concrete real-world examples on how to think about working with structured content.

https://www.smashingmagazine.com/2018/11/structured-content-done-right/

 

Getform

Not enough time to build in a form? Use Getform! Backend platform for designers and developers.

https://getform.io/

 

FreeCodeCamp – JavaScript Platform Game Tutorial

Lear how to build a Maria like platform game with this 3 hour video tutorial!

https://www.freecodecamp.org/news/beaucarnes/platformer-game-turorial-javascript–m1JO9zlF4

 

Drop-Down Usability: When You Should (and Shouldn’t) Use Them

Deciding when to use a drop-down — or when to use another interface type, such as a radio button interface or open text field — for a specific input can be tricky. This article talks through the when and wheres.

https://baymard.com/blog/drop-down-usability

 

A bit of everything

Deep Dive Duck

Need to keep an eye on your competitors? Monitor changes on their site and get it set to you in a weekly email!

https://deepdiveduck.com/

Users love dark products like this

Creative / Development Inspiration 53

A massive selection this week. 2 great website examples to help inspire your portfolio designs. Some great JS frameworks and testing tools. A few articles to help designers design the good stuff, and even more articles to keep you busy. Enjoy this website design and developer inspiration rundown.

Website Inspiration

Tom Rush

A Leeds based digital creative website. Tom has built a simple, easy to read, and quick to load portfolio that does a great job.

https://tomrushworth.co.uk/

 

Tim Householter

First Tom, now Tim. A lead designer at Transom Design in Seattle. His site uses lots of white space and grids to display his work. Clean, simple, easy to read.

http://timhouseholter.com

 

Designer Resources, Examples and Inspiration

In the dead of night we are drawn to dark interfaces

Distraction free, pretty, and amplification. What dark interfaces are a massive thing in product design.

https://uxdesign.cc/in-the-dead-of-night-a4c7fa98aec4

 

Development Snippets, Samples, and Articles

Grid Tile Layouts with auto-fit and minmax

A new and easy way to make perfect responsive title layouts with CSS Grid.

https://gedd.ski/post/tile-layouts/

 

Building Your Colour Palette

You can’t build anything with five hex codes. To build something real, you need a much more comprehensive set of colours to choose from.

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

 

Creating Excellent UX Flow Charts

Flow charts, like any deliverable in the design process, is an excuse to talk to your team. As much as we like complaining about meetings and formal deliverables, the truth is that design work would come to a dead stop without (a) conversations and (b) pictures.

https://medium.com/eightshapes-llc/creating-excellent-ux-flow-charts-df6f1e46e524

 

Google Web.Dev

With actionable guidance and analysis, web.dev helps developers like you learn and apply the web’s modern capabilities to your own sites and apps.

https://web.dev/

 

Glorious Demo

The best way to create animated code for demos. Copy, pastable, and pretty.

https://glorious.codes/demo

 

Chromatic – UI testing for Storybook

A continuous UI testing tool that combines the accuracy of manual testing with the efficiency of automation. 21% of software budget is on bugs, and the cost of bug repair in production is 5-10x. This tool helps save time and money.

https://blog.hichroma.com/chromatic/home

 

Maizzle

Maizzle is a BYOHTML framework for rapid HTML email development. It’s like a static site generator, but tailored to email.

https://maizzle.com/

 

Svelte

The magical disappearing UI framework. I still need to have a proper look into this but it seems really interesting. Using vanilla JS, but the same functionality as major JS frameworks. Teeny tiny in size.

https://svelte.technology/

 

Why using `tabindex` values greater than “0” is bad

Using Tab Indexes in web development? Maybe you should stop doing that…

http://www.karlgroves.com/2018/11/13/why-using-tabindex-values-greater-than-0-is-bad/

 

A bit of everything

Web Typography Resources

A great list of resources all centred around typography. Perfect for designers and developers.

https://betterwebtype.com/web-typography-resources

 

Cacher

The code snippet organiser for developers. Integrates with most editors to store commonly used snippets from the whole team on the cloud.

https://www.cacher.io/

 

Heat maps 101: a complete guide with examples, tools, and case studies

Hotjar walk you through why, how and when to use heat maps. Mixed up with a few case studies and examples to show how valuable they can be.

https://www.hotjar.com/blog/heatmaps

 

Designing, laws, and attitudes.

I often hear from stakeholders who worry that “accessible” means “ugly.” Well here are resources that are accessible and visually beautiful.

https://ethanmarcotte.com/wrote/designing-laws-and-attitudes/

Design and Development 52 Banner

Creative / Development Inspiration 52

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

Bedrock & Trellis WordPress Development

Trellis & Bedrock For Fast WordPress Development

I am continually trying to speedy up and improve my WordPress workflow process. Unlike a lot of JS framework communities, WordPress seems to be a little behind in creating a fast and efficient roll out process. The whole thing seems a little “work it out yourself”.

 

That being said, there are hundreds of tools littered around the interwebs once you start looking. I have been aware of Roots, and the resources they have created for a while, but never had the time to properly look into them. Today I decided to look into Trellis and Bedrock.

 

What the Hell is Trellis? Bedrock who?

 

Trellis is labelled as “WordPress development and production servers done right”. Basically a complete WordPress server on your local machine, with the ability to deploy and update with a single command. This also means that if someone else on your team needs to spin up the theme to take a look, it is as easy as a few commands. No more sending a zip file across email.

 

Bedrock is a WordPress boilerplate that completely overhauls the standard environment setup. It means that the project is organised, and just easier to work with.

 

I will only go as far as setting up a local development environment in this article. I will come back and write an article on remote servers once I have my head around the process.

 

Installing the Requirements

To begin with Trellis runs on Vagrant – a tool for building and distributing development environments. And Vagrant runs on VirtualBox. So before we can do anything, these two need to be installed.

 

Firstly, to install VirtualBox, go to https://www.virtualbox.org/wiki/Downloads and find the package for your machine. As I am running Windows I have a feeling this process is going to be harder for me, than someone on Mac on Linux. We shall see…

 

Once VirtualBox is installed, go to https://www.vagrantup.com/downloads.html and download the package.

 

Vagrant takes care a dependency called Ansible for us. This is a automation system that handles application deployment and task execution. In essence removes the need to run repetitive tasks ourselves. Vagrant only installs Ansible within the project, so if you are going to consistently roll out new project, to save time it would be worth installing locally from https://github.com/ansible/ansible. This is not essential thought.

 

Create a Project

Now to get into the fun bit. Roots recommend a directory structure that is not the WordPress standard. This is handled by Bedrock, so no problems here.

It looks like this:

Bedrock directory structure for WordPress development

Firstly we need a project folder to put everything in.

 

mkdir example.com && cd example.com

 

Now we need to introduce Trellis.  

At this point you are working with GitHub and SSH. Make sure that you have a SSH key set up on your computer, and also on your GitHub account. If you have not, you will need to do this now.

 

git clone --depth=1 [email protected]:roots/trellis.git && rm -rf trellis/.git

 

And now Bedrock

 

git clone --depth=1 [email protected]:roots/bedrock.git site && rm -rf site/.git

 

So far so good!

 

Configure Your Site

Trellis is built around the concept of “sites”. Each Trellis managed server (local or remote) can support a single, or multiple WordPress sites. Trellis handles the configuration everything required to host a site. This includes the databases, folder directories and Nginx vhosts. This means that this process only needs to be carried out once. After this everything can be run from here.

 

Trellis uses YAML files for each environment. There are two files that you need to be aware of.

 

Normal settings file: group_vars/development/wordpress_sites.yml

Passwords and secrets: group_vars/development/vault.yml

 

Normal Settings

This file manages the top level settings that is used to define all your sites. This is the bare minimum example that is given in the Trellis documentation.

Trellis normal WordPress settings

Each site starts with the website name as the key. This is used by Trellis internally to name the site and as a default variable throughout the build. It is recommended that sites are named after the domain, so that it is easy to understand which is which.

 

To access the development site on your localhost, set the canonical link to the URL of your choice. Trellis will set your system to show your WordPress site when you visit this domain. In the example above, visiting www.example.test will take you to the site.

 

Under this site name are the settings for that particular site. There is no need to redefine these variables, but if you do, be aware you will also have to edit the corresponding entry in the Password file.

 

Passwords and Secrets

This file is used by Ansible. It is used as we do not want to include passwords in our Git repository. This is an example of the vault.yml file given in the documentation. As you can see the site names match in both files.

Trellis WordPress Password Settings

Spinning Up

To get the server up and running, three things need to happen. Firstly move into the Trellis folder, inside your project root. Secondly, run the following command:

 

Vagrant up

 

Vagrant will go away and get certain dependencies it needs to run. Once these are installed you will need to re-run the command.

 

At this point I found on my work machine Vagrant got an error when trying to download a build essential: build-essential_12.1ubuntu2_amd64.deb

 

The console returned the following error message:

 

The following SSH command responded with a non-zero exit status.
Vagrant assumes that this means the command failed!

apt-get install -y -qq build-essential curl git libssl-dev libffi-dev python-dev

Stdout from the command:

Stderr from the command:

E: Failed to fetch http://archive.ubuntu.com/ubuntu/pool/main/b/build-essential/build-essential_12.1ubuntu2_amd64.deb 400 Bad Request [IP: 91.189.88.152 80]

E: Unable to fetch some archives, maybe run apt-get update or try with --fix-missing?

 

I found by logging into the Vagrant machine:

 

vagrant ssh

 

and following the command given in the console

 

apt-get install -y -qq build-essential curl git libssl-dev libffi-dev python-dev

 

I was able to fix the issue. Once these packages had properly installed, I ran

 

vagrant reload --provision

 

To kick off the machine again.

 

Once running, this will take around 5 – 10 minutes to complete. As soon as this is finished, your WordPress site is accessible. In your browser following the canonical URL set in settings earlier to see the site.

When you need to shut down the machine, you can roll it down without deleting the whole machine by running:

 

Vagrant halt

 

This is essentially shutting the computer down. To start it back up just run:

 

Vagrant up

 

Once this has been run once and you have the hang of it, your workflow speed is dramatically increased. By including Gulp into your theme development will turn the whole process of developing WordPress themes so much more enjoyable. Rather than messing about with the setting up of environments you can just be creative!

Coloors - Colour Scheme Generator

Creative / Development Inspiration 51

This week was a hard week to work out what not to put in this design development rundown. There were so many great choices. A brilliant website inspiration, some great design based tools, and all the articles. Enjoy!

 

Website Inspiration

St. Phillips Homes

A development company, specialising in building homes in desirable locations. The site is fast to load, and has a sleek look and feel. A nice change from tech sites.

https://stphilipshomes.co.uk/

 

Designer Resources, Examples and Inspiration

Coolours

The super fast colour scheme generator that looks pretty!

https://coolors.co/

 

Dribbles 404 Page

Sometimes users do get lost. Dribble has created an interactive 404 page to get them back on track!

https://dribbble.com/404errorpage

 

Confessions of a Flawed Designer

A comic on some bad habits this designer is trying to fix.

https://thedesignteam.io/confessions-of-a-flawed-designer-11746ff42675

 

Refill me

A brilliant real world example of UX. Each table has a small painted area where you put your glasses if you want a refill.

https://www.waveguide.io/patterns/else/entry/refill-me

 

Development Snippets, Samples, and Articles

30 Seconds of CSS

A curated collection of useful (and not useful) CSS snippets that you can understand in 30 seconds or less. Some really helpful ones, like a load bouncer or how to make a Circle.

https://30-seconds.github.io/30-seconds-of-css/

 

Easier Scrollytelling with Position Sticky

Use minimal CSS to produce an engaging story telling process, without the weight of JavaScript

https://pudding.cool/process/scrollytelling-sticky/

 

The Architecture No One Needs

Why don’t you use React?! Make it a SPA! Hold up, maybe a single page app isn’t the right call for this project…

https://www.gregnavis.com/articles/the-architecture-no-one-needs.html

 

Turbolinks

Originally built for Ruby on Rails apps (look at the BaseCamp example) this JS script makes navigating a site super speed fast. All by not reloading the page. Simples.

https://github.com/turbolinks/turbolinks

 

Lozad.js

On the same vein of speedy loading. Here is a 0.9kb lazy loader for images and iframes. No dependencies. One of the better packages I have seen.

https://github.com/ApoorvSaxena/lozad.js

 

A bit of everything

Only One Deliverable Matters

So much varied work goes into producing a digital product. Mock ups, sketches, user flows. This is all incredibly important. The documents that it generates are not. Remember what you are creating.

https://bigmedium.com/ideas/only-one-deliverable-matters.html

 

The Web Accessibility Introduction I Wish I Had

Hello past self. Here is why web accessibility matters to your job. Turns out web accessibility affects all users, not just thought with disabilities. Sort it out.

https://dev.to/maxwell_dev/the-web-accessibility-introduction-i-wish-i-had-4ope

 

How (properly) Wasting Time at Work Increases Productivity

Our workaholic culture and the business epidemic tend to villainize time-wasting behaviours during work — like leisurely lunches and web browsing — but research proves that breaks can enhance your performance, on many levels.

https://medium.com/swlh/how-wasting-time-at-work-properly-increases-productivity-76272d651ef0

 

Pitfalls of Running A/B Tests

This is something close to my heart. I am a bit advocate of testing all data you can lay your hands on. However, remember to consider all the results…

https://medium.com/joytunes/the-pitfalls-of-running-a-b-tests-4da7141960d7

 

My First Taste of Grav

I have been looking for alternatives for small site development systems for a while now. I came across Grav. These are my first thoughts.

https://thoughtsandstuff.com/first-taste-of-grav/

Creative / Development Inspiration 47

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

Card 2.0 Web Banner

Creative / Development Inspiration 45

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/

Kin Movie Banner

Creative / Development Inspiration 43

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

Kollegorna Banner

Creative / Development Inspiration 42

Brilliant UX/UI articles this week – how to craft a kickass post filter, the Screenlife app case study, and a whole bunch of design resources. On top of that we have a tutorial on NodeJS gesture recognition, and how to create a blog with React. Ever considered launching a side project? At the bottom there is an article on how to do it in 10 days! Take a look!

 

Website Inspiration

Kollegorna – Swedish Digital Agency

This site seems to be built on top of Bulma or at least styled similarly, but I’m not sure. It is very sleek and easy to digest, which is a big thing for me. I love how each element has been considered and animates in its own way. My only issue with this this site is it is for a digital agency, and yet has a Chrome Lighthouse performance score of 35… mixed messages.

https://www.kollegorna.se/

 

Designer Resources, Examples and Inspiration

Screenlife App — a UI/UX case study

A step by step breakdown of the process the Screenlife App team went through to end up at the final product. Very interesting to see the user of paper mockups.

https://uxdesign.cc/screenlife-app-ui-ux-design-case-study-4830d364c76f

 

Design Resources

Neede is that resource we have all been looking for, for a while. One site, holding all of the good quality design resources. Get this on your bookmarks!

https://neede.co

 

How to craft a kickass filtering UX

Filters are a great tool to narrow down high volumes of content and to surface the most relevant results. How do we make sure they are helpful rather than confusing?

https://uxdesign.cc/crafting-a-kickass-filtering-ux-beea1798d64b

 

100 Days of Motion Design

It was a summer night in Seattle. She ate some ice-cream, watched a Youtube tutorial, and downloaded a free trial of Principle. Several months later, completed her 5th 100-day-project — 100 Days of Motion. Then made these.

https://uxdesign.cc/100-days-of-motion-design-463526af852f

 

Development Snippets, Samples, and Articles

Simple Hand Gesture Recognition using OpenCV and JavaScript.

This article is nothing short of really fucking interesting. Gesture recognition using JavaScript (Node.js) and OpenCV. Its a tutorial.

https://medium.com/@muehler.v/simple-hand-gesture-recognition-using-opencv-and-javascript-eb3d6ced28a0

 

Tinies

Another URL shortener. But pretty.

https://tini.es

 

Creating a Blogging App Using React

A bookmark I have been keeping for myself. A tutorial series on creating a full blogging app with React. Very comprehensive. I am collating a series of tutorials and links for React if you are interested – thoughtsandstuff.com/beginners-guide-learning-reactjs/

https://code.tutsplus.com/series/creating-a-blogging-app-using-react–cms-1171

 

A bit of everything

How to launch a side project in 10 days

This post isn’t about the advantages of building with a new technology, or “7 things I learned while doing it”. Rather, it’s about the process of building a web app quickly, keeping irrelevant ideas from muddying focus, and the tool belt to make it happen. The end result was Card Surge.

https://medium.freecodecamp.org/launching-a-side-project-in-10-days-615df3b0e808

 

ZoomQuilt

This is a bit of a mindfuck, but very interesting! Inifinity image zoom.

http://zoomquilt.org/