Skip to main content
Google Material Design

Creative / Development Inspiration 29

I had a lot of fun collating this weeks creative and development inspiration run down. There have been so many great projects released recently. Take a look and let me know which one was your favourite.

 

Material.io

Google keep pushing and pushing – as shown in Creative and Development Inspiration 21. Now they have redesigned their “Material Design” style rule book. God damn its pretty. Open sourced, and designed specifically to help teams build digital experiences. Have a click about the site, so much to see.

https://material.io/

 

7 Rules for Creating Gorgeous UI (Part 2)

This guide for “visual aesthetics” covers some very interesting points. The section on laying text over an image is very prominent to me, seemingly an issue that crops up time and time again. Nicely broken down with examples and explanations. Worth a flick through.

https://medium.com/@erikdkennedy/7-rules-for-creating-gorgeous-ui-part-2-430de537ba96

 

Screely

Screely instantly turns your screenshot or design into a beautiful image you can share anywhere. No Photoshop or Sketch templates necessary! This is brilliant for quickly sending screenshots to clients, but making sure they look that little bit better.

https://www.screely.com/

 

More Than Pixels: Selling Design Discovery

I am constantly pushing to make the web development process more efficient and more informed. When juggling projects, and dealing with many stakeholders (most of whom aren’t interested in dev…understandably…) it is easy to push past the toughest bit. Research and analysis of a project is not something at the forefront of our minds, and it should be. Smashing magazine shows us how this can be covered, and profitably.

https://www.smashingmagazine.com/2018/05/more-than-pixels-selling-design-discovery/

 

Heavenly Hues

Design Seeds have been on my radar for a whilst now, but I have never written about them. Daily colour palettes from photos, this particular palette vibed with me on this sunny day. I would recommend looking through some of there other posts. Some great colours.

https://www.design-seeds.com/in-nature/heavens/heavenly-hues-34/

 

Homey landing – Website Landing Page Design

Scrolling through Dribble, I stumbled across this great landing page design by Mehedi Hasan. Really nice light style, with lots of spacing, and a really draw on your eye.

https://dribbble.com/shots/4608766-Homey-landing

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

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

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

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

Google Music Lab

Creative and Development Inspiration 21

Dot Colors

A beautifully simple website built for web designers and developers to check their colour codes. Just drop in an array of HEX colours and away you go.

https://dotcolors.co/

 

Notifications – A breakdown

A great article on web notifications from Inclusive Components. In the format of a style guide, it covers how notifications can used correctly, and what aspects of web may need a notification. It has a nice checklist at the end, if you don’t want to read the whole thing…

https://inclusive-components.design/notifications/

 

Googles Music Lab

Google is back with some more fun. The Creative Lab team has built an in browser song maker, just click the grid to add notes when share it with a link. You can also use a MIDI keyboard or sing into it if you so wish. Google have been bringing out some great bits of inspiration and helpers for developers, as shown with Flutter in Creative and Development Inspiration 18.
Share your masterpieces in the comments!

https://musiclab.chromeexperiments.com/Song-Maker/

 

Navigating the complexity of change aversion

Change aversion is a concept well known to website designers and developers. It’s the negative reaction users have to changes in your product, whether that’s functional changes such as updates to product features, or interface changes such as visual redesigns. This article explains how this can be navigated.

https://blog.intercom.com/navigating-the-complexity-of-change-aversion/

 

Google Web Designer

Google Web Designer is a free, professional-grade HTML5 authoring tool. It can be used to build interactive, animated HTML5 canvas, no coding necessary (although you can use code if so inclind). It is more aimed at creating professional looking adverts that can run anywhere on the web. Still in beta but definitely worth keeping an eye on.

https://www.google.com/webdesigner

 

Ethical Design: The Practical Getting-Started Guide

Web designers and developers have an obligation to build experiences that are ethical, and better than using features that expliot human behaviour. This article explains how unethical design happens, and how to do ethical design through a set of best practices. A great read.

https://www.smashingmagazine.com/2018/03/ethical-design-practical-getting-started-guide/

 

Scrollbooster

A drag to scroll JS libary. Works in IE11 Edge, and most modern browsers. It is a great package that allows content to be easily scrolled by touch, and mouse, and is tiny in size. I am planning to use it in a current project to test it out. My only concern is being able to alter options when the device size change, i.e. scrolling vertical, to horizontal.

https://ilyashubin.github.io/scrollbooster/

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/