Skip to main content
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

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/

Grav CMS banner

First Taste of Grav

Up until recently I have been predominantly a WordPress based developer. I have dabbled in other things, a little bit of React here and there but nothing crazy. Recently however, I have felt a bit nonplussed with it all. Everything seems to take a little bit too long to spin up, and although I have built Gulp scripts to help speed me along, they hasn’t help as much as I would like them to. Then Gutenberg became a thing. Not that I don’t think WordPress needs to stay with the times, I just don’t think it will make my life any easier.

 

Enter Grav. I was looking for a simple, easy to spin up static site generator that has a backend simple enough for idiots clients. It is PHP based (so I can put it on a clients hosting without having to explain Node), and speedy as anything. It seems to cover all those bases.

 

Installation

 

This was a dream. I already have WAMP and Composer installed on my machine so I had to run 3 commands to get Grav installed and ready to go.

git clone -b master https://github.com/getgrav/grav.git
composer install --no-dev -o
bin/grav install

 

This last one did give me a little bit of trouble. I got the error message:

‘bin’ is not recognised as an internal or external command, operable program or batch file.

 

Turns out this is due to the PHP directory not being found by Windows. To get past this all I needed to do was show my computer where PHP was located using this command:

 

C:\wamp\bin\php\php7.0.10\php bin/grav install

 

At this point everything went well. I already had Wamp switched on, so pointed my browser to that folder in my Localhost.

 

Grav Install Confirmation

 

 

Woop!

 

Installing Admin Panel

 

The Grav “Learn” section has a really good rundown of all the configuring and option settings that can be set. It walks through the folder structure, what is used for what, and the general layout.

 

At this point I was not bothered about this. I just want to install an admin panel and smash out a theme (if you are bothered, here is the link: https://learn.getgrav.org/).

 

It turns out installing the admin plugin is just as easy as installing Grav itself. Firstly you have to make sure that your version of Grav is the latest version.

 

 

bin/gpm selfupgrade

 

 

Then, once you are sure you are on the latest version, add that plugin

 

 

bin/gpm install admin

 

 

For the two above command, remember that is you had an issue with PHP when installing Grav, you will do again. So reference PHP directly.

 

I found that my console sat thinking for a while, before anything happened. But something did happen, so sit tight. The admin plugin also requires three other plugins. Login, Forms and Email. These set as though dependencies so will install them for you.

 

Once this has been completed, I found that when I pointed my browser back to the Grav folder on my Localhost the page had changed. Now there is a admin screen asking me to set up a user. Once this is done you are directed to the admin area.

 

Admin Panel

 

First thoughts: God damn I like this. It has very obviously been built with ease in mind.

 

All the options and settings that the “Learn” section went through are all included down the side of the admin section. This made me happy, as I want it as simple and as easy to explain to clients as possible. On a quick click through it seems much like any other CMS, but simplified. There is obvious room for adaption is a project requires it, but for a simple brochure site or blog this setup is perfect.

 

Grav admin panel

 

As Grav is saved down into static files, there is no need for a database. This means that the way the site is backed up, is by downloading the static files. This option is set front and center on the dashboard, alongside a simple user statistic chart.

 

I like to automate everything I possibly can, and the idea of manually downloading a site backup every week does not appeal to me. Turns out this is not a problem. The Grav CLI allows you to hook into the inner workings of the site, so a cron job could be set to do this for you. Happy days.

 

Markup Though?

 

The text editor works in the same way the pages do when editing manually. They use Markup. This is a barrier to entry for a lot of people who are not so technically minded. Turns out someone has already got a solution for this.

 

The TinyMCE Integration Plugin

https://github.com/newbthenewbd/grav-plugin-tinymce-editor

 

Once again, installation is a breeze (yes, I like Grav). There are two ways you can manage this.

  1. Log into your admin panel,navigate to plugins. Search the plugin. Click add.
  2. Or, if you are like me and want to run everything quickly when rolling out a new project. Run this command.

 

 

bin/gpm install tinymce-editor

 

 

Love. It.

 

I am going to spend a bit of time looking into developing a proper, fully fledged theme. But as a general overview to rolling out a site on a localhost, it is a definite winner! As there is no database it means the whole site can be dropped on a hosting service via FTP/SFTP and you are laughing.

 

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/

Inclusive Web Banner

The Inclusive Web – Why It Should Matter to Businesses

What is Web Accessibility?

Web Accessibility is about designing the web so that everyone can use it. The web is a resource that is used across all aspects of life. Education, employment, government, health care, the list goes on.

 

The United Nations Convention define the web as a basic human right, which is understandable. The right to work, the right to access to education, the right to participate in culture; all connected and obtainable through the web. An integral part of society and daily life. If a user is denied access to the web, surely their access is limited to the fore-mentioned.

 

However, in a broader perspective web accessibility benefits all users. For example, one of the key principles in accessibility is to meet certain users needs and situations. This could range from a physical or mental disability, to having a slow internet connection. Web Accessibility is about being fully inclusive of each and every user.

 

So why is the article called ‘The Inclusive Web’, not ‘The Accessible Web’? Because that’s exactly what it should be. Your site should not be designed, and then accessibility factored in afterwards – the whole approach should be a unified, considered, and inclusive of everyone.

 

Why Should Businesses Care About Web Accessibility?

It’s a fair question. At the end of the day businesses (at least most of them) are in it for the profit. If making their site accessible costs money, with no obvious return, surely it isn’t worth it?

 

People with disabilities are a large market segment

19% of adults working in the UK age are disabled. That is almost 1 out of 5 people that may be in a situation where they are unable to view, or navigate a website not built with accessibility in mind. If there is a perception that an organisation doesn’t support the disabled, the fallout can be disastrous. I never thought I would mention her in a blog post, but a perfect example is Kylie Jenner’s cosmetics website being sued for not being accessible – not a good look. Not only that, having a fully inclusive website open the doors to a much larger market. An almost 20% larger market.

 

Every business has customers with accessibility needs. The thought that a business doesn’t is categorically false. Unfortunately, there are no statistics to see which of user are disabled, so a business is unable to see how many of its customers are being turning away.

 

Search Engine Optimisation

It goes without saying, fully accessible websites have better search rankings.

When designed accessibly, the site is more user friendly for all users. The font is larger, which makes it easier to read. How many times have you been on a website with size 12 font, in a terrible type face. I tend to read half a sentence and leave. It is just too much work! Not only that but the messaging is simpler, once again, making the site easier to digest. Already the time spent on the page has increased and reduced the bounce rate.

 

Images have fully thought out alt tags, and all elements within the site are properly labelled. This means that suddenly Google (or whomever) has so much more content to get hold of and index.

 

Key word ranking (if done properly) increases. Why? Because 19% more people can use the site! This is a big thing!

 

On top of all of this remember, Google doesn’t have eyeballs! The easier a site is to screen read, the better the businesses SEO score will be.

 

Ahead of the Curve

Currently, less than 30% of the websites on the internet are Americans with Disabilities Act (ADA) compliant. Now although not a UK act, the requirements exist. Users with accessibility needs use the internet in the UK. This lack of uptake means there is a high chance a business’s competitors are not inclusive. By ensuring their website is compliant, this provides a real opportunity to increase thei market share and have a better competitive edge!

 

Lawsuits

In America companies are facing an alarming number of lawsuits for websites and mobile applications that are not accessible. The belief is that the ADA should apply to website, and that they should be accessible across all devices. Currently these lawsuits are only happening in the States, but I can believe that this mindset will cross the pond.

 

So why is it that so many large businesses, both in B2B and B2C are not fully accessible?

This stems from a lack of understanding and availability of information on the subject. There are no statistics on what percentage of users visiting a business’s website are disabled, which may make it tough to justify the extra expenditure. It may also be that agencies that businesses use for web development are unaware of the benefit of an inclusive website, so do not provide it as a service.

 

However, the facts on SEO and related analytics are not so easy to ignore – if a business has an existing digital marketing strategy, accessibility should surely be integrated to achieve the best results.

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