Researchers have known for some time that human behavior happens in patterns. Rather than seek out new ways to interact with technology, humans default to the familiar.

Evidence to support people’s love of patterns is abundant. The architect Alexander Christopher recognized, and wrote extensively about, design patterns as early as the 1960s.

More recently, Charles Duhigg examined how the majority of our day to day lives are the product of our habits — which corresponds nicely to Nir Eyal’s work on habit forming products.

Given the influence of patterns over human behavior, it’s no surprise that using established design patterns in your work can be beneficial.

But repetition can also be the enemy of innovation. How can you design something new for your audience if you only focus on what’s come before?

If you want to learn how you utilize design patterns and still create original ideas to meet the needs of your end-users, read on.

The Good and Bad of Design Patterns

By definition, design patterns are established solutions to recurring problems. So for nearly any user interface designer, established patterns can be tremendously useful.

For example, positioning the login call to action at the upper right hand corner of the navigation is a classic UI design pattern. People know to look in that area of an interface, because they’ve used the same behavior to log in or check their profile for years.

You can see the pattern in use on the Interaction Design Foundation site:

…and on LinkedIn:

…and The New York Times:

As I highlighted earlier, people enjoy the familiar. When an interface matches the user’s expectations, it reduces cognitive load, saves the user time, and makes the software more intuitive. That’s what gives these conventions lasting power.

What’s more, patterns have a number of advantages for your design process.

Utilizing a UI Pattern Saves You Time

Because you don’t have to design an interface from scratch, you’ll be able to move more quickly to testing and iterating your design.

You’ll Be Building on a Solution That Has Worked in the Past

Just like scientists standing on the shoulders of giants, you’ll be standing on the shoulders of, well, designers who solved similar challenges for their audience.

But it’s important to remember that patterns are only a starting place. They are models for your design, not fully-realized solutions to your users’ problems.

Over-Reliance on UI Design Patterns Can Easily Lead to an Under-Researched Design

That is to say, instead of uncovering a solution that’s optimal for your users, you could settle for what’s ready-made in a design pattern.

A lack of innovation, i.e., not tailoring the experience to solve the unique challenges of your users, will just leave your website or product feeling like a collection of templates.

Choose the Right Pattern

Before you start customizing patterns, make sure you select the right pattern for the job.

Yes, design patterns are usually reliable solutions to recurring problems, but if you don’t choose the right one your design could actually reduce clarity for your audience.

There’s a simple solution. There are a number of repositories that offer examples of important design patterns. For example, ui-patterns.com organizes interface patterns by category, provides examples, and explains the rationale of each solution.

Side note: if you’ll be working on the same project (or working at the same company) for the foreseeable future, it’s wise to start building your own pattern library.

How to Innovate for Your Audience

Once you have your patterns in place, it’s time to move from the vanilla design pattern to an interface that’s optimized to help your audience accomplish their goals.

To be clear, innovation in this context often means specific changes in a few parts of the interface. The fundamental design still fits a pattern, but new ideas are added to better help your users comprehend the interface, satisfy their needs, and accomplish their goals.

Austrian physicist Erwin Schrodinger articulated the challenge best when he said:

The task is, not so much to see what no one has yet seen; but to think what nobody has yet thought, about that which everybody sees.

Of course, to do this, you must deeply understand the needs of your audience.

We use a number of techniques that help us build deeper empathy with the audience and identify original functionality or UI elements that need to be added to a pattern.

Here are two of our favorite techniques:

Mental Models

A mental model refers to an established belief someone has about how a system should look or function. This principles manifests when people find something challenging to use because the interface doesn’t function as they have already decided it should.

Often, there’s a sizable disparity between how designers perceive a product or website and how users perceive the same experience. This is discrepancy is a common pathway to poor design.

Snapchat learned the hard way when its 2018 redesign didn’t match the mental model its users had established based on the old design.

Naturally, research is the best way to uncover what’s on your users’ minds.

Usability testing — specifically where people verbalize what they’re thinking as they interact with your site — can be an excellent method for uncovering someone’s mental model of how they expect your site to perform.

Similarly, card sorting, where users group types of data based on categories, can help you understand where in the interface people expect to find content.

For example, Lyft utilized people’s mental models to design their UI.

Their users were already familiar with navigation interfaces like Google Maps, so Lyft mirrored that convention and innovated based on the needs of the audience — like visualizing where drivers are located before and during the ride.

Empathy Maps

An empathy map is a qualitative research method that visualizes specific needs and actions of your users.

Using data collected from user interviews, surveys, and field studies, empathy maps typically categorize user needs in four sections: Says, Thinks, Does, and Feels.

Synthesizing research in this way is an excellent method for uncovering conflicts between the quadrants — for example what users feel versus what they do.

These conflicts will help you identify what elements to highlight in your UI design based on the friction or gaps uncovered on the empathy map.

This insight is useful in any circumstance, but particularly when you’re designing enterprise UX, where they are a lot of environmental constraints and conflicting priorities.

Earlier this year, we utilized empathy maps to innovate the design of a fleet management application for a marine transport company. (Yes, it was as complex as it sounds.)

After we conducted our research, the empathy map revealed how much time the line haul captains needed to spend watching the river. So our designers knew that our application would only have a very limited amount of their attention.

By referencing what the line haul captains were seeing versus what they were thinking, our design team intuited that the interface had to have very large CTAs at the top of the screen to make the user’s cognitive load as small as possible.

The design was so popular that the line haul captains applauded when we presented the design for the new application.

It may not sound pioneering, but those small design innovations totally optimized the way they worked.

Conclusion

People like what’s familiar, but they also covet what’s uniquely useful.

To add innovations that bridge the gap, it’s best to start with a design pattern and let your user research guide you to the innovations that will best equip your audience to complete their goals.

Lyft screenshot via flickr user Buster Benson.

Featured image via DepositPhotos.

Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!

Source

In the world of design, whether it be graphic or web, you’ll always have a need to create vector graphics. Of course, there are lots of tools out there to help you with your need, but are they really the best? Today, we’re going to be taking a lot at one of the most robust apps on the market to see if it really lives up to its hype. We’re going to be reviewing Gravit Designer. Many have described it as an amazing alternative to Illustrator and Sketch, amazed by its multitude of features. But before we get more into the details that set Gravit Designer above many other designing tools, let’s find out more on our subject today.

What is Gravit Designer?

If you haven’t already heard about it, Gravit Designer is a completely free software that gives users the power to create and design icons, presentations, illustrations, prints, apps, and even screen designs. With this program, you’ll have access to a wide range of very powerful tools to help you leap over any obstacle you may come across.

With an impressive toolset that includes UI design, icons, marketing tool graphics, concept art design, and animators, it’s a wonder that this thing is free. To top it all off, it can run both as a desktop application and in-browser, and it runs smoothly on most operating systems.

Features

A lot of these apps come with useless tools that they overcharge for, but Gravit Designer seems to be loaded down with surprisingly useful ones. Check them out:

• Artboards
• Layers and symbols
• Booleans
• A knife tool
• Path graphs
• Very high export quality
• Text engine
• Grids, anchors, and auto-layers
• Multiple fills, effects, and blending modes

This list is fairly comprehensive, but there are a few other features on the app that are worth checking out for yourself. Even with just the features listed above, Gravit Designer is nothing to shake a stick at.

Price

As I mentioned before, Gravit Designer is completely free and offers no upgrade packages. Everything that the app has to offer is 100% accessible by anyone that uses it. The reason price is included in this review is so that we can compare the prices of similar apps.

Most apps similar to service and features like the ones Gravit Designer has to offer cost between $5 and $20 for the mobile versions and anywhere between $30 and $50 for the desktop application. Now, compare that to Gravit Designer’s price tag of… well, free, and you can’t beat it.

In the words of Alexander Adam, CEO of Gravit:

If it will definitely remain free and it will never be crippled by the stupid freemium or whatever, then we could offer additional things for equipment that could be paid (since we also need to pay those server accounts) but the Designer will remain free since we want everyone can have access to a professional free design tool.

User Satisfaction

One of the biggest deciding factors when purchasing a vector design tool is seeing how well it sits with other users. As of right now, there are very few, if any negative reviews on Gravit Designer. This is great news for anyone looking for a helpful tool. Combine that with the fact that it’s completely free, and you have yourself a great app.

Don’t get me wrong, there are a few reviews that list some cons to the app. Here are a few examples:

• You cannot export to most popular files. This means that you can’t pick up where you left off if you decided to swap to another platform. This can cause massive delays if you need to switch things up.
• The app changes constantly. With all the attention it’s getting, there are almost constant updates to keep things fresh. This could be viewed as a negative or a positive, however, as it’s always good to get refreshing updates.
• Since it is free, it does often lack some of the power the other paid programs produce.

Again, for a free app, you really can’t be too mad at the features Gravit Designer offers. Ignoring the features, the interface is very straightforward and easy to follow. It makes it difficult to get lost and allows you more time to focus on your designs. Depending on your needs, or if you’re just starting out in the industry, Gravit Designer is definitely worth looking into.

Here are some honest opinions of people who have tried it and shared their experience with the world on g2crowd:

I love Gravit Designer because it is a fantastic multiplatform application for vector design.

It does not matter if we need to work with vector images, icons, if we want to build a website, a mobile application, or simply create presentations with art concepts. Gravit Designer for Windows is the application that we must install on our PC, and the best totally free and very easy to use. JUAN M.

The best thing about it that it’s free. When you struggle to pay for your tools or get overcharged on cards while still need to complete work for yourself or client, gravit has your back. Paulius P.

Gravit has a modern, accessible UI, and it’s far easier to approach. I actually find it superior to Illustrator and similar applications in this regard. Jeff C.

The takeaway

Gravit Designer is definitely a contender in its category for the best software you can get your hands on. Yes, it does lack a few features that the competing paid programs offer, but considering that Gravit Designer is free, it’s worth looking into. The features that it does offer are very inclusive and easy to use, and the interface is very user-friendly. All-in-all, Gravit Designer is a great addition to anyone’s desktop.

We would love to find out your opinion on Gravit Design after you give it a try. What other weather app design tools do you use? We would love to hear more about it in the comment section below. Also, if you enjoy reviews like this, and want to stay up-to-date with the design world, then be sure to tune into Webdesignledger daily for new and creative content.

Read More at Gravit Designer Is the FREE Designing Software You Need

Harry Nicholls recently wrote all about simplifying styles with functional CSS and you should definitely check it out. In short, functional CSS is another name for atomic CSS or using “helper” or “utility” classes that would just handle padding or margin, background-color or color, for example.

Harry completely adores the use of adding multiple classes like this to an element:

So what I’m trying to advocate here is taking advantage of the work that others have done in building functional CSS libraries. They’re built on solid foundations in design, people have spent many hours thinking about how these libraries should be built, and what the most useful classes will be.

And it’s not just the classes that are useful, but the fundamental design principles behind Tachyons.

This makes a ton of sense to me. However, Chris notes that he hasn’t heard much about the downsides of a functional/atomic CSS approach:

What happens with big redesigns? Is it about the same, time- and difficulty-wise, or do you spend more time tearing down all those classes? What happens when you need a style that isn’t available? Write your own? Or does that ruin the spirit of all this and put you in dangerous territory? How intense can all the class names get? I can think of areas I’ve styled that have three or more media queries that dramatically re-style an element. Putting all that information in HTML seems like it could get awfully messy. Is consistency harder or easier?

This also makes a ton of sense to me, but here’s the thing: I’m a big fan of both methods and even combine them in the same projects.

Before you get mad, hear me out

At Gusto, the company I work for today, I’ve been trying to design a system that uses both methods because I honestly believe that they can live in harmony with one another. Each solve very different use cases for writing CSS.

Here’s an example: let’s imagine we’re working in a big ol’ React web app and our designer has handed off a page design where a paragraph and a button need more spacing beneath them. Our code looks like this:

<p>Item 1 description goes here</p>
<Button>Checkout item</Button>

This is just the sort of problem for functional CSS to tackle. At Gusto, we would do something like this:

<div class="margin-bottom-20px">
  <p>Item 1 description goes here</p>
  <button>Checkout item</button>
</div>

In other words, we use functional classes to make layout adjustments that might be specific to a particular feature that we’re working on. However! That Button component is made up of a regular ol’ CSS file. In btn.scss, we have code like this which is then imported into our btn.jsx component:

.btn {
  padding: 10px 15px;
  margin: 0 15px 10px;
  // rest of the styles go here
}

I think making brand new CSS files for custom components is way easier than trying to make these components out of a ton of classes like margin-*, padding-*, etc. Although, we could be using functional styles in our btn.jsx component instead like this:

const Button = ({ onClick, className, children }) => {
  return (
    <button
      className='padding-top-10px padding-bottom-10px padding-left-15px padding-right-15px margin-bottom-none margin-right-15px margin-left-15px margin-bottom-10px ${className}')}
      onClick={onClick}
    >
      {children}
    </button>
  );
};

This isn’t a realistic example because we’re only dealing with two properties and we’d probably want to be styling this button’s background color, text color, hover states, etc. And, yes, I know these class names are a little convoluted but I think my point still stands even if you combine vertical and horizontal classes together.

So I reckon that we solve the following three issues with functional CSS by writing our custom styles in a separate CSS file for this particular instance:

1. Readability
2. Managing property dependencies
3. Avoiding the painful fact that visual design doesn’t like math

As you can see in the earlier code example, it’s pretty difficult to read and immediately see which classes have been applied to the button. More classes means more difficulty to scan.

Secondly, a lot of CSS property/value pairs are written in relation to one another. Say, for example, position: relative and position: absolute. In our stylesheets, I want to be able to see these dependencies and I believe it’s harder to do that with functional CSS. CSS often depends on other bits of CSS and it’s important to see those connections with comments or groupings of properties/values.

And, finally, visual design is an issue. A lot of visual design requires imperfect numbers that don’t properly scale. With a functional CSS system, you’ll probably want a system of base 10, or base 8, where each value is based on that scale. But when you’re aligning items together visually, you may need to do so in a way that it won’t align to those values. This is called optical adjustment and it’s because our brains are, well, super weird. What makes sense mathematically often doesn’t visually. So, in this case, we’d need to add more bottom padding to the button to make the text feel like it’s positioned in the center. With a functional CSS approach it’s harder to do stuff like that neatly, at least in my experience.

In those cases where you need to balance readability, dependencies, and optical adjustments, writing regular CSS in a regular old-fashioned stylesheet is still my favorite thing in the world. But functional CSS still solves a ton of other problems very eloquently.

For example, what we’re trying to prevent with functional classes at Gusto is creating tons of stylesheets that do a ton of very specific or custom stuff. Going back to that earlier example with the margin beneath those two elements for a second:

<div className='margin-bottom-20px'>
  <p>Item 1 description goes here</p>
  <Button>Checkout item</Button>
</div>

In the past our teams might have written something like this instead:

<div className='cool-feature-description-wrapper'>
  <p>Item 1 description goes here</p>
  <button>Checkout item</button>
</div>

A new CSS file called cool_feature_description_wrapper.scss would need to be created in our application like so:

.cool-feature-description-wrapper {
  margin-bottom: 20px;
}

I would argue that styles like this make our code harder to understand, harder to read, and encourages diversions from our library of components. By replacing this with a class from our library of functional classes, it’s suddenly much easier to read, and to change in the future. It also solves a custom solution for our particular needs without forking our library of styles.

So, I haven’t read much about balancing both approaches this way, although I assume someone has covered this in depth already. I truly believe that a combination of these two methods is much more useful than trying to solve all problems with a single bag of tricks.

I know, right? Nuanced opinions are the worst.

The post Why can’t we use Functional CSS and regular CSS at the same time? appeared first on CSS-Tricks.

Building An Interactive Infographic With Vue.js

Krutie Patel

2018-11-19T13:00:30+01:002018-11-19T12:43:40+00:00

This article presents a modern approach to building an interactive infographic. You sure can have plain infographic with all the information available upfront — without any user interaction. But, thinking of building an interactive experience — changes the technology landscape we choose. Therefore, let’s understand first, why Vue.js? And you’ll see why GSAP (GreenSock Animation Platform) and SVG (Scalable Vector Graphics) become obvious choices.

Vue.js provides practical ways to build component-based, dynamic user interfaces where you can manipulate and manage DOM elements in powerful ways. In this instance, it’s going to be SVG. You can easily update and manage different SVG elements — dynamically — using only a small subset of features available in Vue.js — some of the staple features that fit the bill here, are, data binding, list rendering, dynamic class binding to name a few. This also allows you to group relevant SVG elements together, and componentize them.

Vue.js plays nice with external libraries without losing its glory, that is GSAP here. There are many other benefits of using Vue.js, one of which is that, Vue.js allows you to isolate related templates, scripts, and styles for each component. This way, Vue.js promotes modular application structure.

Recommended reading: Replacing jQuery With Vue.js: No Build Step Necessary

Vue.js also comes packaged with powerful lifecycle hooks that let you tap into the different stages of application to modify application behavior. Setting up and maintaining Vue.js applications doesn’t require a big commitment, meaning you can take phased-approach to scale your project as you go.

The infographic is very light-weight in a visual sense, as the main aim of this article is to learn how to think in terms of data, visual elements, and of course, Vue.js — the framework that makes all the interactivity possible. In addition, we’ll use GreenSock, a library for animating SVG elements. Before we dive in, take a look at the demo.

We’ll start with:

1. The overview of the data for infographic;
2. SVG image preparation;
3. An overview of Vue components in context of the SVG artwork;
4. Code samples and diagrams of key interactivity.

The infographic that we’re going to build is about Tour De France, the annual bicycle racing event held in France.

Overview Of Tour De France Data

In infographic design, data drives the design of your infographic. Therefore, while planning your infographic design, it’s always a good idea to have all data, information, and statistics available for the given subject matter.

During Tour De France of 2017, I learned everything about this biggest cycling event that I could in 21 days of the game in July, and I familiarized myself with the subject.

Basic entities of the race that I decided to go for in my design are,

• Stages,
• Teams,
• Routes,
• Winners,
• Length and classifications of each routes.

This next part of the process depends on your thinking style, so you can be creative here.

I created two sets of data, one for stages and other for teams. These two datasets have multiple rows of data (but within limit)? — ?which matched with two wheels of the bicycle with multiple spokes in each. And that defined the key element of the design, The Bicycle Art that you saw at the beginning? — ?where each spoke will be interactive & responsible to drive what information is revealed on screen.

I mentioned within limits above, because what we’re aiming for in this instance is not a full-blown data-visualization in context of big data but rather an infographic with high-level data.

Therefore, spend quality time with data and look for similarities, differences, hierarchy or trends that can help you convey a visual story. And don’t forget about the amazing combination of SVG and Vue.js while you’re at it, as it will help you bring about the right balance between information (data), interactivity (Vue.js) and design elements (SVG Artwork) of infographic.

Here’s the snippet of a stage data object:

{
    "ID": 1,
    "NAME": "STAGE 01",
    "DISTANCE": "14",
    "ROUTE": "KMDÜSSELDORF / DÜSSELDORF",
    "WINNER": "THOMAS G.",
    "UCI_CODE": "SKY",
    "TYPE": "Individual Time Trial",
    "DATE": "Saturday July 1st",
    "KEY_MOMENT": " Geraint Thomas takes his first win at 32"
}

And team data object snippet as below:

{
    "ID": 1,
    "UCI_CODE": "SKY",
    "NAME": " TEAM SKY",
    "COUNTRY": "Great Britain",
    "STAGE_VICTORIES": 1,
    "RIDERS": 8
}

This infographic is operated by a very simple logic.

UCI_CODE (Union Cycliste Internationale) is the connecting key between the stage and the team object. When a stage is clicked, first we’ll activate that stage, but also use UCI_CODE key to activate corresponding winning team.

SVG Preparation

Having a couple of datasets and a rough concept of bicycle art ready, here’s the static SVG CodePen of the infographic I came up with.

See the Pen Static Bicycle SVG by Krutie(@krutie) on CodePen.

We have created only one spoke for each wheel, that is because we’ll dynamically create rest of the spokes using a number of records found in the dataset, and animate them using GreenSock Library.

The workflow to create this SVG code is also very simple. Create your Infographic artwork in Adobe Illustrator and save as SVG. Make sure to name each group and layer while working in Illustrator, because you will need those ids to separate parts of SVG code that will eventually populate area of Vue components. Remember that layer names given in Illustrator become element ids in SVG markup.

You can also use SVGOMG and further optimize SVG code exported from Adobe Illustrator.

Important Note: If you use SVGOMG to optimize SVG markup, your code certainly will look neat, but note that it will convert all elements into with d attribute. This results into losing x and y values of the rectangle, in case you wish to adjust few pixels manually later-on.

Second thing, make sure to uncheck Clean Id option (right-hand side options in SVGOMG interface), this will help maintain all groups and ids intact that were created in Illustrator.

Vue Component Overview

Even if interactivity and data-flow in your infographic project is quite simple in nature, you should always take a moment to draw up a tree diagram of components.

This will especially help in case you’re not using any shared-data mechanism, where child components are dependent on the values sent from the parent component (i.e. via props) or vice-versa (i.e. this.$emit events). This is your chance to brainstorm these prop values, emit events and local data — and document them before starting to write the code.

Diagram above is the snapshot of Vue components that is partially derived from interactivity requirements and partially based on SVG markup. You should be able to see how SVG markup will be split up based on this tree structure. It’s pretty self-explanatory from hierarchy view-point.

1. Chain-wheel will imitate rotation of spokes.
2. Stage component is the rear wheel that will list all 21 stages.
3. Stage-detail component will display related information on a curved path (left-hand side).
4. Team component is the front wheel that will list all participating teams on spokes.
5. Team-detail component will display related information on a curved path (right-hand side).
6. Navigation will include back and next button to access stages.

The diagram below represents the same Vue components seen above, but in the context of the infographic design.

Less is more — should be the approach you should try to take while working on similar projects. Think through the animation and transition requirements you have, if you can get away with using TweenLite instead of TweenMax — do so. If you have the option to choose elementary shapes and simpler paths over complex ones — by all means try to opt-in for light-weight elements that are easy to animate — without any performance penalty.

Next section will take you through an exciting part with GreenSock animation and Vue.js.

GreenSock Animation

Let’s take a closer look at:

1. Text animation on a curved path;
2. Spoke animation on a wheel.

Animating Text On A Curved Path

Remember the curve path seen around the bicycle wheel, that curved path is slightly bigger than the radius of the bicycle wheel. Therefore, when we animate text on this path, it will look as if it follows the shape of the wheel.

See the Pen Text on a Curved Path by Krutie (@krutie) on CodePen.

path and textPath is a sweet combination of SVG elements that allows you to set text on any path using xlink:href attribute.

<path id="curvedPath" stroke="none" fill="none" d="..."/>

<text>

  <textPath xlink:href="#curvedPath"
          class="stageDetail"
          startOffset="0%">
          {{ stage.KEY_MOMENT }}
   </textPath>

</text>

To animate text along the path, we’ll simply animate its startOffset attribute using GreenSock.

tl.fromTo( ".stageDetail", 1,

{
  opacity: 0,

  attr: { startOffset: "0%" }

},

{

  opacity: 1,

  attr: { startOffset: "10%" }

}, 0.5 );

As you increase the startOffset percentage, text will travel further through the circle perimeter.

In our final project, this animation is triggered every time any spoke is clicked. Now, let’s move on to a more exciting part of the animation.

Animating Stages/Spokes Inside The Wheel

It’s visible from the demo that stage and team components are similar in nature with couple of small differences. So, let’s focus on just one wheel of the bicycle.

The CodePen example below zooms in on just the three key ideas:

1. Fetch stage data;
2. Arrange spokes dynamically based on the data;
3. Re-arrange spokes when stage (spoke) is clicked.

See the Pen TDF Wheel Animation by Krutie (@krutie) on CodePen.

You may have noticed in the static SVG CodePen above that the spokes are nothing but SVG rectangles and text grouped together. I have grouped them together since I wanted to pick both text and rectangle for the purpose of animation.

<g v-for="stage in stages" class="stage">

    <rect x="249" y="250" width="215" height="1" stroke="#3F51B5" stroke-width="1"/>

    <text transform="translate(410 245)" fill="#3F51B5" >

      {{ stage.NAME }}

    </text>

</g>

We will render them in area of the Vue component using values fetched from the data-source.

When all 21 stages are available on screen, we’ll set their initial positions by calling, let’s say, setSpokes().

// setSpokes()

let stageSpokes = document.querySelectorAll(".stage")
let stageAngle = 360/this.stages.length

_.map(stageSpokes, (item, index) => {
    TweenMax.to(item, 2, 
    { rotation: stageAngle*index, 
      transformOrigin: "0% 100%"
    }, 1)
}

Three key elements of setting the stage are:

1. Rotation
   To rotate spokes, we’ll simply map through all elements with className stage, and set dynamic rotation value that is calculated for each spoke.
2. Transform Origin
   Notice transformOrigin value in the code above, which is as important as index value, because “0% 100%” enables each spoke to rotate from the center of the wheel.
3. stageAngle
   This is calculated using total number of stages divided by 360-degree. This will help us lay every spokes evenly in 360-degree circle.

ADDING INTERACTIVITY

Next step would be to add click-event on each stage to make it interactive and reactive to data changes? — ?hence, it will breathe more life into an SVG image!

Let’s say, if stage/spoke is clicked, it executes goAnimate(), which is responsible to activate and rotate the stage being clicked using the stageId parameter.

goAnimate (stageId) {

  // activate stage id
  this.activeId = stageId

  // rotate spokes

}

We’ll use DirectionalRotationPlugin…which is a key ingredient for this interactivity. And yes, it is included in TweenMax.

There are three different ways of using this plugin. It animates rotation property in 1) clockwise, 2) counter-clockwise and 3) in the shortest distance calculated to the destination.

As you’d have guessed by now, we’re using the third option to rotate the shortest distance between the current stage and new stage.

Review the CodePen above and you’ll see how Stage 01 is constantly moving around the circle, leaving its original spot for new active stage at 0-degree angle.

First, we need to find the angle of a stage being clicked, and interchange its rotation with Stage 01. So, how do we find the rotation value of the stage being clicked? Check out the diagram below.

For example, if Stage 05 is clicked (as you can see above), the journey from Stage 01 to Stage 05? — ?requires 4 x angle-value.

And therefore, we can get the correct angle using, (Active stage Id - 1) * 17 degree, followed by ‘_short’ string postfix to trigger directional rotation plugin.

angle = 360/21 stages = 17
activeId = 5
new angle = ((activeId-1)*angle)+'_short'
          = ((5-1)*17)+'_short'
          = 68

The final goAnimate() function will look something like below:

_.map(spokes, (item, index) => {

  if(activeId == index+1) { 
    // active stage
    TweenMax.to(item, 2, 
    { rotation: 0+'_short', 
      transformOrigin: "0 100%"
    })   

  } else if (index == 0) { 
    // first stage
    TweenMax.to(item, 2,
    { rotation: (activeId*angle)-angle+'_short',
      transformOrigin: "0 100%"
    })

  } else {
    TweenMax.to(item, 2, 
    { rotation: index*angle+'_short', 
      transformOrigin: "0 100%"
    })
  }

}) // end of map

Once we have the rear wheel ready, the front wheel (for team) should follow the same logic with a couple of tweaks.

Instead of stage, we’ll fetch team data and update registration point of transformOrigin attribute to enable spokes generation from opposite registration point than the stage wheel.

// set team spokes

map(teamSpokes, (index, key) => {
  TweenMax.to(index, 2, 
  { rotation: angle*key, 
    transformOrigin: "100% 100%"
  }, 1)
})

Final Project

Like me, if you have written all animation and data related functions in Vue components itself. It’s time to clean them up using Vuex and Mixins.

VUEX

Vuex eases up the management of shared data among components, and more importantly, it streamlines your code, keeping methods and data() clean and tidy, leaving components only to render the data, not to handle it.

Lifecycle hooks are a very suitable place to perform any HTTP requests. We fetch initial data in created hook, when the Vue application has initialized, but hasn’t yet mounted into the DOM.

Empty state variables, stages and teams are updated using mutations at this stage. We then, use watcher (only once) to keep track of these two variables, and soon as they’re updated, we call in animation script (from mixin.js).

Every time user interacts with stage or team component, it will communicate with Vuex store, executes setActiveData, and updates current stage and current team values. That is how we set active data.

And when the active data is set after state update, goAnimate will kick in to animate (directional rotate) spokes using updated values.

Recommended reading: Creating Custom Inputs With Vue.js

Mixins

Now that the data is handled by Vuex, we’ll separate out GreenSock animations. This will prevent our Vue components being cluttered with long animation scripts. All GreenSock functions are grouped together in mixin.js file.

Since you have access to Vuex Store within Mixins, all GSAP functions use state variables to animate SVG elements. You can see fully functional store.js and mixin.js in the CodeSandbox example over here.

Conclusion

Creating interactive and engaging infographics requires you to be analytical with the data, creative with visuals and efficient with the technology you use, which in this case is Vue.js. You can further use these concepts in your project. As a closing note, I’ll leave you with this circular interactive color wheel below that uses an idea similar to the one we’ve discussed in this article.

See the Pen Material UI Circular Colour Palette made with Vue JS and GSAP by Krutie (@krutie) on CodePen.

With no doubt, Vue.js has many great features; we’re able to create interactive infographics with just a few things, such as watchers, computed properties, mixins, directive (see color-wheel example) and a few other methods. Vue.js is the glue that holds both SVG and GreenSock animation together efficiently, giving you ample of opportunity to be creative with any number of subject matter and custom interactivity at the same time.

(rb, ra, yk, il)

Welcome back, readers! My favorite thing about you all is that you’re all much too classy to put up Christmas decorations this darned early. Yes. You are. I insist.

I could also insist that you have a look at these portfolios, but you already clicked, and we all know what you’re here for: a mix of minimalist, corporate, and super artsy designs!

Note: I’m judging these sites by how good they look to me. If they’re creative and original, or classic but really well-done, it’s all good to me. Sometimes, UX and accessibility suffer. For example, many of these sites depend on JavaScript to display their content at all; this is a Bad Idea, kids. If you find an idea you like and want to adapt to your own site, remember to implement it responsibly.

Justin Jackson

Justin Jackson’s portfolio does that rare and beautiful thing of making use of monospace fonts in a way that doesn’t look too brutalist. Okay, so maybe it looks a bit “grunge”, but it’s grunge and it’s usable. What’s not to love?

Platform: Statamic

Paul Macgregor

Paul Macgregor’s portfolio brings us to our first (but probably not last!) uber-minimal design of the month. And it’s a fantastic example of the principle, too, with all the important information right up front, and quite literally center. Other than my usual issues with JS-dependent navigation, I can find no fault.

Platform: Static Site

Mawla

Mawla is an app development studio, and I’m slightly in love with their site design. All the colorful blobs remind me of fliers from my childhood, but better. Yeah, they actually made blobs work.

Look, I’m not saying everyone should adopt colorful blobs as a strategy. That way lies madness and/or blindness. But running across these sites that let their designers go a little wild without sacrificing general usability is always nice.

Platform: WordPress

Ethan Tennier-Stuart

Ethan Tennier-Stuart brings us back down to earth with a very type-and-whitespace-focused design that keeps things simple. This one is an absolute master class in spacing out elements.

Platform: Static Site

Owl

Owl is a Russian design agency, but maybe don’t quote me on that. You know typography is good when you can’t read a word of it, but you don’t mind just staring at it for a bit. Their graphic design skills are impeccable, too.

It reminds me of that brief moment in time when photomontages were everywhere.

Platform: WordPress

Jack McDade

Jack McDade bills himself as the “Ultimate Web Master”, a title as full of nostalgia as his site’s aesthetic. It’s simple, but colorful.

I have to say that Jack is pretty confident in his work’s ability to speak for itself. He lists some of his former and current projects in paragraph form, and leaves you to decide whether or not to click. Considering that he built the CMS known as Statamic, I’d say he can afford to be confident.

Platform: Statamic (Probably)

Future Comes

Future Comes is an interesting case. It’s a one-page website, but the studio seems to do a lot of different things. They don’t really bother to explain what they do in simple terms. They assume that if you need what they have, you understand what they’re telling you.

Since it all seems to be fairly technical, and geared toward corporate customers, the site is highly corporate in its aesthetic. There is sans-serif type, subdued reds and blues, fun with gradients, and a little tasteful animation.

Platform: Static Site

Cyber-Duck

If the last site whet your appetite for some clean corporate goodness, look no further than Cyber-Duck. It’s simple, it’s solid, it has a ton of blue. It’s strangely comforting.

It also has a page that details their accessibility principles, which includes such delights as big text, their commitment to making the site accessible without JavaScript, and many other things that made me happy.

This is how you do it, front-end devs!

Platform: Undetermined CMS

double take

double take goes for the good-old black, white, and yellow approach that just stand out so nicely. There’s a bit of asymmetry thrown in for good measure. Still not a fan of cursor replacement, but otherwise, this one’s worth a look.

Platform: Static Site

Paul O’Rely

Paul O’Rely caught my eye with those thin diagonal lines, and the highly expressive type in his one-page site. Overall, it creative and stylish.

My only complaint is that the contact form really doesn’t look like one. To balance that out, I’ll say that I love the auto-generated ice-breaker feature. And the fact that you can send him drawings made right on the page. That’s pretty cool.

Platform: Static Site

Jack Watkins

Jack Watkins’ portfolio features some lovely typography, and a generally solid aesthetic. The part I really like, though, is the layout. In a world of mobile-first layout—which is important—it seems like big screen often get underutilized. This site bucks that trend.

Platform: Static Site

K2

K2 brings us a design that feels rather “Medium-ish”. For all that, it’s pretty, stylish, and a pleasure to browse. What can I say? Medium has good taste.

Platform: Static Site

Rubxkub

Rubxkub brings us back a few months to an age when everything was artistic and collage-ridden. Good times. Don’t take my joking the wrong way, it looks beautiful. It’s some good old artsy minimalism.

Platform: Static Site

New Need

New Need is a furniture design studio with an emphasis on the modern aesthetic. Their website matches their work with a very PowerPoint style design.

Platform: JS App

Great Design

Great Design is a boldly named studio with bold black lines everywhere. It’s just how they roll, apparently. I also like how they used independently scrolling columns in their portfolio. I’m not saying we need to be using iframes for everything again, but I will say that I rather like the look of the thing.

Platform: Static Site

Thomas Williams

For something easier on the eyeballs, look no further than Thomas Williams who comes at us rather gently with a dark design. It’s still trends toward the modernist, but it’s more “solid” than “artsy”.

Platform: WordPress

Netrix

Netrix uses a lot of building-block-style imagery, and the masonry layout of the portfolio will cement that concept in your mind in a slightly more subtle way. It does all of this while looking quite classy.

Platform: Static Site

Wonderland

Wonderland is one of those sites that transitions from PowerPoint style to fairly standard minimalism, with a healthy dose of animation all throughout. It also makes nice use of the Lydian typeface, which makes a refreshing change from a lot of the usual typefaces.

Platform: VueJS

Koysor Abdul

Koysor Abdul’s photography portfolio keeps things simple with earthy tones and a lot of off-white space. Browsing this one is an almost peaceful experience.

Platform: Webflow

Aristide Benoist

I love to see the trends I’ve known and named evolve over time, and Aristide Benoist’s portfolio is a prime example of that evolution. It has a touch of both the modern and the post-modern, each helping to smooth out the edges of the other. There’s a little asymmetry, but everything still feels intentionally placed. It just feels good.

Platform: Static Site

Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!

Source

Every week users submit a lot of interesting stuff on our sister site Webdesigner News, highlighting great content from around the web that can be of interest to web designers.

The best way to keep track of all the great stories and news being posted is simply to check out the Webdesigner News site, however, in case you missed some here’s a quick and useful compilation of the most popular designer news that we curated from the past week.

Note that this is only a very small selection of the links that were posted, so don’t miss out and subscribe to our newsletter and follow the site daily for all the news.

Web.Dev

25 Years Ago Today, the First Major Web Browser was Released: NCSA Mosaic 1.0

Just-in-time Design

Why Does Every Homepage Look the Same?

Why You Should Use a Text Area for Address Form Fields

UX Portfolio Tips and Best Practices

In the Dead of Night: Why We are Drawn to Dark Interfaces

Creatives’ Worldwide Tribute to Legendary Stan Lee

Building your Color Palette

Creating Excellent UX Flow Charts

The Importance of Wireframing in Web Design

These 5 Questions Kill Creativity

Tensorflow 2.0 – A More User Friendly API

Codevember

The Dangerous Fetishization of ‘Hustle Porn’

Why Doctors Hate their Computers

World War Three

Starting a Design System

Google Admits Too Much White Space in Apps is Bad for Battery Life

How Nirvana’s Iconic Nevermind Album Cover was Designed

Kill your Personas

What Chinese Travel Sites Taught Me About UI

Balancing Creativity and Usability

Why are Tech Companies Making Custom Typefaces?

Videogame Onboarding Experiences are a Lesson to Designers

Want more? No problem! Keep track of top design news from around the web with Webdesigner News.

Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!

Source