A brilliant landing page example, common web design mistakes, pure CSS wizardry, and some great thought-provoking articles. This weeks design development rundown is a little more aimed at helping you consider your design and dev. For example, how did Facebook end up bad? Is Google Amp really the way forwards (no is the answer to that), as well as articles explaining the best way to design elements on your website.
Website Inspiration
Duda – Landing Page
I found this through clicking an advert on Facebook. Selling themselves as a WordPress replacement I was intrigued. I left having found a brilliant landing page. Simple, and effective, with nice use of CSS animation.
Designer Resources, Examples and Inspiration
Common web page design mistakes
16 well explained examples of the most common mistakes made in web design, with a focus on how to avoid these.
http://blog-en.tilda.cc/articles-website-design-mistakes
Waveguide – Design Knowledge Base
A curated, searchable base of design knowledge, UX/UI patterns and examples for research and inspiration. The goal is to help create a repository of referable concepts to help designers and developers build amazing, high quality products.
Designing Charts – Principles every designer should know
Seemingly simple rules can be forgotten when overwhelmed with the larger project. This article steps though the correct principles for designing charts, and why.
https://uxdesign.cc/designing-charts-principles-every-designer-should-know-part-2-ce1e06af56fc
Development Snippets, Samples, and Articles
Pure CSS Wizardry
A brilliant codepen by Julia Muzafarova. A wizard with potions making animals come alive. All with CSS. Love it!
https://codepen.io/miocene/full/mjLPVp/
Guess.JS
A selection of libraries and tools for enabling a machine-learning driven user-experience across the web. It uses Google Analytics to work determine which page the user is likely to visit next, and pre-fetches all resources required.
https://github.com/guess-js/guess
Carbon
Create beautiful images of your source code, right in the browser. Share directly from the platform.
Creating the “Perfect” CSS system
A high level guide for designers and developers who write CSS, but want to be more strategic about building moderate to large scale CSS systems
https://medium.com/gusto-design/creating-the-perfect-css-system-fa38f5bcdd9e
Lazyestload.js
Only load images when they are in the view port, if you scroll past they wont be loaded. Only 350 bytes of JavaScript. I introduced Carl a couple of weeks ago, but that is a more general asset manager.
https://github.com/Paul-Browne/lazyestload.js
Fast Average Colour
A client side library to quickly get the images average colour. Not sure how much of a good idea this is to use on a front end, but it could be used on the admin side to save the colour in an input.
https://github.com/fast-average-color/fast-average-color
A bit of everything
Google AMP – A 70% drop in our conversion rate
Let’s talk about Google AMP. AMP stands for Accelerated-Mobile-Pages. It’s a technology Google originally introduced to get web developers to speed up their web pages for mobile devices and mobile networks. But in many ways it seems like great technology for any device or network. Who doesn’t want fast websites?
https://medium.com/the-set-list/google-amp-a-70-drop-in-our-conversion-rate-35fe3cb69c59
Everything bad about Facebook is bad for the same reason
In June 2016, Antonio Perkins unintentionally broadcast his own death to the world. It was a sunny day in Chicago, and he was sharing it on Facebook Live, a platform for distributing video in real-time, released just a few months earlier.
https://qz.com/1342757/everything-bad-about-facebook-is-bad-for-the-same-reason/
How to create a customer journey map
Understanding users’ behaviour and feelings is crucial when building a user-centred product. In this guide you’ll learn how to create a Customer Journey Map and how to apply it to any project.
https://aerolab.co/blog/customer-journey-map
