Skip to main content
Mapping a User Story

Creative / Development Inspiration 58

New year happened. and then Christmas happened. And then I went away for jolly. Enough time to break a habit.

 

Not a chance.

 

This weeks design and developer inspiration rundown has even more of the good stuff. Want to know more about accessibility? Check. How about the newest CMSs on the scene? I got you. Enjoy!

 

Website Inspiration

Beauregard

Beautiful beautiful website. Smooth movement, great imagery and subtle copy. Only one issue… it auto-plays music you cannot turn off. Are they being serious?!

https://www.beauregard.ch/

 

Designer Resources, Examples and Inspiration

Designing for Accessibility is not that hard

Seven easy-to-implement guidelines to design a more accessible web

https://www.invisionapp.com/inside-design/designing-accessibility-not-hard/

 

Merge

Build one component, apply everywhere. Keep an eye on this. It could be big. Making web dev smoother and faster.

https://www.uxpin.com/merge

 

The dilemma of designers’ empathy delusions

Taking a bit of a reality check on how empathetic you really are and for whom can help make you a more effective designer, not just an idealistic one.

https://medium.com/shapingdesign/the-dilemma-of-designers-empathy-delusions-a61f0663deaf

 

Development Snippets, Samples, and Articles

Remove Image Background

Using AI and come clever code, this website (it has an API) removes an images background in 5 seconds. So much potential for apps…

https://www.remove.bg/

 

Destyle

Think normalise.css. Think reset.css. But think better.

https://github.com/nicolas-cusan/destyle.css

 

Twill

Slim, sleek and sexy new CMS built on Laravel. Open Source and flexible. Will be trying this one out for size.

https://twill.io/

 

Jigsaw

Another static site. This one seems cleaner and easier to set up though? Ill let you be the judge.

https://jigsaw.tighten.co/

 

A bit of everything

The Rise of the Content Mesh

Use best-of-breed solutions tailored to specific use-cases like e-commerce or blogging; it provides a modern framework for rapid iteration and it generates lightning fast websites out of the box. Enter the content mesh!

https://thoughtsandstuff.com/the-rise-of-the-content-mesh/

 

Story Mapping, Visual Way of Building Product Backlog

Story mapping is a top-down approach of requirement gathering and is represented as a tree. Story mapping starts from an overarching vision. A vision is achieved via goals. Goals are reached by completing activities. And to complete an activity, users needs to perform tasks. And these tasks can be transformed into user stories for software development.

https://www.thoughtworks.com/insights/blog/story-mapping-visual-way-building-product-backlog

 

Are Your Analytics Lying?

Most people are not ready to convert right away and you shouldn’t expect them to do so anyway…

Basically I’m saying you need to focus on long term conversion strategies too!

https://www.cortes.design/post/saas-marketing-myth-analytics

 

Milanote

Capture your teams ideas, all in one place.

https://milanote.com/

 

Screen Guru

Take a screenshot of any website. Easily.

https://screen.guru/

 

Spotify Design

Spotifys very own blog section of design. Well worth a scroll through!

https://spotify.design/

UX UI Website Examples

Creative / Development Inspiration 54

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/

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

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/

Web Character from Pub and SVG

Creative / Development Inspiration 50

This is the 50th Creative and Development Inspiration rundown. That is almost a year of finding best practise articles, and not updating my site to have SSL (I only sorted it yesterday, what a ballache). In any case, this week has been a great one for web articles. From best UX practices, to setting website goals, to infinite scroll, and back to web accessibility. This weeks design development rundown is an eclectic mix.

 

Website Inspiration

Franco Manca

Kicking this week off with the website inspiration. A website for sourdough pizza. Simple, easy to understand, with subtle (and not so subtle CSS animations). Someones websites don’t need to be astounding to do a great job.

https://www.francomanca.co.uk/

 

Designer Resources, Examples and Inspiration

UX Design Practices: How to Make Web Interface Scannable

Scannability is one of the most essential factors of website usability. We have so much content at our fingertips, more than as can consume. Due to this websites need to be designed in a way to get the information easily and quickly, so we can go back to Twitter.

https://uxplanet.org/ux-design-practices-how-to-make-web-interface-scannable-2010125c710e

 

7 Ways to Design For a Global Audience

How you design a website that doesn’t have a clearly defined target audience? Web Designer Depot walk through 7 different steps.

https://www.webdesignerdepot.com/2018/10/7-ways-to-design-for-a-global-audience/

 

User Experience: How to Improve Your Website UX with Humor and Cuteness

Building a website is all about your users. You need to be aware of your audience and you build your brand identity around them. There are thousands of ways to approach and enhance your website user experience. One of the strategies we are often presented with is using humor and cuteness added to your website style.

https://icons8.com/articles/user-experience-improve-website-ux-humor-cuteness

 

What is a Design Sprint

Taken from Design Sprint: A Practical Guidebook for Building Great Digital Products. This article breaks down how to maximise the chance of making something people actually want.

https://www.freshtilledsoil.com/what-is-a-design-sprint

 

Development Snippets, Samples, and Articles

Mouth Expressions with Pug, SVG ad GSAP

Bringing some character to Codepen, Alessandro Falchi as created this brilliant animation that jumps between moods.

https://codepen.io/afalchi82/pen/OBjKyZ

 

Is Gutenberg the End or a New Beginning for WordPress?

I would argue yes, maybe, depending on the user. Iain from Delicious Brains has a lot of say on the issue. Well worth the read if you are a user of WordPress

https://deliciousbrains.com/wordpress-gutenberg

 

Stop Building Websites With Infinite Scroll!

I’ll be honest. I was surprised when I saw this article, as I had no idea people still developed sites with infinite scroll. Turns out they do. Please, please stop.

https://logrocket.com/blog/infinite-scroll/

 

Percy.io

Sold as an all in one visual testing solution, Percy takes screenshots of your site when a new version rolls out. If there any any issues, Percy will tell you!

https://percy.io/

 

Web Accessibility for 2019

Today’s content can consist of VR, animation, data visualisations, and video games. As well as the more standard HTML tags. This means a broken experience for those who rely on assertive technologies. How can this be changed moving into 2019?

https://blog.sourcerer.io/building-web-accessibility-in-2019-b4bf16ef5754

 

A bit of everything

 

Making Your Design Systems Dynamic

Components are not static. They resize and move with the page. So why are designers designing them as such? Is it due to the tools evolving from a print background?

https://uxdesign.cc/making-your-design-systems-dynamic-644cf1c7d33f

 

Uber’s Undoing Part III: Redemption

In Design and Development Inspiration 58 I covered the 2 part of this article. Here is the third. A real look at why Uber should get gone (they don’t know what is going on it seems).

http://www.elischiff.com/blog/2018/10/24/ubers-undoing-part-iii-redemption

 

The Modern Web Design Process: Setting Goals

The first step to a successful website, is working out the point of the website. This seems like common sense, but apparently not.

https://webflow.com/blog/the-modern-web-design-process-setting-goals

 

User Research is a Team Sport

Big reveal research does not work. As in, one person going away and doing all the work, ending in a presentation does not allow the team to immerse in the user information. The team must be there from the start.

http://www.myddelton.co.uk/blog/user-research-is-a-team-sport

CSS Shape Radius Blog Banner

Creative / Development Inspiration 49

This week is more developer heavy, but with reason. There have been some brilliant tools and articles this week, and I really wanted to share them all! Enjoy this weeks design (little less) and development (little more) inspiration rundown.

 

Website Inspiration

ACLU — 50 State Blueprint

Not your typical website, but incredibly effective. ACLU have created this simple website showing each one of the 1,942,600 people in state prisons and jails in the US.

https://50stateblueprint.aclu.org/

 

Designer Resources, Examples and Inspiration

Stop Solving Real Problems Once in a While

We sometimes take things too seriously and thus overrate people sharing their shiny design and code experiments with the world.

https://uxdesign.cc/stop-solving-real-problems-once-in-a-while-e7e1ecdaf9c1

 

Logo Lab

A tool to help you make your logo better. Checks balance, colour, accessibility, and more to ensure your brand is more able to catch that attention!

https://logolab.app/lab

 

 

Development Snippets, Samples, and Articles

Introducing GitHub Actions

This makes me very excited. GitHub actions allows build and deploy (actually, any task you can think of) to be run when specific commit commands are made. Yes.

https://css-tricks.com/introducing-github-actions/

 

Experimental Gradient Editor

A great Codepen project by David A, showing colour gradient manipulation. Doesn’t really work on mobile, but looks great on desktop!

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

 

Rythm JS

Spelling issues aside. This JavaScript library is has an interesting take on using music on websites. Lets make your website dance.

https://okazari.github.io/Rythm.js/

 

Keys to Maintainable CSS: Order

Krisztian makes some great points on how CSS should be organised in a project. From ordering, layout, and simple spacing, this article helps developers write better, more readable CSS.

https://pyx.space/post/keys-to-maintainable-css-order

 

Relax – A Promise Based State Management Library

Think Redux, but smaller. Written from scratch, with no action types, switch statements or middle ware. It’s only 2.23kb gzipped!

https://github.com/relax-js/relax

 

CSS Border-Radius Can Do That?

When you use eight values specifying border-radius in CSS, you can create organic looking shapes. The article goes through how this is done, and also links out to a handy tool to help in shape creation.

https://medium.com/9elements/css-border-radius-can-do-that-d46df1d013ae

 

A bit of everything

How to Create a Design System

I am not going to give this up yet! I am big on this idea. This article covers the autonomy of a design system, and how you can build one.

https://medium.com/dev-channel/how-to-create-a-design-system-460b93a6565

 

The Inclusive Web – Why It Should Matter to Businesses

An article I wrote last week about how businesses seems to forget about accessibility. This makes no sense, as they seem to be missing a trick…

http://thoughtsandstuff.com/the-inclusive-web-why-it-should-matter-to-businesses/

 

Of Deadlines and Due Dates

This article stood out to be due to this one like – “Do not commit to a deadline you did not help set”. I think this sentiment is something that needs to be considered by a lot of people in this industry. Interesting read.

https://blog.calevans.com/2006/02/03/of-deadlines-and-due-dates/

 

So We Got Tracked Anyway

A brilliant article about how SSL means bugger all to the monopolies of the interwebs, and how Google and Facebook track you everywhere you go.

https://youbroketheinternet.org/trackedanyway

 

Realtime Board

I stumbled across this tool on Reddit. A real time, whiteboard like interface to keep everything in one place. A simple white boarding platform for cross-functional team collaboration

https://realtimeboard.com/

Mawla Banner

Creative / Development Inspiration 48

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

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

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