404 (page not found) design inspiration

404 Creatives: Exploring the Artistry of 404 Error Page Design

via Muzli design inspiration hubLooking for more daily inspiration?Download Muzli extension — your go-to source for design inspiration!Is there a pattern for designing good 404 UI?Welcome to the realm of 404 pages, also known as “404, Page Not Found”, where error messages transcend mere notifications and transform into canvases of creativity. These seemingly mundane digital dead-ends have evolved into captivating showcases of artistic expression, reflecting the ingenuity and personality of their creators.In this article, we delve into the significance of 404 pages, exploring how they serve as more than just error prompts but as opportunities for brands to engage, entertain, and leave a lasting impression on visitors. Broken links are a common occurrence on the web, often leading users to encounter the dreaded 404 error page when attempting to access a non-existent or moved page. While initially perceived as a frustration, these error pages have evolved into crucial elements of web design and user experience.From whimsical illustrations to witty quips, each 404 page offers a glimpse into the brand’s character and commitment to user experience. Incorporating humor, creativity, or helpful navigation options into a 404 page can transform a moment of disappointment into a memorable interaction.Join us on a journey through some of the most imaginative and thought-provoking 404 pages across the web, where every error becomes an invitation to explore the unexpected and embrace the delightful quirks of digital mishaps. By embracing creativity and functionality in their design, website owners can transform these error pages into valuable touchpoints that enhance user experience, reinforce brand identity, and contribute to overall site performance.404 Creative examples:https://www.somefolk.co.uk/404https://springsummer.dk/404https://prand-n.ava-case.com/404https://www.santateresafest.ca/en/404/https://brewdistrict24.com/404https://letude.group/404https://alphamark.design/404errorhttps://www.flawgallery.com/404https://www.niccolomiranda.com/404https://makepill.com/404https://www.powell-studio.com/404https://gapsystudio.com/serices/https://www.depo.studio/404https://eventiveagency.com/404errorhttps://www.rawlab.co/404https://studio.playgoals.com/404https://www.dfy.co.kr/404/https://wildcatterla.com/404https://control.chipsa.ru/404https://www.epic.net/404/https://lunchbox.io/404https://c2montreal.com/sdfhttps://alongside.vahrushev.eu/404/https://search.muz.li/404https://www.designisfunny.co/404https://lemma.studio/404https://empiempi.me/404https://humbleteam.com/404https://www.goodkidsagency.com/404https://gentilhomme.com/en/404/https://www.haritos.co/404https://marioecg.com/404https://flecto.io/404https://speedy.io/404https://www.proxymadesign.com/404https://www.rockystudio.pt/404https://www.graphichunters.com/404https://www.henrynorthington.com/404https://www.gubrica.com/404https://fabbricagroup.fr/404https://maelanlemeur.com/404https://www.avroko.com/404https://www.rcarecords.com/404https://katyasmolianinova.com/errorhttps://marsbranding.com/404https://www.planet-lizard.com/404https://altsdigital.com/404https://www.landbrukskvartalet.no/404https://abhishekjha.me/404https://momset.store/404/https://www.castoretpollux.com/404https://www.giuligartner.com/404https://notoriousnooch.co/404https://www.keepgrading.com/404https://bear-rabe.com/404https://thisismagma.com/404https://www.humanastudio.com/404https://significa.co/404https://hematogenix.com/404https://secretsgravityfalls.tilda.ws/en/oopshttps://olhauzhykova.com/spaceneedle.htmlhttps://www.clouarchitects.com/404https://www.k95.it/en/404https://basement.studio/404https://www.howdy.gr/404https://microwaver59.com/404https://annoyingmuseum.zendesk.com/404https://arcr.ru/404-404/https://mediainnovatiecampus.nl/404https://chirpley.ai/404.htmlhttps://www.aquerone.com/404https://advanced.team/404https://www.magnetism.fr/en/404https://craiecraie.com/404https://etiennebarbedette.com/404404 Creatives: Exploring the Artistry of 404 Error Page Design was originally published in Muzli - Design Inspiration on Medium, where people are continuing the conversation by highlighting and responding to this story.

Master 404 Error Page Designing #12hacks

I’m going to share the complete hacks regarding designing 404 page but before that understand why it’s happening and what are the consequences we have to face due to this. After understanding this as a designer we can design the best 404 pages with better user experience.Real-Life ScenarioWhen you are at an unknown place, and you get lost there, and neither you have the map. Now, you start getting frustrated.And at the time, if someone helps you to find your path. That’s feeling is great, agree?404 Error Page is similar to real-life problems and you just have to deal with it the same way as other problems.You can take 404 Page as an opportunity to make as welcoming, as engaging as possible to offer a variety of solutions to reduce customer frustration and let them stay on the site/app much longer.Default 404 Error PageIf you don’t take 404 Page seriously, not giving that much importance as another page then you have to face consequences.Bad NewsAs research concluded, 74% of customers leave the site after they face a 404-error pageGood NewsOnly 23% of visitors that encounter a 404 page make a second attempt to find the missing page.Understanding of ErrorTo create a best 404 page, you have to understand:The type of 404 errorWho causes this error?Type of 404 ErrorError 404 | HTTP 404404 File Not FoundThe page cannot be foundThe requested URL not found on this serverHTTP 404 Not Found | 404 Page Not FoundWho causes this error?Either it’s come from the user side or it's from the website side. Right?If the error is from the user side then they typed the link incorrectly. You can’t control what person type into their keyboard.Simple Categorization of ErrorSimple we can categorize 404 Errors in 3 Simple Parts:Page is deletedUser Type wrong URLThe link does not exist nowDiagrammatic View: 404 ConsequencesBut we have to understand that “Mistakes are a part of our lives"Now, after understanding what’s 404 is all about. Start designing it with proper hacks.Hack 1: Maintaining brand consistencyAlways maintain consistency with your fonts, themes, logo, header, footer like other pages. So, that you’ll find thisa page similar to others.Real website example:Qatar 404 Error pageHack 2: Provide NavigationProvide navigation on the 404 page so that users can navigate from that page to another page while remaining on your site.Real website example:Pexels 404 Error pageHack 3: Provide Search boxProviding a search box, you can easily navigate from the 404 page to any other page. It’ll give the opportunity to the user to type.Real website example:GitHub 404 Error pageHack 4: Showing emotionsYou can provide emotions to your 404-page design so that it’ll look more original and realistic like “oops”, “Ohh”, “Awhhk”, “Hmmm”. Here your main goal is to target people’s emotions.Real website example:Pixar 404 Error PageHack 5: Be ApologeticThe more important part of designing a 404 page always shows an apology, even if it’s user fault. The main goal of apology is that you are showing your user that you really value them.Real website example:Amazon 404 Error PageHack 6: Keep your error message simpleDon’t’ show scary text and image here. Always provide a simple and clear message to your user. “Minimalism is best for any design”. Plain language helps every user to understand why they are getting this 404 error page.Real website example:Linkedin 404 Error PageHack 7: Add useful links onlyAdd a popular page of your website or any other important links on your 404 Page. Don’t try to overload your 404 Page with too many links.Real website example:Airbnb Pixar 404 Error PageHack 8: Give Homepage Link [CTA]Adding the home page button is important to add to your 404 page so that users come back to the main page because they are lost. So, you’ve to guide them and bring them back.Real website example:Udacity Pixar 404 Error PageHack 9: Add a bit of fun by adding Image | Animation | IllustrationYou can use illustration/images/illustration, images related to your theme or product by combining 404 in mind.Real website example:Grammarly Pixar 404 Error PageHack 10: Show Popular PostsAdding a popular page on your 404 page provide varieties to the users to maintain their interest.Real website example:Flickr Pixar 404 Error PageHack 11: Use of interactivityProviding interactivity like adding games, quizzes, drawing, etc so that users can interact with your 404 page and don’t feel bore while seeing it.Real website example:Dev Pixar 404 Error PageDribbble Pixar 404 Error PageHack 12: Show matching resultsThis trick is also helpful as if your user did a mistake by typing ountain then you can show other results matching with the term that the user wrote. It'll also give varieties to users to explore.Real website example:Medium Pixar 404 Error PageIt doesn’t mean include all these elements on one page. The designer can make the decision base upon the requirement/priority.”404 Error Page Design: Don’ts Checklist1. Not treating the same way as other website pages.2. Blaming users that it's their mistake.3. Not giving enough information about the error.4. Not telling how to recover from the error.5. Overloading the page with many links6. Using the server's language for telling errors not user's language404 Error Page Design: Do’s Checklist1. Maintaining brand consistency2. Provide Navigation3. Keep your error message simple4. Show matching results5. Provide a Search box6. Give Homepage Link [CTA]7. Be Apologetic8. Show Popular Posts9. Add useful links only10. Add a bit of fun by adding Image | Animation | Illustration11. Showing emotions12. Use of interactivityIf you love this post, please give a like to boost my confidence to write more posts for this community. I’m also sharing a short microblog on my Instagram(designer.akash) page also.RegardsAkashMaster 404 Error Page Designing #12hacks was originally published in Muzli - Design Inspiration on Medium, where people are continuing the conversation by highlighting and responding to this story.

How to Create an Effective 404 Error Page

Details are often the most interesting aspects of a product. Little details make up the product as the whole. But no matter what these details are — preloaders, icons, or error pages — they must complement the general look and feel of your app. In this article, we unfold how to create a beautiful and effective error page. An […] The post How to Create an Effective 404 Error Page appeared first on Design your way.

Error Screens and Messages: Tips and Practices

Any way to success is made of not only achievements but also failures and errors. With digital products it works the same way: only in the perfect world, do people and apps communicate with no mistakes, misunderstandings, technical faults, and unpredictable scenarios. Well, none of us is there, we are in the real world. Here diverse errors present an integral part of any user experience, so there is no chance for designers and developers to avoid dealing with them.Let’s get well-prepared: today we’ve gathered an article devoted to various errors in user interfaces. Here we’ll talk about types and reasons for errors as well as design strategies and practices for reducing the negative effect they may bring up.What Is Interface ErrorInterface error is the state or condition when the app cannot do what the user wants. It usually happens in three typical cases:the app fails to do what’s requested (literally, like there is no such a technical possibility or function)the app cannot understand the input from the user (or the input is invalid)the user tries to combine operations that cannot work together (that usually happens because the user isn’t aware of the processes inside the app)Sure, errors present a kind of annoying or even frustrating part of the user experience. Yet, there is no way to avoid them, so designers, developers, and UX writers have to think about ways to make that kind of interaction more user-friendly and smooth. Why is that important? Because as well as in real life, virtual mistakes make a significant psychological impact and form a negative emotional background. For example, the research measuring the psychological stress caused by smartphone interactions showed the direct connection between appearing error messages and the level of cortisol, a known biomarker of stress. It can increase the anxiety feeling and provoke a user to stop trying to interact with the product before they even start analyzing what’s the reason. So, let’s see what to do with those situations.This is what the error of filling the subscription form on the Tubik Blog website looks likeBest UX Practices for ErrorsErrors are like fights: the best one is the one that never happened. There are different strategies for error prevention, like tooltips, prompts, tutorials, directional cues, suggestions, highlights, limitations, and the like. Yet, what should you do with users that already experience the error? Let’s cover some points that are effective in designing errors that wouldn’t make the user instantly turn their back to your app.Make the error instantly noticeableIt may seem obvious, but don’t get tricked by it: what seems obvious has to be thought about twice. The worst thing that may happen about the error is the user totally uninformed about what’s going on and gets lost in the process. Be always honest with the user and don’t try to mask the error. Even if the interface is super minimalist and any alien inclusion hurts your perfectionist designer’s eye and soul. Beauty doesn’t matter if it doesn’t work.For example, if the user is filling the form made of 10 different fields, don’t just inform them that the form is not filled correctly, don’t make them search from one field to another where they made a mistake, and don’t hope they will do it. Make the field with a mistake super visible and save users’ energy and time.Use well-recognized visual markersKnowing mental models and well-known patterns of user behavior, user experience designers can reduce the cognitive load. That’s particularly essential in the error situations that are quite unpleasant by default. Error screens and messages may be not the best place for experiments, so consider markers that are quickly recognized by most users. The red color and exclamation marks are still among the most popular ways to attract users’ attention to the errors. Yet, be careful using the color as the only way to mark the error: check if it works for color-blind users. Also, mind the high level of readability on different devices.Here’s how the registration error is marked on ArtStation: the system marks the field with color and explains the issue with a text prompt.Explain what happenedWhatever is the reason for the error, you may feel the urge not to explain anything, just to proceed with solving the issue. And that’s a mistake. Firstly, you risk getting a user back in this error situation again and again as they don’t understand what is wrong with their actions or app response. Secondly, we’ve already mentioned that errors literally provoke a psychological state of anxiety, and you may not predict if this error becomes a part of the wrong interaction pattern. So, be sure to find a way to quickly explain the nature of the error and keep users informed. For instance, instead of just informing (“You cannot log in to the app”) make the message explanatory like (“The username or password do not match”).Don’t add more actions than neededAnother thing you may feel like doing is putting all the errors on separate pages or pop-up windows to make them as catchy as possible. Don’t overplay with it: in most cases, it’s enough just to make a color contrast marker in the interactive zone instead of popping up the additional modal window with the message requiring another unnecessary click to get the user back to the same page. Imagine that you are filling in the registration form and get that kind of pop-up for errors; no doubt, you will hate it very fast. Don’t make your users experience that: aim at providing inline validation and keep the message close to the field in error.Yet, a pop-up window will be helpful if the user needs to be redirected to another page because of the error. So, for each case take into account all pros and cons and target your solutions well.This is how the error is marked on the Tubik website when the user tries to complete sending the contact form without adding an email.Write simplyIt’s crucial to make the error message as simple and clear as possible. Clear for the target user, not for the designers or developers creating that product. Avoid special terminology and jargon which you may use with QA engineers, for example (Like “Error 4.7 occurred” or “syntax error happened”). Don’t use long complex sentences. Don’t make long and ornate introductions, it’s not the best place for them. Go quick to the point and make it decent.Don’t blame a userThere’s an easy way to make a bad situation even worse: just tell the users that they are not clever enough to interact with this app and that is why the errors happen. Offensive, isn’t it? Whatever form you wrap this message in, it will hurt the user who is already worried about things going not the way they wanted. So, don’t blame a user, be polite, friendly, and helpful, that’s important for setting the right emotional background of the situation. Try using clear instructions instead of blaming: for example, say “Enter the valid email address” instead of “You’ve entered the invalid email address”.Be constructiveInforming the user about the error in the right way is not enough: whatever friendly is the information that you got lost, it isn’t super worthy if you don’t know what to do next. So, be quick to let the user know how to solve the issue. Some of the popular practices are the following:If that’s a web interface, give the options to move to other pages of the website, first of all, the home pageIn the mobile interface, make it easy to take a step back or quickly connect to the spot of the errorIn case of complex forms and processes, do it for each step instead of at the end of all the processesThis 404 page of the fashion brand's e-commerce website gives the visitor various options to jump to, marking the ability to get back to the home page as the main call-to-actionConsider using images and iconsIt’s not a secret that people perceive and decode images faster than words. So, thoughtful use of an icon or image on the error screen can make communication faster saving the users’ energy and good mood. What’s more, images have a big potential for emotional appeal which can reduce the tension of dealing with an error.https://medium.com/media/33ce2d875fa61260198c9fcfcb88ebbb/hrefTest and analyzeDon’t have an illusion that work on error presentation is finished with the UI/UX design stage of the project. It never stops, because the feedback from real users is the best way to improve the user flow. A/B test different options, analyze carefully what are the most vulnerable zones and interactions, and use the findings to prevent errors where possible and smoothen the process where the mistakes are unavoidable.Add fun if that’s appropriateThe page or screen of an error message can use gamification, interactive content, or other ways to add fun and this way reduce the negative effect. One of the good examples is the 404 page on Dribbble: as its target audience is designers, the resource uses their natural creative curiosity to add fun to the error situation, so users can see the collection of popular designs organized along with a similar color palette. On the page, users can continue the game and try other colors or search for what they need using the search field integrated into the error page.Well-Done Errors ChecklistSo, to sum up, well-crafted errors would rather stick to the following points:readable and cleareasily noticedconstructiveeffort-savingpolite and friendlyreasonably emotionalWe will continue the theme of dealing with errors in interfaces effectively in our next article, stay tuned!Useful UX Design ArticlesHere’s the set of articles on more aspects and best practices of user experience design.The Anatomy of a Web Page: Basic ElementsMotion in UX Design: 6 Effective Types of Web Animation5 Basic Types of Images for Web ContentAesthetic Usability: Beauty on Duty for User ExperienceTypes of Contrast in User Interface Design5 Pillars of Effective Landing Page DesignHow to Make Web Interface ScannableHow to Design Effective SearchWeb Design: 16 Basic Types of Web PagesBasic Types of Buttons in User InterfacesOriginally written by Marina Yalanska for Tubik BlogWelcome to check designs and art by Tubik via:WebsiteDribbbleBehanceTubik ArtsError Screens and Messages: Tips and Practices was originally published in Muzli - Design Inspiration on Medium, where people are continuing the conversation by highlighting and responding to this story.

Muzli Publication — Weekly Digest

Exploring the top web design tools to watch in 2024Discover the cutting-edge of web design tools for 2024 with Muzli. From collaborative platforms to AI-driven assistants, stay updated on the latest innovations shaping the digital landscape. Elevate your design game with insights from Muzli!Read now.45 Game-Changing 2024 Figma Plugins You Can’t Miss!Carefully curated, these plugins are poised to enhance your workflow, amplify your creativity, and elevate your Figma experience.Read now.404 Creatives: Exploring the Artistry of 404 Error Page DesignThe 404 page is a common occurrence on the web, and it’s a good idea to think about how to design one. In this article, we’ll explore the artistry of 404 error page design.Read now.Weekly Designers Update #440Web design inspiration, weekly recapRead now.Case Study: Joossi. Packaging and Marketing Design for Juice BrandLet us make your day juicy and cheerful with a story about our fresh, bright graphic design project. This time, we invite you to take a glance at the original packaging design and marketing graphics the tubik team created as a part of the general visual identity concept for a juice brand. Have fun and catch the vibe!Read now.How I redesigned and improved the UI/UX of Connected SafetyLearn how I redesigned and enhanced the UI/UX of Connected Safety in this insightful article. Dive into the design process, from identifying key data points to overcoming challenges, and discover how we crafted a modern interface to inspire user trust and improve safety outcomes.Read now.Designers’ Secret SourceLooking for more daily inspiration? Download Muzli extension your go-to source for design inspiration!Get Muzli extension for freeMuzli Publication — Weekly Digest was originally published in Muzli - Design Inspiration on Medium, where people are continuing the conversation by highlighting and responding to this story.

7 Steps To Have Impressive Error Messages

No matter how good our design is, errors are inevitable.Photo by Nong Vang on UnsplashWe all know that the best error message is the one that never shows up. But no matter how good our design is, errors are inevitable. When people interact with products, inevitably something will go wrong at some point.A big part of UX is managing pain points for users. The key is to make everything as smooth and painless as possible.You should show users’ errors, but not like everyone else. Error messages give people the information they need to move on while identifying any frustration and alleviating anxiety.Certainly, when faced with an error, users feel a little frustrated and stressed. Your potential customer expects one result and instead gets another result that interrupts their workflow.This is your chance to minimize frustration and deliver a helpful message that encourages task completion.1- Prevent Error from the BeginningI’ve mentioned that the best error message is the one that never shows up. So if you prevent errors from showing up from the beginning, that would be great.Error messages make the user feel uncomfortable, and showing them to the user for some trivial problem means you’re constantly instilling a negative feeling in your user, and that diminishes their importance and no one takes them seriously on your website anymore.Put yourself in the user’s shoes and try out a user journey map to check where the user might go wrong along the way. Then see if it’s possible to make design changes that prevent those errors.let’s analyze some example:In the Apple and Instagram login form, you won’t be able to submit the form if you do not meet their requirements.AppleLogin Form, Prevent Errors From BeginningInstagram Login Form, Prevent Errors From Beginningif you’ve used Twitter, you must know that the characters that go over the limit are highlighted in red. the red number presented at the bottom; that’s the number of characters you’ve gone over the limit.How Twitter Prevent Error from the Beginning2- Be Clear and ConciseNo one wants to read long texts, even for the most important things — let alone to fix an error. It’s a well-known fact that people skip where they can. So the longer an error message is, the harder it will be for people to find the information they need because they’re just scanning the pages and not reading word for word; they want to get to the point, and your error message should help with that.Now, sometimes it may not be possible to write a message that short, so don’t drive yourself crazy trying to get to 8 or 10 words. Just remember that less is better and clarity and usefulness are the most important things.Write a complete and long line message for yourself first and then cut out the unnecessary words. If you do cut words, make sure you still retain the necessary information. The goal is to be precise and concise.Example of short but unuseful error message in Windows 103- Give the user an instructionWhenever an error occurs, the user wants to fix it as soon as possible.A good error message has three parts:- Problem identification- Providing details, ❌if helpful❌- Share solutionYou must always provide a solution to the error at hand, but don’t communicate the problem in too much detail, just explain how to fix the error. Otherwise, the user’s frustration will grow as they either waste their time trying to find the answer themselves or give up.Tell the user the mistakes accurately: Imagine a scenario where a user enters an invalid symbol in the username input when trying to login. Instead of reminding the user of the symbol or telling her/him that it’s a username issue, your message says, “You can’t create an account.” Let me just tell you What they are supposed to do, they will leave your website.When providing solutions, there may be more than one option, for example, when a user tries to sign in, they may get an error message saying there’s no user with that username. Your user may have entered their username incorrectly, or they may not have registered on your website at all.Error Message With multiple Solution On MicrosoftYou need to know that users may not even know if they are registered on your website. Therefore, you can ask them to check their username again, or if they are not registered on the website, to do so. then try to login again.Let’s look at another case, a 404 error can come from a typo, moved or deleted content. A useful 404 error page can encourage users to check the spelling of their link or take an alternative route to find the content they are looking for.guiding for filling out the form on Google And SpotifyError Message Without Any SolutionDo & Don’t As an example for error message with the solution4- Write for People, Not for MachinesMost users are not interested in the technical details of the problem encountered. If a message contains technical terms or jargon, the user will be confused.- The message should be written in plain language. If it is necessary to mention technical and complex details, place them in a troubleshooting section and guide the user to solve the problem quickly.- Avoid addressing people in the third person or using impersonal terms like “the user”, to describe them. Instead, address people directly, using pronouns and contractions, and aim for a reassuring, conversational tone.UX microcopy is about connecting with users and giving them a good experience, not bombarding them with technical jargon they won’t understand.example of writing for people in an error message in plain language5- Be Humble — Don’t Blame UserUsers are already frustrated when they get an error message — don’t make it worse by blaming them.Know that users can always take the wrong action. But it’s the design’s responsibility to inform them of their mistakes in a good way.- Avoid accusatory language by focusing on the solution rather than the user action that caused the error.- avoid phrases like “you did” or “you didn’t” when explaining what went wrong.Always keep instructions specific to what the user needs to do to fix the problematic action.It is important to be careful when using “you” and “your” as emphasizing the relationship between the person and the problem could make them feel chastised. For this reason, it is important to keep the language of error messages as neutral as possible.- Avoid phrases like “You did,” “Your action caused.”- Avoid using upper case text, as this gives the impression that the system is shouting at users.Imagine explaining the problem to someone you care about, how would you do it? This can be a great way to add a more human tone to your UX error message design.a correct format of not blaming users from YahooHow not to blame the user6- Always be positiveSince error messages are based on some unusual actions of the user, there is a possibility that the system may indicate something disrespectful to the user, making the scenario unpleasant.This should be an opportunity to positively inform the user about errors, rather than reinforcing a negative interaction. Some style guides, such as Apple’s, favor a friendly tone over choosing positive words, so check your company’s style guide to be sure. You should respect a user who is stressed right now.An inappropriate error message — short, but useless, full of negative words.Isn’t clear to the user, don’t have a solution, and full of negative wordsMicrosoft Office telling users what to do next, but without any negative words.7- Use Inline ValidationInline validation is basically putting the error message right next to or above the label it belongs with. This also assists with accessibility as screen readers should read the error message and the field label together, allowing all users to better address the issue at hand.Giving users a long list is only going to frustrate them further and make it extremely difficult to understand, especially users with screen readers.inline messages are ideal for forms as they notify the user of the error right next to the error itself, making it easy to spot and correct.Giving users a long list is only going to frustrate them further and make it extremely difficult to understand, especially users with screen readers.Examples Of Inline Messages On Adobe, Spotify, Yahoo Sign up formWhen it comes to designing error messages, it’s important to think holistically. Start by researching and analyzing and thinking about all the places in your product where something could go wrong. List them, and then start designing a concise and friendly error message for each place.Work with UX writers to review existing error messages. UX writers consider both context and the user’s state of mind when reviewing errors, and update the error text where necessary. And don’t forget to validate your solutions. Always test your error messages with real users.Error message design may seem like an insignificant part of information architecture, but it can have a huge impact on the user experience. By reducing friction, you keep users on track and help them complete what they planned.7 Steps To Have Impressive Error Messages was originally published in Muzli - Design Inspiration on Medium, where people are continuing the conversation by highlighting and responding to this story.

Illustration as UX: How Custom Spot Illustrations Guide Users, Build Brand Personality, and Reduce Cognitive Load

Too often, illustration is treated as digital decoration, a nice-to-have layer added at the end of a project to make things “pretty.” This is a costly misunderstanding. When strategically integrated, custom illustration is a core component of the user experience, directly impacting usability, comprehension, and brand loyalty. It is not an expense; it is a high-ROI interface asset. Here is the business case for treating illustration as essential UX. 1. The Cognitive Shortcut: Explaining Complex Ideas Faster Than Text The human brain processes images 60,000 times faster than text. In a digital product, where user patience is measured in seconds, a well-crafted illustration can replace paragraphs of explanation. The Principle: Pictorial Superiority EffectUsers are far more likely to remember and understand information presented as an image versus text alone. UX in Practice: Complex Onboarding: A fintech app explaining “tax-loss harvesting” can show an abstract illustration of a scale balancing gains and losses with visual metaphors, instead of a dense block of financial text. Empty States: A project management tool’s “No tasks yet” screen. Instead of just text, a simple illustration of a calm figure planting a flag on a blank landscape conveys “a fresh start” and the action to take (“plant your first task”) with immediate emotional resonance. Feature Introduction: A new “end-to-end encryption” feature in a messaging app. An illustration showing a message turning into a sealed, unique envelope as it travels between two phones is instantly understandable, building trust faster than a technical footnote. 2. The Wayfinding System: Creating Visual Anchors for Navigation Illustrations can serve as intuitive, memorable landmarks in a digital space, aiding spatial memory and reducing the cognitive load of navigation. The Principle: Recognition Over RecallIt is easier for users to recognize a visual cue than to remember which textual menu item they need. UX in Practice: Category Differentiation: In a banking app, “Savings Goals” could be represented by a mountain summit flag, “Investments” by a growing sapling, and “Insurance” by a shield. These become intuitive icons users scan for, not just labels they read. Progress Indicators: A multi-step setup process uses a cohesive illustrated story. For a fitness app, the user moves from an illustration of putting on shoes (Profile Setup), to stretching (Goal Setting), to running (Connection to Devices). This creates a narrative journey that feels rewarding, not bureaucratic. Error State Identification: A “404” page with a custom illustration of a broken robot or a lost explorer not only softens the frustration but creates a unique, brand-specific memory point. Users remember the friendly broken robot, not the error code. 3. The Brand Personality Engine: Injecting Warmth and Building Trust In a world of sterile, template-driven interfaces, custom illustration is the primary vehicle for expressing brand voice, humanity, and emotional intelligence. The Principle: Affective ComputingThe emotional response a product elicits directly influences a user’s perception of its usability and value. UX in Practice: Tone Management in Stressful Contexts: A tax software company using friendly, approachable cartoon characters to guide users through stressful financial forms reduces anxiety and builds a “helpful guide” persona, directly increasing completion rates. Differentiation in Commoditized Markets: Two CRM tools may have identical features. The one that uses a distinct, quirky illustration style to represent “lead pipelines” or “contact management” feels more human and memorable, reducing perceived fungibility. Building an Emotional Bridge: A health app tracking a sensitive journey like pregnancy or mental health uses gentle, abstract, and inclusive illustrations to create a sense of safety and empathy that photography or UI components alone cannot achieve. The Strategic Framework: How to Integrate Illustration as UX For illustration to function as UX, it must be systemic, not sporadic. 1. Define Its Functional Role: For every illustration, ask: Is this decorative, communicative, or navigational? Only “communicative” and “navigational” illustrations are UX-critical. A background pattern is decorative. An illustration showing how to connect a device is communicative UX. 2. Establish a Visual Language Library: Create a strict system, just like your design system.* Character System: Consistent rules for anatomy, proportion, and expressiveness.* Metaphor Library: Approved visual metaphors for key concepts (e.g., “security” = shield, “growth” = sapling, “connection” = interlocking gears).* Spot vs. Scene Rules: When to use a simple spot icon vs. a narrative scene. 3. Pair Copy and Image as a Single Unit: The text and illustration should be conceived together. The illustration should not just repeat the text; it should enhance or clarify it. Write the microcopy, then brief the illustrator. 4. Measure Its Impact: Track UX metrics for screens with key functional illustrations.* Time on Task: Does the illustrated onboarding explain the feature faster?* Error Rates: Do users make fewer mistakes in a complex flow with illustrative guidance?* User Sentiment: In surveys, do users cite the illustrations as “helpful” or “reassuring”? The Bottom Line A custom illustration is not a cost on a line item. It is an investment in: Reduced Support Costs: Fewer users confused by complex features. Increased Engagement: A more emotionally resonant product people return to. Brand Equity: A distinct visual language that is impossible for competitors to copy. When you treat illustration as UX, you stop asking, “What should we put in this empty corner?” and start asking, “What user problem can we solve with a visual story?” The result is an interface that doesn’t just work, but connects, explains, and delights. It becomes a product with a soul. The post Illustration as UX: How Custom Spot Illustrations Guide Users, Build Brand Personality, and Reduce Cognitive Load appeared first on Designer Daily: graphic and web design blog.

Medical Kit, v.2

An update for 404 error page for our e-commerce drugstore VseApteki.ru.

404

404 error and network issue

Adding value to our client’s platform and brand

How to make a brand thrive along with the siteNot every brand guidelines include definitions for the usage of photography, illustrations, or image styles. Far from being a problem, this could mean a great opportunity for a redesign project. While filling the requirements for a software development project, we discovered the chance to create and explore a visual universe to enlarge our client’s identity.On every website, we find common spaces to communicate the users what is happening. Places where the message is simple but we can tell a story. Some of them include logins, error pages, and loadings, they communicate the same on every site, and that is what let us space to release some creativity.The starting pointOur client’s business is about offering services to other companies, along with a platform to manage them all internally. Our job was to redesign and rethink that custom service platform. At the moment we started, they had this website that was built some years ago, it had an old design and some performance problems. They needed a fresh start from the visual and technical perspectives; something simple, fast, and easy to use.It was not the typical product site with a homepage that explains what they do and try to sell it. The end-user of this platform is a customer that already bought our client’s services and uses this platform to manage them in their own company. When they reach this site it’s because they have credentials and they already know what the site is about and what it is for.On a good side, the users are somehow prepared for what they are going to find in the link. They will come to this platform (maybe more than once a day) with a task to complete. So it’s important that we don’t distract the user from what they’re trying to achieve.We wanted to make the design visually attractive without cluttering the site, so we had to pick the right moments and the right ways to do that. Our goal was to find those places where we could make the site friendlier and integrated into the brand, keeping in mind that the main purpose of this platform was to manage services in a simple way without disturbing.The client’s brand was defined with a color palette, typography, and style for icons, but there wasn’t a strict guideline for images and illustrations, and that’s where we saw an opportunity.Choosing the right formatWe discarded the usage of photography; photographs are more suitable for products, more literal and grounded in reality. This site was neither about selling a product nor describing it, but to improve the experience of the current users and help them achieve their tasks easily. Illustrations work better to express concepts and we could easily include our client’s color palette to make them part of the brand. Besides vectors can perform much better than raster images (we’ll talk more about this later).Our proposal was to build a graphic universe with illustrations to show all these services in a friendlier way and also to communicate when something was happening on the site. By building this graphic universe we are adding a new ingredient to their guidelines, a different solution to approach any possible visual communication problem. We are not offering a set of images, but a set of rules for a language that they can continue to develop and make part of their brand.References FirstWe started by showing the client some references for illustrations with a small description so they could decide which style represented them the most. Some of these images included different perspectives, dimensions, depths, characters, stroke styles, gradients, and solid combinations, rounded and sharp edges, between others. From the beginning, we discarded any complex texture, effects, or super realistic illustrations. We knew that performance will pay if we keep it simple from the beginning.Illustration referencesTest the idea with the styleThe client picked two options, so we delivered some small sketches to start testing the styles and at the same time, talking about the ideas to represent. The Login is the first page the user will see, and also the one with more space available for creation. Here, we wanted to show a city where all our client’s services coexist, so we sent some drafts of the city with both styles:First drafts for stylesAs we mentioned before: when the users reach the login, they are aware of what the site is about. We didn’t need to explain the services in detail but to think about how the illustration could reinforce their benefits.After they picked one final style and the idea of the city was approved, we started discussing which elements to show and how to represent them.Drafts of illustrations and Login pageThis phase was about getting the best way to show all the scenes of the city until the login design was finished. That is when we started focusing on the code and choosing the best way to implement those illustrations on the site.Using SVGAs soon as the illustration was approved, we exported the file from Illustrator to SVG as it’s the best format to use vector images on the web. We decided to use the SVG code inline in our document because this approach allows us to make use of animations. Let’s review some of the benefits of inline SVG:Very low file size with the best resolutionFlexible options for responsive designGreat performanceRenders immediatelyAccessible through the DOM so we can interact with any group of vectorsAllows control of some attributes through a stylesheetAllows CSS animationThere are a few ways to export the SVG, the easiest one is to copy the vectors from Illustrator and paste them in a text editor. As simple as that:Copy/paste from Illustrator to text editor.The software adds a lot of code that is not necessary and hurts legibility and performance. That’s why a tool like SVGOMG helps us optimize the file in a fast and easy way. Going deeper in that direction, manual optimization is usually part of our process. Another important thing to keep in mind is that SVG is a great ally for accessibility.Now we have our code clean and we can start adding classes to the elements we want to animate. In this case, CSS animations were enough to build these simple animations.This was the result for the Login page, the SVG illustration weights only 42k after optimization:Login with micro animations.Note: The gif is displaying in a loop but some animations where playing just once.After the main animation was ready, smaller instances were easier to build. Once users get into the site, different scenarios of the city appear as they navigate it. Other instances included a loading animation, an error message, and a 404 error page:Loading.Error message.404 error page.Using the same illustration language we started building a graphic universe, communicating different messages with the same visual identity. We are able to enrich any instance in the site in a non-verbal way, without losing identity but widening our possibilities of expression.Two valuable conclusionsVector graphics gave us the possibility to work with SVG and CSS animations. This way we could deliver low file sizes with the best quality resolution and performance that adapt to every viewport.Agile methodologies were not only used in the development instance of this project, but also in the UI/UX definition phase. We made the illustration process part of our sprints, which helped us to get the client involved at every point of the process. Their input was key, they gave us the freedom to propose a new language, they guide us through the way to make it work with their current brand and committed with every detail of each illustration.Adding value to our client’s platform and brand was originally published in Muzli - Design Inspiration on Medium, where people are continuing the conversation by highlighting and responding to this story.

Selected projects | Spring 2019

Some recent works. - American pilot - Runner - Error 404 - Online shopping - Car repair shop

project in meetoo 2018 by Jianwen Liu

In 2018 I went to work for meetoo to create a act game called JUMPING HERO. It was a very happy and fulfilling time . Everything is almost the first time , every thing is a big challenge , I have learned a lot in this project .since then , I have formally become a character designer. Big thanks to the art director BEE who hired me and taught me how to bring the characters to life . No one knows how important this is to me in that difficult time. https://www.artstation.com/beeee Thanks to ERROR404 who is a great talented artist. He is still an example for me to follow. https://www.artstation.com/error-404 thanks to hailei the PM who had helped me with the loading painting. It is my first time to do it. We have tried so many versions of it .You can see that my first version is very simple, but the last version semms to have improved a lot. I also tried to do some character action design and props design. These are very interesting experiences for me.

Medical Kit

A snapshot of 404 error page for our e-commerce drugstore VseApteki.ru.

Electric Dreams | UE5 GDC 2023 - PCG by Jack McKelvie

I was brought on to the Opal team near the beginning of production to RnD how PCG could be leveraged to quickly make a new GDC demo for 2023. I created numerous works that were axed in favor of another direction lead by the PCG team, however I'm very excited to be able to share those works today as it's part of the story in how the team got to where it landed the project. I worked on a background PCG forest, PCG microscatter (non-GPU scattering), a landscape auto blend material, and I worked on making and polishing up some assemblies for the PCG team. The assemblies and the auto blend material made it into the final demo, whereas the PCG content did not. This was a monumental team effort, and here's a shoutout to some of those involved. I can't credit everyone here, so I've limited it to people who I worked with directly. Daniel Woje Wiktor Ohman Jakob Keudel Isac Crafoord Galen Davis Mathew OHalloran Majid Azim Adam Rosengren Jean-Sebastien Guay Huw Bowles Robert Osborne Marien Elalaoui The sample is available for download now, check it out here: https://unrealengine.com/marketplace/en-US/error-404?e=/marketplace/en-US/product/electric-dreams-env

Error Pages

Error pages (500- Internal Server Eror and 404-Pgae not found)

140,000 Visuals of Outer Space are Free to the Public in NASA’s Image Library

The National Aeronautics and Space Administration (NASA) has created a library of 140,000 high definition files filled with photos, videos, and sound clips, all free and available for download. Visual and audio content of planets, moons, nebulas, and specific space missions, are searchable by file type. The library spans the last hundred years, and users can narrow searches to focus on any timeframe between 1920 and 2019. Each file also contains a thorough caption including the date and contextual information about the content. More

A Candy-Colored Cloud Hovers Over a West Texas Landscape Mid-Thunderstorm

While chasing a tornado near the small town of Earth, Texas, earlier this week, amateur photographer Laura Rowe captured this enormous cloud filtered with pastel sunlight. The candy-colored mass swells above the dusky expanse in the midst of a thunderstorm, and as Kottke notes, the serendipitous shot evokes the saturated, trippy swirls in Milton Glaser’s 1966 poster of Bob Dylan. Prints are available on Rowe’s site. More

All the small things: creating appealing digital products with microcopy

What if you had a friend who helped you quickly find what you are looking for, simplified tedious tasks, made you smile and inspired creativity?All these wonderful things are the mission of microcopy, tiny text fragments that give a voice to digital products and services and help users accomplish their goal in the most efficient and pleasant way.We put this article together to explain how microcopy works and why you need it, look at the most common mistakes and share a few awesome examples.Meditation app Headspace and VPN service provider TunnelBear use cute images to make their calls to action even friendlier.Why do we need microcopy in the first place?Interface copy is a part of the brand that needs to be developed and thought through along with your brand book, logo, fonts, colours and icons. Frequently forgotten and deprioritized, it has the power to dramatically improve your UX, boost your customers’ loyalty, and, eventually, increase your earnings.Microcopy makes products appealing and memorable and has the power to save the day even when they fail to function.Texts in the interface are an important tool for the emotional journey. They can explain how something works, inform about a potential error and build trust. Microcopy adds a personal touch to your interaction and shows that you care about every detail.Here is the emotional journey on the website of HURU — Ukrainian brand of functional backpacks. Bachoo Design Studio created the page.After all, microcopy is just fun; we all enjoy finding Easter eggs and sharing them with friends. However, you shouldn’t overdo it: excessive jokes or word plays may distract or annoy the user.Ok microcopy, make people fall in love with my productThe key mission of interface texts is to facilitate a smooth user journey with non-intrusive interface notifications, pop-ups, hints and simple text explanations. Microcopy can also nudge the users in the right direction, inspire with sample passwords and creative file names, encourage to provide more information or use the product more frequently.Booking.com encourages to write more detailed reviews. The message changes as you write more.Dropbox thanks you for creating digital documents and saving the trees.Create rituals and share useful factsMicrocopy can be a source of helpful or inspiring additional information. You can add a few “did you know” facts about your company to the functional pages or share the statistics that highlight the benefits of your service.A couple of ‘Did you know?” facts on the loading screen of Duolingo, one of the most popular language-learning apps.If your users need to repeat the same operations every now and then, surprise them with various images or texts.Show empathy in challenging situationsWhenever users have to wait for a page to load or cannot accomplish a task on the website or in the app, they get frustrated. Support them with a friendly message, virtual hug or a cheering gif. Don’t apologize, rather show gratitude for bearing with you: “thank you for your patience” sounds better than “sorry for waiting”.Give your users choice and space and avoid being patronizing: the task of your microcopy is to delicately stand aside and only jump in when asked for help. Explain to the users why they need to provide particular information and give preference to soft words like “may” or “might” over more restrictive “must” and “have to”.Headspace wants to learn more about your meditation habits and asks a few questions to offer the most appropriate routine.Make “dead ends” work for youAccording to UX Collective, 74% of users encountering a 404 error page immediately leave the website. Most content management systems offer generic page templates which you should absolutely customize. Use your brand color, experiment with the message or simply link to the functional website pages.Collect feedback and offer incentives on your payment confirmation and unsubscribe pages to encourage the next purchase or convince the customers to give your newsletter or service another try.When there is an error or a bug on your website or in your app, communicate in plain text what happened, when it will be fixed and what is the current workaround. It is important for the users to understand whether they can resolve an issue on their own or have to wait for a resolution from your side.Handle objectionsIf your users may have concerns regarding their private data utilization, hidden payments or opt-ins, address them proactively in your microcopy.Let your users easily enable or deactivate particular features based on their preferences.Let’s make UX great again with microcopyInterface texts are a result of a joint cooperation between a UX designer, copywriter, product owner and customer-facing support team. As a first step, you need to fully dive into the tasks and expectations, fears, complications and challenges that users face on every stage of their interaction with the interface.To do this in a structured way, we create an emotional journey map. Once we understand which emotions our users experience on every stage, it gets clear which type of copy will be helpful in these scenarios.Based on the emotional journey map, a UX designer identifies the user flow as well as the sequence of screens while a copywriter establishes the tone of voice and consistent terminology.As a next step, we invite a few inexperienced users and watch them interact with our product.Remember that covering the basic needs along the user journey is just the first step: Many users don’t know exactly what they want and cannot voice their concerns. Observations help: write down every scenario where the users visibly struggle, fix all the issues and repeat this step a few more times.Once you launch the product, remain in touch with the tech support team: collect their actionable feedback and improve the parts that caused trouble.One of Bachoo clients aimed to create a mobile application with a lot of jargon for a particular target audience. We conducted a series of in-depth interviews with various user groups to align the terminology and build an equally appealing interface for both seasoned users and newbies.Base your decisions on data: Google Analytics or equivalent reports will help you identify the pages that contribute to your bounce rate. You can use Time on Page, Scroll Depth and Bounce Rate metrics to evaluate the efficiency of every page. For more advanced insights, use heat maps or usability tests with eye-tracking.Use consistent language and brand voiceHow would you like to sound: friendly or straightforward? Informative or playful? There is no one-size-fits-all: you can be equally successful with Queen’s English and urban dictionary memes as long as your audience speaks the same language. If your target group is too diverse, better play it safe.VPN service provider TunnelBear is using a friendly tone of voice and matching visuals to stand out from other, more conservative providers.Take time to define dedicated terms for every service feature and create a brand manual before moving on to copywriting. Here is how guys at Mailchimp describe their voice and done.If you are launching a one-of-a-kind innovative product or solution, you will have to come up with words for actions that haven’t existed before (think of googling, photoshopping or skyping). Create an internal glossary for the team and explain the terms to your users via FAQ or pop-up notifications to ensure you all are on the same page.What else you can do:If you write in English, choose between British and American version and stick to respective spellingBe consistent in the languages with two different words for formal and informal “you”Align the typography, punctuation and upper & lower case letter across all the interface textsThere are many synonyms for positive and negative actions: confirm, approve, agree versus cancel, decline or reject. Make sure all your action buttons have consistent labels.Choose active over passive and actionable over vague.Dive into local culturesCulture-specific content and references work magic if your market is homogenous. In other cases, you either need to use local references for every user group or replace them with universally accepted examples.If you write copies for diverse markets, find out how local citizens call specific things and which habits and prejudices might impact their interaction with your product.When Bachoo Design Studio worked on Airfox, a financial application targeting Brazilian citizens with lower-middle to low income, we needed to identify local transaction language, habits and instruments. Our designers worked closely with the local UX research team from Brazil that was in touch with the end-users.In the Airfox app interface, we left only the most critical information and eliminated all the other numbers. Users see how many instalments they need to pay, what is the amount of every fare and when it is due.In the Airfox app interface, we left only the most critical information and eliminated all the other numbers. Users see how many installments they need to pay, what is the amount of every fare and when it is due. — Yulia Snitko, Head of DesignRespect every userCommunicate carefully around these sensitive topics:EthnicityReligionGender self-identificationIncomeEducation levelShow your attitude in details: use simple English if your website or app does not offer separate language versions, choose open fields over predefined drop-downs in the forms that require personal data, create an accessible version of your product and give preference to neutral third person pronouns (they rather than he/she). Here are a few more great tips from Slack.Show what you expectWhen you need users to fill in the template or application form in a particular format, inspire them with a good example: suggest a creative name and indicate the valid date format, whether it is YY/MM/DD or the other way round.If they still make an error in the data input, highlight the section in question, explain what exactly went wrong and give an example of a correct answer.Mailchimp is using actual questions that sound more natural than classic “Your organization” and “Your website” fields. Typeform starts off with an informal greeting and shows a fictional character’s name as a sample email address.Mailchimp is using actual questions that sound more natural than classic “Your organization” and “Your website” fields. Typeform starts off with an informal greeting and shows a fictional character’s name as a sample email address. — Vlad Orlov, Art DirectorBe predictableThe users should know exactly where they land after clicking any of your website or app buttons. Will they have a chance to review their order once again? How will their data be used? “Click here” does not explain the action that follows. “Click to pay now” is more straightforward.Build multi-level structuresIf your copy targets both advanced users and newbies, work with focus groups representing every customer segment. Create multilevel information blocks with prominent hints and subtle second-level pop-ups that only appear on demand. If your system is extremely complex, consider creating a step-by-step self-learning tutorial.And please stay away from theseGeneric placeholdersForgotten “Lorem ipsums” and generic texts which were meant to be a placeholder yet stayed for good make your product look unkempt and less credible.Trick to subscribeSome websites use deceptive wording to make users subscribe to their newsletters or share their data unwillingly. That is not how you get a loyal customer base.Pressuring into decisionYou may indicate that your offer is time-limited, but don’t overpressure users with endless pop-ups, flashing letters or text manipulation. Also, don’t make your “unsubscribe” or “not now” buttons hidden or hardly accessible.Author: Elena Galitsky, founder and CEO at Bachoo Design StudioAll the small things: creating appealing digital products with microcopy was originally published in Muzli - Design Inspiration on Medium, where people are continuing the conversation by highlighting and responding to this story.

404 Broken Neon

Hello everyone! I wanted to share with you a concept for a 404 error page. The idea is to show a neon sign, which is broken so it's turning on and off all the time :) Hope you like it!

A Mother Duck and Her Extraordinary Brood of 76 Ducklings Photographed in a Minnesota Lake

Minnesota-based wildlife photographer Brent Cizek was headed back to shore before a summer storm when he spotted the common merganser he would later nickname “Momma Merganser.” At first the mother duck was being followed by a brood of more than 50 fluffy ducklings, however when spotted the group again, the total had grown to 76. “I happened to find this group of mergansers purely by luck, but I was absolutely amazed by what I saw,” Cizek tells Colossal. More

Moody Views of Hawaii’s Rugged Beaches by Photographer Jason Wright

Dramatic views of Hawaii’s landscape by Jason Wright depart from typical depictions of the high profile islands. Rather than showing sandy beaches and palm trees, Wright’s images highlight the fierce and rugged places where land meets sea. Wright, who grew up in Hawaii, shares with Colossal that his experience as a life-long surfer informs his perspective as a photographer. Being exposed to the power and ever changing conditions that affect our state—this power of the ocean thrills and terrifies me and keeps me coming back. More

A Remarkable Short Film Dives into a Vancouver Lake to Document Tadpoles’ Evolution

During the course of four years, Maxwel Hohn submerged himself in a remote lake on Vancouver Island to record the otherwise unseen life cycles of western toads. The hours of stunning footage culminate in the award-winning short film, “Tadpoles: The Big Little Migration,” which chronicles the tiny amphibians’ evolution from bulbous swimmers—Hohn notes how the critters look like they’re smiling constantly at this stage—to fully formed toads. Because the ecosystem is incredibly fragile, the Canadian videographer details his precautions to not disturb the environment, which include passing through lily pad trails made by beavers and floating at the surface to keep the silt covering the lake’s bottom from clouding the water. More