Why you need to care about UX design, some brilliant tips on improving mobile interaction and how to create single element patterns. This weeks creative website design and development inspiration also looks at how to create HTML5 sprites and a beginners guide to A/B testing.
As well as going over keeping up with what is new on “that there interwebs” I also use this blog for a place to keep all the best bits that I want to remember.
Its easier to find here!
Website Inspiration
Overflow
“User flows done right” is this sites tagline. No wonder the site is perfectly designed. Perfect landing page with large header, and understandable call to action (I think I might use them).
Designer Resources, Examples and Inspiration
Why you need to care about UX design
Understand what your customers want, keep your customers attention, and give them a well written story. Why brands really cannot afford to ignore UI or UX.
https://www.retailtechnews.com/2018/06/26/why-you-need-to-care-about-ux-design/
7 Effective Tips to Improve Mobile Interactions
The quality of mobile design can be measured simply. When the process of usage is so smooth and effortless that people don’t even think about it, it is the sign of the professional design work. On the other hand, if there are some problems in the interaction system, users will definitely notice them and won’t be pleased about it. This article breaks down 7 places that could be improved.
https://design4users.com/2018/06/22/7-effective-tips-to-improve-mobile-interactions
Development Snippets, Samples, and Articles
Introducing the Single Element Patterns
This is something I have been pushing for, and manoeuvring my workflow to get to this point. A project based on lots of small elements that can be reused over and over again. This article breaks down a few essential rules you should follow to make sure you can work faster.
https://medium.freecodecamp.org/introducing-the-single-element-pattern-dfbd2c295c5d
Animating Sprite Sheets With JavaScript
Martin Himmel walks you through how to animate a sprite in HTML5 Canvas. Easy to follow, and a hell of a lot of uses!
https://dev.to/martyhimmel/animating-sprite-sheets-with-javascript-ag3
Building a chat app with React.js and Chatkit
I had never heard of Scrimba before finding this tutorial, but I’m so glad I have. This tutorial walks you through building a chat app with React.js and Chatkit. Each step has a video, and you can take your own pace.
https://scrimba.com/g/greactchatkit
Glide JS
A dependency-free JavaScript ES6 slider and carousel. It’s lightweight, flexible and fast. Designed to slide. No less, no more. Looks like something I will definitely be using moving forwards!
A bit of everything
A Beginners Guide to to A/B and Multivariate Testing
If you want to improve site conversion, A/B and Multivariate Testing are invaluable tools. This article run through the different services available, and how to get moving in the right direction.
https://boagworld.com/design/split-testing
User Journey: Design Flows Instead of Screens
Most designers are obsessed with screens. They have features and screens piled up, but rarely see their apps with their users’ eyes. Familiar? Well, it’s time to start thinking in flows instead of screens. A user journey shows how your people reach their goals in your app. This article introduces the basics of creating a user journey with some tips and specific examples.
https://uxstudioteam.com/ux-blog/user-journey-design-flows/
