Design Archives

Creative / Development Inspiration 52

12th November 201812th November 2018 Robert Marshall Leave a comment

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 webpack 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

Creative / Development Inspiration 48

15th October 201815th October 2018 Robert Marshall 1 Comment

A focus on design systems this week, with a brilliant piece on Ubers rebrand, website inspiration, and micro nudges. Plus a few more in this weeks design development inspiration rundown.

Website Inspiration

Mawla – Mobile & Web Development Studio

Firstly, I love these bobble shapes used across the Mawla site. That, combined with the pastel colours makes it friendly, and welcoming. Lots of white space between sections allows the user to fully digest each point. And it works well on mobile!

https://mawla.io/

Designer Resources, Examples and Inspiration

Uber’s Undoing Part I: Whipping Boy

Uber has been through so many re-brands, they don’t seem to know who they are any more. Eli pulls apart the company, and looks at the way their re-brands have seemingly had no grounding.

http://www.elischiff.com/blog/2018/10/10/ubers-undoing-part-i-whipping-boy

A Guide to Colour Accessibility in Product Design

Accessibility is getting a lot of traction now, with more designers and developers trying to get the upper-hand. With that in mind, have you ever thought about colour accessibility?

https://medium.com/inside-design/a-guide-to-color-accessibility-in-product-design-516e734c160c

Micro nudge: a micro animation for behavioural change

A micro nudge is a well-timed small animation that prompts a user to complete a small task. This article includes examples from Instagram, and walks us through the process.

https://uxplanet.org/micro-nudge-a-micro-animation-for-behavioral-change-dd15ecd4fab3

Development Snippets, Samples, and Articles

Building an Image Generator for the Number 1 Track on Spotify

DJ Snake, Cardi B, Selena Gomez, and Ozuna have released their new song, Taki Taki, into the world and it has quickly soared to #1 on Spotify’s Global Top 50. Lee Martin was asked to create a marketing concept. This is what he came up with.

https://medium.com/@leemartin/taki-taki-eb45d03a8fb1

Cross Browser Testing Cloud

LambaTest allows you to test your website or application across 2000+ browsers and operating systems.

https://www.lambdatest.com/home

A11Y Style Guide

This application is a living style guide or pattern library, generated from KSS documented styles…with an accessibility twist. A well build, well documented style library.

http://a11y-style-guide.com/style-guide/

A Collection of Design System Articles

I have recently become interested in design systems. The concept makes complete sense, allowing all stakeholders to understand the brand – as well as making future design much faster!

Designing Design Systems

Clearlefts Jerlyn walks through the process of designing a design system, and how they run workshops to encourage stack holders to work through pain points.

https://clearleft.com/posts/designing-design-systems

Design Systems and Agility

A piece extended from a talk at UX Australia on design systems and their importance. Who do they serve? What is the point?

https://medium.com/interactive-mind/design-systems-and-agility-part-1-of-2-b96c188acfca

Understanding Design Systems and Patterns

The concept of design systems is not new to creative industries, but it has only recently been picked up by the digital side. This article breaks down what a design system is, and can be.

https://www.toptal.com/designers/ux/design-system

A bit of everything

You can’t do human-first design without looking after your humans.

Our industry has a poor reputation of burn-out, long hours and stress. How can you keep moral high in the office?

https://perspective.despark.com/you-cant-do-human-first-design-without-looking-after-your-humans-726a0074834f

Creative / Development Inspiration 47

7th October 20187th October 2018 Robert Marshall Leave a comment

12 articles to help inspire you from last week. This website design and development inspiration has some great pieces on UX, a few website examples, and some more code snippets.

Have you ever considered that web performance goes hand in hand with UX, or why you should definitely user test. Well I have some thought piece for you!

Website Inspiration

Torch App

A simple site that works well on desktop and mobile. An interesting product as well. Love a bit of AR.

https://www.torch.app/

Poor Millennials

An article by Huffington post that walks you through the issues millennials have, using modern website techniques. Good work. Interesting read.

https://highline.huffingtonpost.com/articles/en/poor-millennials/

Designer Resources, Examples and Inspiration

The product design tool for the day after launch

Site has gone live, but you have seen tweaks are needed. No need to write each one down and send to the developer. With this extension you can make the changes in the console and send with comments. Cannot believe its taken this long!

https://mod-dot.com/teaser/

Microcopy Inspirations

All those pages (like 404) that you don’t know how to style, or what copy to use. Well here you are.

https://www.microcopyinspirations.com/

Icondrop

One place for all your icons – easily used, easily passed on to the next user.

http://icondrop.io/

Understanding Design Systems

While it may seem like a new way of approaching digital workflow, the concept of a design system is not “new” to creative industries. At the core of any design system is a language of design patterns that solve common problems a designer might face.

https://www.toptal.com/designers/ux/design-system

Development Snippets, Samples, and Articles

When to use target_blank

Chris Coyier breaks down when you should, and shouldn’t use target_blank.

https://css-tricks.com/use-target_blank/

Random Colour Harmonies

Last week I showed you how Lyft had created a colour palette generator. Well here is another one!

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

Google Maps stopped working? This could be why…

Google recently updated their billing model, and changed the way the APIs were set up. Here I outline how to sort that.

http://thoughtsandstuff.com/google-maps-not-working-with-api/

A bit of everything

Breaking the Deadlock Between User Experience and Developer Experience

We cannot talk about user experience, without also including performance. This article opens this issue up. Very interesting read.

https://alistapart.com/article/breaking-the-deadlock-between-user-experience-and-developer-experience

Getting to Yes — Convincing Stakeholders to Invest in User Testing

Those who understand the importance of UX know that design-centric companies have a higher ROI so including user testing in a design project comes as a no-brainer. On the contrary, unfamiliarity with its potential benefits means that many product owners don’t consider testing in the first place.

https://blog.maze.design/stakeholders-user-testing/

No Conversions? Here are 4 Reasons that Might Help

Getting users to convert can be a tricky one. This article highlights for places where your website might be falling down, and how to fix it.

https://www.cortes.design/post/some-traffic-but-no-conversions-here-are-4-reasons-your-page-is-not-converting-any-why

Creative / Development Inspiration 46

29th September 201830th September 2018 Robert Marshall Leave a comment

So much has happened this week in web! Here is a great overview on UX animation, Lyft has created a colour palette tool. A brilliant article on why select boxes might not be the best option for users, and what to do with user mistake? All this and more on this weeks website design rundown.

Website Inspiration

Tubik Studio

A digital design agency based in Ukraine, this website is so smooth. The animation of information entering the page, as well as the use of 3D animation on the home banner made me a massive fan. Easy to find information laid out effectively.

https://tubikstudio.com/

Stripe

This is a well known company, but god damn I love this website. Designed so that the user can get to where they need, as quickly as possible, and so pretty at the same time! Subtle animations across the website add that little bit extra.

https://stripe.com

Designer Resources, Examples and Inspiration

The Ultimate Guide to Proper Use of Animation in UX

The main principles and rules for animation in UX, laid out in a single succinct article.

https://uxdesign.cc/the-ultimate-guide-to-proper-use-of-animation-in-ux-10bd98614fa9

Color Box

A tool designed by Lyft, to help select a colour range from two colours. Pick the way the colours are picked, and output the HEX codes.

https://www.colorbox.io/

User Experience: How to Design Onboarding for Your Mobile App

How to create an attractive, and effective onboarding process for your mobile app. It’s a pretty article as well!

https://icons8.com/articles/ux-design-onboarding-mobile-app/

Development Snippets, Samples, and Articles

Yubaba – React Element to Element Animator

A easy to use React package to animate between elements.

https://github.com/madou/yubaba

Stop Using Select Menus for Known User Input

If a user knows what option they want from the select input, maybe you shouldn’t use a select input…

http://uxmovement.com/forms/stop-using-select-menus-for-known-user-input/

Vapid

Vapid is an intentionally simple content management system built on the idea that you can create a custom dashboard without ever leaving the HTML.

https://www.vapid.com/

A bit of everything

Using Lorem Ipsum? Don’t! Just do this instead

“Eating our own Dogfood” is now a commonplace phrase and philosophy for using the products you create so you can better experience those same products through the eyes of a real consumer. Stop using fake content, and your designs might just get better!

https://medium.com/the-set-list/lorem-ipsum-generator-skip-it-do-this-instead-944124e754dc

What is the Design Sprint?

There are many different methodologies that help designers be more productive and efficient. One of the most popular frameworks that’s heavily focused on teamwork and collaboration with the client is the Design Sprint.

https://phase.com/magazine/whats-the-design-sprint-2-0/

6 Ways to Speed up Slow Clients

Frustrated with your client? Beginning to wish you’d never taken this job on in the first place? Do you just need some feedback so that you can move forward?

https://www.webdesignerdepot.com/2018/09/6-ways-to-speed-up-slow-clients/

What To Do With User Mistakes

How should you manage user mistakes? This article covers the common practices and points you in the right direction

https://uxdesign.cc/what-to-do-with-user-mistakes-305d084ae1f9

To Sticky or Not to Sticky

18th September 201823rd September 2018 Robert Marshall 10 Comments

Fixed headers are used across the web, with little to no thought to the user’s experience. I have just started working on a new project and am intrigued in how useful fixed headers actually are for the user. Do they help navigate the site faster or do they just get in the way?

Very simply, are fixed headers (think menu, logo, ect) good for user’s experience. Do they work?

Excited? I know right.

I came across a few articles that held both points of view. Here are the links, described, and I summarize the outcome at the end. If you can’t be bothered to read them all 😉

A sticky menu is quicker to navigate

https://www.smashingmagazine.com/2012/09/sticky-menus-are-quicker-to-navigate/

Pro

Navigation is the most critical part of a website. According to this study, stick menus are 22% quicker to navigate, and 100% of users preferred them. However, this study was only carried out on desktop.

Con

However sticky menus can be intrusive. The menu should be easily assessible but not compete for attention. There is also the issue of device support – does it work every time?

Top 5 Common UX Mistakes

https://www.toptal.com/designers/ux/top-5-common-ux-mistakes

Pros

There are benefits, but only when considered correctly.

Cons

If the menu is too big then the amount of content seen is reduced leaving users feeling claustrophobic. This also falls on mobile, especially on small 320px wide devices. When using a website on landscape, the sticky menu can take up a massive amount of screen space.

The Pros and Cos of Fixed Header Bars

http://creative.artisantalent.com/the-pros-and-cons-of-fixed-header-bars/

Pros

They prevent leaks. If a user is halfway down the page and cannot navigate they may use the back button – causing them to potentially leave the site.

Con

If buggy or jerky they put the user off. On top of this, when being used on a device with an on-screen keyboard, sometime the whole section of content is hidden.

Summary

Users seem to prefer fixed headers, but only if they are implemented correctly.

The header should be small large enough to use, but small enough to not take up too much space. The code used to keep them in place needs to be considered to stop it bugging out on all devices.

When being used on very small devices, headers need to be hidden to provide a larger content space.

The best outcome seems to be hiding the header when the user scrolls down the page and reveal it as soon as they begin to scroll up the page. Whilst they are not at the top of the page show a reduced sized menu (but still large enough to use the links), and only return it to the full height when they are at the very top of the page.

Creative / Development Inspiration 45

17th September 201817th September 2018 Robert Marshall Leave a comment

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/

Creative / Development Inspiration 44

10th September 201810th September 2018 Robert Marshall Leave a comment

More thought pieces than inspiration, which is sometimes needed in this industry. Take a moment to sit back, read a few and consider the direction you want to take the web. This weeks design and development inspiration I listed an article on designing for accessibility, how AMP can go to hell (it really can), how to run a design audit, and how to stay scrappy.

Website Inspiration

Fleur Moreau – Design Portfolio

Not my usual type of website, but I really enjoyed this. Subtle transitions and a great display of content and image.

http://fleurmoreau.fr/

Designer Resources, Examples and Inspiration

Fake Clients

Practice logo design using randomly generated client briefs!

https://fakeclients.com/

Designing UI with Color Blind Users in Mind

Colour plays an integral role in UI design. When done right, it improves user experience, influences purchasing decisions, and reflects the brands voice. So, how do you design effective, accessible, and aesthetically pleasing interfaces for coluor blind users?

https://www.secretstache.com/blog/designing-for-color-blind-users/

Development Snippets, Samples, and Articles

Progressive Tooling

A list of community-built, third-party tools that can be used to improve page performance. Well worth a bookmark!

https://progressivetooling.com/

How to Use GIT Efficiently

Apart from knowing git add, git commit , and git push , there are a bunch of other important techniques in Git. Knowing these will help a lot in the long run.

https://medium.freecodecamp.org/how-to-use-git-efficiently-54320a236369

AMP Can Go To Hell

An article after a piece of my heart. Google are trying to monopolise the “World Wide Web”. Can we please stop them?

https://www.polemicdigital.com/google-amp-go-to-hell/

A bit of everything

What is a Design Audit and Why You Should Conduct One?

Inconsistencies won’t make anyone trust you or like you. A design audit is essentially a brand checkup. They help ensure everything is consistent and on point. This article discusses what exactly they are, how to conduct them and what results to expect from them.

https://designmodo.com/design-audit

How to Stay Scrappy

How to keep your team “scrappy”. How to keep motivated, and fighting for the win. Well worth the read to see how Paper pushes their company forwards.

https://medium.com/dropbox-design/how-to-stay-scrappy-9c42af21c996

Creative / Development Inspiration 43

2nd September 20182nd September 2018 Robert Marshall Leave a comment

After a week off ( for sun, mojitos and swimming ) I have another web design / development inspiration for you. However, because I can’t stop researching – even when on holiday – the list is slightly longer than usual, and full of some pretty interesting links.

Website Inspiration

Kin Movie

I’m not usually a fan of film websites, but the way the film snippets work alongside the parallax and particles is really something. Worth a look.

https://kin.movie

Designer Resources, Examples and Inspiration

The key lessons I learned creating a popular Design System

In 2012 Matt Bond started working on a small side project to standardise design patterns and user experience at Atlassian. This is what he has learnt!

https://medium.com/asana-design/the-key-lessons-i-learned-creating-a-popular-design-system-d078c817b4dd

Search Colours – Using Keywords!

Think Google for colours. A sleek interface to help inspire your designs.

https://picular.co/water

Colorable

A brilliantly simple colour generator to show if your colour pairings are accessible or not. Definitely worth saving!

https://colorable.jxnblk.com/

Development Snippets, Samples, and Articles

How to Build Complicated Grids using CSS Grid

With CSS grid now available in all popular browsers it’s possible to reliably define the rows and columns that make up any kind of grid. This article details how toachieved the designed layout using CSS grid without any silly workarounds or java-script magic necessary.

https://danwebb.co/journal/how-to-build-complicated-grids-using-css-grid

Universal PWA Builder

A universal, framework-agnostic PWA builder that could works along side most of the major JS libraries. Can be run as is, with no need to configure, but it is fully extensible.

https://github.com/lukeed/pwa

Create your Design System

A 6 part rundown of all aspects required in creating a design system. This link starts at the beginning, with typography. A concise and well thought out piece to lead the way.

https://medium.com/codyhouse/create-your-design-system-part-1-typography-7c630d9092bd

SCSScale

Typographic modular scale starter based on body’s font-size built on SCSS

https://github.com/alectro/SCSScale

CSS Icons

An icon set made with pure CSS. No dependancies. Just grab the icon and go. Perfect for a small web project with only a few icons.

https://cssicon.space

Emotion JS

I am so happy to have found this. Emotion is a performant and flexible CSS-in-JS library. Building on many other CSS-in-JS libraries, it allows you to style apps quickly with string or object styles. It has predictable composition to avoid specificity issues with CSS. Perfect time saver.

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

Styled Components

Same as the above, but has been around for longer. Better documentation, large community. Worth looking into both.

https://www.styled-components.com/

A bit of everything

Could Value-based Pricing be the Key to Higher Revenues

A recent survey of design and development firms revealed a tantalising statistic: Freelancers who use value-based pricing were more likely to report annual income over $50,000 per year than freelancers who weren’t. Could it raise revenues for your practice?

https://www.webdesignerdepot.com/2018/08/could-value-based-pricing-be-the-key-to-higher-revenues/

Honoring a great man – The Story Behind Rebeccapurple

A child’s passing is memorialised with the name of web colour.

https://codepen.io/trezy/post/honoring-a-great-man

Creative / Development Inspiration 42

20th August 201820th August 2018 Robert Marshall Leave a comment

Brilliant UX/UI articles this week – how to craft a kickass post filter, the Screenlife app case study, and a whole bunch of design resources. On top of that we have a tutorial on NodeJS gesture recognition, and how to create a blog with React. Ever considered launching a side project? At the bottom there is an article on how to do it in 10 days! Take a look!

Website Inspiration

Kollegorna – Swedish Digital Agency

This site seems to be built on top of Bulma or at least styled similarly, but I’m not sure. It is very sleek and easy to digest, which is a big thing for me. I love how each element has been considered and animates in its own way. My only issue with this this site is it is for a digital agency, and yet has a Chrome Lighthouse performance score of 35… mixed messages.

https://www.kollegorna.se/

Designer Resources, Examples and Inspiration

Screenlife App — a UI/UX case study

A step by step breakdown of the process the Screenlife App team went through to end up at the final product. Very interesting to see the user of paper mockups.

https://uxdesign.cc/screenlife-app-ui-ux-design-case-study-4830d364c76f

Design Resources

Neede is that resource we have all been looking for, for a while. One site, holding all of the good quality design resources. Get this on your bookmarks!

https://neede.co

How to craft a kickass filtering UX

Filters are a great tool to narrow down high volumes of content and to surface the most relevant results. How do we make sure they are helpful rather than confusing?

https://uxdesign.cc/crafting-a-kickass-filtering-ux-beea1798d64b

100 Days of Motion Design

It was a summer night in Seattle. She ate some ice-cream, watched a Youtube tutorial, and downloaded a free trial of Principle. Several months later, completed her 5th 100-day-project — 100 Days of Motion. Then made these.

https://uxdesign.cc/100-days-of-motion-design-463526af852f

Development Snippets, Samples, and Articles

Simple Hand Gesture Recognition using OpenCV and JavaScript.

This article is nothing short of really fucking interesting. Gesture recognition using JavaScript (Node.js) and OpenCV. Its a tutorial.

https://medium.com/@muehler.v/simple-hand-gesture-recognition-using-opencv-and-javascript-eb3d6ced28a0

Tinies

Another URL shortener. But pretty.

https://tini.es

Creating a Blogging App Using React

A bookmark I have been keeping for myself. A tutorial series on creating a full blogging app with React. Very comprehensive. I am collating a series of tutorials and links for React if you are interested – thoughtsandstuff.com/beginners-guide-learning-reactjs/

https://code.tutsplus.com/series/creating-a-blogging-app-using-react–cms-1171

A bit of everything

How to launch a side project in 10 days

This post isn’t about the advantages of building with a new technology, or “7 things I learned while doing it”. Rather, it’s about the process of building a web app quickly, keeping irrelevant ideas from muddying focus, and the tool belt to make it happen. The end result was Card Surge.

https://medium.freecodecamp.org/launching-a-side-project-in-10-days-615df3b0e808

ZoomQuilt

This is a bit of a mindfuck, but very interesting! Inifinity image zoom.

http://zoomquilt.org/

Creative / Development Inspiration 41

13th August 201813th August 2018 Robert Marshall Leave a comment

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.

https://wp.duda.co

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.

https://www.waveguide.io

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.

https://carbon.now.sh

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