Skip to main content
Users love dark products like this

Creative / Development Inspiration 53

A massive selection this week. 2 great website examples to help inspire your portfolio designs. Some great JS frameworks and testing tools. A few articles to help designers design the good stuff, and even more articles to keep you busy. Enjoy this website design and developer inspiration rundown.

Website Inspiration

Tom Rush

A Leeds based digital creative website. Tom has built a simple, easy to read, and quick to load portfolio that does a great job.

https://tomrushworth.co.uk/

 

Tim Householter

First Tom, now Tim. A lead designer at Transom Design in Seattle. His site uses lots of white space and grids to display his work. Clean, simple, easy to read.

http://timhouseholter.com

 

Designer Resources, Examples and Inspiration

In the dead of night we are drawn to dark interfaces

Distraction free, pretty, and amplification. What dark interfaces are a massive thing in product design.

https://uxdesign.cc/in-the-dead-of-night-a4c7fa98aec4

 

Development Snippets, Samples, and Articles

Grid Tile Layouts with auto-fit and minmax

A new and easy way to make perfect responsive title layouts with CSS Grid.

https://gedd.ski/post/tile-layouts/

 

Building Your Colour Palette

You can’t build anything with five hex codes. To build something real, you need a much more comprehensive set of colours to choose from.

https://refactoringui.com/previews/building-your-color-palette

 

Creating Excellent UX Flow Charts

Flow charts, like any deliverable in the design process, is an excuse to talk to your team. As much as we like complaining about meetings and formal deliverables, the truth is that design work would come to a dead stop without (a) conversations and (b) pictures.

https://medium.com/eightshapes-llc/creating-excellent-ux-flow-charts-df6f1e46e524

 

Google Web.Dev

With actionable guidance and analysis, web.dev helps developers like you learn and apply the web’s modern capabilities to your own sites and apps.

https://web.dev/

 

Glorious Demo

The best way to create animated code for demos. Copy, pastable, and pretty.

https://glorious.codes/demo

 

Chromatic – UI testing for Storybook

A continuous UI testing tool that combines the accuracy of manual testing with the efficiency of automation. 21% of software budget is on bugs, and the cost of bug repair in production is 5-10x. This tool helps save time and money.

https://blog.hichroma.com/chromatic/home

 

Maizzle

Maizzle is a BYOHTML framework for rapid HTML email development. It’s like a static site generator, but tailored to email.

https://maizzle.com/

 

Svelte

The magical disappearing UI framework. I still need to have a proper look into this but it seems really interesting. Using vanilla JS, but the same functionality as major JS frameworks. Teeny tiny in size.

https://svelte.technology/

 

Why using `tabindex` values greater than “0” is bad

Using Tab Indexes in web development? Maybe you should stop doing that…

http://www.karlgroves.com/2018/11/13/why-using-tabindex-values-greater-than-0-is-bad/

 

A bit of everything

Web Typography Resources

A great list of resources all centred around typography. Perfect for designers and developers.

https://betterwebtype.com/web-typography-resources

 

Cacher

The code snippet organiser for developers. Integrates with most editors to store commonly used snippets from the whole team on the cloud.

https://www.cacher.io/

 

Heat maps 101: a complete guide with examples, tools, and case studies

Hotjar walk you through why, how and when to use heat maps. Mixed up with a few case studies and examples to show how valuable they can be.

https://www.hotjar.com/blog/heatmaps

 

Designing, laws, and attitudes.

I often hear from stakeholders who worry that “accessible” means “ugly.” Well here are resources that are accessible and visually beautiful.

https://ethanmarcotte.com/wrote/designing-laws-and-attitudes/

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

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

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

Material Design Example

Creative and Development Inspiration 14

This week I have found some great links for UX snippets and examples, some CSS/JS magic, and a little titbit for you cryptocurrency geeks. All in a days work.

 

Bye bye Material Design

Considering Material Design for your next project? Emin Durak thinks otherwise. He belives that it is, I quote, “premature, shallow and arguably incorrect approach”.

https://medium.com/techtrument/bye-bye-material-design-acaebcc7c6b4

 

Micron.js

A Microinteraction Libary Built with CSS Animations and JS. A great plug and play libary for a quick MVP.

https://webkul.github.io/micron/

 

How Much Do You Know About Web Typography

Web typography is a bit tricky. So many quirks and snippets of information you need to know. Take this web typography quiz and test your typography knowledge.

https://betterwebtype.com/web-typography-quiz

 

Gradient Topography Animation

Codrops is back with a great new code snippet. An incredibly sleek organic SVG shape layer animation based on Diana Hlevnjak’s work “Gradient Topography”. Powered by anime.js.

https://tympanus.net/Development/GradientTopographyAnimation

 

Button with Email Dropdown

Code My UI has brought us a nice little snippet to create a drop down input field from a button. Keep everything tucked anyand tidy!

https://codemyui.com/button-email-optin-dropdown

 

Jump on the Cryptocurrency Bandwagon

Minergate is a piece of software that mines a varity of cryptocurrency coins in the background whilst you work. You can set the level depending on how much you need to use your CPU/GPU. Keep the referral link, and I get a small percentage of the fee (nothing is taken from you!)

https://minergate.com/a/2b33a24f39993dc303296b47