Start 2023 with a new design concept

Expand into skills you’ve only dreamed of before

Often, at the beginning of a new year, I like to conceptualize new guiding principles, in one or two words, that will anchor me in my dreams and goals for the next 12 months.

As visual, UX, motion, and code designers, we know that design is ever-expanding. With new cloud-based tools, digital support systems, and ever-accessible design communities, there is much to add to one’s tool kit. Whether we explore UX, motion, hands-on skills, or even art history skills, one thing is sure, we need to know more and more.

Thus, the two words defining my year of 2023 are… Design Expansion.

Design Expansion will be my 2023 mission statement. And for sure, I will return to this story many times, to remind myself of what I was envisioning at this very moment.

What do I mean by Design Expansion

Design Expansion can mean many things. It can mean up-skilling, UX, expanding on our imagination, taking risks and stepping into unknown design areas, joining design communities, improving hands-on coding skills, looking at art more, attending design events, designing our own book, publishing, writing… really, the sky is the limit.

Design as a highly-skilled endeavor

Throughout the ages, ever since design became a discipline, it has always been a highly skilled profession. As a discipline, it has never rested on its laurels. On the contrary, it kept refining itself along with new tools and materials. Design artists have continually broken new barriers, defied expectations, and became trendsetters in the process.

Let’s look at this typography example below. Typography is as old as human writing itself. Looking at this example of magnificent type design, can you believe this was crafted over 550 years ago by Belbello da Pavia, an Italian painter active between 1430 and 1462 in northern Italy?[1]

This illustration by Belbello di Pavia shows the details of an L from the book the Benedictine Antiphonary, painted circa 1467–1470. It shows master craftsmanship in lettering, a beautiful red-orange-blue color palette on a gold background, and superb inking skills.

And not only does Belbello di Pavia show us magnificent typography skills, he also exudes a universe of imagination. In this smallish illustration, he is able to set a mood of joyful extravagance overflowing with abundant nature.

Belbello di Pavia’s “L” design remains a true inspiration to designers, to thus expand our vision of typography at large.

Design in modern times

Let’s look at a computer-generated typography style that is equally stunning in its flamboyant style and execution. The artist-designer is unknown to me, but the quality of the work details great compassion towards expanding design skills in every dimension.

This unknown designer expanded on simple lettering for a poster, DISCO NIGHT, and imbued it with movement, lights, spectral colors, and excellent design composition.

Indeed, this is an excellent example of story telling through design experimentation and exploration.

Explore the “how” of the design process, and playfully expand your visual design skills.

Experimentation is key to success

In the spirit of my Design Expansion mission, I explored a combination of these two typography designs. I tried to recreate something similar. My tool was Adobe Illustrator, and the letters of my choice were L O V E, as it included an “L”.

Here are my design expansions taking inspiration from the above examples 1 and 2. While I couldn’t exactly match the style in example 2, I’m still super-satisfied with the outcome.

Both Belbello da Pavia and the unknown artists are driving design forward. Belbello da Pavia as a master of illuminated typography with his “L”, the unknown artist designer of the DISCO NIGHT with experimentation and daring playfulness.

Learning how to up-skill motion design skills

Animation design in CSS

CSS offers an extensive design palette. CSS is also a great tool for animation. The only requirement for expanding our knowledge in CSS is time. Time is always too short for designers. So we must learn how to make time.

Following the concept of Design Expansion, motion design and coding skills are advantageous to any UX designer.

While the following example animation by Julian Garnier requires a highly conceptual coding skillsets including JavaScript, it is an amazing example of what can be achieved exploring coded animations.[4]

3D Solar System by Julian Garnier

I’m not merely as skilled as the designer of example 4. But I’m excited to try new ways to add motion design to my html elements.

Here’s my html/css coded animation for a line SVG UI icon using a stroke-dasharray & stroke-dashoffset.[5]

Design expansion embraces the unknown. Motion design is an amazing frontier to explore for any visual and UX designer.

Lottie animation design

Lottie animations have made a great splash since their arrival some years back, and especially in 2022. And they will be incorporated into the designer’s universe even more so in 2023.[6]

There are thousands of fre eanimations to download in Lottie JSON, mp4, gif, and zip formats. The platform is free to join. Animators from across the world can learn how to design animations that can easily be embedded in code.

Explore Lottie animations. It’s an amazing field to expand into as a designer.

In the true mission of Design Expansion, experiment a lot, whenever, wherever. New skills will pay off greatly!

In summary

Use Design Expansion as your mission for 2023.

Up-skill just about every single one of your design skills. Technology is fast expanding, and so must designers.

No matter which area you are expanding in, newly learned skills will always complement other skills.

Don’t hold back, expand your universe!

Interested in learning more about design, UX, trends, tools, tech insights and techniques? Join Medium with this link, and support my future writing endeavors on UX design.

Thank you! ✍️🧡

All illustrations and artworks are copyrighted as indicated.

References:

[1] Biography of Belbello da Pavia: https://en.wikipedia.org/wiki/Belbello_da_Pavia

[2] Illuminated “L”, by Belbello da Pavia , attribution, https://commons.wikimedia.org/w/index.php?curid=60938161

[3] DISCO NIGHT: https://www.pinterest.com/pin/70437487001763/

[4] 3D Sun Solar System, © Julian Garnier Codepen. https://codepen.io/juliangarnier/pen/krNqZO

[5] Html/css animation using stroke-dasharray & stroke-dashoffset. https://codepen.io/evaschicker/pen/MWOdBQj

[6] Lottie animations: https://lottiefiles.com/