Skip to main content
Colour Wheel

Creative / Development Inspiration 28

Tabler

Tablet is a premium and Open Source dashboard template with responsive and high quality UI. It has so many modules and components that it could be used immediately off the bat with no customisation required. Built with Bootstrap and icons integrated into thew build, its definitely bookmark-able.

https://tabler.github.io/

 

Nimiq Miner WP

I have mentioned Crypto Currency before in this blog, and am a strong advocate of the idea. I have recently been following a project called Nimiq, which labels itself as “the blockchain designed for simplicity”. I agree with this, the wallet is easy to set up, transfers are so fast! and mining is so easy! Because of my belief in the project I have started work on a WordPress plugin for mining Nimiq. It is at early stages with lots of features in the pipeline. Take a look!

https://github.com/justlikethisdesign/NimiqMinerWP

 

Three Essential Design Trends, May 2018

Web Designer Depot have written this great summary of what they thing the top 3 trends are of May. They have included some great examples of actual websites to go alongside their trends. Perfect website design inspiration.

https://www.webdesignerdepot.com/2018/05/3-essential-design-trends-may-2018/

 

Why You Should Never Centre or Right Align Your Logo

Many designers assume that centre or right aligning their website logo will make their brand more memorable. Research has shown this assumption is not true at all. In fact, straying from a left aligned logo can make your brand less memorable and even your site harder to navigate.

http://uxmovement.com/navigation/why-you-should-never-center-or-right-align-your-logo

 

Colour Theory

As a designer in the digital era, you certainly don’t have to stick to the colours available from paints, inks, or other pigments, though there’s a lot we can learn from fine art’s approach to colour. In fact, the human eye can see millions of different hues — but sometimes, choosing even just two or three to use from those millions can seem like a daunting task.

 

Canvas covers Colour Theory is a way that makes it so easy to understand. Definitely on the bookmark list for me.

https://www.canva.com/learn/color-theory

 

Priority Guides: A Content-First Alternative to Wireframes

A List Apart have put together this expansive article covering how Content-First allows you to better understand what is required on your website. They break down each stage to show how much simpler the concept is.

http://alistapart.com/article/priority-guides-a-content-first-alternative-to-wireframes


How paper wireframing will make you a better designer

This one goes against the above article. However, in a sense they also go hand in hand. The idea of moving away from from a computer and getting hands on allows a greater freedom of expression. You are not limited by the software and its toolbar. Worth the read.

https://blog.prototypr.io/how-paper-wireframing-will-make-you-a-better-designer-5a57db8dca13

Vector Art

Creative / Development Inspiration 27

Because we had a bank holiday (and I was BBQing and generally being sociable) I wasn’t able to get this weeks rundown out when I had hoped. However, you probably wouldn’t have read it anyway! I had a massive list of bookmarked articles and examples for this week, and have managed to get it down to 7 (all about quality over quantity here!). This weeks creative design and development inspiration covers a wide range of topics, from a incredibly small facial recognition library, how Photoshop shouldn’t be the final decision, and some pretty vector designs.

 

pico.js: a face-detection library in 200 lines of JavaScript

This library has so many potentials. A face detector in only 2kb of code. Take a look at the demo!

https://github.com/tehnokv/picojs

 

Scrolling interactions and techniques

Some greats do’s and don’ts of scrolling interactions in design. The article breaks down different beliefs about scrolling interaction and decides if they are correct. Some great examples including Nikes app and the Medium UI. This comes just weeks after I spoke about Scrollbooster on week 21, a great scrolling library – definitely worth a look if you haven’t already!

https://uxdesign.cc/scrolling-interactions-techniques-d6dafbfa4716

 

Optical Adjustment

So many of us rely on Photoshop and the concept of “Pixel Perfect” development. Luke Jones discusses how this isn’t always thew best way. The irrational mind of a human needs to decide whether something looks optically correct or not, because we can see and understand a context when a computer can’t.

https://medium.com/@lukejones/optical-adjustment-b55492a1165c

 

UN POSTER AL DÍA

Some great vector illustrations to give your brain something a bit different!

https://www.behance.net/gallery/64617617/Un-poster-al-dia

 

The Ultimate Guide to Font Sizes in UI Design

This is very text heavy, but well worth a bookmark. Erik puts 4000 words on the internet to help UI designers with the correct font sizes for different devices. No fear, it has a Table of Content to navigate!

https://learnui.design/blog/ultimate-guide-font-sizes-ui-design.html

 

Particle Effects for Buttons

I personally wouldn’t use this effect on any projects, but it is a nice effect and example of what can be achieved.

https://tympanus.net/codrops/2018/04/25/particle-effects-for-buttons/

 

Responsive Type – Sass template

As Kyle states: “The last time you will ever have to worry about responsive type, seriously! Configure all type settings in one file using sass variables.” I haven’t used this yet, but I am definitely going to!

https://github.com/kyle-villeneuve/responsive_type

Good Designer - Bad Designer

Creative / Development Inspiration 26

Good Designer, Bad Designer

Tarus Kohli breaks down the different between good designers and bad designers with some great sketches.

https://uxplanet.org/good-designer-bad-designer-eff79d356a75

 

A Beginner’s Guide to Webpack 4 and Module Bundling

This article is aimed at those who are new to Webpack, and will cover initial setup and configuration, modules, loaders, plugins, code splitting and hot module replacement. This is something I am yet to get into, but once I have finished my current project will be jumping all over.

https://www.sitepoint.com/beginners-guide-webpack-module-bundling/

 

Gooact: React in 160 lines of JavaScript

How to build own React clone in a matter of minutes. In this tutorial you will be shown how to write a fully functional React clone, including Component API and own Virtual DOM implementation.

https://medium.com/@sweetpalma/gooact-react-in-160-lines-of-javascript-44e0742ad60f

 

Toast UI Calendar

I have mentioned a Toast library before on Thoughts and Stuff. The Toast UI Chart. This time they have created a fully customisation calendar! Experience various view types, default popups, dragging or resizing schedules and customizable theme which is easy to use.

https://github.com/nhnent/tui.calendar

 

Choosing cameras in JavaScript with the mediaDevices API

The project I am currently involved in has me looking into implementing device cameras across different browsers and devices, if the project had been built on Node I would have most certainly needed this article. Most smart phones come with a front and back camera, when you’re building a video application for mobile you may want to choose or switch between them.  This simple tutorial walks you through the steps.

https://www.twilio.com/blog/2018/04/choosing-cameras-javascript-mediadevices-api.html

 

First Look at WordPress Gutenberg

The new Gutenberg editing interface is a major change coming to WordPress 5 this year, and it will affect WordPress plugin developers, theme designers, and website creators. In this video you will be shown you how to set up Gutenberg as a plugin on your existing site and how to get started using the Gutenberg editor to create content.

https://code.tutsplus.com/tutorials/first-look-at-wordpress-gutenberg–cms-31036

 

CSS Sliders

Creative / Development Inspiration 25

A new website is sometimes a bad idea

“We need a new web design!” Or “Our website has to be turned upside down!” These are slogans that are invariably evacuated every few years in many organizations. But is that always correct? It is not always necessary to set up a website or web design “from scratch” with every change or challenge in business management or marketing.

“https://cruxcreativesolutions.wordpress.com/2018/04/13/a-new-website-is-sometimes-a-bad-idea/

 

Gatsby

I found this static site generator when looking into how to link WordPress to ReactJS to create a web app with a well know backend. Gatsby’s rich data plugin ecosystem lets you build sites with the data you want — from one or many sources: Pull data from headless CMSs, SaaS services, APIs, databases, your file system & more directly into your pages using GraphQL.

https://www.gatsbyjs.org/

 

Glitch

Glitch is a creative community with thousands of bit of code. If you see an app you like you can jump on and edit it, meaning it is so easy to remix bits of code and deploy with no stress. I havn’t used it yet, but looks interesting.

https://glitch.com/

 

Optical adjustments in components

Every time you look at a computer interface, your brain is trying to fool you. No matter how hard you try to make things look aligned — the eye of the beholder will often disagree, due to a way we are wired to perceive objects in real life. So, as designers, the only option you have is to fool viewer’s brain back

https://blog.prototypr.io/optical-adjustments-in-components-a7f1f8655e0

 

Rematrix JS

On a recent project I have had to dive into the world of CSS transitions, and it was not a gentle dive. One library that was a great help was Rematrix. “Matrix transformations made easy”, and it really is. Definitely worth a look!

https://github.com/jlmakes/rematrix

 

How to Create a Good UI Slider in Mobile Design

Sliders present a great navigation option for sites and apps with only a few elements to explore. Sliders feel natural to users and provide a fun way to change settings or explore features. Sliders are easily recognizable to users, which makes them easy to use. This makes them a very practical option for designers to explore.

https://line25.com/ui-ux-design/how-to-create-a-good-ui-slider-in-mobile-design

Neomedia Pokemon

Creative / Development Inspiration 23

This weeks creative & development inspiration covers some great articles, all the way from bad user onboarding and UX to using IBM Watson to analyse your social media. The most eclectic post so far.

 

4 Examples of Bad User Onboarding That Will Ruin Your UX

Starting off with this great article on bad user onboarding, Ty Magnin breaks down a few issues that are causing bottlenecks in getting users onto your service. It doesn’t just stop there either, if the user can sign up easily, they may hang around longer.

https://www.appcues.com/blog/bad-user-onboarding

 

Gender pay gap: women in graphic design earn £4,000 less than men

Gender equality is something that is being spoken about in all industries. This article discusses the issues behind the gender pay gap for woman in design, and how woman in design get paid 6% less than their male counterparts.

https://www.designweek.co.uk/issues/3-8-april-2018/women-graphic-designers-earn-4000-less-year-men-gender-pay-gap-shows/

 

NEA Media

Whilst researching different portfolio websites for styles and how the page load is managed I stumbled across NEA Media. The way the site loads and then animates up is really enjoyable, as well as the design across the whole site. Definitely worth a look.

http://www.neamedia.fr/en

 

“Let’s not be elitist about what we do”: should designers give away their secrets?

Pentagram partner Natasha Jen recently lambasted the term “design thinking” as “bullshit”, “jargon” and “extremely dangerous”. Designers share their thoughts on the concept and discuss whether teaching design skills to businesses is helpful or irresponsible.

https://www.designweek.co.uk/issues/26-march-1-april-2018/lets-not-be-elitist-design-thinking-designers-share-secrets-natasha-jen/

 

Analyzing Your Company’s Social Media Presence With IBM Watson And Node.js

Jamie Munro demonstrates how to perform a search with Twitter’s API to retrieve content that will be inputted into the ML algorithm to be analysed. This way, you’ll be provided with characteristics about the users who wrote that specific content so that you can get a better understanding of your audience. The example application will be written using Node.js as the server.

https://www.smashingmagazine.com/2018/04/analyzing-social-media-presence-ibm-watson-nodejs/

 

Modern PHP Without a Framework

This article discusses the reasoning behind not using a PHP framework for your next project. A fairly technical read, but definitely worth it if you work with PHP.

https://kevinsmith.io/modern-php-without-a-framework

 

Mitsulift Elevators by Base Design

The last link is a beautiful new identity by Base Design. The new identity manages to work across all mediums, whilst easily portraying the brand and what they do. Big fan.

http://bpando.org/2018/04/03/branding-mitsulift-elevators/

Slashpixel

Creative / Development Inspiration 22

This week I have pulled together a list of 6 sites for both web designers, and developers. Some really good reads, both informative and inspiring.

 

Slashpixels – Google for Designers

A great one to start this week.

“Smart Artificial Intelligence Image Search Engine and aggregator for Dribbble, Behance, Pinterest, Cargo, Awwwards, Pttrns and other top Design sources.” is the tagline.

When this is live, I honestly think it will be a game changer. Easy access to freebies, design related images and all the top design sites connected. Get signed up!

http://slashpixels.com

 

Cropping Away Negative Impacts of Line Height

I’m not sure how useful this would be in the real world, due to different browsers rendering in different ways. However as a concept and almost working code, this is worth the read. The number of times an element doesn’t site quite right due to weird white space above and below a sentence. A front end developers nightmare (over-exaggeration maybe). This may just be the solution…

https://medium.com/eightshapes-llc/cropping-away-negative-impacts-of-line-height-84d744e016ce

 

Here’s everything I’ve learned from designing 10,000+ UI screens as a lead product designer.

This article by Jon Moore speaks worlds to me. From not reinventing the wheel, to creating pattern libraries, each point seems like common sense. Unfortunately in a lot of design projects these seem to be forgotten. This is aimed at app and web designers, but as a developer I can also relate.

This strongly relates back to user experience article I covered in Creative and Development Inspiration 8.

https://medium.com/ux-power-tools/heres-everything-i-ve-learned-from-designing-10-000-ui-screens-as-a-lead-product-designer-7d2810bee810

 

HTTP2 Explained

This is a very long read, (and more for the developers) however if you are interested in what HTTP2 can do/does then you should read this. Daniel Stenberg from Mozilla goes into incredible detail on the background of HTTP2, how it works, and how it will be deployed.

https://daniel.haxx.se/http2/

 

Truffle Suite

This is stemming from my interest in Blockchain and Cryptocurrencies. The idea of a decentralised network that you can run programs on is pretty interesting, especially considering that data protection is so poignant at the moment (GDPR / Facebook data scandal).

Enter Truffle, the most popular development framework for Ethereum with a mission to make your life a whole lot easier.

http://truffleframework.com/

 

Designer Trend – Offset and Overlap

Designers are continuing to break out of the grid. It’s been a great evolution from the early days of responsive web design. 5 years ago, responsive simply meant that your content block would resize infinitely. But it was always within the confines of a rigid grid.

In fact, responsive web design had a negative effect on how designers used grids because it was so difficult to figure out how content should react. Not any more.

https://medium.com/ux-power-tools/design-trend-offset-overlapping-content-blocks-53e20157d2a8

Rough.js graphic creator

Creative and Development Inspiration 20

This week creative and development rundown is more development orientated. I have found some great packages to help enhance the user experience, as well as some alternatives to already well used solutions. Although a shorter list than usual, these items are far more usable, both in terms of using within a project and for learning more!

 

Driver.js

Driver is a powerful yet light-weight, vanilla JavaScript engine to drive the user’s focus across the page. This would be great for when a user signs up to a new website, or service., as well as providing interactive overlays. It is easy to implement and has great documentation.

https://github.com/kamranahmedse/driver.js

 

React Tutorial: A Comprehensive Guide to learning React.js in 2018

As the title says, this tutorial is a ground up guide to learning ReactJS. It is well broken down, and incredibly easy to understand. ReactJs is definitely a must for most front end developers. The majority of tech companies use it as a quick route to sale.

https://tylermcginnis.com/reactjs-tutorial-a-comprehensive-guide-to-building-apps-with-react/

 

Toast UI Chart

No one like having to make code work on legacy browsers. But sometimes it matters.  The developers of Toast US couldn’t find a project which supported legacy browsers, maintained reliably, and was free for commercial use, so they decided to make one. It is well documented, and quite pretty! I will most probably be giving this a trial run on the next web development project that requires charts!

https://github.com/nhnent/tui.chart

 

Animating Elements Along SVG Paths: Introducing PathSlider

This tutorial by Scotch is a really simple to follow SVG path animation guide. It used the PathFinder plugin, and anime.js, both very user friendly packages. Although not a groundbreaking example, it is a great gateway drug into SVG animations.

https://scotch.io/tutorials/animating-elements-along-svg-paths-introducing-pathslider

 

Rough.js

Rough.js allows you to create roughly drawn graphics within the browser. It is a light weight (~8k), Canvas based library that lets you draw in a sketchy, hand-drawn-like, style. The library defines primitives to draw lines, curves, arcs, polygons, circles, and ellipses. It also supports drawing SVG paths.

https://github.com/pshihn/rough

 

Creating User-friendly forms

Forms are of pivotal importance to individuals & businesses alike. When it comes to collecting data, forms most often than not is the direction we all take (perhaps due to it’s long-time presence around us offline before the internet boom). Therefore, creating user-friendly forms is a major key to increasing the completion rate of your forms.

https://blog.prototypr.io/creating-user-friendly-forms-46e3f7f4eef2

Esri Wind Animation

Creative and Development Inspiration 19

This weeks design and development inspiration has a couple of great Codepen projects, showing off HTML5, Canvas and JS. On top of that I have found articles and design from across the web to get you into the mood.

 

The Last Experience

I’ll start you off with something great, and strange. The Last Experience is a collection of robots designed to dance in sync. That is, until you get involved.

https://codepen.io/ge1doot/pen/LkdOwj

 

StencilJs

Self-named as the “Magical reusable web component compiler” Stencil is a compiler that generates Web Components (more specifically, Custom Elements). It combines the best concepts of the most popular frameworks into a simple build-time tool to make development faster. Since Stencil generates standards-compliant web components, they can work with many popular frameworks right out of the box, and can be used without a framework because they are just web components.

https://stenciljs.com/demos

 

Wind Animation

Take a map, take a wind chart, animate. That is exactly what Esri have done. The code for this project uses nothing but an HTML5 Canvas element and pure Javascript. The data come from the Global Forecast System which produces a large variety of datasets as continuous global gridded datasets (more info below). Great inspiration, beautifully designed.

http://esri.github.io/wind-js/

 

The Future Of Mobile Web Design: Video Game Design And Storytelling

As technologies change and design techniques evolve, it’s inevitable that we’d experience massive growth in terms of design quality. There are similar parallels we can see within video game design as well. This article helps look at website design in another angle.

https://www.smashingmagazine.com/2018/03/future-mobile-web-design-video-game-design-storytelling/

 

10 Examples of Drag and Drop UI

Drag-and-drop has been with us for decades. It helps us to get things done on both our desktop, mobile apps and operating systems. There’s both a simplicity and intuitiveness that has led to it become one of the most universal UI features. Speckyboy has pulled together 10 examples to show this web functionality off.

https://speckyboy.com/drag-and-drop-ui/

 

Responsive Components

Media queries are great, but it can be such a nuisance when limited by needing to alter the whole page. As opposed to altering each section depending on is own size. This approach would allow fully modular design, with elements being able to be added without as much thought to device size. I honestly thing this development approach is a step in the right direction.

https://philipwalton.com/articles/responsive-components-a-solution-to-the-container-queries-problem/

 

Milligram

A minimalist CSS framework. Milligram provides a minimal setup of styles for a fast and clean starting point. Only 2kb gzipped! It’s not about a UI framework. Specially designed for better performance and higher productivity with fewer properties to reset resulting in cleaner code.

https://milligram.io/

SVG Landscape Animation

Creative and Development Inspiration 17

SVG Landscapes

SVG animations are really starting to come into their own. Speckyboy has pulled together a great selection of SVG landscapes with animations to show off the potential. Some brilliant styling!

https://speckyboy.com/landscape-scenes-css-svg/

 

Epic Spinners

A collection of CSS only spinners. Perfect for loading animations within an app or website. Great selection all in one place.

http://epic-spinners.epicmax.co

 

CSS Content Cards

I have written a post about content cards before now.  But they are so great I thought I should include this link as well. Contains card examples, as well as the code!

https://speckyboy.com/css-content-cards/

 

Unused CSS

This web tool scans your site, and finds any unused CSS selectors. Great for keeping the code size down!

https://www.jitbit.com/unusedcss/

 

Gulp!

I am a massive advocate of automating your workflow. I know I am harking back a bit here, but for those of you who don’t have the robots doing half your job, you should. This article breaks down this JS automation tool.
https://scotch.io/tutorials/automate-your-tasks-easily-with-gulp-js

 

The Sudden Death of the Website

This article covers a range of factors that point towards large brands doing away with their website. How bothered should we be as designs/developers?

https://techcrunch.com/2018/02/13/the-sudden-death-of-the-website

 

Microframes, the Future of Wireframing?

Microframes, or micro-wireframes, are miniaturised versions of wireframes. Microframes amplify the benefits of wireframing and eliminate most of the shortcomings. Their benefits include speed, clarity of communication and lack of confusion. Are they the future?

https://www.creativebloq.com/features/are-microframes-the-future-of-wireframing

 

Just Leave!

Our industry has a tendency to eat people up, squeeze them for their creative juices, and spit them out burnt up. It’s just not worth it!

https://medium.com/@EliFitch/just-leave-no-job-is-worth-burning-out-for-33b5644942d7