Month: March 2019

Add Simple CSS Animation to Your UI

Posted on by djbrensinger

When you create a web page, you use tools like fonts, colors, photos, illustrations and shapes to draw attention to important parts and guide the user on how to use your page. Another tool that you can add to help convey information is animation. Animation allows you to add movement or motion on your page. People are hardwired to respond and react to movement. By adding animation, we can use it as another technique for communicating with our users.

Add Simple CSS Animation to Your UI
Photo by: Image by Ambady Sasi from Pixabay

Why use animation?

Animation helps you to draw people’s attention the part of the page that has changed, show users where to look next or highlight the arrival or removal of important information. You can use it for telling a story, branding and improving your user’s experience.

What do you need to remember when adding animation?

  • Don’t animate everything. Use it sparingly. Animation should help guide people on using your page not distract or confuse them.
  • Make sure it fits with your style or brand. If you are playful and not serious, you can use animation that has a playful aspect. If you are more serious, you want your animation to be simple and functional.
  • Don’t assume that your animation will work on all devices. You need to test, test and test again.

What kind of animations can I use?

You can add animations to a dashboard, web app or mobile only features. One popular method is to change the hamburger menu to an X. This change lets the user know that the menu can be closed. You can add animations to images on hover or in a gallery.

Hamburger Menu changes to an X

See the Pen
Animated – Hamburger Icon (spans) by Steven Roberts (@matchboxhero)
on CodePen.

CSS Animation on Hover

See the Pen
Playing a CSS animation on hover by Val Head (@valhead)
on CodePen.

Accordian Image Gallery

See the Pen
Accordion Image Gallery by Stefan C. (@stefcharle)
on CodePen.

How can I learn more about animation?

CSS Animation Rocks
A CSS Animations Tutorial
CSS Tricks – Animation
Create Cool UI Animations in CSS

3 Dashboard Design Inspirations on CodePen

Posted on by djbrensinger

An easy to read dashboard has from 5-9 pieces of information on it. By combining color, fonts and icons, you can make a dashboard simple and easy to use. I found these three examples on CodePen that you can use to inspire your own designs.

3 Dashboard Designs CodePen
Photo by Lukas from Pexels

Bootstrap 4 Dashboard Stats Example

It shows 6 different statistics using Bootstrap 4. Each statistics is in a separate box that was built using the card layout. @elmorabityounes uses the default classes from Bootstrap to color the background, border and text. The text formatting is kept simple by using header tags to display the copy. Each box has its own icon from Font Awesome. The result is a simple design with no additional CSS or JavaScript.

Bootstrap Dashboard Indicators

When you design a dashboard, you’ll need to use different type of indictors to display information. Herman Starikov shows you how to use Bootstrap to create different indicators. He combines Font Awesome, Flexbox and CSS Animation. Herman also uses icons as decorative background elements. With CSS and Animation, your dashboard doesn’t have to be plain or boring.

Full Dashboard Design

CodePen Admin Dashboard

This complete Dashboard has a statistics, charts, a map and a chat box. Haidarali Nadi Shah demonstrates how to use Flat design, Font Awesome and JavaScript for functionality and additional theming. It includes a side menu bar that shrinks and expands when you click on it.

With the above examples, you can include different pieces of information in your design. You can choose to HTML and CSS, a CSS Framework like Bootstrap or include JavaScript to create more complex functionality. No matter what methods you choose, you can create a dashboard that provides your customers with the information that they need. Before you design your next dashboard, remember to review these 3 Dashboard Design Tips.