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

Card 2.0 Web Banner

Creative / Development Inspiration 45

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

 

Website Inspiration

Resn

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

https://resn.co.nz/

 

Designer Resources, Examples and Inspiration

How and why I redesign my portfolio every year

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

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

 

Using persuasive design and triggers to increase conversions

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

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

 

Cards 2.0

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

http://cards2.webflow.io/

 

Development Snippets, Samples, and Articles

Prettier

An opinionated code formatter that makes your code prettier.

https://github.com/prettier/prettier

 

KY

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

https://github.com/sindresorhus/ky

 

Sal

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

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

 

Brownian Gnats

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

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

 

18 Tips for Running a Successful Design Sprint

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

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

 

A bit of everything

Real Work vs Imaginary Work

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

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

 

The Importance Of Manual Accessibility Testing

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

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

Mail chimp chart banner

Creative / Development Inspiration 38

Two great website inspiration examples, several website generators, and why the open-plan office is rubbish! This plus a lot more in this weeks website design development inspiration rundown.

 

Website Inspiration

Freetrade

I found this site whilst doing research into investment apps. The thing that struck me was its simplicity, and ease at which is gets its message across. The whole site is well thought out, and easy to digest. It could look into user accessibility a little more, but as a piece of inspiration, perfect.

https://freetrade.io/

 

Iconwerk

Although simple, my god its quick! The way the blog title and images are swapped from the standard card layout is interesting, and works well in this case. Once again, accessibility is an issue (why is this such a standard problem, its not hard to fix!).

https://iconwerk.com/

 

Designer Resources, Examples and Inspiration

10 Beautiful Examples of Wireframes

Wireframing helps designers map out the structure of a website before anything is set in stone. 1st Designer has pulled together 10 examples of different wireframes.

https://1stwebdesigner.com/wireframes-web-design/

 

Dark UX Patterns in Advertising

According to Hubspot research, 85% of people have a negative opinion towards websites with obnoxious or intrusive ads. What’s wrong with the remaining 15%? This article points out the ad creators, and how they tried to trick you. Interesting read.

https://icons8.com/articles/dark-ux-patterns-advertising/

 

Development Snippets, Samples, and Articles

Storybook

I am surprised it has taken me this long to find out about this. But now I have I am definitely sharing it. Storybook is a development environment for UI components. You can browser a component library, view different states, and interactively develop them!

https://storybook.js.org/

 

Stitches

Build plain html templates from this JS template generator. A great idea for rolling out fast concepts, and the ability to add your own templates! Drag and drop and all that.

https://github.com/amiechen/stitches-template-generator

 

Docusaurus

A great project for easily building, deploying and maintaining open source projects. The “Simple to Start” guide walks you through the whole process in a very short amount of time.

https://docusaurus.io/

 

Does the Perfect Email Template Exist? We Used Data to Find Out.

Mailchimp put the numbers together, and came out with this article. They should know, they are the email people! There are no set rules, but they have found some helpful guidelines from this.

https://blog.mailchimp.com/does-the-perfect-email-template-exist-we-used-data-to-find-out/

 

Aria Examples

I have been banging on about accessibility for the past few weeks. Here is a link that can help you with that. Some great examples of common elements, and how they should be built to include/improve accessibility.

http://heydonworks.com/practical_aria_examples/

 

 

A bit of everything

These two articles go against what is being shouted about on Linkedin and those life inspiration blogs. They are also both very good reads.

 

Don’t listen to those productivity gurus: why waking up at 6am won’t make you successful

There is a list of things that “experts” say you must do to be successful, before you begin the working day. This article is of the opinion that they are wrong. I am inclined to agree.

https://medium.com/swlh/dont-listen-to-those-productivity-gurus-why-waking-up-at-6am-won-t-make-you-successful-b3c77921d9fd

 

The open-plan office is a terrible, horrible, no good, very bad idea

Articles like this one have been circling for the last few weeks, and I finally decided to add it to the rundown. I have always been of the belief that open plan offices are counter-intuitive. Especially for individuals who need to concentrate on their work. As much as a support Dave hyping up his client on the phone and getting that sale, I also now can’t concentrate on this awkward function.

https://m.signalvnoise.com/the-open-plan-office-is-a-terrible-horrible-no-good-very-bad-idea-42bd9cd294e3

Visual Creative Studio Illustration

Creative / Development Inspiration 37

Brilliant website inspiration, as well great articles on disrupting the normal design process. Plus web design style guides, and stupid design mistakes. Some great CSS techniques if you are a front end developer, as well as an exciting new virtual whiteboard.

It was great getting the articles together for this week. Some top writers, thoughts and concepts, as well as inspiration. Enjoy this website design and development inspiration rundown!

 

Website Inspiration

The past few weeks I have featured several agency websites to show how good design and layout can be simple and elegant. These two sites build on top of this even more!

 

April Zero

April Zero is a demo site for showing the information Gyroscope collects on you. The way it displays data, and quite honestly how pretty it is really appealed to me!

http://aprilzero.com/

 

Vizue

A creative studio based in Slovakia. This is one of the most creative sites I have seen in a while. Great use of animated SVGs to tie each section together. A great piece of work.

http://vizua.sk/en

 

 

Designer Resources, Examples and Inspiration

 

Priority Guides: A Content-First Alternative to Wireframes

Finding a better process for designing websites is a big priority for me. A lot of “Digital Agencies” throw a design together, then add the content into pre-existing boxes. Quite frankly that makes no sense. Why add content that isn’t required? The internet already has enough meaningless drivel. Every message should be considered and have a point.

A List Apart takes us back to designing wireframes, and discusses how there may be a better alternative.

https://alistapart.com/article/priority-guides-a-content-first-alternative-to-wireframes

 

How To Create a Web Design Style Guide

If you are designed a site for a client that is likely to be around for a while, or you are redesigning your own site a style guide is a must. Not only does it allow you to go back to a central place to remind yourself, it stops you redesigning an element that already exists! It also allows third parties and future development teams follow brands guidelines.

https://designmodo.com/create-style-guides

 

10 Small Design Mistakes We Still Make

We will always want the principle “dont make me think” to apply to everything. The goal to each page should be self-evident. The average user should know exactly what is going on.

This article covers 10 mistakes that regularly occur, that stop the user from progressing easily.

https://uxplanet.org/10-small-design-mistakes-we-still-make-1cd5f60bc708

 

Development Snippets, Samples, and Articles

 

Text editing techniques every Front-End developer should know

This almost didn’t make it onto the list, until I realised it was one of the most helpful articles I have read in a while regarding writing code.

Any Front-end developer is going to spend a lot of time typing and manipulating code. It pays to know how to ‘drive’ your editor to get the best performance. This comes just in time after my post on my new editor setup.

https://benfrain.com/text-editing-techniques-every-front-end-developer-should-know

 

Combining the Powers of SEM and BIO for Improving CSS

SASS and LESS can take your loverly code, and turn it into a mess once complied. It can also make file sizes larger than needed.

SEM and BIO are coding techniques that allow your code to be scale-able, maintainable, and with a simple structure. A great read, and something to really consider.

https://css-tricks.com/combining-the-powers-of-sem-and-bio-for-improving-css

 

 

A bit of everything

RyeBoard

Still in development. But god damn this is going to be useful! Think Trello, now think whiteboard. But on the cloud!  Currently only on desktop, but so so interesting!

http://www.ryeboard.com

 

700 Screenshots of Developers’ Websites

Something nice and simple. 700 screenshots of developers websites. Maybe you can get some inspiration? Maybe you are just intrigued?

https://alexbezhan.github.io/devwebsites/

 

 

 

 

Grain and Mortar Banner

Creative / Development Inspiration 36

Website design and development inspiration can be tricky to find. This week we have the good stuff. 2 design agency websites for inspiration, several design articles on design mindset as well as bad UX/UI patterns. On top of that there are 2 new JS libraries, a CSS framework, and a great new React JS test website.

 

Website Inspiration

Grain and Mortar

A brand strategy and design agency website, Grain and Mortar have created something that is fast loading, slick, and gets the information across well.

https://grainandmortar.com/

 

45royale

This is another agency site. 45royale are a web design / development studio and their site shows it. Everything is laid out simply and easily digestible. My only issue with it, is after running Google Lighthouse, it falls down hard on Accessibility. If you are designing for the web, make it accessible…

https://45royale.com/

 

Designer Resources, Examples and Inspiration

You Can’t Design Without a Growth Mindset

Since failure is such an inevitable and essential part of design, it’s important to be surrounded by people who can not only accept, but embrace failure. One way to do this is to cultivate a growth mindset, both among team members as well as the organisation as a whole.

https://zurb.com/blog/you-can-t-design-without-a-growth-mindset

 

The Most Hated UI & UX Pattern of 2018

This article takes a deep look into some of the worst UI/US patterns about, asks why, and breaks them down. For example, why did infinite scroll fail Etsy? (as well as many other sites). How preloaders are just a smokescreen for poor performance. A very interesting read.

https://icons8.com/articles/most-hated-ui-ux-design-pattern

 

Development Snippets, Samples, and Articles

Shepard

Guide your users through your website with this JavaScript libary.

https://shipshapecode.github.io/shepherd/docs/welcome/

 

Snack.Expo

This site was such a great find! Run React JS code right in the browser, include third party scripts, and push tests to your mobile. A brilliant tool, and free!

https://snack.expo.io/

 

Vivify

Another animation library, that you can just plug in. Its new, and its free!

http://vivify.mkcreative.cz/

 

Stream – Ui Kit

Stream UI Kit is beautiful Open Source Bootstrap 4 UI Kit. It has 5 complete pages and includes over 20 reusable and customizable UI Blocks. It’s lightweight and only ~17kb when minified.

https://htmlstream.com/templates/stream-ui-kit

 

A bit of everything

Better Research, Better Design, Better Results

When content isn’t considered until the end, or previous data hasn’t been looked at to make solid design decisions problems occur. When the client is not forewarned about content strategy (because there isn’t one) or the site is not built with SEO in mind, problems occur. Smashing Magazine looks at how and why this must be re-considered.

https://www.smashingmagazine.com/2018/07/better-research-design-results/

bitmoji api output

Creative / Development Inspiration 34

Website inspiration in the form of a Tech Venture, sexy background animations, use the Bitmoji API, and why you should go and get that money! This weeks Creative and Development Inspiration is slightly shorter than usual. Mainly because of my crippling 2 day hangover. However, I believe that the articles and links I have pulled together this week are still that top quality information 😉

 

Website Inspiration

Rocka

This tech venture builder has put together a really interesting website, using parallax in a really enjoyable way. The use of vibrant colours and subtle animations add to the effect.

https://rocka.co/

 

Designer Resources, Examples and Inspiration

Cool Backgrounds

From the creator of https://cssgradient.io/, Cool Backgrounds is their answer to customised background images. Whether you need something for a social media background image, or hero image on a website, you might find something that works for you.

https://coolbackgrounds.io/

 

Interface Exploration: Depth and Color

An experiment in using depth and Colour to create a new UI style. An interesting article, worth a read.

https://blog.marvelapp.com/interface-exploration-depth-color/

 

Development Snippets, Samples, and Articles

Bokeh Effect

A great background animation. The Bokeh Effect is the aesthetic quality of the blur produced in the out-of-focus parts of an image produced by a lens. Bokeh has been defined as “the way the lens renders out-of-focus points of light”. This codepen takes that style, and makes it live.

https://codepen.io/Mamboleoo/full/BxMQYQ/

 

Optic

AI Pair programming that automates those tasks you don’t want to do. Saves you time and helps with your workflow. From what I can see it is only build for JavaScript, but this isn’t a massive issue. ReactJS is getting so large this tool is a definite help.

https://useoptic.com/

 

Libmojo

Use the Bitmoji API with this tiny library to add customised Bitmoji avatars to your newest web project. Libmoji makes it easy for you to integrate Bitmoji avatars into your project without the need for having a Bitmoji or Snapchat account

https://github.com/matthewnau/libmoji

 

Don’t Use The Placeholder Attribute

The placeholder attribute contains a surprising amount of issues that prevent it from delivering on what it promises. This has been my believe for a while now, but here is someone smarter than me putting it into words.

https://www.smashingmagazine.com/2018/06/placeholder-attribute/

 

A bit of everything

Fathom

Web analytics, that is simple, trustworthy and open source. With the introduction of GDPR it is a perfect, non-bloated way to track your website usage.

https://usefathom.com/

 

Take that money

This isn’t my normal post, but it sits well within the design/dev world. It is something that really confuses me. How so many people don’t understand it all comes down to money ( “but Rob, I do it for love”. That’s brilliant, but love doesn’t put a roof over your head, not if you don’t live with your parents ).

http://www.erickarjaluoto.com/blog/take-the-money/

SVGator

Creative / Development Inspiration 32

This week has a very diverse range of links and articles. Some brilliant websites for inspiration, ranging from clean portfolios to more modern app landing pages. Some tit-bits to tickle the taste buds of web designs, and finishing it off with some development snippets. I hope you find something new in this weeks Creative and Development Inspiration.

 

Website Inspiration

I have been scouring the web for examples of websites to help get your brain moving in the right direction. This week I have found several great portfolio sites, as well as some nice, clean sales sites.

 

Dejan Markovic

Simple, clean website. But for some reason really stood out to me.

http://dejan.works/

 

Matt Farley

Simple and clean once again, but with a nice flow to it.

http://mattfarley.ca/

 

Cronhub

Cronhub is a CRON monitoring service. The website is clean, well broken down, and easy to find information. This can be very difficult to achieve.

https://cronhub.io/

 

Monetha

A deal maker based on Block chain. Monetha’s website is modern, and a great landing page for the app.

https://www.monetha.io/

 

Designer Resources, Examples and Inspiration

 

7 Web Design Trends for 2018 – Don’t Fall Behind

Orana Creative have pulled together a must read guide for web design trends in 2018.  I wouldn’t say I fully agree, but they highlight some good points and it is always interesting to see what other people are pushing.

https://www.oranacreative.com/dont-fall-behind-follow-2018-trends-web-design

 

SVGator

Animate SVG easily. As simple as import, animate, export. There is no coding required. A very simple Adobe like interface for animating your SVGs.

https://www.svgator.com/

 

Payment Checkout Flow Animation

A beautifully designed checkout flow concept. The journey the user takes from selecting the item, to finally paying for it. An interesting use of micro-interactions and transitions between pages.

https://dribbble.com/shots/4689263-Payment-Checkout-Flow-Animation

 

Development Snippets, Samples, and Articles

 

Guzzle

I am probably a bit behind the times here, but I thought Id share as I have only just found it. A PHP HTTP client and framework for building RESTful web services. Now I know that more and more people are moving towards Node.js for this sort of thing, but I have a soft spot for PHP.

http://guzzle3.readthedocs.io/

 

Atomic CSS

Atomizer is a tool for creating Atomic CSS. Generate an Atomic stylesheet dynamically from the Atomic classes you’re actually using in your project (no unused styles!), or predeclare styles in configuration – it’s up to you. Atomizer is not opinionated, brings no CSS of its own, and integrates nicely with your favorite task runner.

https://acss.io/

 

tingle.js

aA minimalist and easy-to-use modal plugin written in pure JavaScript (We like modals here, also features RModal in Creative and Development Inspiration 30).

https://robinparisi.github.io/tingle/

 

The State of Changing Gradients with CSS Transitions and Animations

A well written article by CSS Tricks about CSS transitions and animations. The pitfalls and issues for working with these properties across many browsers (cough, IE, cough). Well worth the read.

https://css-tricks.com/the-state-of-changing-gradients-with-css-transitions-and-animations/

 

A bit of everything

How to Plan Website Design

Web design can generally be seen as what engages the users eye. What is pretty enough to keep them there. This is not true. What you really want to do, is engage the user and then convert them.

https://anartfulscience.com/How-To-Plan-Website-Design.php

 

CSS Watch Animation

Creative / Development Inspiration 31

Website Inspiration, pure CSS animations, know your ARIA, and the time for container queries. This weeks Creative and Website Development Inspiration covers some incredible example of the direction web is going. We also touch on some brilliant ReactJS packages, as well as show what exactly is needed in a web style guide.

 

Website Inspiration

Five by Five

A startup consultant agency that have gone the whole way with their website. Built on WordPress, it loads quickly, and is very very well designed.

http://www.fivebyfive.io/

 

The Shift

Although not as fast to load, this website can maybe be let off. It is not a sales site, but more of a creative/art piece. The way the user can control the perceptive is very clever and navigating around the site is quite unique.

https://kentatoshikura.com/

 

Designer Resources, Examples and Inspiration

How To Create a Web Design Style Guide

Creating websites is getting more and more complex and is usually not a one person job. It is important to ensure that design is consistent and optimised to meet business objectives and create enjoyable experiences for users.

One of the ways to ensure that team is on the same page when designing separate parts of the website or saving designs from developers is to create design documentation or a web design style guide.

https://designmodo.com/create-style-guides/

 

Company Landing Page

Fluid, modern landing page, where sections flow into each other. Great example of a landing page.

https://dribbble.com/shots/4661919-Company-Landing-Page

 

29 Inspiring UI and Web Design Examples

Well worth the look. inspiredesign.me add an article like this weekly. It highlights some of the best websites and designs out there.

http://inspiredesign.me/collection/n-49/

 

What to consider when choosing colours for data visualisation

Data Visualisation can be defined as representing numbers with shapes – and no matter what these shapes look like (areas, lines, dots), they need to have a color. Sometimes colors just make the shapes visible, sometimes they encode data or categories themselves

https://blog.datawrapper.de/colors/

 

Development Snippets, Samples, and Articles

I have found more articles than usual this week, and that is not meant in a negative way. There is serious potential for all of the below links, maybe they will help inspire you.

Pure CSS Watch Animation

Starting this section of with a really really nice example of what can be done with CSS.

https://codepen.io/Wujek_Greg/full/KRXYpg

 

Know your ARIA: ‘Hidden’ vs ‘None’

A primer on appropriately using aria-hidden=’true’ and role=’none/presentation’. They each do very different things to elements, but their purposes are sometimes confused by developers.

http://www.scottohara.me/blog/2018/05/05/hidden-vs-none.html

 

Proppy

ProppyJS is a tiny 1.5kB JavaScript library for composing props (object that components receive to render themselves).

The primary purpose of this library is to lift the state one level above your UI components. So that your components are always stateless themselves, while you compose your props separately.

https://proppyjs.com/

 

eqio

Although container queries are not yet built into browsers. eqio allows you to attain the holy grail of responsive web development/design systems: components that can adapt their styling based on their width, not the browser‘s.

https://github.com/stowball/eqio

 

Grommet

I have recently started learning ReactJS. Something that I should have done a long time ago. In doing so I have come across loads of great resources (heres a list of learning resources – my Beginners Guide to ReactJS). I recently found Grommet.

A beautiful React UI component which focus on essential experience. At over 3k stars, these components take pride in their simple yet beautiful design.

http://grommet.io

 

 

A bit of everything

Building a responsive image

Nils walks you through the process of building a logo that responds to its own aspect ratio.

https://medium.com/9elements/building-a-responsive-image-e4c6229fa1f6