Skip to main content

Creative and Development Inspiration 12

A mixed bag this week. Some great new additions to the code snippets bookmark list, as well a new design inspiration website. Also, Spotify likes developers!

 

9 Custom Open Source File Upload Field Snippets

Upload fields are one of the toughest inputs to restyle. If you’re hoping to customize your upload inputs, this gallery will help. Speckyboy has collected 9 handmade upload fields from CodePen that prove you can restyle the field to look however you want.

https://speckyboy.com/custom-file-upload-fields/

 

Why do People Hate Papyrus and Comic Sans?

The world we live in is a mix of opinions and it’s hard to definitively agree on anything. But one thing’s for sure—Comic Sans and Papyrus are the worst. Why do we feel this is the case?

https://onextrapixel.com/people-hate-papyrus-comic-sans/

 

Instagram CSS

Want to bring Instagram filters to your site? Wait no more, this Github resposity has your back.

https://picturepan2.github.io/instagram.css/

 

Company Tricks People into Swiping Instagram Ad with Fake Strand of Hair

A cunning Chinese company has received both props and scoffs for a devious Instagram Stories advertisement featuring a fake strand of hair over some heavily discounted sneakers. Not such a development article, but a comment on advertising design.

https://medium.com/shanghaiist/chinese-shoe-company-tricks-people-into-swiping-instagram-ad-with-fake-strand-of-hair-54d8a2d8ec1d

 

Spotify for Developers

Spotify have opened up an API for us developers. So. Many. Ideas.

https://beta.developer.spotify.com

 

A New Inspiration Feed – Designspiration

A selection, concoction, amaligmation of great, interesting and creative designs. All those descriptive words show how I feel about this site. It’s good.

https://www.designspiration.net

Creative and Development Inspiration 11

I have pulled together 6 links that span creative, web development, and just plain old interesting. There are a couple of freebies to keep you interested as well 😉

 

Pretty Scroll

A library to make an element follow you as you scroll. This could be used for so many things, from keeping images alongside a section of text, to triggering animations at a certain point. Bookmark this!

https://appleple.github.io/pretty-scroll/

 

Homepages Over Time

This article covers some of the bigger web brands, and shows how their homepages have changed over time. All of these will have used not stop A/B testing, and tracking to get to this point.

https://blog.sourcerer.io/a-study-of-homepages-over-time-62947486008c

 

Prometheus Free Icon Set

450 free icons that work with both Adobe and Sketch apps. Always good to have an endless supply!

https://dribbble.com/shots/4045963-Prometheus-Free-Icon-Set

 

CSS Glitch Effect

A really really cool glitch effect using only CSS. Works for film style sites, but could also work with more industial clients as well!

https://tympanus.net/codrops/2017/12/21/css-glitch-effect/

 

Engaging Micro-animation CSS House

This responsive house by David Khourshid is a brilliant example of using micro-animations to engage the user, whilst at the same time providing value. It uses a slider to pick the type of house a user is looking for.

https://codepen.io/davidkpiano/full/xLKBpM/

 

More Freebies! A selection of Instagram Banner Inspirations

These Instagram templates are fully customizable, and provide great inspiration for creating and building a Instagram following.

https://designshack.net/articles/inspiration/best-instagram-templates-banners/

Creative and Development Inspiration 10

Starting this year as I plan to go on, with a good old list. This time I have brought together 6 articles that look across the year to help you develop your skill set, as well as a glance back at the past year.

 

2017 Web Design Trends

The list would’nt be complete without a look back at 2017 and it’s trends. 1st Web Designer do a great job at highlighting the best examples.

https://1stwebdesigner.com/top-10-web-design-trends-2017/

 

Froala Design Blocks

This is a brilliant open-sourced respository on Github. It is a collection of 170+ responsive design blocks that can be used to build a website. A great way of rolling out a site in minimul time! Based on Bootstrap 4 and entirely customizable

https://www.froala.com/design-blocks

 

Reframe.js

Reframe.js is a javascript plugin that makes unresponsive elements responsive! This could be a lifesaver.

https://dollarshaveclub.github.io/reframe.js/

 

Tips for Designing Awe-Inspiring Conversational Interfaces

As online chat becomes an industry in itself, with virtual assistants and help desks it becomes essential that the interface is as user friendly as possible. Those of you who are just getting started in this direction will benefit from these eight tips for designing awe-Inspiring conversational interfaces.

https://www.webdesignerdepot.com/2017/12/8-tips-for-designing-awe-inspiring-conversational-interfaces/

 

Shards – Modern UI Toolkit

Shards is a modern design system based on Bootstrap 4. Unbelievably clean, and packed with 10 custom components. Only 12kb minified and gzipped.

https://designrevision.com/demo/shards/

 

18 Designers Predict UI/UX Trends for 2018

There is no other way to end this list. With a look across 2018, and a few thoughts on which direction ui/ux trends will go. Whether you approve of it or not, I think #8 is very likely.

https://blog.figma.com/18-designers-predict-ui-ux-trends-for-2018-2d04d41361c6

 

I would love to hear your thoughts on trends for 2018, both design and development. The both industries are moving at such a rate, with great new technologies emerging. It’s going to be an interesting year.