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

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.