Skip to main content
Mapping a User Story

Creative / Development Inspiration 58

New year happened. and then Christmas happened. And then I went away for jolly. Enough time to break a habit.

 

Not a chance.

 

This weeks design and developer inspiration rundown has even more of the good stuff. Want to know more about accessibility? Check. How about the newest CMSs on the scene? I got you. Enjoy!

 

Website Inspiration

Beauregard

Beautiful beautiful website. Smooth movement, great imagery and subtle copy. Only one issue… it auto-plays music you cannot turn off. Are they being serious?!

https://www.beauregard.ch/

 

Designer Resources, Examples and Inspiration

Designing for Accessibility is not that hard

Seven easy-to-implement guidelines to design a more accessible web

https://www.invisionapp.com/inside-design/designing-accessibility-not-hard/

 

Merge

Build one component, apply everywhere. Keep an eye on this. It could be big. Making web dev smoother and faster.

https://www.uxpin.com/merge

 

The dilemma of designers’ empathy delusions

Taking a bit of a reality check on how empathetic you really are and for whom can help make you a more effective designer, not just an idealistic one.

https://medium.com/shapingdesign/the-dilemma-of-designers-empathy-delusions-a61f0663deaf

 

Development Snippets, Samples, and Articles

Remove Image Background

Using AI and come clever code, this website (it has an API) removes an images background in 5 seconds. So much potential for apps…

https://www.remove.bg/

 

Destyle

Think normalise.css. Think reset.css. But think better.

https://github.com/nicolas-cusan/destyle.css

 

Twill

Slim, sleek and sexy new CMS built on Laravel. Open Source and flexible. Will be trying this one out for size.

https://twill.io/

 

Jigsaw

Another static site. This one seems cleaner and easier to set up though? Ill let you be the judge.

https://jigsaw.tighten.co/

 

A bit of everything

The Rise of the Content Mesh

Use best-of-breed solutions tailored to specific use-cases like e-commerce or blogging; it provides a modern framework for rapid iteration and it generates lightning fast websites out of the box. Enter the content mesh!

https://thoughtsandstuff.com/the-rise-of-the-content-mesh/

 

Story Mapping, Visual Way of Building Product Backlog

Story mapping is a top-down approach of requirement gathering and is represented as a tree. Story mapping starts from an overarching vision. A vision is achieved via goals. Goals are reached by completing activities. And to complete an activity, users needs to perform tasks. And these tasks can be transformed into user stories for software development.

https://www.thoughtworks.com/insights/blog/story-mapping-visual-way-building-product-backlog

 

Are Your Analytics Lying?

Most people are not ready to convert right away and you shouldn’t expect them to do so anyway…

Basically I’m saying you need to focus on long term conversion strategies too!

https://www.cortes.design/post/saas-marketing-myth-analytics

 

Milanote

Capture your teams ideas, all in one place.

https://milanote.com/

 

Screen Guru

Take a screenshot of any website. Easily.

https://screen.guru/

 

Spotify Design

Spotifys very own blog section of design. Well worth a scroll through!

https://spotify.design/

Content Mesh Plug and Play

The Rise of the Content Mesh

On October 4th 2018 an article named “Delivering Modern Website Experiences: The Journey to a Content Mesh” was published by Sam Bhagwat on gatsbyjs.org. Sam introduced the concept of a Content Mesh, and touched on the different pieces that are involved.

 

In essence, the Content Mesh allows you to (from Sams article):

select best-of-breed solutions tailored to specific use-cases like e-commerce or blogging; it provides a modern framework for rapid iteration and it generates lightning fast websites out of the box.

 

That, is an exciting sentence.

 

There are have been multiple times across different projects where I have wanted to use a piece from this platform, and a piece from that service, but have been tied to a pre-set CMS with no flexibility. It looks like we have a solution!

 

Why hasn’t Content Mesh been possible before?

Honestly. It has been.

REST APIs have been around for years, and web developers have been able to integrated third-party services into websites. Google Analytics is a perfect example of a script that can be dropped into a site and managed elsewhere. I don’t believe it is a case of “it wasn’t possible”, but rather it hadn’t been widely considered. The reason it is getting traction now is because of the following points.

 

Dedicated web services for specific use-cases

Fully fledged CMS services still exist, they are continually being improved and built upon. However, micro-services are built to do one thing, and do it right. This means that the right tools can always be used for the job, as opposed to hacking a pre-existing functionality to do it for you (you have to love WordPress development…).

 

Consider a Ecommerce business for instance. Products need to be managed, payments need to be taken, as well as a blog, CRM, user data storage, and analytics.

 

One size fits all

In the past I would have directed a client to a monolithic approach, such as Magneto. It handles everything (which is great at first) but development and change is restricted by the software. This become a problem when rolling out continual changes that eventually go against the built in functionality.

 

So micro-services?

Now it is a different story. Each need has a service!

These can all be called via the respective APIs and shown on the central site.

 

Each one of these services does a certain job, and it does it well. They have comprehensive documentation, and a boat load of code already written to drop into a site. It is highly likely that the individual managing the products for example, is not going to be the same person writing the blogs. By separating these areas means less distraction, and a cleaner, streamlined approach to the management of the website.

 

There are several benefits to this micro-service approach:

  • If one service fails, the rest can still function – this allows fault isolation
  • Stronger security – each service has its own credentials
  • Easy integration and deployment – NPM, Netlify, etc
  • Not locked-in to a specific stack – can try other services
  • The website can easily be scaled – if a service isn’t working to its fullest, remove and replace
  • Easier understanding – each tool explains what it does, and only what it does

 

An evolution of workflow and techniques

The older monolithic services are generally built on top of older technologies and have a slower development process. Need to add functionality? Then it looks like you are writing a large PHP function that goes against the softwares original design. Need to maintain a local environment? Well it’s going to take time pulling in changes from team members.

 

This has been addressed by more modern technologies, take React and Vue for example. These JS frameworks enable fast spin up times, super easy to start a new project (think create-react-app), and an incredibly large community pushing improvements all the time. The open-source aspect of JS is great, with problems being solved, packaged, and stored on NPM.

 

These technologies partnered with the agile methodology (or similar, touchy subject) means that ideas can be brought to life in the blink of an eye (internet speed dependant). The web development community has got on board with this “packaged” concept and are really running with it. More and more businesses are understanding the idea of rolling out an MVP and building on it. Introducing Sprints and weekly roll outs to the workflow. This type of mindset requires a more flexible, more scaleable set of tools. The speed of production depends on it.

 

Because of this, micro-services are able to fall into place easily, meaning the arrival of the content mesh. By being treated as another package on NPM, it is as easy as running a short command in a console and including into the code base. Most of the fiddly stuff is handled by Webpack. Everything is very close to being plug and play.

 

So what next?

Obviously each project has its own set of requirements and restrictions but I would argue that the content mesh strategy can be applied to almost all cases. Once a basic framework has been created that works for you and your team, services can be introduced easily. You can replace that “one size doesn’t quite fit” solution and use whatever works best. Currently it seems only GatsbyJS comes with out-of-the-box integration, but it won’t be long before others join the race. The concept of a content mesh means the best solutions can all be used. This is definitely the right direction.

Dogs on CodePen Banner

Creative / Development Inspiration 55

This week is more UI focused, due to a project that I am working on. I have still managed to include some brilliant development inspiration articles, and a few thought pieces at the bottom of the rundown. Have a good week!

Designer Resources, Examples and Inspiration

Adobe XD Wireframe Kits

A collection of Adobe XD wireframes to get you off the ground in your next web project!

https://newtodesign.com/xd-wireframe-kits/

 

Accessibility before Aesthetics

It’s time we start addressing accessibility before aesthetics in our design processes to create meaningful products for our diversified societies and cultures. Before diving into the Why, How and What of it, let’s revisit the definitions of these terms to set the context.

https://uxplanet.org/accessibility-before-aesthetics-9a0fb463e149

 

Montage

Fast, easy prototyping for everyone. Using a user-generated library of components, designs can be got of the ground quicker than ever.

https://www.trymontage.com/

 

Rememberly — A UX case study to help people affected by Alzheimer’s and Dementia

A brilliant case study for a apps UX that needs to do its job.

https://medium.com/tj-egbert-design/rememberly-a-ux-case-study-to-help-people-affected-by-alzheimers-and-dementia-6a5c17a1e690

 

Development Snippets, Samples, and Articles

Zeroheight

This brings the design system closer to everyone involved. Starts with the designers, then can be fleshed out by the developers. Edited by everyone.

https://zeroheight.com/

 

The Dogs of CodePen

10 animated dogs. Thats all.

https://blog.codepen.io/2018/09/05/the-dogs-of-codepen/

 

Strategies For Headless Projects With Structured Content Management Systems

Using a Structured Content Management System (SCMS) can be a great way to free your content from a paradigm that begins to feel its age. In this article, Knut Melvær suggests some overarching strategies, with some concrete real-world examples on how to think about working with structured content.

https://www.smashingmagazine.com/2018/11/structured-content-done-right/

 

Getform

Not enough time to build in a form? Use Getform! Backend platform for designers and developers.

https://getform.io/

 

FreeCodeCamp – JavaScript Platform Game Tutorial

Lear how to build a Maria like platform game with this 3 hour video tutorial!

https://www.freecodecamp.org/news/beaucarnes/platformer-game-turorial-javascript–m1JO9zlF4

 

Drop-Down Usability: When You Should (and Shouldn’t) Use Them

Deciding when to use a drop-down — or when to use another interface type, such as a radio button interface or open text field — for a specific input can be tricky. This article talks through the when and wheres.

https://baymard.com/blog/drop-down-usability

 

A bit of everything

Deep Dive Duck

Need to keep an eye on your competitors? Monitor changes on their site and get it set to you in a weekly email!

https://deepdiveduck.com/

CSS Shape Radius Blog Banner

Creative / Development Inspiration 49

This week is more developer heavy, but with reason. There have been some brilliant tools and articles this week, and I really wanted to share them all! Enjoy this weeks design (little less) and development (little more) inspiration rundown.

 

Website Inspiration

ACLU — 50 State Blueprint

Not your typical website, but incredibly effective. ACLU have created this simple website showing each one of the 1,942,600 people in state prisons and jails in the US.

https://50stateblueprint.aclu.org/

 

Designer Resources, Examples and Inspiration

Stop Solving Real Problems Once in a While

We sometimes take things too seriously and thus overrate people sharing their shiny design and code experiments with the world.

https://uxdesign.cc/stop-solving-real-problems-once-in-a-while-e7e1ecdaf9c1

 

Logo Lab

A tool to help you make your logo better. Checks balance, colour, accessibility, and more to ensure your brand is more able to catch that attention!

https://logolab.app/lab

 

 

Development Snippets, Samples, and Articles

Introducing GitHub Actions

This makes me very excited. GitHub actions allows build and deploy (actually, any task you can think of) to be run when specific commit commands are made. Yes.

https://css-tricks.com/introducing-github-actions/

 

Experimental Gradient Editor

A great Codepen project by David A, showing colour gradient manipulation. Doesn’t really work on mobile, but looks great on desktop!

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

 

Rythm JS

Spelling issues aside. This JavaScript library is has an interesting take on using music on websites. Lets make your website dance.

https://okazari.github.io/Rythm.js/

 

Keys to Maintainable CSS: Order

Krisztian makes some great points on how CSS should be organised in a project. From ordering, layout, and simple spacing, this article helps developers write better, more readable CSS.

https://pyx.space/post/keys-to-maintainable-css-order

 

Relax – A Promise Based State Management Library

Think Redux, but smaller. Written from scratch, with no action types, switch statements or middle ware. It’s only 2.23kb gzipped!

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

 

CSS Border-Radius Can Do That?

When you use eight values specifying border-radius in CSS, you can create organic looking shapes. The article goes through how this is done, and also links out to a handy tool to help in shape creation.

https://medium.com/9elements/css-border-radius-can-do-that-d46df1d013ae

 

A bit of everything

How to Create a Design System

I am not going to give this up yet! I am big on this idea. This article covers the autonomy of a design system, and how you can build one.

https://medium.com/dev-channel/how-to-create-a-design-system-460b93a6565

 

The Inclusive Web – Why It Should Matter to Businesses

An article I wrote last week about how businesses seems to forget about accessibility. This makes no sense, as they seem to be missing a trick…

http://thoughtsandstuff.com/the-inclusive-web-why-it-should-matter-to-businesses/

 

Of Deadlines and Due Dates

This article stood out to be due to this one like – “Do not commit to a deadline you did not help set”. I think this sentiment is something that needs to be considered by a lot of people in this industry. Interesting read.

https://blog.calevans.com/2006/02/03/of-deadlines-and-due-dates/

 

So We Got Tracked Anyway

A brilliant article about how SSL means bugger all to the monopolies of the interwebs, and how Google and Facebook track you everywhere you go.

https://youbroketheinternet.org/trackedanyway

 

Realtime Board

I stumbled across this tool on Reddit. A real time, whiteboard like interface to keep everything in one place. A simple white boarding platform for cross-functional team collaboration

https://realtimeboard.com/

Google Maps Banner

Google Maps API Error: ApiNotActivatedMapError

I have worked on loads of projects using the Google Maps API. It used to be a simple case of enabling the the Maps JavaScript API and you were off. This is not the case any more.

 

After setting up a new project to get a location from a postcode the other day I came across the error “ApiNotActivatedMapError”. I checked and the Maps JavaScript API was enabled.

 

After a bit of digging, since 22nd June 2018 Google has updated their business model. Each API has its own separate billing, and for that reason each API must be enabled individually. To get Geocoding on Google Maps to work properly the following APIs need to be enabled.

  • Maps JavaScript API
  • Geocoding Service
  • Directions Service
  • Distance Matrix Service
  • Elevation Service
  • Places Library

 

Unfortunately the Google Console API Manager doesn’t seem to work properly. When you search for an API other than Maps JavaScript API they wont show up. To access them you must go back to the project dashboard, click “Go to APIS overview”, and then click “ENABLE APIS AND SERVICES” This is where you will be able to see the correct APIs.

 

Now your maps should work!

Kin Movie Banner

Creative / Development Inspiration 43

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

React Vis Banner

Creative / Development Inspiration 39

How Dropbox was redesigned for mobile, AirBNB has a top quality landing page, and how to hack user perceptions. This weeks design development inspiration covers this, as well as lots more. I also got a bit over excited about using WordPress with React, and making WordPress that little bit faster. Also, AirBNB changed their business strategy. Well worth the read!

 

Website Inspiration

This week I tried to focus on high quality landing pages. Not just from a design perspective, but from a “do the job” perspective as well. It turns out that “pretty” landing pages, aren’t necessarily the best…

 

WebProfits

Simple. To the point. Easy to understand. It doesn’t shout “pretty”, but it does do the thing it says it does. Gets you SEO analysis. An immediate call to action, and a visual showing an increase in users.

https://www.webprofits.com.au/lp/seo-analysis/

 

AirBNB

We all know this company. AirBNB are known for their constant data analysis, always pushing to improve user experience. The page for signing up to host your home does it well. A simple form showing how much you could make from your home. Thats why you’re there, right?

https://www.airbnb.co.uk/host/homes

 

Designer Resources, Examples and Inspiration

 

A Step by Step Guide to Designing a Pet Diet App

A well broken down approach from user data to design of making an app. It covers the lessons learnt, and how each element needs thinking about as its own thing!

https://uxdesign.cc/ui-ux-case-study-a-step-by-step-guide-to-the-process-of-designing-a-pet-diet-app-d635b911b648

 

How Dropbox was redesigned for Mobile

The designer behind the new Dropbox mobile interface breaks down how they changed the design of the app. A great insight into the business decisions and internal workings of Dropbox, and how it is a constant process.

https://medium.com/dropbox-design/fostering-focus-for-small-screens-34a9f338668c

 

Development Snippets, Samples, and Articles

 

Carl.JS

A Conditional Asset Resource Loader in about 500 bytes of JavaScript. A lazy but efficient way of managing your resources. I covered Critters on Design and Dev Inspiration 33, if you require a more built in Webpack approach.

https://github.com/Paul-Browne/carl.js

 

Hacking user perception to make your websites and apps feel faster

When planes at Houston Airport landed close to the terminal, passengers complained about baggage delays. So they moved the planes away so passengers had to walk further. No more complaints. How can this be applied to apps and websites?

https://medium.com/dev-channel/hacking-user-perception-to-make-your-websites-and-apps-feel-faster-922636b620e3

 

ReactPress – WordPress Starter-Kit

Bringing ReactJS to WordPress. Using Next.js and WordPress this starter-kit is a fast way to get off the ground running. Definitly worth a look for clients used to using WordPress.

https://github.com/nyl-auster/reactpress

 

WP-Rig

A progressive WordPress theme rig. Built with fast development and lightening speed websites in mind, this starter theme is definetly worth a look. Modern processes bundled into one package.

https://wprig.io

 

React-Vis – Charting Library

This ReactJS based charting library has all the graphs you could possibly need, as well as all the options. Some great examples, use cases and with almost 4000 stars on Github, who can miss out on it?

https://uber.github.io/react-vis/

 

A bit of everything

 

Zeplin IO

I am surprised I hadn’t come across Zeplin before. A brilliant website to help teams work together to build products. For both designer, developer and the whole business site of the team. Think Basecamp, but tailored for design. Includes XD and Sketch integration to save time messing about with exports.

https://zeplin.io/

 

Design Thinking and Storyboarding Changed AirBNBs Entire Business Strategy

An incredibility insightful interview by Forbes, with the Rebecca Sinclair, founder of Honest Design. She helped AirBNB disrupt itself, and change the business strategy by changing how the business saw itself.

https://www.forbes.com/sites/emilyjoffrion/2018/07/09/the-designer-who-changed-airbnbs-entire-strategy

 

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

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/