Skip to main content

Creative and Development Inspiration 8

This week I have pulled together 6 pieces from across the design interwebs to showcase some of the best articles, code snippets and a little bit of inspiration to get you started.

 

User Experience Matters to Marketing

User Experience (UX) can effect your marketing, if users view it positively. This post looks at the various elements that great UX includes and how UX impacts your marketing goals and strategies.

It even uses big pictures, for those of you who hate reading.

https://www.webpagefx.com/blog/marketing/user-experience-matters-marketing/

 

Web Design Trends for 2018

Every year these articles come out by storm. Now I am not agreeing with every point on the list, but it is a good idea to keep on top of what seems to be big currently. At least someone else did the work to put them into a list for us 😉

http://www.creativebloq.com/features/the-5-biggest-web-design-trends-of-2017-so-far

 

Speckyboys 50 Top CSS Libaries, Frameworks and Tools from 2017

I am a big fan of Speckyboy, and this is one of the reasons why. They have brought together their top CSS pieces from 2017 into one place. Some brilliant ones on here. Great for speeding up dev, or just for being plain old helpful.

https://speckyboy.com/top-50-css-2018/

 

Codester

A brand new, fast growing market place for code snippets, great if you want to sell, or buy. They launch a weekly flash sale where selected items are 50% off, a nice concept.

https://www.codester.com?ref=Robert27

 

How to set up Webpack for any Project.

I am yet to start using Webpack, I am a Gulp man personally. I am putting this on the list so I can come back to it. Webpack is great for JaveScript projects, and configuration based which makes the whole process extremely simple.

https://scotch.io/tutorials/setting-up-webpack-for-any-project

 

Animated SVG Strokes

This one is for those of you who love a good animation. Code Drops looks after us once again with a beautiful SVG bike animation. Really clever, really sleak.

https://tympanus.net/Development/AnimatedStrokes/

 

If you have any great articles, code snippets or just interesting links stick them in the comments below!

Creative and Development Inspiration 6

This weeks list is more design focused, with a story telling script thrown in for good measure. As most design/dev sites are shouting about Cyber Monday deals, I wanted to keep this on the same track as we started. I hope you enjoy.

 

Designercize

Needing to flex your design muscles? A little down time in the studio? Designercize has you covered. It randomly generates a concept that needs a design for. Brilliant for wireframing / whiteboard design practice.

https://designercize.com/

 

Scrollama

Its been a while since I have come across a script that really gets me thinking about its potential. Scrollama is a lightweight JS libary that helps with storytelling.

Example: https://pudding.cool/2017/04/beer/

https://github.com/russellgoldenberg/scrollama

 

Threed

Need a 3D mobile phone mockup? Just upload your design and you are set. Completely free and no need to download software.

http://threed.io/

 

Obstructed Text

Some websites look great, even if they defy conventional wisdom or tenets of design theory. A new design trend is showcasing that very idea with elements that cover or obstruct some of the text in the design.

https://designshack.net/articles/graphics/design-trend-obstructed-text/

 

Design needs Three Levels of Type Heirarchy

Another one from Design Shack, they really impressed me last week. This article discusses how design needs three levels of typography. It seems very common-sensual, but its interesting to see it written in such a concise way.

https://designshack.net/articles/typography/every-design-needs-three-levels-of-typographic-hierarchy/

 

YELLOW!

Web Design Dev have brought together 20 examples of yellow being used in design. A great article to click through, with no need to read anything. A nice ender to this weeks run down.

http://www.webdesigndev.com/vibrant-yellow-website-designs/

Creative and Development Inspiration 5: Feature Highlights

Finding ways to display hidden information for users can be tough. The number of times brochure websites have required some level of user engagement and I have had to scour the web for examples such as these. I thought I should share.

 

Project Feature Highlights

By adding tooltips into div elements they can be positioned anywhere on a page. I imagine this could get a big fiddly for a responsive page, but nothing a few calculations can’t fix!

https://codepen.io/ianfarb/pen/qkpJH

 

Intro JS

A step-by-step guide and feature introduction script. It has no dependencies and is pretty small! Very easy to integrate.

https://introjs.com/

 

Animated Tooltips

Simple, effective use of tooltips. There are three styles. Fading, expanding and swing. By using the HTML5 data-title attribute they minimize the amount of extra HTML required.

https://codepen.io/neogomo/pen/BjqJzr

 

Automated Tooltips

Attractive, small tooltips that effectively display extra information for the user.

https://codepen.io/adwin/pen/vGqzLq

 

Animated button with Tooltip

I have included this, not so much for the button, but how the tooltip looks. If this was applied to a product image to show extra information, it would work brilliantly.

https://codepen.io/takeradi/pen/oxbGpb

Google Material Mobile Menus

Creative and Development Inspiration 4: Hidden Menus

Today’s post is focusing on code snippets for hidden menus. These could be used on both mobile and large devices. Although they are not particularly attractive menus, I am focusing more on the usability and style. The purpose is to help inspire.

 

Simple multilevel menu

This menu is a code snippet from Cody House. It gives two examples, one plain CSS, the other with JQuery animations. Simple, but user friendly.

https://codyhouse.co/demo/multi-level-accordion-menu/index.html

 

Pure CSS Accordion with Simple Microinteractions

This mobile accordion menu moves icons down as the user selects a different section. The animated micro interactions make the whole experience feel more crafted.

https://codepen.io/jcoulterdesign/pen/OMmZPd

 

Breadcrumb Navigation

This subtle menu gives the user more information when they hover. The effect works really well, however I am dubious about how it would work with touch devices. The menu would have to be touch to show, which adds a touch point. Still a nice effect though.

https://codepen.io/andreasstorm/pen/prWEvj

 

Circular Material Design Menu

I personally don’t like how this menu looks. However, the concept is really slick. This style could be altered to look a bit nicer and really work. I am a fan of the animation though!

https://www.bypeople.com/colorful-material-css-circular-menu/

 

Google Material Inspired Circle

Staying on the Google Material style, here is another simple menu that could be great if styled slightly differently.

https://www.bypeople.com/google-inspired-css-floating-action-button/

 

Menu Overlay Focus Change

This is completely different to menus I am used to seeing. Although it needs some tweaking to work on smaller devices, the effect it great. By moving the cameras focus when the menu is open adds a whole new layer to the site.

https://codepen.io/carasin/pen/aBEZEd

 

CSS & JS Toggle Menu

A bit of an experiment with SVG icons what chage colour when selected. It uses a subtle material transition to make it look dynamic. Really nice for use with a more modern B2C site.

https://codepen.io/chrisgannon/pen/EyaPZZ