Skip to main content
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

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

CSS Animation Shooter Game

Creative and Development Inspiration 16

This post has been a long time coming, what with crippling man flu (sympathy vote alert) and work deadlines I haven’t been able to put anything together. I have however had a lot of time to stare at my phone and look at pretty pictures. That means that this list is especially special, and has some pretty interesting links for you to peruse.

 

basicScroll

Inspired by skrollr, this scrolling library allows you to change CSS variables depending on the scroll position. Use the variables directly in your CSS to animate whatever you want. I am a massive fan of this, and can’t wait to roll it out on some of my projects.

https://basicscroll.electerious.com/

 

3D Parallax Example

Thismanslife built this example of 3D parralax on IMacs only using CSS.  Definitely need to take a look at that source code!

http://www.thismanslife.co.uk/projects/lab/imac3d/

 

Sweet Alert 2

Need to remind a user to save their work before they leave the page? This alert library is a perfect addition to any web project using alerts. Easy to integrate, and an improvement on the standard browser alert.

https://github.com/sweetalert2/sweetalert2

 

5 UX Design Principles That Never Go Out of Style

The best designers understand that there must be a balance between standardization and innovation. Keeping that in mind, here is how to design a product with GREAT UX.

https://medium.com/walkme/5-ux-design-principles-that-never-go-out-of-style-672cc6ba9047

 

Stimulus

Because why wouldn’t we need another JavaScript library?! Personally I doubt I will ever use this, but you may. Easy to install using NPM, Yarn ect and allows you to enhance your already existing HTML.

https://stimulusjs.org/

 

Gangbase

One for the designers. Gangbase was created to collect all studios, designers, tools and awesome websites in one big base, where it’s easy to find whatever you need.

https://gangbase.design

 

GradPad

A beautifully designed website, with only one purpose. To create perfect CSS colour gradients within your browser. Perfect for web designs / developers.

http://ourownthing.co.uk/gradpad.html

 

Kutt.it

Like Bitly, but yours. Free and open source, Kutt.it allows you to host your own server, and manage all of your links & data yourself. A great interface, and documented API.

https://kutt.it/

 

CSS Space Shooter

I haven’t had one of these in a very long time. An old-school arcade-style 3D shoot-em-up rendered entirely with CSS 3D transforms. A great break from work, as well as a perfect example of CSS transforms. How far can you get?

https://www.michaelbromley.co.uk/experiments/css-space-shooter/

SVG Landscape Polygon Background

Creative and Development Inspiration 15

After a weeks break (Girlfriends birthday) I am back with another web dev/design rundown. There are some great UX/UI articles, as well as some darn pretty pictures.

 

People Don’t Scroll ( and Other Page Length Myths )

A few page length myths debunked. A few of those “beliefs” that are thrown around and checked against studies to see what really is correct! Do people understand scroll? How long should a page be?

https://uxplanet.org/people-dont-scroll-and-other-page-length-myths-c7ca720a0595

 

UI Design Inspiration #3

A series of UI Design Inspiration from FreeUi.Design. Some beautiful examples of icons, applications and website. Definately worth a look.

https://freeui.design/ui-design-inspiration-3/

 

Daily Life Interactions To Learn UX From

If we look into our everyday life, it consists of continuous series of microinteractions that often go unseen, almost at a sensory level. The thing is, they feel natural but they are 100% artificial, which means someone designed them and as UX researchers, we might want to learn from it.

https://uxplanet.org/daily-life-interactions-to-learn-ux-from-2888e1ca9d80

 

SVG Backgrounds

Customizable SVG patterns and background designs for websites and blogs. Great for adding some colour, but keeping the page load time down!

https://www.svgbackgrounds.com/

 

The 12 Do’s and Don’ts of Web Design

If you design websites, you know that making your designs useful and enjoyable is your top priority. It can be an overwhelming task for anyone who just recently started creating websites, so to simplify it, Adobe has created a simple list of do’s and don’ts to keep in mind when designing your next web design project.

https://theblog.adobe.com/12-dos-donts-web-design-2

 

Build a Download Button Full of Micro Interactions

On the same vain as most of the other articles, UX! Learn how to build a button that is full of useful micro interactions. Some coding goodness to end the list.

https://scotch.io/tutorials/build-a-download-button-full-of-micro-interactions

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