Skip to main content
Overflow - Userflow

Creative / Development Inspiration 35

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).

https://overflow.io/

 

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!

https://glidejs.com/

 

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/

TunnelBear

Creative / Development Inspiration 24

This weeks Creative & Web Development Inspiration does not touch the code at all. I have found 5 articles that look at the design aspect of websites, as well as a few ideas that cover the process of creating digital media. How emotional interfaces can help retain users, all the way to the idea of transparent design.

 

How To Design Emotional Interfaces For Boring Apps

Humans can’t endure boredom for a long time, which is why products that are built for non-exciting, repetitive tasks so often get abandoned and gather dust on computers and phones. But boredom, according to psychologists, is merely lack of stimulation, the unfulfilled desire for satisfying activity. So what if we use the interface to give them that stimulation? Alice shares five secrets to more emotional UIs: gamification, humor, animation, illustration, and mascots.

https://www.smashingmagazine.com/2018/04/designing-emotional-interfaces-boring-apps/

 

Constant Small Improvements Pave the Way to Perfection

A great article from Invision on constant improvements on design. Baby steps forward. Constant iterations. Nonstop nudges in the right direction. That’s how an empire is built. The path to success doesn’t need to be sprinted. Start selling this to clients, for both a better relationship, and a better product.

https://www.invisionapp.com/blog/designer-perfection

 

Start your designs with a concept

Defining a concept upfront can help shape everything that follows: the interactions, the relationship between elements, the tone of voice and copy, the transitions, the animations, etc. Once you have a strong concept, all these aspects start to align. Interfaces that are conceived without a concept and designed on autopilot creates interaction patterns that aren’t strategically aligned, user paths that don’t follow a clear logic, screens that are inconsistent and do not ladder up to a consolidated metaphor or concept.

https://uxdesign.cc/start-your-designs-with-a-concept-7270e6b00fcc

 

New to email coding? Here’s where to start.

The sooner you stop fighting the quirks of email, the sooner you can use them to your advantage. Email can seem like a tangled mess, and you will deal with some crazy parameters. But once you learn to embrace the peculiarities, beautiful things begin to happen. Caity covers some great resources and techniques for creating emails that even work on Outlook! I also covered a great resource in Creative and Development Inspiration 1 – Heml!

https://explore.reallygoodemails.com/new-to-email-coding-heres-where-to-start-2494422f0bd4

 

Why transparent, open design leads to happier clients

“When you bring the folks you’re working with directly into the project, you create a lot more buy-in,” said Adonya Ourshalimian, Client Partner at Citrusbyte. “There’s a much better understanding of what’s actually happening.” The program they use looks unbelievably useful as well, sit down XD – https://www.figma.com/

https://blog.figma.com/why-transparent-open-design-leads-to-happier-clients-aaf98a7cd50c