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

Tympanus Image Hover Effects

Creative and Development Inspiration 3: Hover Effects

Today’s list is a selection of mouse over / hover effects. These animations and transitions can make a massive difference between just another website, and a sleek user friendly interface that readers want to keep coming back to.

 

Tympanus Hover Effects

The first two links are from Tympanus. A brilliant site with hundreds of code snippets. I really recommend keeping an eye on this website, both as a developer, and a designer.

Each link has multiple examples within, and showcases different ways of animating the same element.

https://tympanus.net/Tutorials/CaptionHoverEffects/

https://tympanus.net/Development/HoverEffectIdeas/

 

UX Design Agency Info Panels

UX Design Agency have used hover effects brilliantly on the home page panels. A gentle zoom and reveal of essential information is really engaging.

https://ux-design.agency/

 

Product Card

This product card is very minimal, and shows the user exactly want they need to see. My only concern it is very JavaScript heavy, but I’m sure this could be rewritten to use plain CSS3.

https://codepen.io/virgilpana/pen/RNYQwB/

 

Direction Aware Hover

This piece of code is a bit old, going back to 2013, but is still relevant. As the user hovers over each panel, it moves across from the one before.

https://codepen.io/noeldelgado/details/pGwFx

 

Panel Hover Effect

This e-commerce panel shows the user a product shot, and basic information, and then provides a purchase CTA on hover.

http://cssdeck.com/labs/l6pzd5vm

 

True Paradise on Earth

An example of a blog panel. Simple, elegant. Paradise.

http://www.louistiti.fr/demo/Concept-Design/Carte-Article-UI/

 

One thought it that designers and developers need to remember not all devices have hover, specially as large screen touch devices are getting more traction in the consumer market. Any information that is shown on hover, needs to be accessible for these other users as well.

Google Poly

Creative and Development Inspiration 2

Today’s links are a mix of creative and development. A little bit of inspiration, and information.

 

7 Steps to creating a UX Strategy

I’ll start it off with some easy reading. This article walks you through 7 vital steps to creating a solid UX strategy. I think the first point is spot on, considering how I don’t believe many people fully understand this.

https://designshack.net/articles/ux-design/7-steps-creating-a-ux-strategy/#more-55658

 

Google Poly

Microsoft gave you clip art, and Google raises it with Poly.
A libary of thousands of 3D objects, created by both Google and Google users. These assets can be used to build apps, lowering the cost for developers.
Google has also confirmed that they will allow third-party apps to plug in via API. Here we come VR!

https://www.fastcodesign.com/90148702/google-is-building-a-new-kind-of-clipart?ref=webdesignernews.com

 

5 Intuitive Material Design Drawers Examples

A drawer is a slideable side menu within an app. These examples show how using the Material style can make drawers so much more appealing to the user.

http://materialdesignblog.com/5-interesting-and-intuitive-material-design-drawers/

 

Export SVGs from Photoshop

A great little script that can speed up the process of exporting SVGs from

http://hackingui.com/design/export-photoshop-layer-to-svg

 

Is the Static Logo dead?

If it wasn’t already hard enough to create a solid brand, now logos want to move.

https://designshack.net/articles/graphics/is-the-static-logo-dead

 

9 Beautiful Beer Label Designs

A nice easy finisher. Nothing better than looking at beautifully designed beer bottles.
Well, there is. But these are all I can give you for now.

http://www.ucreative.com/articles/beer-label-designs

Web and Development Inspiration

Creative and Development Inspiration 1

A few things I have come across over the past few days. Written and saved here. Mainly so I can come back and find them!

 

 

Needing to create mock ups? Screenshot visuals for documentation? It tends to be a fiddly, repetitive process.

Not any more!

https://responsive-screenshots.com/

 

 

Need more serious looking graphs and charts on your site? This script gives you a Github like charts to show your data.

https://frappe.github.io/charts/

 

 

Accessibility. It can be a right nightmare to integrate, but is a must if you want to enable all users to access your site.

Enter Funkify, a plugin that lets you experience it first hand

http://www.funkify.org/

 

 

I love this next one. Think sketched wire frame, but a framework.

This less than formal CSS framework is great, but I’m not sure when it would be used

https://www.getpapercss.com/

 

 

Everyone loves a good form… Well, it might be helpful.

https://speckyboy.com/code-snippet-form-ui/

 

 

We are always looking for new ways to engage clients, and users. Whether that’s with a give-away, or a immersive digital campaign.

Enter Phaser, a open source HTML platform framework for games! Pretty retro.

https://phaser.io/

 

 

I am not a fan of coding emails. At all. Bouncing the code backwards and forwards through Email on Acid finding IEs quirks, and Lotus Note then breaks everything.

This might be a savour. Lets see. Markup for email – make responsive emails quickly

https://heml.io/

 

 

A nice small one. Balloon.css. A simple, easy to use tooltip style.

https://kazzkiq.github.io/balloon.css/