Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Upwork hosts thousands of freelancers skilled in millions of trades. Through our platform for these freelancers, we are the answer to a breadth of needs for our clients. How ever multifaceted a problem may be, the solution is with Upwork.
We’re calling our motion “Kinetic Dimensionality” — it is the visual representation of our ‘New Dimension of Work’ and the multidimensionality of Upwork.
Our motion is about capturing that kinetic energy of A New Dimension Of Work and bringing those moments of excitement to life. This draws a bridge between our static world and motion.
Motion is a key part of our graphic and typographic language. It expresses the ‘New Dimension of Work’ through dynamic transitions and impactful movements. By integrating motion as a key foundation to our brand, we create a more engaging and immersive UX that captivates our customers.
We bring the ‘New dimension of work’ to life in our type treatments through dynamic angles.
Our motion should always move with purpose and intention. Our movement does not float or glide. It is pointed and moves deliberately.
Here are a few different ways we go about adding dimensionality to our type.
Angling type is a great way to bring dimension to the movement and it allows for dynamic transitions in and out of copy.
There are times when text can lock up at an angle, but that should be used sparingly. It’s better to think of this rotation movement as a transition to the copy lockup.
Distributing lines based on z-space is a great way to further emphasize the dimensional aspect of our brand.
If the words don’t look good staggered, don’t force it. Simply revert to rotating the text block as a whole.
Elevate simple text animation with subtle per word 3D rotation. It adds a nice dimensional flair to a simple typing animation.
Keep in mind that it works best when the copy is short, and there’s time to watch it type out.
Here are some things you should never do with our type in motion.
DON’T make the movement too subtle
DON’T just stretch type
DON’T mirror the same motion
DON’T rock the type back and forth
DON’T slide the type
DON’T skew the type
Body copy goes here, lorem ipsum dolor sit amet, consectetuThis is our primary lockup. Great for media that wants to end with a big Upwork moment. Really showcase the dimensional movement of our new brand while still owning the upward movement of the Up bug.r.
This is great for short videos with limited time to show a lockup. Think 15s, 06s and social posts. If there’s still not enough time for this animation, you can trim the first 24 frames off so the Up is already on screen.
This is great for event graphics, presentations, or basically anywhere that requires a perfect loop. This animation can be sped up or slowed down to fit tone of the presentation.
Motion is a key part of our containers and flexible working blocks. It’s an important tool to bring our layouts to life and is a strong story telling tool. Similar to our typography motion, we follow two principles when animating our flexible work blocks.
Our containers should move along the same grid that we use to build our layouts. Even if a grid isn’t present our motion should feel geometric in its build.
Again, our motion should always move with purpose and intention. Our movement does not float or glide. It is pointed and moves deliberately.
From simple one beat builds to dynamic compositions that leverage the principles of animation, such as anticipation, overlapping movement and follow through motion. Depending on the story being told and the energy required to tell it, decide how expressive the transition should be.
Our containers can transition and adapt to content around it and in it.
Containers come alive in motion and can be used for added interest within a composition so long as we maintain the snappy motion principle.
Working blocks are really amazing transition tools. For example, transitions from white to full screen images can be achieved simply by punching into a block after it builds on screen.
The Glimmer and motion come hand-in-hand. Variance in color effortlessly flows and adapts bringing a new dimension of life and color to our brand. We use two different glimmers, a primary and a secondary.
Glimmers can dynamically transition in and out of scenes through fades.
Though the combination of flexible working blocks and dimensional type animation our brand becomes super flexible. Allowing for dynamic moments that showcase our customers, feature our product experience, and embodies a ‘New Dimension of Work’.
Click below for more detailed motion guidance from a technical perspective.
Explore