The not-so-little things designers forget to design
The design process can be fairly long and can consist of a lot of steps and items to be designed. In all of that, it is possible we forget some of the little details. But you know what they say — “The devil is in the details” meaning that even if something is simple or small, forgetting it can prove problematic. It can cause incomplete design cycles, frustrating experiences, and underwhelmed clients.
What differentiates great from good user experiences is the amount of attention placed precisely on those little details. This often results in better brand awareness, a better look, and feel of the website, and more positive customer experiences.
However, between the tight schedules and the countless iterations in bringing your client’s vision to life, forgetting to design a few details here and there does happen.
Here is a checklist of some of those little-not-so-little things we sometimes forget that can help you provide a more premium web experience for your clients, their brands, and their users.
Favicon
Favicon is the website icon that sits atop the browser tab and in the bookmarks bar. It is quite literally a tiny icon that seemingly no one notices, but it certainly has an effect on the website experience. Among the many browser tabs or bookmarks in a user’s browser, the favicon plays a crucial role in the wayfinding and memorability of the website and the containing brand experience.
The icon usually consists of the logo mark or a logo symbol, but it can also contain other simplified graphics associated with the brand. Since it is rendered quite small within the browser, you need to make sure that the contained graphics scale down well at small pixel dimensions.
The favicon is usually shown in a 16x16px square, so keep in mind the following:
- Ensure that the spacing around the graphic is sufficient in framing and doesn’t decrease the readability of the favicon;
- Avoid thin lines that will get lost at small pixel sizes;
- Make sure the favicon’s colors read adequately on both light and dark-themed browsers — especially when opting for a transparent background behind the favicon symbol;
- With the limited working area at your disposal, it is up to you to make the brand pop in a sea of opened tabs and bookmarks;
The expanding range of devices, screen resolutions, and browser technologies recently require a wider range of favicon resolution sizes. For that purpose, the best way to accommodate all Favicon size requirements is to use a Favicon generator. The generators are usually programmed to account for all the latest favicon requirements and provide a zip file of all the necessary favicon assets within minutes! All you need to do is make one single favicon image and upload it. Yup, it’s that easy!
404 Page
The error 404 page may seem like a web page of little importance, but many users would disagree. Errors and broken links are more common than you would expect and they can easily make the users feel lost or interrupted — eventually leading them to leave the website.
A well-designed 404 page will give the user ease of mind by providing navigation back to “safety” when broken links disrupt an otherwise smooth experience. Such a page will also have a banded appearance that helps retain users when they feel interrupted, underwhelmed, and want to leave the site.
In many cases, this is the page where you can be graphically creative and bring out the brand’s personality in a witty and fun way. This is not a page you want the users to see often, but when they do — it is better to make them smile and reassure them of the brand’s value before bringing them back to where you need them most.
Placeholder images
After designing and developing a web product — generally, the assets move under the client’s management together with an operable Content Management System (unless you have a maintenance contract). The client then continues to populate the website (templates) with new content from new blog posts and sections, to new pages and hero images, to name a few.
In the instances where they fail to insert an image, the CMS will automatically add a default image as a placeholder. The defaults are often gray, boring, and stick out visually for all the wrong reasons, leading to negative user impressions and decreased retention. It is important to design placeholder images with the brand in mind to avoid visual friction when content is missing. Custom placeholder images can mitigate the effect and further communicate the brand’s personality even in instances where things/content is not going according to plan.
You and your clients should discuss the specifics of all CMS (and otherwise) placeholders that will appear on the website. Then, you can provide developers with the branded placeholders that account for all use cases on the website.
Error and success states on forms
Users come across forms quite regularly in their web experiences. Log in, contact, and request a quote are a few of the many forms they come across daily. Much like in the real world, no user really enjoys filling out digital forms so they strive to complete and submit them as fast as possible.
However, sometimes mistakes happen: wrong password, missing, mistyped, or invalid input, etc. So it is important to clearly show users where and what is wrong so they can fix it quickly and move on. Similarly, you should also let users know when their input is correct and a certain action is successfully completed. Using success messages or field states to notify them of the status of their input, helps strengthen the interactiveness and trust between the users and the web experience.
Don’t try to reinvent the wheel when designing these states and messages, the colors should be based on familiar symbols and symbolism — meaning, reds, warning signs, exclamation marks, etc for mistakes, and greens, checkmarks, thumbs up, etc. for successes. Using brand colors (especially for mistakes) and custom abstractions might seem like an addition to the branded experience, but it often results in a confusing user experience.
There are a few ways to further emphasize these error/success states:
- Outline the input field in a stark symbolic color;
- Fill the input field with a slightly different shade;
- Border on any side of the input field;
- Color the labels in red or green;
- And/Or just displaying the error/success message.
Open Graph image
WHAT IS IT? An open graph image is an image that shows up when the website URL is shared on social media (Facebook, Twitter, or LinkedIn) and other types of platforms (Slack, Messenger, etc). It is essentially a visual preview of the link, that gives context to the users and motivates them to click the link. This makes the brand look more professional and established for all marketing and otherwise sharing purposes. Conversely, if there is not an OG image, the link is shared with a gray background or no background/image at all, which looks plain, uninspired, and does not call the user to interact further.
OG image is only one of the few meta tags that control how URLs are displayed on digital media and platforms. Although the link’s performance depends on the optimization of other meta tag information as well, creating captivating OG images can only augment the positive first impressions and make the branded content more captivating.
SIZE? The perfect image size for Facebook is 1200 x 630px and you should always try to stick to this particular size, to avoid odd image cropping due to the ratio and/or pixelated final look. The other platforms usually follow these sizing standards, but always check the preview beforehand, especially with Twitter.
LOOK? As for the content’s appearance, there are not any particular rules. But some of the best practices have proven to be particularly engaging:
- Logo: showing the logo makes the brand more recognizable and memorable;
- CTA Button: even though it is only an image, placing a call to action button like “Contact Us Now” or “Learn More” makes the user feel inclined to click on it;
- Less text: less text means you have to be concise and straight to the point about what you want to say. This caters to the average social media user, who is used to absorbing information in short and less time-consuming chunks;
- Image: last, but NOT least — the image. It should visually describe the brand and/or the message you want to put across.
With any of these elements, beware that the image will be shown on multiple devices and it should be visually appealing and readable on all of them.
Loading Screen
It goes without saying that users don’t enjoy waiting for interactions much. When it takes longer to load an image or a data-heavy website the solution is to design a loading screen. It is not always a must, but it is really helpful in keeping the users tended to and preventing them from leaving the website altogether.
The loading screen assures the user of their anticipation of the next step and improves the perceived performance and reliability of the website.
As for the looks, this is the time and place to be creative with fun animations that contribute to a fuller brand experience!
A few good and bad scenarios
We all strive to design the perfect website that looks clean, balanced, and easy on the eye, but content tends to get in the way. After you deliver the web product to the client, they start to fill it in with varied real-life content. The beautiful cards you envisioned with balanced and symmetrical text will almost immediately start looking a bit off and will likely need a few tweaks (but perhaps a tad bit too late).
To avoid changing the “ideal” design after the website has gone live, we should always design for unpredictable and varied content. Make the paragraph text different lengths or make the section title a few words too long to be able to see how the design behaves when the content is not ideally fitted to your design. After all, your design should cater to the content, not the other way around (ideally, there’s a balance to be struck, but that’s for another article). Designing such “bad scenarios” helps us narrow the gap between your polished design and the live, ever-so-evolving web content.
This applies mostly to components with dynamic content, such as blog cards, blog posts, product cards, sections, etc. Focusing on the dynamic headlines, paragraphs, images, or additional text elements, we can test and envision how the design holds up with different content sizes. Having considered both ideal and less ideal or “worst” content sizes, we tweak the component’s design to best cater to the varied use cases. At the same time, by understanding the limits of the design, we are able to define the constraints beyond which the design can no longer tolerate variance.
As shown in the example above, the recipe card has the title as the main dynamic element. By envisioning a card with one, two, and three lines of text, we test how the recipe card behaves in regard to the design, as well as the overall look of a group of its repeated instances. That way we ensure that the card design looks good with up to three lines of title text and we communicate three lines of title length as the upper constraint new content should follow.
Designing a website is a complex multi-step process, leading designers to sometimes forget about some elements that are needed to enhance the user experience. Our recommendation is to conduct a checklist of all elements that you usually forgot. To cut the unnecessary hassle, always check the list before entering the finishing stage of the project.
Hopefully, this article will be a handy reference and will help you realize what are yours not-so-little things that you forget to design.
Feel free to mention them in the comment section, so you can “warn” other designers about them 🤓
Starting a new project? Contact us if you are looking for a digital partner that will enable your business to flourish. 🚀
