Nature can be a great source of inspiration. Art has borrowed from nature for millennia.
Even in our digitalized age, graphic designers still turn to nature for inspiration. In this article, we’ll look at rust textures as an often-overlooked alternative to more popular texture types.
Using rich textures in your work can add a stronger composition, make it more eye-catching or increase the quality of your work by adding depth. Rust textures or any type of texture can also be a good background for posters, magazines, websites, online forms or even your computer wallpaper.
Oxidized metal, while usually has a negative connotation such as abandonment, can also have the opposite meaning with bright, and rich colors. Here’s a list of 50 rust texture backgrounds that we’ve compiled for you. These can be a good source of inspiration or you can simply use them as a background for your projects.
Most of these images are royalty-free, but we advise you to check the resources and/or give credit to their original publishers.
The jungle is alive: Be it a collaboration between two or more authors or an article by an author not contributing regularly. In these cases you find the Noupe Editorial Team as the ones who made it. Guest authors get their own little bio boxes below the article, so watch out for these.
Winter is a season of contrast. It welcomes entrepreneurs with one of the most profitable periods of the year then pours cold water over them in January which is notorious for economic stagnation. However, you can’t just stop email marketing campaigns due to bad conditions.
To survive tough times, you need to be smart. There are periods to promote deals, and there are periods to benefit from non-promotional campaigns. Let’s divide winter email campaigns into three groups and consider events that can serve as a good reason to send out newsletters to subscribers.
Winter Email Newsletters by Months
December
All you need to know about December is that it has Christmas. It is the biggest event in the winter and one of the most important ones in the email marketing calendar. For most, nothing compares to this beloved Yule holiday. During the first winter month, your email marketing strategy will be built around it.
Let’s consider four vital landmarks of the month that can be used to strengthen a Christmas email campaign.
BFCM Weekend
Although the weekend is at the end of November, it is a good practice to prolong sales for several days and even a week. Therefore, you can use this event to start December with extra revenue. To nail BFCM, check out our helpful guides:
Newsletter Template Builder
With Postcards you can create and edit email templates online without any coding skills! Includes more than 100 components to help you create custom emails templates faster than ever before.
It is a big event in Europe and a perfect occasion to treat subscribers who live there with exclusive deals or extra perks like free shipping. The feast is observed in early December in Western Christian countries and in the middle of the month in Eastern Christian countries.
This does not need any introduction: It is the biggest sales point and one of the beloved holidays. We have dedicated an entire guide to it. One thing to note here. Much like St. Nick’s Day, Christmas might be observed at different times. Therefore, it gives you an opportunity to prolong your campaigns through Jan. 8.
The New Year closes December with a lavish party. Whether you decide to prolong Christmas celebrations until January or not, New Year’s email newsletters should always have a special place in your strategy. Although your customers’ wallets will be almost empty, they won’t miss an opportunity to congratulate friends and relatives with a feast.
Therefore, offer deals that will be tailored to their needs as well as budgets.
It is safe to say that January is one of the toughest months for email marketers. It is that period when people are in no mood to spend money, simply because their wallets were emptied by Christmas shopping. However, it does not mean that you should drag yourself through a long January without any profit. Here are some ideas to help drive traffic, boost revenue, and even alleviate the agonies of your subscribers.
Prolonging festive celebrations is always a good idea and a perfect occasion to send out an email newsletter. Everyone loves holidays, extra discounts, and special offers. There is one catch. Although contacts will be in high spirits their current financial situation may not allow it.
Use this period for treating subscribers with valuable content. Focus on building strong relationships with your audience. If you can afford it, give something special away. For instance, it can be a coupon or even a small gift. After all, reciprocity never hurt anyone.
The beginning of the year sees a massive craziness around New Year’s resolutions. Many people take this phenomenon seriously. Some manage to kill bad habits and achieve new goals. It is a perfect time to send email newsletters that lend a helping hand to potential customers and support them and their goals.
Ask yourself what products will help clients succeed? What products can become a reward for their diligence? What content will motivate customers to proceed with their task? These email newsletters do not have to be commercial. Demonstrate your support to strengthen your relationships, and it will certainly pay back one day.
Capitalize on Blue Monday
Did you ever hear about “Blue Monday,” aka the most depressing day of the year?
Some say this is pure nonsense, whereas others believe in it. The seasonal affective disorder is an opportunity to turn sadness into happiness with an email newsletter.
Use the third Monday of January to help customers and keep moving with their resolutions. Use humor, show empathy with a special discount, or offer a gift to lighten the mood. That will help not only to increase revenue but also add some extra bonuses to your overall marketing strategy.
There is only one big day in February, and it is Valentine’s Day. Although this holiday is not celebrated by everyone, it is certainly something. It is no longer associated only with loving couples; it is a festival for honoring love, friendship, and admiration. So what can you do?
Send out recommendations for getting the date night right. Include a list of restaurants, preferable dishes, apparel to put on, and what makeup to wear.
Include a gift guide. Roses and chocolate are not an answer to everything. Sometimes you should be more creative to impress loved ones. Provide contacts with some unique ideas tailored to their needs.
February has some other aces in the hole. Treat contacts with some valuable email newsletters on Groundhog Day, Presidents’ Day, and for the Super Bowl.
At the end of February, sending emails dedicated to spring, thereby warming up the audience with some sneak peeks of a new collection or extra discounts on the old one.
Winter email newsletters are full of variety. Therefore, the design much depends on the event and theme.
For instance, if it is targeted at Christmas, you can use image backgrounds with fully decorated pine trees. For Valentine’s Day, use an animated gif of a happy couple from the comic strip “Love is…”. If it is a regular email with a one-day sale then you can go for a neutral design with winter coloring and motifs.
To seize all these opportunities and turn them into a profit, you need a tool to create templates quickly. It should be flexible, mobile-friendly, browser compatible, and easily integrated with various email services. For this, use Postcards.
Postcards meets all these requirements and more. It is a powerful tool for building HTML email newsletters of various scale that does not require coding or design skills. Everything is already included. All you need to do is to drag the desired block into the playground, edit the visuals, and add your text. Simple and brilliant.
Smartly titled “The Sale Continues,” this winter email newsletter from J.Crew comes like a bolt from the blue sky winning over the audience, with a surprise and terrific deals. Even though the offer is time-sensitive — “Ends Tomorrow” — 40% to 60% off looks quite impressive, especially when Christmas sales are over.
As for the design, the team caught a magical aura of winter with a beautiful landscape. Everything is neat and clean. The deal is highlighted, and urgency is stressed. The email newsletter is simple yet undoubtedly effective.
This is another excellent example of a post-holiday email newsletter. Prolonging offers is a common practice that helps not just to catch subscribers who have missed the active sales window but also treat with some extra perks for those who have already made a purchase.
Note how Avon’s team weaved their brand into the winter theme. They showed bestsellers with an enhanced visual identity. Brilliant.
The email newsletter “Almost Gone” is a perfect example of less is more. It includes only two elements: a big snowflake in motion and a prominent call-to-action button. Both are used to stress urgency. While the snowflake imitates the clock with disappearing hands, the CTA announces it out loud.
Thanks to pastel coloring, white space, and primitive shapes, the email newsletter does not overwhelm readers; it just passes on the necessary message.
The email newsletter from American Eagle Outfitters is focused on a new collection that is showed in an amusing and eye-catching manner. Here you can see winter accessories moving in a clockwise direction. This idea helps to direct attention toward the huge variety and imitate the timer. As a result, it lures potential clients in with brand-new things and creates a sense of urgency.
January can be a challenging month for subscribers and retailers. Therefore, cheer up both sides by creating an engaging email newsletter, like the team behind Novelty Shop.
Using a funny animated gif and some smart words, the team has lightened up the atmosphere and touted one of its popular goods. Note the colors here. In the midst of the winter season, you may feel sick and tired of everything white and blue. Therefore, bright tones may save the day, just like this beautiful pink color.
One-Day Sale is an ideal email marketing campaign for long, cold winter days, especially those that come in mid of January. Much like J.Crew, this one sticks to a beautiful, yet simple design where the wintery landscape does all the heavy lifting. The team also used an animated gif to spice things up.
Valentine’s Day is not the only occasion in February to send out an email newsletter. Spring is coming. You can capitalize on that. Just take a look at this marvelous pre-spring sale blast that was sent in the middle of the month.
The design of the email newsletter is an absolute classic. Here the image background serves as a tool for establishing atmosphere. Big typography and contrasting color throw the spotlight on the offer. Color is chosen in a way to mute the spring motifs reminding contacts that it is still winter. Clever.
At Christmas, it is more blessed to give than to receive. Simple salutations can bring more profit than commercial email newsletters. Just look at the email blast from Curate Labs.
All it does is wish Happy Holidays! Is not it nice? And does it appeal to you? A simple illustration and warm words are just what the doctor ordered for the most wonderful time of the year.
Last but not least
By now you have an idea of what to include inside your winter email newsletter and how to format and design it. However, that is not all. According to the best practices for creating high-converting email newsletters, there are some important things that should be done. Let’s list the essentials:
Create a subject line that will stand out and make contacts to open the letter.
Distortion effects are incredibly popular among web artists these days. Throughout the year, we saw their dominance. However, one particular effect separates itself from the others and stands on its own. And it is the glitch effect.
Once considered undesirable, this short-lived fault in a system has skillfully transformed into a modern feature that everyone wants to have in his or her project. From the ugly duckling to the beautiful swan, it has taken the long path. And now it can be called a real treasure in the web designer’s arsenal.
The great thing about the glitch effect is that, in our eyes, it has turned into a viable instrument. But in fact, it has remained true to its roots. It is the same distortion effect that interferes with the ideal picture. Nevertheless, we have grown to like it and have even found ways to benefit from it.
Let us consider some exceptional examples, where the glitch effect improves the user experience rather than ruins it, giving the website a unique appeal.
The Complete Toolbox for Web Designers
Unlimited Downloads: 1,000,000 Web Templates, Themes, Plugins, Design Assets, and much more!
Chafik Design is an exceptional example that reveals the entire beauty of distortion effects. It shows us what can be done with smart usage of glitches.
This personal portfolio of Moucharaf Chafik impresses online visitors from the get-go. It feels high-tech and even a bit extraterrestrial, standing out from the crowd without a doubt. Here the glitch effect plays a vital role in creating a beautiful user experience.
centerpiece, taglines and navigation. In all, every aspect of the hero area has its corrupting, yet striking touch.
The artist uses a combination of various types of glitches. There is a bit of a digital effect, a glassy effect that adds cracked and shattered elements and modern ones that add stripes and pixels in a chaotic way.
The website is a sheer source of inspiration.
If this glitch domination is not your cup of tea, then there are some other fantastic examples where its usage is more subtle. The websites listed below employ it just like an icing to top off the overall aesthetic.
Meet the Fly is a perfect case in point. Here, the glitch effect is just an accompanying tool. It is an analog kind of solution that distorts the ideal picture, feeling like an old TV.
While it can easily evoke nostalgia, here it joins forces with a sophisticated surrounding – meeting another range of emotions. Therefore, it is just a part of the performance whose task is to grab the attention and make the video player look exceptional.
Note, once again, the analog-style glitch effect perfectly cooperates with a high-end tech atmosphere.
The European Fashion Map
Here the glitch effect is featured only in the introductory section that precedes the main website. Much like in the previous example, this pixel distortion effect brings to mind analog TV sets that were famous for such errors. Along with a noisy background, it creates a proper anticipation that certainly ignites interest.
24 Hour Ace
24 Hour Ace is a typical example of a website that gets the most out of the powerful side of brutality. The site feels rustic, a bit crude, yet undoubtedly epic. The team has skillfully played with 3D to recreate a bizarre environment where the products are the star of the show. Here, glitch effect goes well with the entourage, finishing off the composition.
Francesco Michelini
The personal portfolio of Francesco Michelini skillfully embraces chaos, making maximum use of layered aesthetics. There are many things to marvel at: elegant line-style typography, moving backgrounds, image-based hover effects, and of course, the glitch effect.
Unlike the majority presented in our collection, here the distortion is used as a transition that accompanies shifting between the slides. However, it affects not the entire screen, but only a small part of it. It occurs right where the portrait of the artist is placed, giving it an extra focus. Simple and clever.
Project Obsolete
The team behind Project Obsolete has used a digital kind of glitch effect. It is here where you can see an edgy and mechanical feeling. Although it is scarcely applied, showing itself from time to time, it is enough to catch an eye and make itself heard.
Note the trend ideally blends into the high-tech atmosphere of the project, reinforcing the entire theme.
Whoamama Design
Noise and glitch are just destined to work together. When used in tandem, they produce quite a powerful impact. It feels like the picture is complete.
Whoamama Design shows this in practice. Here, we can see a solution that meets our expectations and certainly separates the website from the others.
Dino Balliana
Throughout the rest of our collection, the glitch effect interferes with the overall design. But here it is used in tandem with only one component: typography. This is another popular way to utilize the trend.
The team employs the distortion effect to finish off the play with letters. It adds to realistic appeal and makes switching between symbols look attractive and intriguing.
I will be direct. User Experience is the biggest factor that affects your growth. If you want your product to be successful at the end of the day, you need to improve and optimize the experience of your users because the satisfaction of your users is what determines your overall success. There are dozens of bad UX examples that prevent famous products from being flawless.
Some products might already be too mainstream for its users to quit when experienced flaws, so it may look like they are getting away with those. You, however, can not take the risk of designing bad UX. If your users have a hard time getting acquainted with your product or basically using it, they can easily switch to another solution.
Although it will be useful to point out the wrongs of your competitors to, um… steal their customers, it would be extremely valuable to learn from their mistakes in designing UX. Here are 6 bad UX examples that you can see all around and avoid.
The case: We cannot deny that the ads are a major source of income for digital product owners. And some websites and apps use it as a trick to cheat on the users to get clicks. But, at what cost?
Why a bad UX: When a user clicks to open the link of a page they want to see, there pops an endless number of ads. What’s more terrible is sometimes when you click on “X” to close the ad, it directs you to another ad. It’s like the designers mock your communication skills and champion themselves as the winners of a prank contest. Expecting to have a successful product when having such flows integrated would be foolish since your users will quit using your product after going through torture like these.
2) Deleted(?) Messages on Whatsapp
The case: WhatsApp is famous for its encrypted messages and security concerns. But probably its designers are too honest to get you off the hook of an accidentally-sent or a regretted message. On WhatsApp, when you try to delete your message for everyone, it only hides the content and presents both sides with a note “This message was deleted.”.
Why a bad UX: Therefore, the other side gets aware of the existence of such a message anyway. It is not deleting, but hiding the content, to be honest. If you are offering your users a feature, try to provide it properly. Even huge companies sometimes forget this.
3) Wait, this isn’t what I’m looking for!
The case: Let’s say you’re looking for a PDF online, or maybe you are trying to go to a page you are interested in. Some sites seem like they are offering you the link by ornamenting it with bold, italic, or underlined characters. It sounds good.
Why a bad UX: However, when you canalize your hopes into your touchpad and click, you get disappointed because it’s not even clickable. Or the worst scenario: The link goes to an irrelevant page. The creators of this hoax should question their ways to get the most clicks. If not, their brand value definitely will decrease significantly.
4) Clickbait 101
The case: Remember a time when you were scrolling down on any social media feed. When you see some news with scandalous headlines, you may open them. But this doesn’t mean you won’t get disappointed if you may get directed to some other content.
Why a bad UX: You probably opened it because you wanted to learn more about what you saw in the headline. Some designers’ utmost priority is only to get the attention of users. UX design, as a field, was born to eradicate the motivations of these so-called “designers”. You are not only displaying a bad example of UX here, but you are also lying to your customers.
5) Looks good, but what does it do exactly?
The case: Most users value the presentation of what’s offered to them. Colors, shapes, font, and so many other things are all critical. But you may come across a landing page with a perfect look, but fails to deliver the message.
Why a bad UX: If you have difficulty making sense of a page, this is one of the bad UX examples. Though an artistic design may sound preferable, it shouldn’t be chosen over practicality and usability. The majority of the idea behind UX design explores the interaction of users with a product. Although it would be a big plus to have a breathtaking design, without getting your users to experience their Aha! moments, it would not make it a product eligible to be successful.
The case: Spotify is a successful product loved and used by millions of users around the world. However, some users don’t know about some of its features, especially the podcast feature. Many users are not using the application to its full extent.
Why a bad UX: When you design a product full of useful features, but the users are not aware of them, this is also considered a bad UX experience. You need to know your user and provide them an easy path to your features. If no one knows about them, what is the use of these features?
To overcome such problems on feature and product adoption, working with a 3rd party onboarding software might be the solution you need. Learn all about product adoption here.
A good UX experience gives your audience a valid reason to use your product. Know your audience and appeal to their preferences to avoid ending up in lists such as this one. You can learn from these bad UX examples and avoid them in your future designs. Also, testing some functions on users can be of great help for UX designers. And maybe they may create an easily accessible feedback points for users, and try to get the most out of them.
Creating user persona is key to reach effective target audience for product and service design. User persona examples in UX will illuminate your path to create perfectly optimized Saas products.
What is a User Persona?
In the digital age, audiences are demanding user-oriented products. To respond to this kind of demand, you need to know who your users are and what they like. Even if your SaaS product addresses users from different backgrounds, there have to be certain common points. User personas, also known as UX personas, are the characters, which will represent the pattern covering these points.
How to create User Personas
Creating precise user personas is not an easy job. You have to make tons of research on your real potential customers, gather the information you collected, pick out common points and then carefully define your user persona.
The key point in creating a user persona is working with real people. As long as your personas are based on actual human beings, your product will continuously gain new customers. For more information on how user personas are created and what the key points of doing so are, check out our article How to Create User Personas.
Typical user persona examples
If you are new to creating user personas, these user persona examples will help you at the starting point of your SaaS product design.
Persona 1: John, an entrepreneur
Name: John Shaw
Occupation: Owner of a bookshop, self-employed
Demographic:
34 years old;
Lives in New York;
Married with 2-year-old child;
Has a middle-income level;
He changed his occupation 3 years ago after getting married.
John’s story:
John was working for a global company and did not have much leisure time as his work was taking too much time. To start a family, he decided to quit his job and invest his savings in a bookshop, which has been his dream since his university years. All he wants to do is being able to maintain his bookshop.
What challenges John:
John is not great at accounting and he is getting lost while following the money he spends and earns. How much profit he makes at the end of the month is the biggest question he needs an answer to. He has to spend a long time to make an efficient analysis. And he quitted his corporate job to spend more time with his family.
What John needs:
John needs a product that will handle the analysis of his income. He is looking for an easy-to-use product that enables him to see how many books he has sold, how much money he has made, how much money he has spent, which category and title is the best seller of his shop. This product must give precise results and shorten the time he spends on managing the shop.
His popular quote about his needs: “I have forgotten to take notes about today’s purchases, AGAIN!”
Persona 2: Catelyn, a Customer Success Manager
Name: Catelyn Brown
Occupation: Customer Success Manager
Demographic:
29 years old,
Lives in London, UK.
Married,
Has a middle-income-level,
Catelyn’s Story:
Catelyn is the customer success manager of a software company that provides customers with investing and trading tools. But their customers have a hard time understanding their tools and this situation affects their business. As this problem is Catelyn’s concern due to her position, her boss requests an immediate solution to it. Catelyn is ready to prepare an onboarding process which will help their customers understand the use of the tool.
What Challenges Catelyn:
A customer onboarding process requires a lot of coding and designing. And both these parts have to be fully integrated with each other. Catelyn neither knows how to code nor design, so she has a hard time communicating with her developers and designers on what the onboarding process should work and look like. She wishes she was an expert on coding and design so that she could create what she has in mind easily.
What Catelyn Needs:
Catelyn needs to be able to design this customer onboarding process by herself, as she designed. Instead of working with the company’s developers and designers, she needs to find a 3rd party company that will provide Catelyn with an easy to use user onboarding software. In that tool provided, she must not be expected to know how to code, or to create the designs for the customer onboarding flow.
Her popular quote about her needs: “I want to create our onboarding flow by myself without hours coding and designing!”
Persona 3: Rebecca, a YouTuber
Name: Rebecca Stone
Occupation: YouTuber
Demographic:
19 years old,
Lives in Austin, Texas
Has money thanks to her family of high-income level,
Lives in her own apartment,
Lives alone.
Rebecca’s story:
Rebecca is a traveler and she is recording and sharing her trips, wherever she goes. Her family is considering her YouTube channel as a hobby. They are constantly telling her that she is wasting her time. They even said that they will no longer pay for her living expenses. However, she insists on making a business out of it. She is just a starter and needs tools that will help her understand her statistics.
What challenges Rebecca:
Rebecca can use a camera and edit her own videos. She knows all the technical processes about making a video. What challenges her is the distribution of her own videos. Even though her videos are well-prepared and interesting, she cannot reach her target audience. She has no clue how to analyze the data she has.
What Rebecca needs:
Rebecca does not want to solve her problem by hiring professionals. She is looking for solutions where she can manage on her own and is ready to pay any amount. The primary data she needs to achieve are the popular keywords searched by her audience, whether her videos are well-optimized for search engines, which platforms her audience uses the most, and how her statistics are doing.
Her popular quote about her needs: “I need a robot that will be my digital marketing assistant!”
In conclusion
As can be seen from the three user persona examples, you need to create profiles with personal stories. These stories will help you imagine how your SaaS product is used. You will know if there is a missing point. Once you succeed in creating a realistic persona, you will clearly see the indispensable features of your product because a SaaS product requires to satisfy the needs and the preferences of real users. Without a user persona, you might get lost during your design process.
Variable fonts are perhaps the biggest thing to happen to web typography since the advent of web fonts. They are poised to add another layer of flexibility to the web designer’s toolbox. Because these fonts can contain numerous styles within a single file, they open up new possibilities in special effects and efficiency.
While the number of available variable font packages is growing, the selection isn’t huge just yet. And then there’s the whole issue regarding lack of support in older browsers. But those limitations aren’t going to last much longer. Thus, it’s a good idea to study up now.
We’ve collected some fantastic variable font examples to help demonstrate what is possible. Just note that, in order to actually see these examples in their full glory, you’ll need to use the latest version of Chrome, Edge, Firefox, Opera or Safari.
The Web Designer Toolbox
Unlimited Downloads: 1,000,000 Web Templates, Themes, Plugins, Design Assets, and much more!
Running Free
Glyphs are kind of a big deal these days, with the likes of Font Awesome and Dashicons being in such wide use. In this example, a variable font with a single glyph of an emoji horse was used to create a nifty animation. Through the use of CSS font-variation-settings, the author was able to ensure an ultra-smooth effect.
One of the big advantages of having the entirety of a font’s styles in one file is that you can transition between them in a snap. In this case, we see a highly-detailed and mesmerizing animation between different weights of the IBM Plex Sans font.
Here’s an example of a variable font being used as part of a larger piece of online art. Instead of animating a single word or headline, this snippet mimics a poster – albeit an animated one. The transition from hollow characters to filled (and back again) is truly slick. The sequencing is spot on. Years ago, this might have taken hours of tedious work in Flash to accomplish.
Perhaps no snippet in this collection better demonstrates what a variable font is than this one. Use the sliders at the bottom of the screen to add custom weight, stretch and sizing to the Venn VF font. Notice the ease with which the settings changes are displayed.
At first glance, this example looks like a nicely-formatted poem. But there’s more than just a basic title and text here. Click on the “Jigger the First Stanza” and “Rejigger Title” buttons to the right and you’ll be in for a treat. Font styles change fluidly and instantaneously. And it’s a great demonstration of how individual characters can be targeted as well.
In this example, various selections of text are highlighted in a paragraph. What’s especially neat about this technique is that it uses Intersection Observer to target text as it comes into view. The initial highlighting is actually just a slight color variance, but hover over that text to view an attention-grabbing animation.
When you combine variable fonts, CSS3 and JavaScript, great things can happen. And you don’t need to look further than this example to see why. This attractive text has a delightful stretchy hover effect, which is cool on its own. But change the included settings panel and you’ll get an even more in-depth sense of what is possible.
Let’s close things out with something quite unique. This snippet uses the WHOA variable font to create an incredible 3D effect that shifts the view of this outline text based on your cursor position. Again, this is something that, a few years ago, would require some serious animation software to achieve. Now, the different perspectives are built right into the font. From there, it’s a matter of using some clever coding to put it in motion.
With the use of variable fonts, web typography has become an even greater resource for creating a compelling UX. Thanks to their ability to instantly change styles and target specific characters through data splitting, a whole new level of special effects are possible.
As the examples above demonstrate, there is plenty of room for creativity. And what’s really exciting is that the fonts themselves have so many goodies baked right in.
That being said, we’re really just beginning to scratch the surface of what these fonts can do. It will be amazing to see what the future brings.
How UI contributes to anime narrative, and what we can learn from the underlying UX concept.
UI in Anime is amazing. Partially because it’s overdone, partially because it’s choreographed into a narrative, and partially because the creators detail every pixel to the fullest extent(without business logic to restrain them.) And there’s sound effects! It’s UI created for the sake of *feeling* like UI — intuitive, effective, accessible… all the things that show that a user has achieved mastery of a tool. It’s beautiful. ???
I recently stumbled on a tumblr blog documenting Anime UI. While it was cool to see a waterfall of colorful gifs, the content felt unsubstantiated. I wrote this post to explain a few tasty chunks of Anime UI. Starting with their contribution to the anime’s narrative, and then the underly UX concept.
Let’s get started with a favorite:
Gundam Wing’s ZERO System
Description: The ZERO System suggests military maneuvers to the pilots of weaponized robots. For instance, every possible way to to attack another enemy robot. Although represented physically as an orb (above), the Zero system is interfaced with the user’s brain. Although it presents all possible actions, it’s still the pilot’s responsibility to decide and act.
How it was used as a plot device: In classic anime form, It’s used to exalt the power of keystone characters. Since the ZERO System generates endless options, keystone characters are shown as *superior* for their ability to filter and decide calmly. Weaker characters suffer a period of insanity due to information overload.
Information Overload
Relevant Tech Industry: As a technology that overlays suggestions atop reality, ZERO System is a form of AR.
Relevance to UX: ZERO System displays the endless actions available. Consequently it causes decision fatigue. It shows there are power-users who can can handle information overload, but that the vast majority of users are easily overwhelmed. My personal takeaway: the power-user is rare, but exalted. Don’t design for just for them.
Source: Gundam Wing(E24)
Virtual Meeting Room
Description: A virtual meeting room used for government meetings. The meeting organizer has control of the environment and guests.
How it was used as a plot device: The meeting room is used to display the power dynamic. For example, in the second episode of the first season, Gendo Ikari is shown within the meeting room. We know from context that Gendo is being chastised for going over-budget. The stark lighting in the virtual room makes it easy to focus on the guest’s expressions, and thus better represents the scrutiny directed towards Gendo.
VR can enhance the sensation of scrutiny. Yay.
Relevant Tech Industry: Virtual Reality
Relevance to UX: This Anime UX shows the importance of Environmental Ambience. In the future, what will virtual meeting rooms look like? Will we be rendered in sterile rooms to promote focus? Or grassy fields to encourage brainstorming? For any given meeting, what type of virtual room best promotes the purpose? Perhaps this virtual meeting room’s ‘skin’ was chosen by the host to communicate the intent of the meeting. Source: NEON Genesis Evangelion(S1E2)
AKIRA Meter
Description: The rings in this holographic represent the energy given off by AKIRA. A form of universal energy. The closer AKIRA is the higher the rings dance and flicker.
How it was used as a plot device: When we first see the meter, the rings move subtly. The negative space around the crown suggests that the readings will grow. This creates a sense of anticipation.
Beautiful Data
Relevant Tech Industry: Internet of Things(IOT), Data Representation
Relevance to UX:Data Visualization. We often think of data as something we access through a computer, for the purpose of deriving a conclusion. AKIRA’s Energy Meter shows us that data can be an element of interior decor that blurs the line between functional and beautiful.
Source: AKIRA (1:26:32)
“To Be Continued”
If I misinterpreted anything please let me know. I’m thinking about doing a sequel article, so if you have any favorite Anime UIs, I’d love to turn them into a case study. Please share!
Just like any other business or product, a podcast’s branding is equally important to attracting and growing your target audience. When searching through the plethora of podcast shows on iTunes, Google, or even social media, remember that your podcast cover art serves as a first impression to potential listeners. In other words, your artwork has a huge impact on whether people will click on your show, or keep scrolling through.
If you’re a podcaster, producer, or graphic designer looking for branding inspiration, you’re in the right place. Today we’re highlighting podcast logo and branding Shots designed by our very own community of Dribbblers. Whether you’re designing art for your own podcast or for a client’s, you’ll find plenty of unique, high-quality artwork here that goes beyond the typical podcast headphones symbol!
Have fun browsing through, and discover some awesome new podcasts while you’re at it!
Looking for some custom podcast artwork to brand your show? Hire a freelance designer on Dribbble to bring your vision to life, so you can focus on podcasting while they set your show up for success.
If you haven’t already, check out Dribbble’s very own design podcast, Overtime, where we chat with creatives to go behind the scenes of their work! For a roundup of other design themed podcasts to inspire you, check out our list of 10 podcasts for every kind of designer.
Rebranding usually occurs when a business decides to change a significant element of its identity.
This change can include something as obvious as a new brand name or logo design, or something more in-depth like a shift in communication or new company values.
Whatever the reason for that change might be, a rebranding strategy is crucial for success.
A successful rebranding strategy can solve various problems and challenges such as stagnating business growth, change in target markets or expansion to new ones, unaligned management, confused or alienated clients, loss of competitive advantages, and so on.
With the right and complete implementation of a rebranding strategy, it surely will make a significant difference for a business.
We bring you eight rebranding examples of successful strategies that could inspire you to make these beneficial changes to your business.
1 – Made in Bhutan
Before
Bhutan’s Department of Trade and the United Nations Development Program created a strategy called ‘Made in Bhutan‘ to define how to promote the country’s goods and services.
As Bhutan is not among the most popular tourist destinations due to developing economy and lack of infrastructure, this stunning Himalayan treasure is deprived of a status its neighbouring countries are enjoying for years now.
They created a unique philosophy called the Gross National Happiness Index.
After
The goal was to highlight the country’s spiritual values, authentic beliefs and stunning tradition.
With the unification of the country’s brand, all sectors have implemented this strategy to support Bhutan’s efforts in positioning the country on the map along with its neighbours.
To promote a country which was not successful when talking about tourism, highlighting its strengths and unifying them under a unique idea was the right strategy.
Bhutan is now known as a country of happiness and high-quality tourism.
2 – Coty Inc.
Before
Coty has been present on the competitive fragrance market for over a hundred years.
When it acquired Specialty Beauty Business in 2016, it became the third-largest global beauty company.
To become the leader in the beauty industry, the company had to restructure and reshuffle 20,000 of employees under one, a new entity.
After
The rebranding strategy was based on the homogeneous representation of beauty.
The identity switched to joyful, colourful, and multifaceted to celebrate and liberate the diversity of beauty through the symbol of a butterfly.
This rebranding process has given a completely new life to Coty by rejuvenating the spirit of tradition with a disruptive idea.
As any quality rebranding strategy of turning two brands into one, this one combined strengths from both brands to create an entirely new identity for both their employees and their target audience.
3 – Co-Op
Before
In 2013, it was revealed that there was a hole of more than a billion pounds in the Co-op bank’s accounts.
The same year, the chairman of the bank at that time was caught up in a personal scandal.
All this caused a severe crisis for the whole Co-operative Group.
With almost two centuries of history, Co-op bank decided to adopt a visual identity that their customers would recognise and were happy to be a part of.
After
They rewarded its members with 5% on all purchases of their brand products in addition to the annual dividend.
The Co-op members also started receiving a 1% reward to donate to a local charity.
With such a rebranding strategy, Co-op managed to set fundamental for their business with community projects instead of just supporting them.
The idea of tradition was highlighted with a new identity to remind their customers not just of Co-op tradition but of a familiar point in members’ lives.
4 – Airbnb
Before
Airbnb was launched in 2008 as an online marketplace for people to list their owned or rented properties.
Regardless of its global success, it became pretty unclear what’s rentable and what’s not.
The old logo was replaced with a new one; they changed the brand font and created a bespoke colour called Rausch.
After
That colour was named in honour of the street where the story of Airbnb started, delivering the emotion and passion of the brand.
The new icon “The Bélo” highlighted four principles – People, Places, Love, and Airbnb, blended into a single “A” shape.
For Airbnb, rebranding meant to define a clear brand that would be understandable, approachable and attractive to its audience.
5 – Hewlett Packard Enterprise
Before
The Hewlett-Packard Company announced it would split into two separate entities – HP, Inc. and Hewlett Packard Enterprise (HPE).
The latter included the Machine as a vision for their future of computing.
The Machine is designed to bring the promise of Memory-Driven Computing.
The rebranding challenge was to craft the vision, position and identity for the Machine and brand architecture around it.
After
The M mark and proprietary typography were created for HPE signals making it a new language and way of thinking about computing technology fundamentals.
It was like a futuristic, new language for an innovative and forward-thinking nature of the company’s technology solutions.
This visual identity of the Machine demonstrated the HPE’s imperative to remain agile, decisive and fast in this face-paced world.
6 – GLPS
Before
GLPS is a company specialised in lightning protection for the wind, aerospace, and construction industries.
As such, they’re tasked with selling protection for one of nature’s most chaotic and uncontrollable phenomena.
However, the sense of power and control was necessary for GLPS, so their rebranding strategy focused on the idea of empowering their target audience to take charge.
After
Their logo managed to demonstrate it perfectly by combining the lighting surge between clean and orderly type, which is a visual symbol of their protection solutions.
With their rebranding strategy, GLPS succeed in adding an element of control in the world of chaos to show their audience they can be trusted, and their expertise in this field is unquestionable.
7 – Burberry
Before
With Angela Ahrendts as the new CEO of Burberry in 2006, the company started focusing on telling their story of moving forward to emphasise the best aspects of the brand.
Burberry was a synonym for fashion tradition and success for years, but something was missing.
So, they’ve focused more on innovation and embraced the new wave of social media communication and promotion.
In other words, Burberry started to engage their consumers to keep up with the trends digitally.
After
They even redesigned their Regent street story to reflect their official website connecting these both experiences: digital and retail.
Burberry also made a strong focus on their “Britishness” by employing young British actors, musicians and models.
By recognising what their customers need in this digital age, the brand managed to stay true to its traditional values and reshaped them for new customer experience – the digital one.
8 – Ravensbourne University
Before
Ravensbourne University, founded in 1965, wanted to become an independent University with degree-awarding powers.
With revolutionising the experience for their students, existing and potential, Ravensbourne managed to position itself as an institution which is appreciated for the way it interacts with its audience.
After all, the way universities communicate with their audience will directly influence their reputation.
Concluding the Rebranding Examples
Implementing a successful rebranding strategy is not just reserved for companies which are struggling to survive in the market.
Rebranding can also be a proactive solution to induce business growth or expand to new markets.
Regardless of the reason, the business will always benefit from rebranding if it’s based on market research, and it gives customers something new or something improved.
Some more useful links and rebranding examples for your inspiration:
Figma announced yesterday that they will be launching Figma Plugins on August 1st. Personally it was one of the few things I really missed when I switched from Sketch to Figma and i’m very excited to use it in the near future. Figma will be live streaming the announcement and present demos from upcoming plugins.
The Figma team was in Amsterdam two weeks ago to tell more about Plugins at their meet-up located in the Adyen office. After seeing some live demos I got excited and did some research online. I have collected 10 examples below from creators that are working on plugins.
Probably the one which i’m the most excited about. This plugin seems to be able to create themes and apply them to different libraries and make it easy to swap between themes.
Yummygum is a design studio from Amsterdam which released the Confetti plugin a while ago for Sketch. It’s a simple plugin which allows you to create interesting shape patterns for your project and it seems that they are also working on a Figma version.
With Stark you can validate your design by certain accessibility guidelines. This plugin is currently only available for Adobe XD and Sketch. On Twitter they announced the Figma version as well.
This plugins allows you to look for select layers based on selected multiple specific properties inside a specific frame or the whole canvas.
Dave is the guy behind the know Paddy plugin from Sketch which enables you to make dynamic components. He also seems to be working on a plugin that lets you trace images and convert it to a vector shape.
centerpiece, taglines and navigation. In all, every aspect of the hero area has its corrupting, yet striking touch.
The European Fashion Map
24 Hour Ace
Francesco Michelini
Project Obsolete
Whoamama Design
Dino Balliana
