Jerome Kalumbu — Writing

Great interfaces are made of good typography

2018-11-18T00:00:00Z

Digital interfaces make a huge impact in our lives. We frequently use websites or digital applications to accomplish certain goals. Indeed, when interacting with an interface, we are surrounded by typography and our experience is driven by the words and messages we read and understand.

In one of his articles, Oliver Reichenstein confirms the importance of typography in all websites with the following statement:

Web Design is 95% Typography.

- Oliver Reichenstein

Over the last couple of years, I decided to learn how typography works, since it’s one of the most important assets we have as designers to communicate clear and efficient messages, engage people emotionally and convey the appropriate brand’s characteristics into the interfaces we design.

Unfortunately, I noticed that several websites display disjointed looks and emotions since many designers and developers ignore the importance of typography.

Consequently, those websites communicate ineffectively and affect the user experience and brand perception.

The purpose of this article is to help designers and developers to understand how to work with typefaces, in order to create great interfaces.

Typography, brand and users

When a user interacts with an interface he also interacts and connects with the brand. To optimise the user experience, typefaces have to be consistent with the website brand’s tone and voice. In my opinion, MailChimp is one of the best examples which illustrates this concept. They have done this remarkably on their website by choosing for their headlines, the typeface called “Cooper light”.

This typeface has some personality and conveys a friendly and approachable style claimed by the brand.

Screenshot of MailChimp’s website

As people don’t come to a website to enjoy the design but to read the content, it is important when choosing a typeface to understand how we want them to feel while reading it. For example, do we want them to feel relaxed, happy or agitated? This should be aligned with the brand attributes and art direction of the website.

The takeaway here is that anytime you choose a typeface, start by making a list of words which reminds your brand tone and voice. This will help you describe the feelings and moods you want to distillate with the fonts for the texts across your design.

By understanding the relationship between typography, users and the brand, you will be able to select the best typeface with confidence which will help your design achieve its goal.

Choosing the right typeface

To choose the right typeface, it is fundamental to consider the context of use and the purpose of a font in the interface.

You should always ask yourself:

Is the font I am choosing going to be applied to headlines, body copy, links, call-to-actions or navigation? These questions will help you to apply correctly the typeface to your design.

Choosing the right typeface also means taking into consideration a set of fonts optimised for extended texts, since for users, reading on screen may become tiring at some point, especially if the website is content-heavy.

To search for typefaces, I usually like to explore fonts in Google Font or Adobe Fonts (Typekit).

They both provide a selection of high-quality typefaces optimised for the web. I avoid using any typeface coming from free websites or unknown resources, as often they don’t provide great and well-tested typefaces.

Also, as a rule of thumb, it’s recommended to choose two typefaces maximum in order to keep the design of an interface consistent.

When working with typography for the web, there are two main principles you must know as a designer to make the content accessible and legible: Readability and Legibility.

Legibility

Legibility is the ability of the reader to distinguish letterforms when reading. Here are the factors which contribute to a typeface's legibility:

Display typefaces

We call “display typefaces” the ones designed to be used at large size. Those are perfect for headlines as they are clear, noticeable and they stand out. However, these typefaces are less readable at smaller size and shouldn’t be used for body copy. One of my favorite typeface for headings is “BEBAS NEUE”.

Serif and Sans Serif typefaces

On the web, there are mainly two groups of typefaces we work with, Serif and Sans Serif. Traditionally, Serif typefaces have always been more legible and are often used in print for long passages of text. As the web and design trends evolve, we can find more websites using Serif fonts for some body copy. When well chosen this works well.

However, Sans-serif fonts are more commonly used for body text due to their simple letterforms. It’s great to choose fonts with a slight “touch of personality”, but not decorative as it can increase the cognitive load of the users and affect their reading experience.

Based on my experience with typefaces, I prefer to use Sans-serif fonts for body text and Serif font for titles, if it’s necessary. At the end, try some combinations and judge what works and feels the best for your design.

X-height

The X-height is an important characteristic to take into account when evaluating a font. The fonts which work the best for body copy are the ones with a larger x-height. The taller the x-height, the more legible the typeface tends to be. It is an important rule to remember when choosing fonts for body text.

Readability

Just because a font is legible doesn’t mean it’s readable.

In fact, readability is the level of comprehension and visual comfort when someone reads a text. If you find yourself stopping to admire a font instead of reading the text, chances are that the font is not readable.

Here are two examples to visualise the explanations above:

Line height

Line height also known as leading defines the space between baselines in a block of text. A true ideal line-height doesn’t exist, because every typeface is different. However, a good starting point with line-height is between 1.2 and 1.8. Small line-height can make the text difficult to read as lines are close to each other. Generally speaking, if users have trouble reading the font applied to a text on a website, they will consider the item of it hard to read and understand.

Line spacing

Line spacing is the space between paragraphs. Always keep paragraph spacing in the range between .75x and 1.25x of the type size.

Size

Size matters when working with typefaces. We need to consider our content to be readable by people of all ages. For the size of the font it’s good to stay at 16px or 1em at smallest. The font should be large enough to be comfortably readable.

When browsing a website, people are busy and in a hurry, that is why it is important to make the content clear and fast to read.

Line length

Another common practice that improves readability is preventing horizontal lines of paragraphs to be too wide. Indeed if a line is too long, it stretches the user’s eye and causes fatigue. The rule of thumb here is to set the line length to 40 to 70 characters maximum.

Hierarchy and contrast

Good type contrast is essential for readability. This is an important principle to understand while creating good and consistent hierarchy on the website’s content. A successful hierarchy organises the content in digestible parts, easy to scan and accessible to the users.

Conclusion

In my experience, I have noticed that once you understand these principles and master typography for the web, your design will become stronger and more appealing as typography is content and content is UX.

It is mandatory to remember that you don’t design websites to be pretty, but to help users achieve a certain goal. Here are a few resources you can browse and explore, that helps me every day to improve my skills in typography:

Websites

Books

How art direction will help you create masterful web interfaces

2019-03-05T00:00:00Z

The importance of Art Direction

Although they might understand some its aspects like typography, art direction is a practice that is often neglected and little understood by designers. On typography, you may have read our article “Great interfaces are made of good typography” published on Medium last year. Back then, we sought to explain how using the right typography can help good designers capture an organisation’s style and translate it into a website, thereby provoking deep emotions within users. Art direction is that, plus the management of many other components of design and it leads to great compositions.

The fact that art direction is little understood, even by professional designers, is a real shame since it singlehandedly has the potential to guarantee coherent and memorable experiences across channels. Now, as it can be difficult to figure out how to art direct your work, we have laid out useful concepts in the article below, hoping to shed light on the practice and help you better understand it. For this, we follow the design process chronologically in “Steps” and detail the value that art direction can bring to your designs.

The Definition of Art Direction

Andy Clarke, the designer, describes it as

the art of distilling an essential, precise meaning and purpose from a piece of content.
- Andy Clarke

Two different interfaces where art direction has been applied successfully

It can be defined as the process of selecting the best way to communicate a message using the panel of tools at the web designer’s disposal: colours, words, layout, images and typography. A right mix of these is what you must reach in order to suscitate emotions through your web, system or app creations. Further, art direction will also make people better understand content, perceive moods, get a feel for a brand or recognise its visual identity.

Problems are faced when art-direction is lacking

Many designers tend to forget that a website is, first and foremost, a means of communication. They can be tempted to design websites using quick fixes; i.e. themes or frameworks that saves them time but that do not take full consideration of project goals. In addition, they may often jump straight into creating the website’s visual language without paying full attention to the moods and feelings they need to convey. This shows a lack of art direction. And, when art direction is lacking, typical symptoms appear. Websites become mere replicas of one another: i.e. little more than barely modified templates, dry, soulless, unmemorable and failing at establishing a deep emotional connection with their users.

Two examples of website templates that lack soul and personality

The fix

To ensure your web design radiates soul and personality learn to art-direct the products you design. You need to know how to infuse character into them as well as to establish an emotional connection with your users.

Another important clue is included in another one of our articles, entitled “How to define a clear strategy”. There, we stress the importance of defining crystal clear goals from the very start of the project. Click on the link above and open the article in a new window; it will show you the basics of interface design and the steps to follow before the art direction stage.

Infuse the organisation’s brand identity into your creation,
Create something striking that will stand out,
Capture your audience’s interest,
Investigate rather than second-guess the design choices you should offer,
Keep the original goals in mind from start to finish,
Identify the main target audience of your website,
Determine what specific messages must be conveyed,
Define the desired impact you wish to have on your audience in terms of feeling as they interact with your product,
Seek to add value (how does your design contribute to this?),
Research and absorb the essence of the brand as early as possible from the beginning of the project.

The last point is particularly important: defining the organization brand attributes with your client is a great starting point that establishes bases for clear and solid design. Your clients know their brand better than anyone else and can explain the what, i.e. what they wish to communicate and sell through your design. As for you, you handle the how, i.e. how this will be implemented through design. You facilitate the brand’s communication and help it leverage a web solution that carries its voice.

Investigate at the start. Keep original goals in mind all the way. Create something striking that will do justice to the brand, to you as a designer and to web users.

Step 1: Identify the brand attributes

As an example, below is a simple exercise we do with clients to ensure their expectations are understood. Together, we list their brand attributes and select the most important ones within each pillar. This helps you think about your design from the right angle and then take the right direction. Remember that visual design and art direction grow out of existing brands.

The brand attribute exercise we do with our clients before projects

Step 2: Tone of voice

In addition, understanding the “tone of voice” of the brand will be key in choosing suitable typefaces that accurately and efficiently communicate. Think body copy, button labels and other UX copywriting. Moreover, typefaces are essential to convey brand spirit and visual identity. Turned into feeling, single words will tell you more about the connection you want to establish with the user through design. For instance, the words in the table above will give you a good idea on the best way to art-direct the types, negative space, images, colours and micro-interactions in your website.

Step 3: The direction the design must take

After defining the brand traits in our larger table, together with the client, we narrow down the list to only a few words which we can then visualize and use to give direction to the design.

Together with our client, we decided to take a creative direction based on the principles outlined in the circles.

Step 4: From thought to image

Once this exercise is complete, it becomes clear that the design will not be disconnected from the brand or audience. Typically, this step is concluded by creating a stylescape which translates thought process into visual composition. The stylescape allows you to tell the story of your design, the audience of the project and the global visual language to use. A stylescape that seamless aligns with a brand speaks volumes!

A stylescape I created based on a branding exercise made with a client.

Step 5: Layout — what goes where…

On a website, layout and typography play an important role in delivering a message. Together, they constitute the core of a website’s communication. As a result, keeping them in harmony is important. Generally, when you successfully pair types of font, use appropriate images, balance white space properly, use brand attributes and design, a personality emerges and the website stands out.

A good visual design must not only communicate, support, but also lead the user throughout their interactions. In fact, it must allow them to accomplish what they sought to do in the first place. When it comes to your design, make sure to start designing from real content and keep the goals in mind. This will create meaningful interfaces. Layouts suggest what needs to be read first and how much attention should be given to any part. In a sense, layout is storytelling Below is an example of three distinctive layouts we art-directed in order to provide different feels:

Three different page layouts.

On any given page, what message do I need to convey to the user?
Why did the user come on this page?
What actions do I want them to take?
What emotions do I want to create?

These questions give clarity on the type of layout to use in order to organize the content on a page. Using real content will deliver real results.

Image courtesy of Jen Simmons — Revolutionize Your Page: Real Art Direction on the Web

Conclusion

Use Art Direction to Magnify your Communication and Showcase your Talent.

As a competent UX designer, what you must aim for is to produce increasingly better designs. This is something that art direction makes possible. Remember that the prime purpose of visual design is not only decoration but also communication, Therefore, start today by applying the basics of art direction in every digital project you embark on. Your designs will become meaningful, they will help people connect emotionally and gain in efficiency. Art direction will determine the difference between a regular and brilliant creations. This, because good design choices will be made from the beginning of the project, and guarantee the success of your operation, from customer requirement to a masterful web interface.

How to combine typefaces successfully to add personality to your digital interfaces

2019-08-29T00:00:00Z

In my first article “ Great interfaces are made of good typography”, I explained some principles to master in order to create digital interfaces which communicate effectively with good working typography. In addition to that, my other article “How art direction will help you create masterful web interfaces” shed some light on how the choice of typefaces can influence the art-direction and the personality of a website and, therefore it’s brand.

In the present article, I will show you how to pair typefaces successfully in order to create a feel and add personality to your designs.

In fact, when combined properly, typefaces help to communicate a clear hierarchy as well as improving the reading experience of the user. Learning how to pair typefaces is the best way to add personality and create a design which feels right for the user on a website, app or system.

The purpose of this article is to help designers including anyone interested in typography to understand some techniques to use in order to combine different typefaces accurately and avoid any visual “cacophony” on their design.

Here is a brief guide with tips to remember when it comes to pairing typefaces.

The starting point

For any project you work on, you should always select your types wisely. Good pairing starts by knowing the kind of fonts you are looking for, and by defining the anchor typeface to find the best combination.

Know your typefaces

Generally, as typefaces have personalities and therefore different voices, it can be challenging to choose and combine them successfully to get the best combination of tone, texture and timbre.

In fact, on the 7 rules for great typography (Rules course available on Udemy), Joe Natoli recommends limiting the choice to two font families maximum to keep the design of a User Interface simple and consistent.

Moreover, understanding the writing goals and feelings of the content you typeset will help you to choose and combine typefaces correctly. When I work on a project, my favorite approach to find the typefaces is to use word association as a way of articulating the atmosphere and emotions I need to convey. In addition to that, I like to read about the history of the typefaces to understand their connotation and qualities in detail.

Example of a list of word association

Define the anchor typeface

Once you have an idea of the typefaces you want to use start by defining the anchor typeface. This will be your reference point to work out the size, spacing, contrast and to find good matches. Usually, body text typeface makes the best anchor as it represents the majority of the text people will read on a website. Anchoring your choices to a single typeface can lead you toward good combinations.

Methodology for good type pairing

Once you have set the anchor type, you are now ready to combine it with an additional typeface. Here is a method for you to follow in order to realize a successful type pairing.

Compare the typeface's letterforms

Once you have defined the base typeface, analyze carefully its structure and characteristics. This will help you to find potential similarities when you compare the anchor with a typeface to pair with. For instance, compare their letterforms such as the counter, loop, shoulder, and serif.

The anatomy of letterforms

When I need to compare two typefaces for pairing, I often analyze their x-height first, then I look carefully at the shape of the characters g, o, e and a to understand both their foundation and common traits.

For example, the character “o” by itself can give you good information about the classification and stress of a given typeface.

The anatomy of letterforms

The key point to remember at the end, is that harmonious types have relationships in their structure and complementary forms which strengthen their connection.

Bodoni and Eurostile typefaces

Bodoni and Eurostile are two different typefaces created by Italian typographers. They both work well together and here are the reasons: They share the same geometry and origin, even though they are separated by their period of creation. In fact, Bodoni was designed with a strict vertical stress giving it many symmetrical shapes that are echoed in the linear geometric form of Eurostile.

Bodoni and Eurostile working well together

Always look for contrast and distinction

To make the content easy to scan and read, it is important to always choose two contrasting typefaces. Having a good contrast between two types will highlight the hierarchy of the content. Always look for distinction while paying attention to the common characteristics the typefaces could have between them.

In case you use a single typeface across your project, contrast can be achieved by using a relevant font style or weight from the family.

For example, Adobe Caslon and Museo Sans combine well together and have a good contrast between them:

Adobe Caslon and Museo Sans = Good pairing

However, never combine two typefaces with strong resemblance between them. When they are too similar, they are indistinguishable.

Adobe Caslon and Baskerville = Bad pairing

Consider pairing Serif and Sans-serif types

In case you are in doubt when pairing two typefaces, you can always rely on this basic rule of thumb: Pairing one Serif with one Sans-serif typeface.

Generally, this combination works as it avoids wrong pairing. Although being straight forward, keep in mind that this combination is not necessarily the best.

Adobe Caslon and Museo Sans = Good pairing

Below is a piece of content I art-directed pairing two different typefaces. I used the serif typeface “Bodoni” for the headlines and list items to give my design an Italian feel. I chose to use the sans-serif typeface “Maven Pro” for the body text to infuse a modern style to my layout. Even though they are different, both typefaces work well together. Furthermore, they are well distinguishable since they have enough contrast between them.

Bodoni and Maven Pro

Combine fonts from the same family

If you begin to work with types and not yet familiar with how to pair typefaces, this is the safest approach to consider.

In fact, typefaces provide a collection of ready-made and matching fonts. This is the easiest way to look for pairing. You will just need to pay attention to contrast in order to make the hierarchy of your text distinguishable.

This is a rule of thumb when you start learning about typography. Always master one type and use the provided style and weight to arrange the hierarchy.

Proxima Nova Semi Bold and Proxima Nova light

Pair typefaces from same author or origin

When you work with typefaces, it is important to know the history and origin of the types you are working with. This will also help you to understand more about their author.

Combining typefaces from the same author could be a good starting point as they often share the same style and structure defined by the author. This approach will help you to have good combinations most of the time. Note that pairing typefaces from the same foundry can also be relevant.

For example, the typefaces Joanna and Gill Sans were designed by the British typographer Eric Gill. Both typefaces work well and share the same style and skeleton. As illustrated in the example below:

Joanna and Gill Sans

In the below example, the typefaces Johnston and Gill Sans combine well together as they share the same origin.

In fact, the typeface Gill Sans is also a British typeface which was designed based on the skeleton of Johnston. The type Johnston itself was created by the British typographer Edward Johnston.

Here is a piece of article I art-directed pairing the two typefaces to bring together the style of the London tube underground. Note that the typeface Johnston is the one used on all the materials of the London underground.

Johnston and Gill Sans

Conclusion

Combining typefaces is necessary If you want to make your content accessible and pleasant to read.

When the typefaces are well chosen based on the context of use and aligned with the brand tone of voice, it brings personality to an interface. Moreover, these will show the user that you cared about their reading experience by spending time working on good typographic decisions. Good typeface pairing will help you create a design which looks unique and different from the majority of websites around the web.

Jerome Kalumbu

Further reading:

Flexible Typesetting by Tim Brown
On Web Typography by Jason Santa Maria
Type Matters! by Jim Williams
Web Typography by Richard Rutter
Stop Stealing Sheep & Find Out How Type Works by Erik Spiekermann

Lastly, If you are lazy, the following sites can suggest or generate good font pairing for you ;):

How to define a clear design strategy

2019-09-23T00:00:00Z

Start by defining a strategy and clear goals

Whether you are designing for the first time or redesign a website, app or system, you are undertaking a complex task which requires a lot of discipline and clarity throughout. If you do not approach it properly, a project can turn into chaos and require countless hours of design and development to accommodate unnecessary features. In any project in which you work as a UX designer, it is fundamental to start by drafting a solid strategy; this will help you design a solution that both meets business goals and user needs.

At the start of any project, keep in mind that user experience is about aligning business goals, user needs, and brand communication.

Today, there are still designers who focus too much on creating pixel perfect designs without thinking hard about the purpose of the solution they wish to bring. Besides, they become too emotionally attached to their creation and forget that design should solve specific problems. As a result, they spend huge amounts of time designing inappropriately, then struggle to convince the stakeholder at approval stage. Visual attractiveness does have value, but it’s only a small component in great user experience. Generally, users care more about getting their task done and dusted than about interface design.

Prioritize function over beauty

I will now explain why it is important to always start a project with utmost clarity with a story: A few years ago, I was working as a UX designer on a complete website overhaul for a non-profit organisation. There I missed defining a clear strategy. This project was though, and I did the mistake of working long hours by myself focusing only on the visual design; I had completely forgotten the user!

I did not spend enough time aligning users needs, business goals and learn about the organisation’s brand attributes. Very soon the website project became a nightmare: every stakeholder was fighting to add tons of unnecessary features to the website. I know that many of you have been in this situation, struggling to get sign-offs and ending with cluttered and inaccessible pages. In the end, the project derailed from its main focus and lasted 1 year instead of 6 months.

Ask the right questions

Since then when starting a project, I have changed my mindset for good. I am now a believer of the following If you are struggling to get stakeholders validating with your ideas and to keep the project focused, always start by defining the WHY? WHO? and WHAT?.

For instance:

Why are we doing this?
Who is it for?
What value does it bring?
What are the business goals and user needs?
What can we realistically do?
What are we creating exactly?

Starting a project this way will help you understand how to tackle the right problem. When working on the design or redesign of a project, it is important to lead your design process from the beginning and get everyone aligned with your process. It is also important to consider all stakeholders when they collaborate with you, they will feel appreciated and valued. One of the benefits of this is that they are less likely to come with unexpected and complex changes at a later stage. They will recognize you as the expert capable of diagnosing a problem and delivering the best solution.

Focus and invest more time understanding how you will solve a problem before designing anything.

“If I had an hour to solve a problem, I’d spend 55 minutes thinking about the problem and 5 minutes about solutions.”

- Albert Einstein

Shaping the user experience of a project requires discipline. As we saw in the article, a proper way is to have a clear and solid strategy from the get-go. This way, you will give yourself a good chance of succeeding and delivering the best outcome for the project. Always plan for success. I will conclude this article with this memorable quote from Benjamin Franklin:

“If you fail to plan, you are planning to fail!”

Thanks for reading.

Jerome Kalumbu

Further reading:

The Elements of User Experience by Jesse James Garett
Designing Products People Love by Scott Hurff
UX for Lean Startups by Klein
Think First by Joe Natoli

7 rules for great web interface design

2021-11-08T00:00:00Z

When you work on a website or on the design of web pages, remember that their success is not determined by the beauty of their visual style. In fact, in his article “10 Principles Of Good Website Design”, Vitaly Friedman stated:

Usability and the utility, not the visual design, determine the success or failure of a web-site.
- Vitaly Friedman

The problem

Sadly, many designers concentrate their efforts on designing trendy user interfaces without considering the audience and goals. As a result, they create interfaces that are complex, sometimes unrealistic and inappropriate.

This article attempts to address this problem by describing 7 rules for designers and anyone interested in user interface design to create web pages that are functional and visually attractive.

Let’s get started!

Rule #1: Define the goals of the page

On a website, each page should accomplish a goal, solve a problem and serve the user. To start your design on the right track, ask yourself the following questions:

Why am I designing this page? This question will enable you to understand the problem the design should solve in the first place.
What are the goals of the page? Defining the goals of the page will give you a better understanding of its purpose. For example, the business goal of a page can be to:
- Sell a product or service;
- Encourage users to sign-up;
- Promote some benefits to the users.

But, a page can also have multiple goals. Pay attention to this important aspect.

Rule #2: Know your audience

To design an appropriate interface, you must know what is your target audience and keep that in mind throughout the design process; this will aid you to make relevant design decisions.

In fact, to visualize your ideal users, I recommend you to create empathy maps since they are a snapshot of the users focused on what they want to achieve. In general, you can create them from the data you collected during the research phase of your project.

Empathy-map template designed by Paul Boag (User Experience Revolution)

When it comes to designing a specific interface, put the user at the centre of your work by answering the following questions:

Who is the target audience?
What matters for the user on this page?
Why should the user visit this page?
What tasks does the user want to accomplish?
What questions will the user have in mind when visiting the page?
How should I address these with my design?

At this juncture, we understand the importance of both the goals and the audience in designing a successful web interface. Jon-Mikel Bailey puts it more clearly in his article “Better UX Is A Compelling New Feature”:

A good user experience is one where the user’s needs are met and the business goals are achieved.
- Jon-Mikel Bailey

Rule #3: Choose your calls-to-actions

To guide the users toward their tasks and encourage them to act, you should always think about the actions you want them to accomplish.

When you ask yourself the following question, you will have an idea about the call-to-actions to consider on your interface:

What do I really want the user to do on the page?

Generally, I tend to use two types of call-to-action when I design a page. For example, the primary call-to-action is usually the more prominent and used to highlight the most important goal. It can be something like “Sign up”, “Register”, “Buy” or “Get in touch”.

However, the secondary call-to-action is less important and used to emphasize a less prominent action. Finally, to avoid confusing the user, each type of call-to-action should have a distinctive visual style.

Zeroheight website homepage.

For example, on the Zeroheight website, the main goal of the business is to encourage the user to sign-up so they can get a free trial to use their tool. This action is shown to the user with the primary call-to-action “Try for free”. But, If the user is not yet ready to complete this action, he has the possibility to click on the secondary call-to-action “View examples” to learn more about the service. As you can see, both call-to-actions have a distinct visual style.

Rule #4: Content first

From the beginning, work with the real content in order to understand the story and how to structure your page. If you don’t have the content provided to you, do your best to write it in order to have at least the initial draft in place. Always get the content established first, and then build the design around it.

Below is a list of tips to help you write compelling content:

Who are you talking to?: Consider your audience to write content based on user needs.
Avoid distractions: Consider writing in a low-fidelity environment like a text editor to avoid being distracted by any visuals or text formatting;
Be human: Use the second person (You) when referring to the user to make your content approachable and engaging.
Answer the user’s questions: When visiting a website, the user has specific questions in mind. Your copy should give answers to these questions.
Don’t be verbose: Be concise and clear as much as possible.
Make your content scannable: Break down your content with headings, subheadings, paragraphs, pull-out quotes and lists. Remember: users don’t read pages but scan them instead.
Write in plain language: Avoid the use of acronyms, jargon and complex words that will require the user to think.
Avoid walls of words: Make sure to break down your copy into small chunks to make it easier to process and read. Large blocks of text are difficult to process.
Voice and Tone: Consider the kind of emotions you want to evoke with your message. For example Friendly? Informal? Formal? I will explain more this point in rule #6 below;
Avoid Lorem Ipsum: Using Lorem Ipsum text will encourage you to focus on a meaningless design that is likely to be distorted later, once the real content is in place.

That said, content should always come first. As Jeffrey Zeldman once said:

Content precedes design. Design in the absence of content is not design, it’s decoration.
- Jeffrey Zeldman

Rule #5: Wireframe your interface

To determine how the content should be organized on the page, start by drafting different approaches of the layout on paper based on the goals. This task will keep you focused on the page layout, content structure and interactions without being distracted by any colour, fonts or graphic elements. Whenever possible, collaborate with the client, stakeholder or any member of your team to share the ideas.

Photo by UX Indonesia on Unsplash

In his article “My five commandments for wireframing” Paul Boag confirms the benefits of starting a design from hand-drawn sketches:

To keep a light weight, spontaneous approach, wireframes should be initially produced with pen and paper.
- Paul Boag

When wireframing, consider how the information should be displayed starting from mobile to desktop screens in order to think about the whole experience and prioritize the necessary information.

Once you are happy with your sketches, feel free to refine them on the wireframing tool of your choice.

Finally, test early and often your wireframes with a few people outside the project and iterate until you have a great solution to the problem you are trying to solve.

In the last two guidelines, I will advise you on how to approach the visual design of your interface in order to make it visually attractive and memorable.

Rule #6: Art direct your design

If you want to develop trust and make people connect with your interface, you should consider applying art-direction to your design to create a distinctive personality. In his book “Art Direction for the Web” Andy Clarke said that art-direction:

“Uses design techniques to intentionally evoke an emotional response from someone when they read an article, use a product, or visit a website.”
- Andy Clarke

To art-direct your design, start by asking yourself the following questions:

How do I want the user to feel when interacting with the site?
What do I want them to say?

In addition, write a shortlist of words that convey the impressions you want users to have when seeing your site. These attributes will define the personality of your design and guide you on which typefaces, photography, colours and layout are appropriate to use.

Finally, the copywriting of your page (e.g: body copy, labels and error messages) should be created around these attributes to reflect the correct voice and tone. For example, Mailchimp and Smashing Magazine websites have a visual language and copy which conveys their personalities efficiently.

Smashing Magazine personality defined around the attributes: Playful, Quirky, Formal, Respectful and Kind.

MailChimp personality defined around the attributes: Playful, Nice and Friendly.

To learn more about how I art-design my designs, consult my article “How art direction will help you create masterful web interfaces”.

Rule #7: Make it beautiful

Once you determine the design direction of the site, your next step is to make the pages visually attractive and enhance their functionality. A successful visual design will put the user in a positive frame of mind about the whole experience of the website; this will make them believe the website is trustworthy and easy to use.

Below are critical design principles to consider if you want to create an interface that is easy to use and pleasant to see on screen.

Balance: Achieving visual balance will make your interface feel right and comfortable for the user to stay engaged with. Symmetry, Asymmetry and Radial balance are three ways to balance elements on a design.
Alignment: Alignment helps to create order, arrange your elements as well as create visual connections. For instance, the use of Grids can help you ensure great alignment and improve the readability of your interface design.
Contrast: Contrast helps to create variety and visual interest in your design when successfully applied. For it to be effective, one element such as shape, colour, size, weight or texture must look different from another.
Consistency: UI Elements that have the same function and purpose should be styled in the same way. This will make your interface easy to use.
Negative space or (White space): Negative space brings focus to the content, improves readability and builds visual hierarchy. Also, it can help the user process easily the content on the page.
Colours: Use a small number of colours in your palette to avoid a “rainbow effect”. The colours you choose should reflect the personality of your site’s brand.
Typefaces: Make sure to choose readable and legible typefaces for your design. To learn more about how to choose appropriate typefaces for your project, read my article “Great interfaces are made of good typography”.

To go further on this subject, I suggest you read the book “Designing Visual Interfaces” by Kevin Mullet and Darell Sano. Also, understanding the Gestalt principles will help you design interfaces that work visually.

Conclusion

As we have seen in this article, a successful user interface design requires you to think further than the visual aspect. I hope that the guidelines I stretched under this article will assist you in the creation of meaningful and easy to use web interfaces.

Jerome Kalumbu

Recommended Articles

10 Principles Of Good Website Design by Vitaly Friedman
How To Use Spaces In Web Design With Gestalt Principles by Ayesha Ambreen
30 Powerful Call to Action Examples That Are Successful by Paul Boag
Why designers should never use fake text by Jerry Cao

Recommended Books

The law of simplicity by John Maeda
Designing Visual Interfaces by Kevin Mullet and Darrell Sano
Think First by Joe Natoli
Art Direction for the web by Andy Clarke
User Experience Revolution by Paul Boag
Don’t make me think by Steve Krug

Psychology is your superpower to design user-centred interfaces

2022-01-04T00:00:00Z

Understanding how people think and act is fundamental to designing effective user interfaces. Sadly, most designers ignore that cognitive psychology is the essence of how people interact, feel and process the information on a website.

In his article “What is Cognitive Psychology?” Bryn Farnsworth, Researcher in Neuroscience, gives the following definition for cognitive psychology:

“Cognitive psychology is the science of how we think. It’s concerned with our inner mental processes such as attention, perception, memory, action planning, and language. Each of these components are pivotal in forming who we are and how we behave.”

- Bryn Farnsworth

Thinking Fast and Slow by Daniel Kahneman

The human brain uses two systems to process information.

In his book, “Think fast and slow”, Daniel Kahneman explains that people use two ways of thinking to process information: System 1 (Subconscious) and System 2 (Conscious).

Whenever we are awake, both systems are active; System 1 runs automatically and System 2 operates in a low effort mode in which only a fraction of its capacity is engaged. Daniel Kahneman argues that System 2 articulates judgement and makes choices, but often endorses or rationalizes ideas and feelings that were generated by System 1.

In sum, System 1 enables us to quickly identify the information relevant for a task or problem, and System 2 uses this input to execute or inhibit action. (e.g acting on a website).

Let’s have a closer look at these two systems and why they are important to consider when designing a website.

System 1: is fast, emotional, impulsive and automatic.

System 1 is fast, emotional, impulsive and operates automatically with little effort and no sense of voluntary control; It is where all our thoughts are controlled automatically—most of our behaviour is emotional and driven by System 1.

According to Therese Fessenden, UX Specialist, System 1 is fast at recognizing simple relationships or identifying familiar patterns on an interface. For example System 1 allows you to make instinctual decisions based on previous experience and mental models.

Also, System 1 is responsible for judging if a product is trustworthy or safe to use; that’s why a website should feel familiar to its users to feel safe and be easy to use.

Since System 1 is responsible for forming impressions and feelings that are the main sources of our beliefs and deliberate actions, a website must have refined aesthetics to convey trust and encourage people to act.

To understand better how System 1 works, let’s take the example of a user who lands on a website. In less than a millisecond, System 1 will be responsible for making hundreds of decisions and drawing conclusions such as:

Did I land on the right website?
Should I trust this website?
Is it safe to proceed or should I avoid it?
Does this website look familiar to me?
Would I get spammed if I subscribe to this newsletter?
I really like this design!
...

Note that all these thoughts happen in a fraction of a second, before System 2 processes the information.

Loss aversion bias: System 1 fears loss

Yet in his book, Think Fast and Slow, Daniel Kahneman uses the expression “losses loom larger than gains” to explain that in people, the pain of losing is greater than the satisfaction of an equivalent gain.

In fact, you must be aware of this concept whenever you design a website since they often require the user to give up money when they buy a product/service or their personal data when they subscribe to a newsletter, for example.

Since System 1 fears loss, Paul Boag recommends that designers emphasize more benefits than features in their interfaces to help the users overcome their objections; another great example to help the users overcome their fear before investing in a product or service is to give them the possibility to try it for free before purchasing it.

Amazon Prime landing page addressing amazingly the user’s concerns and objections

That said, in UX Design, user research is vital to better understand the users’ mental models, goals and objections to design a site, system, or app aligned with their expectations and needs.

Remember, designers should consider seriously designing for System 1 since it influences largely decision making.

System 2: is Slow, deliberate and Analytical.

However, System 2 is slow, deliberate and allocates attention to the effortful mental activities that require it. When System 1 runs into difficulty and fails to answer a specific problem, it calls on System 2, which supports more detailed and specific processing to find the answer.

System 2 is responsible for conscious thoughts that need concentration such as focusing hard on a task, learning how to use a new interface, solving complex tasks or a difficult math problem.

For example, when browsing a website, a user will rely on system 2 when comparing products with different prices and information. In order to do that, he will need to concentrate and use it’s working memory to remember the information. Remember, every element regarding information architecture, including, labelling and content are processed by system 2.

List of products with different prices and information.

The human working memory is fallible.

In UX Design, a common concept related to working memory is the concept of cognitive load. Hence, if a task provokes a high cognitive load, it means that it relies heavily on the working memory.

For example, when an interface is hard to use, people are generally frustrated and sometimes furious because it takes them lots of mental effort to process the information and, therefore, achieve their tasks. This happens because System 2 can get overwhelmed and tired quickly since the working memory has a limited capacity.

For this reason, the website you design has to present the information in a clear and digestible way to help the user access the information they need effortlessly.

Designing for System 1 is your primary goal.

Remember, before System 2 kicks in; System 1 is already in operation.

So, to make a positive first impression and capture the user’s attention, the design of your website must be appealing — art-directing your website is a compelling way to design pleasant and memorable interfaces. Below are some tips that will help grab the attention of System 1 in your interfaces:

Clear visual hierarchy;
Expressive/High-quality typefaces;
High-quality imagery;
Simple colour palette (Limit your palette to three colors)
Rounded shapes/corner;
Align your design elements on a grid;
Focus on the benefits instead of features in your copy to make System 1 less feel the sense of loss.

This Interface demonstrates how great typography, simple colour palette and great imagery captivate’s attention

Remember, everything regarding information architecture, including labelling and content, will still be processed by System 2. So, for example, make sure to apply the following tips to make sure not to overwhelm System 2 whenever it is in use:

Speak the user’s language in your interfaces;
keep the primary users’ tasks simple to achieve to avoid mental fatigue and frustrations;
Rounded shapes/corner;
Separate the content into chunks of information to avoid clutter;
Maintain consistency and use standards design patterns so the user finds the interface familiar;
Avoid competing call-to-actions in your interfaces; make sure that the primary call-to-action is more prominent against the secondary call-to-action.

Conclusion

To conclude, designing for System 1 is vital. Remember, System 1 is judgemental — it reacts emotionally and instinctively. Also, keep in mind that a tailored website for your users will look safe, familiar and easy to use.

Whenever you work on a UX project, always research your users to increase your chance of designing a website that meets their expectations; this will also help you prioritize the content and features that support their primary goals in your interfaces.

Lastly, to go further in learning about how to design better interfaces for people, I highly recommend that you read the “10 Usability Heuristics for User Interface Design” written by Jakob Nielsen.

Jerome Kalumbu

Recommended Articles

How to Use Psychology the Right Way to Improve Conversion by Paul Boag
First Impressions Matter: How Designers Can Support Humans’ Automatic Cognitive Processing by Therese Fessenden
Mental Models by Jakob Nielsen
10 Usability Heuristics for User Interface Design by Jakob Nielsen
What is Cognitive Psychology? by Bryn Farnsworth
Working Memory and External Memory by Raluca Budiu
Think Fast and Slow by Daniel Kahneman
Emotional Design by Donald Norman

7 tips to create a successful content outline for your web interfaces

2022-01-12T00:00:00Z

In my article “7 rules for great web interface design” I spoke briefly about the importance of gathering the content before wireframing anything in order to design great web interfaces.

Gathering content from stakeholders is hard

I am aware that in some projects, collecting the content from stakeholders is complicated. In fact, they are often too busy or unaware that content is an essential piece for the designer to create a layout that addresses their business goals and user needs.

In this article, I will give you 7 tips to help you create a content outline whenever you fail to receive any text from the beginning. By following these tips, I hope you won’t rely anymore on using “Lorem Ipsum” content to design your web pages.

Think about the story you are telling before thinking about the layout

In fact, when you work on a website, you should always design the layout of the pages from real content. It’s critical to get the narrative of the page correct before thinking about its organization.

Remember, It’s the content that should dictate how the web pages should look and not the way around.
As Jeffrey Zeldman once said:

Content precedes design. Design in the absence of content is not design, it’s decoration.
- Jeffrey Zeldman

The problem when you don’t design from real content

In general, when designers don’t receive any content, they often use ‘Lorem Ipsum’ content as a solution to start creating their wireframes. This approach isn’t ideal because you don’t consider the reading experience of the user and the goals of the page. Moreover, your design choices are based on the visual style rather than on the essence of the message.

Instead of designing from ‘Lorem Ipsum’, designers should at least create an outline of the content. In my opinion, this approach is better because it gives an idea of the sense of the message on the page. In addition to that, the content can always be refined later by a professional in copywriting.

The outline you create should reflect the following elements:

The content’s priorities
The content hierarchy
The main idea of the story/message
The approximate number of lines and words

Now that you have an idea about the essential elements of the outline, let’s get started with the tips.

N.B. To create your content outline, I suggest that you work exclusively on a text editor to avoid any distractions.

Tip #1: Ask yourself these critical questions

Who am I writing for? (Which users or personas?)
What do they want?
Which questions need clear answers for users?
What messages are we trying to communicate?
What are the objections we need to address? (What can block users from completing their task?)
What actions do we want people to do? (Think about the main call-to-action)

Tip #2: Content should be user-centred and useful:

First of all, when you write the content, put yourself in the perspective of the user. Think about the information they need as well as the answers to the questions they can have in mind when visiting the page you are designing. If the goal of the page is to sell a product or service, the content should focus more on the benefits rather than the features. This way, the content will encourage the user to take action.

Tips #3: Content should be goal-oriented

When you write the content of your web pages, think about the action you want people to take. In other words, imagine the call-to-actions that will be on the page. Remember, your content should inform the user but also encourage them to take action on the site. Regarding the labels of your call-to-actions, create a sense of urgency by using words like Today (e.g: Join today) or Now (e.g: Subscribe now). This will encourage them to act promptly.

Tips #4: Prioritize the information

Prioritize the content on your pages so that the user can understand the content hierarchy. Write only the information the user needs on the page. That’s said, avoid giving too much information to the user at once, especially the information that isn’t relevant to the page you are designing.

Tips #5: Provide a clear visual hierarchy

The user stays very little time on a website in general. They skim the content to look for information or answers to their questions and leave the site. According to Jakob Nielsen, users are busy. This is why it’s important to lead them to their goals with a clear visual hierarchy. That’s said, users need to scan the content in order to identify quickly the kind of information they seek. You should make it easy for their brain to process the information by “chunking” the content. Remember, the users don’t read pages but scan the content instead.

As Jakob Nielsen said:

On the average webpage, users have time to read at most 28% of the words during an average visit; 20% is more likely.
- Jakob Nielsen

To make your content scannable, break it down with headings, subheadings, paragraphs, pull-out quotes and lists… Do not fall into the trap of writing as you would write a piece of content for a book or journal because users won’t read every word. You are writing for the web and your users are busy. In addition to that, they might use the website under pressure or distractions so make sure to break down the content and make it scannable.

Tips #6: Be clear

When you write for the web, don’t be verbose. Be concise and clear as much as possible. Write in plain language and avoid the use of acronyms, jargon and complex words that will require the user to think. Microcopy should be short and unambiguous. Good content is clear, useful and friendly. Write short sentences and get to the point quickly. Always give short and concise information to the user.

Tips #7: Be human

Use the second person (You) when referring to the user to make your content approachable and engaging. In addition to that, let your content convey some emotions and feelings to the users by writing with the appropriate voice and tone.

Conclusion

The user doesn’t come to a website to enjoy the visual style but instead to find answers to their questions. For this reason, the content should be at the centre of the designer’s attention when working on the design of a page. A good user experience starts from content that provides value to the user and to the business.

Jerome Kalumbu

Recommended Articles

10 Steps to Compelling Website Content Creation by Paul Boag
How Chunking Helps Content Processing by by Kate Moran

Recommended Books

Letting go of the words by Janice Redish
Don’t make me think by Steve Krug

Your website should help the user survive or thrive to avoid failure.

2022-11-01T00:00:00Z

Designing an interface that drives your business goals requires time, effort and expertise.

The goal might be to sell products to increase your revenue, promote your business to build brand awareness, or attract new clients.

Whatever the goal of your page, If your content fails to justify why users should care about it, the interface will suck.

The Problem

I wrote this article because I am tired of seeing businesses and individuals promoting themselves instead of clearly explaining why users should care about what they offer on their corporate or portfolio sites.

This approach is wrong because these businesses don’t explain how their brand can help users overcome their challenges and frustrations.

In this article, I will explain tips to help you create interfaces that truly engage your users and drive your business goals.

The user is the hero of the story, not you (nor your business)

Users come to your site to overcome a problem or pain that prevents them from achieving a goal. For this reason, your site has to answer their burning questions to improve their lives.

For example, if you design a homepage, you must demonstrate why users should care about you if you want people to stay more than a few seconds on the site.

The best way to do this is to put the user at the centre of the story by asking yourself the following questions:

Which problem do they have?
What information do they need to know to take action?
What do they want to achieve?
What are their questions and objections?
What are their needs?

Understand: Only listing your product or services on your site is noise because it doesn’t explicitly address your user’s primal needs.

So, to hook the users to your interface and eventually persuade them to act, you must clearly explain how the story you tell on the website will help them survive or thrive.

Address your users’ inner frustrations

Users will visit your site to complete their tasks and improve their lives.

But, to encourage users to engage with your site and solve their problems, you need to explain how your brand’s value proposition helps them defeat their internal problems.

In the book “Building a Story Brand (2017)”, Donald Milner defines these internal problems as evils or villains to defeat.

These internal problems are pains causing frustration, such as lack of time, confidence, skills, self-esteem and stress.

Let’s imagine you are a UX Designer.

Like most businesses, you might think that clients and recruiters will be interested in you only because you design beautiful digital products and have excellent UX Skills.

While these external problems will influence their decision, you must demonstrate the internal problems that your brand helps to solve.

This is critical because it’s the reason why clients and recruiters might pick you over the competition.

In a nutshell, external problems will sell much better when coupled with solutions to internal problems such as:

Improve brand awareness
Improve self-esteem;
Improve network;
Attract more customers;
Become more powerful/skilful;
Gain confidence;
Gain freedom;
Grow revenue.

Note that all these are examples of needs related to the survival of human beings.

In short, If these needs are addressed on your site, your message will resonate with your users, and your interfaces will be more effective.

Maslow’s pyramid hierarchy of needs

In 1943, Abraham Maslow established a hierarchy of human needs, arranging them according to their importance to our survival.

To engage with your users at a deeper level, you can use Maslow’s pyramid hierarchy of needs as a blueprint to illustrate how your site and brand will help them survive or thrive.

Remember, if you focus solely on your services and features without speaking about the internal needs that you solve, all you will do is noise — people won’t bother listening to what you are saying.

Dos and don’ts

My portfolio back in 2016 (Don’t)

Above is a screenshot of the homepage of my portfolio back in 2016.

This interface was tragic because I focused exclusively on my story and the technical problem I solved. In addition, I forgot to explain how I helped my audience survive or thrive — I didn’t give them a reason to care about the story I told.

As a result, my portfolio’s homepage failed to convert.

Don’t do this for any page you design.

My portfolio in 2021

However, if you take the homepage of my website today and look at the copy, I made sure to address the internal needs of my audience.

With the words “make money” or “improve their UX design skills”, I clearly state how my brand addresses the primal needs of my audience.

Since I implemented these changes, the interface has converted much better than the previous one.

Smashing magazine Workshop page (Do)

On this page of Smashing magazine — “Boost your skills” is a promise that targets people that are willing to improve their skills in Front-end and UX. Smashing magazine gives a valid reason for users to care about attending their workshops.

Conclusion

Human beings are biologically programmed by needs and desires such as survival, freedom, growth, social connections, and love.

As soon as our brain recognizes words or images that resonate with these needs, it will be hooked — this is how you can make users engage and interested in the story you are telling — and sell more.

Forget about speaking out loud about your features and services. Focus on justifying how your offering will help your users survive or thrive, and the success will be yours.

Thanks for reading!

Jerome

Typesetting can break or make your layout

2022-12-22T00:00:00Z

Every day millions of people read different types of content on the web.

Typography influences how we comprehend the content and feel about the experience and the brand — for this reason, the reading experience on websites must be excellent.

Using Typography creatively and thoughtfully is a chance to stand out and make your interface look professional, attractive and functional.

Sadly, when websites are dry and poorly typeset, it's difficult for users to process the information and comprehend the message — when typography is overlooked, the design looks amateurish.

I wrote this article to help you create engaging interfaces with good typography.

Typography and content go hand to hand

Typography is one of the most important aspects of a website because it helps convey the message to the reader. It's the visual representation of the written words to enable the user to consume and perceive the content online.

“Typography has one plain duty before it, and that is to convey information in writing.”

- Emil Ruder

As I explained in my article Great interfaces are made of great typography, you must choose typefaces that are readable and legible to convey the content effectively.

Readability is the impression of how easy it's to read words, phrases and blocks of text. On the other hand, legibility refers to how clear it's to distinguish the letterforms when reading.

Scale

A great visual hierarchy is fundamental to help users process the information effortlessly and understand the order and structure of your content.

One way to establish a good visual hierarchy is to use a typographic scale to determine the size of your typographic elements to achieve a smooth reading experience. Choosing the correct scale is also important to tell your story appropriately.

Which scale to use?

A scale includes a range of contrasting sizes based on a ratio to define appropriate sizes for your text elements, such as headings, sub-headings, list and body copy. The scale that you will decide to use will depend on the goal of your design and the feel you want to convey.

Remember, every typeface has different personalities, voices and timbre; choosing an appropriate scale and typeface for your design is your superpower to manipulate the way users will feel when interacting with your interface.

Generally, I always define the sizes of my typographic elements on the Medium-scale "Perfect Fourth 1.333" or "Major Third 1.25" because they include font-sizes that work well for a variety of desktop sites such as blogs, corporate or marketing sites. These scales are suitable for design aiming to feel.

However when I want my design to feel bold or add drama I use Large scales (1.333 or greater) to attract the users’ attention — especially with headlines.

Note that for the mobile screens, you can use a smaller scale to define lower sizes for your text elements.

https://type-scale.com/

To visualise and pick the types of scales that you could use in your project, I suggest that you use websites like Type Scale or Utopia.

Headlines are meant to be noticed.

Headlines and subheadings demonstrate hierarchy and are perfect to grab your reader’s attention. Headlines are your opportunity to interrupt, seduce and draw people into your content with an expressive typography.

Choose Display typefaces since they strike at large sizes, and are suitable for creating an image that visitors see before they read. On the design below I use the typeface “Prometo”

Another way to be expressive with typefaces is to be creative with your main headlines. For example, you can use a typeface that offers different styles and weights that you can combine from a font-family like “Inter” this will create an appealing graphic image that people will see before they read.

Typesetting

In a nutshell, Typesetting is the arrangement of words in order to create an optimal reading experience — it’s what forms the backbone of the reading experience on a layout.

When you typeset a content type like an article, no matter the language of the content, treat it like a piece of art to achieve a great reading experience for your users:

Below are 7 characteristics to consider to prepare well the text for reading:

Based on the typographic scale, choose appropriate sizes for your typographic elements like headings and paragraphs. Most web interfaces utilise a base font size of (16px or 1rem) as a good starting point for paragraphs and labels, so they are readable and legible.

Font pairing

Pair contrasting fonts/typefaces to mark differences and enhance the visual hierarchy. One easy way to achieve good pairing is to combine a serif with a sans-serif typeface — or to choose fonts/typefaces with similar legibility and readability characteristics.

Line-height

Line-height or leading refers to the white-space inserted between lines to give the content a more readable and legible appearance. Adjust the line height until it looks and “feels” right for your design. For example, more space can make your content feel luxurious. But don’t set a line height which is too loose, as it can become harder to read.

You should always increase the amount of leading for reversed designs.

Letter Spacing/Kerning

Refers to the space between letters; play with tracking to give your headlines a special feel. But pay attention to not having a small tracking between characters in paragraphs, as it can make your content look awkward and hard to read.

Paragraph size

For long content like articles, define your paragraph length to about 40-70ch; some research shows that you can go up to 100ch max for the paragraph length to ensure a great reading experience.

Paragraphs/standfirst

Adds interest draws the user into your content. Go big in that one as it can also enhance the hierarchy of your content and make your content easier to scan

Drop Caps

Drop Caps are the initial letters at the beginning of a paragraph on a book or journal. Applying this effect on the web gives an original texture and feel to the piece of content. It leads the user’s eyes into where the content stats and gives

Conclusion

Next time you want to create an impact and engage with your users, consider using expressive typography for your headings and typeset your content beautifully to create a comfortable reading experience.

5 rules to boost UX with a clear visual hierarchy

2023-04-09T00:00:00Z

Recently, I’ve decided to help one of my friends to redesign his website. However, before diving into the creative part of the website design, I spent a week reviewing a couple of websites to find inspiration about how I could use typography.

While reviewing these websites, I was surprised by how difficult it was to process the content without feeling overwhelmed by the amount of information on the pages.

These sites had one problem in common: The pages were very busy and hard to read because of a lack of visual hierarchy.

When an interface lacks a clear visual hierarchy, it is likely to provoke a high cognitive load on users because it might be difficult for them to understand where to look for the information that will help them survive and thrive when scanning the pages.

Since a bad user experience impacts the business behind the system, app or website, it’s our responsibility to consider every detail, such as the quality of the visual hierarchy, to design the best solution for the business and its customers.

According to studies by the Norman Nielsen Group, users don’t necessarily read the content on a page; instead, they scan it until they find what they need.

On average, users will read only 20% of the text. That’s why having a clear visual hierarchy to guide users through the content is essential.

To clarify, visual hierarchy refers to the organization of design elements by priority on a page used to draw users’ attention toward the parts of the interface we want them to see.

Example of visual hierarchy

You can use several ways, like shapes, colours, sizes or typography, to enhance the visual hierarchy on an interface.

In this article, I will introduce five tips I love to use to create better visual hierarchy in my designs with typography.

Once you put these tips into practice, you will improve the usability of your interfaces and elevate the quality of your designs.

1. Size/Scale

Use a type scale to assign consistent sizes to your typographic elements.

When using a scale, you will create a clear visual hierarchy since users will first notice prominent elements before seeing smaller ones.

Whenever you work on an interface design, set different font sizes for your typographic elements, such as headings, paragraphs, or quotes, to create contrast and enable users to scan the content better.

Choose a large font size for your headlines and smaller sizes for your paragraphs and micro-copy

Rule of thumb: Use bigger sizes to emphasize essential elements and smaller sizes for less important ones to establish a clear visual hierarchy.

2. Font variations

Use font variations to enhance the visual hierarchy on your interfaces.

Most typefaces you can find on Google Fonts or Adobe Fonts include variations of styles that you can use to create contrast and enhance the visual hierarchy in your interface designs.

Common styles include light, regular, bold, and black. One way to create contrast between your typographic elements is to use a bold font style for your headings to make them stand out and use a regular or light font style for your body paragraphs.

For example, the typeface ‘Source Serif Pro’ offers a variety of styles including ExtraLight, Light, Regular, SemiBold, Bold, and Black.”

The heading is styled with Source Serif Pro Bold, while the paragraph text is set in Source Serif Pro Regular

Rule of thumb: Pick typefaces with several font variations on your designs. This allows you to create contrast effectively and enhance the visual hierarchy of your design.

3. Color & contrast

Another great way to draw users’ attention and establish the proper visual hierarchy is to assign colours to the typographic elements you want to emphasize on the screen or page.

However, to avoid turning your design into chaos with too many colours, apply them thoughtfully and align them with your brand personality.

Experiment with appropriate colours by playing with hue, saturation, and brightness levels on your text elements to create contrast and add texture to your interfaces.

For instance, you can use dark tones for your headings and light ones for your paragraphs to establish a good visual hierarchy.

The heading is styled with Source Serif Pro Bold, while the paragraph text is set in Source Serif Pro Regular

Rule of thumb: Ensure that you use colours wisely to create sufficient contrast between the elements and background in your interface.

4. Spacing

Most interfaces are busy and challenging to scan because they lack whitespace between typographic elements.

Whitespace is a critical aspect of your design, allowing users to flow around the content and focus on elements without feeling overwhelmed.

Adjusting the spacing between your typographic elements and the line height of your text will allow you to create visual contrast and improve the readability of the content.

Rule of thumb: The whitespace between elements helps users to focus better on those elements and scan the interface more effectively. It is a critical aspect of the readability of your design.

5. Font-pairing

Mixing typefaces on an interface is a great way to evoke emotions, enhance the visual hierarchy, and help users process the content effectively.

Creating contrast and enhancing the visual hierarchy on your interfaces is essential. So, to achieve excellent contrast on your interface, ensure that you pair contrasting fonts or typefaces together.

For example, mix bolder fonts with lighter ones to create excellent contrast and visually appealing interfaces.

One way to properly combine fonts is to ensure that the typefaces share similar characteristics like the X-Height to create a consistent look.

The design above features a headline styled with the typeface “Source Sans” and the paragraph below with the typeface “Source Serif”

Rule of thumb: Mix typefaces on your interface to enhance the visual hierarchy, add personality to your design, and help users process the content on your design more effectively.

Takeaway

This article presented 5 ways that you can use to create great visual hierarchies in your interfaces with typography.

Remember, a great visual hierarchy is critical because it will help users understand the importance of each design element on your interface, process the content better and find what they need quickly.

That’s a wrap!

I hope you enjoyed this article and thanks for reading!

Jerome

How to design better layouts for editorial & blog websites

2023-09-14T00:00:00Z

I recently completed the redesign of Farmacisti al Lavoro, an Italian editorial website targeting pharmacists willing to build up their knowledge in the industry.

In this article, I will share the six best design techniques I have used to add personality to the website, improve engagement and brand awareness.

Most editorial websites (especially those designed on WordPress with premade themes) lack personality and emotional appeal because all their interfaces are designed in a monotonous and predictable manner.

In other words, they are invariably presented and emotionally dull.

As I stated in my book “Don’t Start With Visuals”, most businesses lose sales because their websites fail to communicate their value proposition and express a distinctive personality.

On a website, the brand personality is expressed through the visual language including layout designs, typography choices, illustrations/images, and color schemes.

In order to bring back the lacking personality to the website, I had to review the above-mentioned design elements.

I hope that the tips I am sharing with you will help you to design interfaces that have personality.

1. Layouts designs

The purpose of a page layout is to arrange the content in a readable and attractive way to allow users to process, navigate, and stay engaged with the content of a website. In other words, a good layout improves the usability of an interface.

As I explained in chapter 3 of my book “Don’t Start With Visuals”, when a layout conveys a distinctive personality, it creates a memorable experience for users because their subconscious mind is triggered by the uniqueness and emotional appeal of the design.

Below is an example of the original web design devoted to personality; most pages were flat, overwhelming and built with no imagination.

Old version of the homepage design

To add personality to the pages and improve the UX, I used a combination of different grids to create a variety of energetic and interesting layouts.

This approach allowed me to create different designs from most editorial websites running on a Wordpress platform.

On the homepage, I decided to mainly use a 4-columns grid in order to find original ideas about how to place the content on each section, instead of deliberating starting from a 12-column layout by default.

Layout based on the following brand attributes: fresh, young & dynamic

This approach also allowed me to change the ratio of modules to give the design some energy. I will speak about this further in the next section.

For the article page template, I used a compound grid 4+5 to create interesting stories that evoke emotions and aid users to read the text nicely.

New article layout based on a compound grid 4+5

Choosing the right presentation for your layouts is important to delivering the content effectively to users.

To pick the proper grid, whenever you need to organize the content, ask yourself the following questions:

What is the purpose of my page? (to sell? illustrate something? inform?)
What emotions do I need to convey with the design?
What are the brand attributes I need to communicate?
What do I want people to do?
Which grid will convey the best what I try to say?
Do I have images to play with different ratios?
How big is the content to tell the story the best way?

If you want to learn more about the different grids available, Andy Clarke wrote a wonderful book “Art direction for the web” where he explains how you can use a grid imaginatively to create powerful and engaging layouts.

2. Type sizes and hierarchy

Scaling is important because, when used properly, it allows to differentiate elements by level of importance using sizing on an interface.

In other words, scaling adds variety to an interface and emphasizes the visual hierarchy. As Kelly Gordon explains in her article, 5 Principles of Visual Design in UX, bigger elements will likely be noticed first by users and understood as more important than less prominent ones.

The original design lacked personality because most of the elements, including modules were sized equally; everything was monotonous. Remember, without proper use of scaling, your interface will be flat and hard to use.

To add variety to the design and improve the visual hierarchy, I played with the scaling of modules and typographic elements:

Type scaling

To define a clear visual hierarchy my first step was to use a modular scale from Utopia to systemize typography and make sure that I am designing interfaces that can be scanned easily.

In other words, based on the emotions I wanted to convey, I used font-sizes from a ratio-based scale to size typographic elements such as headings, subheadings, paragraphs, and blockquotes consistently.

Utopia website interface

Different sizes of modules

In addition to typography, I used scaling to change the sizes of modules to improve the visual hierarchy and add energy to the design.

On editorial websites, we call modules the individual elements that represent the teaser of a news story; they provide an easy way for users to navigate the content.

To aid users to scan the content, I used scaling to size modules differently based on their order of importance. For example, I made featured news stories bigger than regular ones.

3. Whitespace

Whitespace or negative space refer to the empty areas of an interface that give structure and reduce visual clutter on interfaces.

The goal of whitespace is to add breathing room to elements on an interface so users understand content relationships effortlessly, pause, concentrate, and reflect on what they are reading without feeling overwhelmed.

In addition to that, whitespace can be used to guide the reader's eye toward elements such as articles, images, and headings as call-to-action buttons on an interface.

Since the original design was cluttered because of a lack of white-space on interfaces, it was hard for users to process, comprehend, and access the content in the most effective way.

For this reason, when redesigning the pages, I used enough white-space to convey the brand’s personality and create asymmetric compositions that felt open and much easier to process.

When deciding how to add negative space in your designs, ask yourself the following questions:

How can I add whitespace to improve the hierarchy of the page?
How can I add whitespace to separate or group elements?
How can I add whitespace to improve the reading experience?

4. Typography

Typefaces and typography are essential for creating a good reading experience and expressing the brand’s spirit on a website.

If typography looks good and feels right, people will stick around because they will understand that you cared about them by crafting a good reading experience.

That’s why, when designing an editorial site, one of the biggest challenges is to pick the right typeface to effectively communicate the message and calibrate typography properly to ensure a great reading experience.

To improve the reading experience of the website, I mixed the typefaces “Roboto Serif” and “Rubik” since they offer a great level of readability and legibility for headings and paragraphs, and they convey the characteristics claimed by the brand.

Heading: Roboto Serif Extra Bold Text: Rubik

Then, I paid attention to typesetting such as establishing appropriate font sizes to create a clear visual hierarchy between headings and body copy, adjusting line-height.

For each article, I made sure to set a maximum content width between 70-100 characters and break the content with clear headings, subheadings, list, pull-out-quotes and avoid wall of words to ensure an optimal reading experience.

Whenever you need to work on typography, ask yourself the following questions:

Which typefaces communicate the emotions I want to convey?
Are the typefaces readable and legible enough for body text?
What’s the purpose of these typefaces (e.g convey emotions, decorate..?)
Do we have enough contrast between the fonts I am combining?
Did I break down large content like articles with clear headings, subheadings, list, pull-out-quotes and small chunks of content?

5. Colour palette

When you design interfaces, use a colour palette that effectively communicates the brand’s personality, mood and interactions, like links or call-to-action buttons to enhance usability and create visual interest.

For this website design, I defined a colour palette with fresh primary and secondary colours, including different shades of blue and grey to use as background color — or as colours for text, icons, lines, and interactive elements.

Farmacistiallavoro Fresh color palette

6. Graphic element details

In this project, I used several graphic elements such as lines, shapes, drop caps, icons or images to reinforce the personality and depth to the interfaces design.

These details helped me to connect the design to the brand and help users understand the content better. To get inspiration about the kind of elements to use, I found a wealth of ideas on print and magazine materials.

Section with graphic elements to enhance the brand's personality

Remember, every element that you add should do more than just decorate. It should be intentional, convey meaning and enhance the content. Avoid adding noise to the design with elements that will clutter the interface.

Conclusion

The goal of this article was to explain how to bring back personality to dull interfaces—especially on editorial websites.

The solution to this problem lies in the good usage of the six principles that I have presented and described in this article:

1. Designing distinctive layouts with grids
2. Scaling elements to add variety
3. Whitespace to improve the readability
4. Good typography to improve the reading experience
5. Color palette to add emotional appeal and communicate functionality
6. Graphic elements to add depth to designs

By working on this article, I have learned the importance of designing unique interfaces in order to improve the user and brand experience.

In addition to that, this project has also taught me the importance of thinking out-of-the-box to design unique interfaces that add real value to customers and motivate them to buy.

If you want to see the live Wordpress site, click here.

UX deep dive: redesigning Amalia’s site to match her reputation (Part 1)

2024-05-05T00:00:00Z

Designing a website for any kind of business should always start with understanding the project’s goal, clarifying the business, and discovering the real problem to solve for the company and its customers.

In other words, the underlying principle for building an effective website can be summarized as follows:

Understanding the business’s value proposition,
the products and services it sells,
the audience,
and what it communicates as a brand.

Unfortunately, many websites are confusing because designers often rush into making pretty interfaces without clearly understanding how the business operates, including its goals, strategy and how it benefits its customers.

This was exactly the problem with Amalia’s former website.

Amalia is a family friend who works as a financial advisor in Bari (Italy). Her job involves helping business owners obtain government funding to invest in a project in southern Italy.

Before summer 2023, on her way to Paris, Amalia stopped at our place in Milan for a day to visit me and my wife Francesca.

In the evening, as we spoke over a cup of coffee in our kitchen, we started our discussion by asking her how her business was going.

In her reply, Amalia mainly complained about her challenges in attracting new clients and selling her services.

When I asked her to explain further how her website performs, she told me that she mostly gets customer complaints about the lack of clarity and how it’s difficult for them to find the information they need on the site.

In a nutshell, the lack of personality and clarity on the website made Amalia desperate and hopeless.

Curious about this problem, I grabbed my laptop and checked the site as soon as she finished speaking.

Here is what I saw!

Screens of Amalia’s old website.

Confusing brand messaging, clutter, and poor usability were the main issues that caught my attention when I landed on her homepage.

When I viewed other pages, the interfaces were disjointed and failed to communicate critical information to users. Everything was far from communicating Amalia’s personality.

The problem was clear: The website was frustrating users, leading Amalia to lose clients and sales opportunities. Amalia’s website was a clear indication of a marketing problem that needed to be addressed.

Without external help, Amalia risked missing out on significant sales opportunities and failing to stand out from her competitors.

So, I decided to redesign her website, using the approach I recommended in my book “Don’t Start With Visuals” and following critical principles of Paul Smith’s SOSTAC® marketing methodology to ensure that my work improves her marketing and business strategy.

Overview of the SOSTAC methodology.

I will explain to you in five steps how I went about the whole process of revamping her website. I divided the case study into two parts to help you make the most out of it.

Here are the topics that I will cover in this case study:

Part 1

Step 1: Discovering Amalia’s challenge (diagnosis)
Step 2: Discovering her audience

Part 2

Step 3: Clarifying Amalia’s brand
Step 4: Streamlining the website’s content
Step 5: Designing the new creative direction.

Each step will resume with a takeaway that you should consider to improve the quality of your work.

Let’s get started.

Spoiler alert: This is how the new website I redesigned looks!

Step 1: Diagnose before prescribing

Good design begins by examining the business problem to solve and collecting all the information about it by listening, hearing, and asking stakeholders critical questions.

In the SOSTAC® model, the “situational analysis” phase is crucial for laying the foundation for the project by clarifying the business challenges and business goals.

When clients need a website done, it is because they have an unspoken goal in their minds that they want to realize. That’s why it’s important to identify their objective by asking questions, listening and reading between the lines. Just like a doctor when auscultating a patient to get at the root of a problem.

Understand: Diagnosing the problem before designing the solution is fundamental to grasping the stakeholders’ or clients’ needs, building trust, and avoiding messing up the entire project before it starts.

If stakeholders approach you with a brief, ensure it has clear information about business goals, user needs and how the brand should communicate. Never design something from a wish list of features.

If you cannot clarify these elements — walk away.

Where are we now?

Most of us fail to hit the client’s target with our solution because we start our project without asking great questions to uncover the real business problem to solve. Failing to ask critical questions about how your work fits inside their business strategy will put the client in the driver’s seat, where they will want to control every design decision.

So, to diagnose the business problem to solve, I asked Amalia the following questions during our first meeting:

What is your business about?
Who are your customers?
Why should they care about your business?
What challenges can I help you solve?
What business goals should I help you drive with the site?

During our discussion, Amalia confirmed that the former site was costing her sales because of its poor usability, lack of engagement, and clarity.

Amalia understood that my goal was to help her business grow with a better strategy and a more effective website. Amalia was very receptive to my recommendations.

I had to conduct these meetings in Italian, which was very challenging since Italian is not my mother tongue. Fortunately, Francesca, my wife, was beside me, helping me clarify any critical information in English.

Where we want to be

When listening to Amalia, I paid attention to the different words and expressions she could say about her business.

She repeatedly mentioned wanting her business to look refined, trustworthy, dynamic, and friendly, targeting high-profile customers. These led me to understand that Amalia wanted to achieve the following goals with the new site:

Gain more enquiries for her services,
Increase brand awareness,
Drive engagement and sales,
Convey a distinctive personality.

Now that the overall company strategy was pretty clear, I needed to align these objectives with Amalia’s brand to understand how the website could stand out and communicate consistently to her customers.

Takeaway n°1

Your first meetings with stakeholders should focus on their business. Ask questions to find the business problem to solve. Keep discussions around aesthetics for later. Remember, you are a problem solver. Show stakeholders how your work will benefit their business to build trust.

Step 2: Discovering the users’ needs

My next task was to understand Amalia’s business's target audience.

Identifying the people Amalia sought to change with her services was an important aspect of the SOSTAC® framework — and critical to designing a website that met their specific needs and expectations.

As I mentioned earlier, the former website was confusing and didn’t answer critical users’ questions and objections, making the user experience of the site very frustrating.

When I started to dig inside the code, I discovered that the site used a premade WordPress template to present the content. It was obvious that the designers didn’t bother about customizing the interface to meet the audience’s needs and convey Amalia’s personality.

To confirm my assumption, I asked Amalia if any designer had asked her questions about her target audience and brand before building her first website.

Her answer was no. Very surprising, isn’t it?

Not really, since designers often jump straight into designing interfaces without first understanding user needs, the business, and the brand’s essence.

Despite having no budget for this project, I couldn’t skip user research and find out more about Amalia’s brand. I didn’t want to risk disappointing Amalia again with a website that would frustrate users and damage her brand’s reputation.

a) Asking critical questions

Before clarifying Amalia’s brand, I focused my attention on understanding better users. This is how I proceeded to understand the primary audience better:

As I explained in my book “Don’t Start With Visuals”, — Little research is better than no research at all.

I asked Amalia questions to help me understand the user profile, their questions, objections, goals, and pain points. I also reviewed her LinkedIn profile since it’s Amalia’s main channel for marketing her services to customers.

User research doesn’t have to be academic, complex or formal. Below are the kinds of questions I asked:

Who is it for?
Why should they visit the site?
What are their fear and aspirations?
What tasks do they want to accomplish?
What answers do they hope to get on the site?

Asking those questions was obvious since Amalia is in direct contact with customers daily, solving their problems on the phone or in 1:1 meetings.

► Quick tip: If you don’t have a budget for research, asking questions to anyone who regularly interacts with users (e.g., stakeholders, salespersons, account managers, or marketing people) is a cost-effective way to discover users’ needs. Ask them what they hear most often to find out what people are complaining about.

The target audience of Amalia’s company is business owners, men and women aged between 40 and 60. They are elite profiles. Their main goal is to get help from Amalia to find funding opportunities to finance their dream projects.

b) Snapshot of the primary audience

To capture a good picture of the customer, I created a snapshot of the primary users with an idea of the most essential elements to consider to inform my design decisions better.

Persona illustrating a snapshot of the primary user.

To get a better idea of how they would use the website to achieve their goal, I quickly mapped out their journey:

Outline of the customer journey.

By outlining this journey, I understood that my new design had to make this flow straightforward to help users gain confidence and save time in achieving their goals.

That said, knowing the target audience from the start of any project is essential to designing a good user experience, including writing persuasive copy, defining the appropriate tone of voice, picking the right typefaces and designing effective layouts.

Remember, there is no good or wrong way to research about your users. Just do what works best for you to find out the information you need. If the budget allows you, feel free to expand the research with user interviews, for example.

With this short session with Amalia, my aim was to collect as much information as possible so my design process would be smooth.

Amalia was very happy about it. She consolidated her knowledge about her target audience’s needs. I could see on her face that she was relieved and saw how important those preliminary phases were before designing her new site.

The next task was to understand the essence of Amalia’s brand so that I could understand Amalia’s business from the inside out.

Takeaway n°2

Never skip user research. Whenever you can, ask questions to anybody who is in direct contact with users to collect necessary information about them. This will allow you to create a picture of the primary audience and keep them in mind during the design process.

I will now teach you the tactics I used to answer the “How do we get there?” question of the SOSTAC® framework.

Click here to read Part 2 and learn how I clarified Amalia’s brand, structured the content, and defined the creative direction of the new website.

See you in part 2!

Jerome

UX deep dive: redesigning Amalia’s site to match her reputation (Part 2)

2024-05-07T00:00:00Z

In Part 1 of the deep dive, I explained how I started the project from the right angle, using principles from Paul Smith’s SOSTAC® framework and my recommended approach.

In this article, I will now teach you how I designed Amalia’s new website, including how I clarified her brand, structured the content, and defined the new visual identity.

Let’s continue!

Step 3: Crafting the user experience from the brand

As I explained earlier, Amalia’s old website frustrated users with confusing messages. The site didn’t communicate clearly what her business does (its products and services), what the brand stands for (its purpose), and how her services would improve people’s lives (the benefits).

Consequently, dull interfaces and unclear messages made her brand cheap and untrustworthy.

As we saw in the previous sections, Amalia’s audience is busy. So, to catch their attention and encourage them to act, the new site needed to have clear brand messages and a design that was appealing and easy to use.

To help me rewrite better brand messages and prepare a visual identity that would accurately convey Amalia’s personality, I had to define the core components of Amalia’s brand identity below:

The brand’s story
Personality
Tone of voice

In summary, defining the brand identity helped me communicate Amalia’s offering and distinctive personality effectively so that the new website would elevate her brand experience.

Let’s see each of them in detail:

1. Brand Story

Every successful brand has a story that resonates with its audience to encourage them to take action.

People look for brands that help them answer their burning questions and help them meet their primitive needs (to survive and thrive).

In other words, people never really buy a product or service but the story and the benefits attached to it. For this reason, we should always be clear about how the brand — with its products and services — improves the user’s life.

Most websites fail to engage with their audience because their core message is self-centred and doesn’t explicitly communicate the brand’s promise and value proposition.

For example, I often see phrases like this on corporate websites:

We are the leading company in the X industry
We have X years of experience, and our products are revolutionary
We are proud of our team of skilled engineers

Usually, when I spot these types of sentences on a site, it indicates that the company prioritizes itself rather than addressing its customer’s needs.

When I checked Amalia’s original site, I noticed that she spoke more about herself instead of explaining how she helped customers achieve their dreams with her services.

So, to improve Amalia’s brand messages, I used the Donald Miller StoryBrand (SB7) Framework. This allowed me to prepare key brand messages and engaging stories about her services, which I would later use to design effective pages.

► Quick tip: When you work on a brand with an unclear value proposition, use the StoryBrand (SB7) Framework to clarify the brand before designing anything. This will help you set an excellent foundation for creating your website and other marketing materials.

Brand exercise I did with the StoryBrand (SB7) Framework.

At the end of the exercise, I understood Amalia’s services and how she should communicate better with her audience.

Amalia was speechless when she realized how clear her brand had become and how she should speak to her customers to sell her services.

2. Personality

Every brand has a personality. This voice is expressed visually through images, illustrations, graphic elements, layouts, typefaces, colours, and micro-interactions.

All these elements compose the brand’s visual identity.

Since Amalia is dynamic, reliable and knowledgeable in her field, it was important to reflect these attributes on her website to convey her personality successfully. When I asked her for a list of words she wanted her new site to evoke, she mentioned the following: vibrant, friendly, refined and premium.

► Quick tip: To prevent creating dull experiences, the brand’s personality should be defined with keywords so you can make intentional design decisions.

To find the appropriate keywords, I usually start by asking the following questions:

How would you like your ideal customer to describe your brand? (e.g. words like Vibrant, Energic, Trustworthy, joyful…)
How do you want the user to feel when interacting with the website? (e.g. words like Happy, Excited, Empowered, Confident…)

These questions confirmed that vibrant, friendly, refined, and premium were the attributes that would best describe Amalia’s personality. In short, these keywords were my foundation for establishing the new creative direction.

At the end of this case study, I will explain how I used these keywords to create the website’s visual identity, including the wireframes.

3. Tone-of-voice

As I mentioned previously, tone of voice is an essential element of brand identity. Since the content is a conversation between Amalia and her customers, I wanted to make sure that its tone of voice was in line with Amalia’s personality to be effective on the new website.

In addition, knowing the tone of voice gives the designer an idea about the typefaces he could use to communicate the right feelings. In short, the tone of voice allows you to know how the content should sound and look to match the brand’s personality.

To understand Amalia’s tone of voice, I just asked this question:

How would you like to sound to your customers? (e.g. words like Cheerful, Friendly, Informative…)

Amalia answered that she wanted her tone of voice to be simple, cheerful and authoritative. At this point, I had materials to write effective texts and to define the creative direction for the new website.

Amalia became really confident and couldn’t wait to see visuals for her site. But, I had to pause and explain to her that we needed to create a content draft first and prioritize the main section of her website before thinking of visuals.

Takeaway n°3

Starting from the brand is very important to shape a good user experience. Remember, when someone interacts with a website, they also interact with the brand. That’s why clarifying the brand’s value proposition, personality and tone of voice is the foundation for creating a successful website and better interactions with customers.

Step 4: How I Improved Amalia’s Content Structure

Now that I had clarity on the business goals, user needs and brand, looking seriously at the content was my next exercise in order to have a good understanding of the system and the texts.

Since the former site was overwhelming, I needed to streamline the content to build my visuals under solid foundations. Content is my baseline for creating very effective visuals.

When I reviewed Amalia’s WordPress site, the content didn’t address most critical user questions. In other words, the content failed because it was self-centred on Amalia instead of helping users solve their problems.

My methodology for improving the quality of the content was the following:

1. Creating the sitemap

To help me better structure the content and create a good content hierarchy, I followed the users’ primary tasks defined during the research phase as a blueprint.

To demonstrate the content organization, I created a menu structure presenting the site’s main sections, including the content priorities. I kept the menu simple so users could quickly access the content they needed.

Menu structure with content priorities under each page.

2. Content priorities

In the diagram above, I’ve listed the content ideas under each page to give an overview of the relationships between different pieces of content.

Before rewriting the text of each page, I reorganized the content by defining content priorities. This method allowed me to establish a clear content hierarchy on desktop and mobile.

This approach consisted of grouping the content into chunks and arranging them in order of importance. This is an example of how I organized content priorities on the homepage:

Preview of the homepage content priorities.

3. Assign user’s questions for each page

To identify those questions, I always ask myself the following fundamental questions:

What do users want to know from us?
What information users need to know on this page?
What do we want them to do on the page?

To find more ideas about the questions customers could ask when visiting a specific page, I asked Chat GPT to provide me with a list of the top ten user questions. This way, I could find any important user questions we might have forgotten with Amalia during our research phase.

When I work on the content, I also consider the primary call-to-action button to add to each page that will drive the business goal, such as “subscribe” or “book a consultation”.

4. Writing the content draft

Once I completed assigning questions to pages, I wrote the content draft of each page with Francesca and Amalia on Google Docs.

I like to use Google Docs because it forces me to concentrate on writing and setting up a good content hierarchy without being distracted by visuals. Having the pages on Google Docs also makes it easier to convert the documents into HTML and CSS prototypes when I implement my designs.

An example of the screen of the page “How I work?” shows users’ questions about the content draft I wrote.

To sum up my methodology, I first wrote the content draft from the users’ questions and the brand exercise.

Then, I used storytelling and the AIDA model to make the content compelling, actionable and clear. My main goal was to write the content in the most accessible way, avoiding any technical jargon.

To finish, I asked Francesca and Amalia to review and refine the content, staying consistent with the tone of voice and brand messages. Their fresh eyes ensured that the content remained accurate and high-quality.

Takeaway n°4

Thinking about the site structure and writing the content draft makes designing visuals easier. By doing this, you will know exactly why each page exists and how you should design it to bring maximum value to users. Remember, if you don’t prioritize and think about content early, you will likely design pages that confuse users. So make sure to always consider this step in your projects.

Step 5: Designing layouts

After a lot of effort on the content, it was finally time to work on the new website’s visual identity.

My objective was to develop a creative direction that would help Amalia’s business stand out from its competitors and create an experience that would leave people with a positive impression.

This final phase involved building the page layouts, picking appropriate typefaces, creating a colour palette, and choosing images to define the new website’s design atmosphere.

Here is the process I followed to art-direct my designs.

1. Creation of low-fidelity wireframes

For every single page, I began by sketching the interface with pen and paper to get a rough idea of the layout structure.

Rough sketch I realized as a starting point to visualize how I would structure the new homepage.

Once I was pleased with my draft, I moved to Sketch (the software) to create a better version of the wireframe in black and white.

By arranging the running text and images without initially worrying about visuals, I could quickly experiment with various layout ideas and gather specific feedback from Amalia about the storytelling.

To create compelling layouts, I used a compound grid that I made by overlapping a four-column with a five-column grid. This grid was the foundation for laying out every page.

Low-fidelity wireframes with an example of the compound grid used for developing layouts filled with energy.

My approach to page layout includes choosing the most suitable grid to tell the story effectively and encourage visitors to take action. My aim is to always make the content clear and accessible on every screen size.

2. Layouts: improved fidelity

After producing the wireframes in black and white, I improved the fidelity of my designs by adding colours, selecting typefaces, and using images that support the following attributes: vibrant, friendly, refined, and premium.

Collection of high-fidelity wireframes of the new website on a desktop screen.

Below is an example of sections of the homepage on a mobile screen:

Collection of high-fidelity wireframes of the new website on a desktop screen.

3. Colour palette

Since Amalia’s old website already had great colour combinations, I just refreshed them to make the new palette.

The new palette included two base colours and an accent colour for interactive elements such as call-to-action buttons and links. I also created extra shades and tints for each hue to have more flexibility when styling components on the interface.

The new colour palette for Light and Dark themes.

In addition, I created a small set of neutral colours for backgrounds, borders, and text. I extracted different shades from the pictures used in my designs to create these colours.

Example of images where I extracted colours.

Since dark modes are popular these days, I made a dark theme version to offer users an alternative browsing experience. To create colours that would work well against a dark background, I adjusted the contrast, saturation, and brightness of the light theme colours.

Light and dark theme.

In the end, Amalia and I were very happy about the result. This approach to colour allowed me to create a colour palette that sets Amalia’s business apart from her competitors.

4. Typography

Selecting strikingly different typefaces for headlines and running text was fundamental to giving Amalia’s brand its unique voice, evoking emotions, and effectively communicating the message.

My first step was to find a display typeface with a strong personality that I could use on headings. Starting from headings is my favourite technique because titles are perfect for adding visual interest and captivating someone’s attention on an interface.

When searching for fonts, I found a fabulous serif typeface called “Albra” on MyFonts. This typeface was an excellent choice because it gave Amalia’s brand a luxurious and charming feel.

On the other hand, I chose the sans-serif typeface called “Geologica” to style the running text. This typeface was ideal for typesetting the content since it’s highly legible and readable. The good aspect of this typeface is that it comes with various font styles, including light, regular, semi-bold and bold.

Geologica: open shapes and optimal x-height and Albra on headings.

“Geologica” is pretty neutral and pairs well with “Albra.” The combination looks appealing to the eyes but doesn’t distract the reader.

Geologica and Albra are based on a similar structure.

Working on typography goes beyond picking and combining typefaces. I also consider scaling typographic elements, such as running text, headlines, numerals, and pull-out quotes, to create a stunning visual hierarchy that helps users process the content.

In these designs, I used the Perfect Fourth 1.333 type scale from Utopia to size typographic elements consistently on mobile and desktop devices.

So far, the typefaces I picked for the website work remarkably. Whenever I show someone the website, they first mention how nice the font pairing looks. That’s always good to hear!

5. Images

When appropriate, images are powerful tools for telling better stories, influencing, and conveying trust. Since the old website had many low-quality images that made Amalia’s brand seem unprofessional and unreliable, I had to improve this area on the new site.

This is how I made better use of images to fix this problem.

I used multiple high-quality portraits of Amalia with different expressions to add variety and create an emotional connection with users on pages.

Using different images of Amalia communicates that she is approachable, trustworthy, and empathetic. This method allowed me to let people feel reassured and excited about doing business with Amalia.

In addition, using Amalia as the brand character was an effective way to guide users through the website, tell the brand’s story, convey its message, and consistently and appealingly engage with the audience.

Different expressions from Amalia to bring back more personality to the site.

a) AI images with Midjourney

I also used Midjourney (AI) to generate realistic human faces. Since humans are attracted to faces, using realistic profiles strengthened the emotional connection and increased the level of engagement in my designs.

Testimonial section with AI-generated images.

b) Animated SVG

On her former website, Amalia presented her work results with too much content that was difficult to read.

Since this information was critical to convey authority to customers on the new site, I turned the data into a diagram to present the content in a clear and engaging way.

When I implemented the site in HTML and CSS, I animated this illustration with SVGator to add a nice touch of art direction to the website.

The diagram I created to present Amalia’s work results.

6. Design details

Small details make a big difference in a design. I used a blend of graphic and typographic design elements to enhance the brand’s personality, improve usability, and refine the interface.

Print magazines were a great source of inspiration for exploring how I could add depth to different areas of the site.

In addition, I created a small set of neutral colours for backgrounds, borders, and text. I extracted different shades from the pictures used in my designs to create these colours.

Example of the hero section featuring a combination of design details.

Here is a snapshot of the design details I used in my designs:

Circles shapes
A mix of thin and thick borders to structure the content
Custom scrollbars
Numerals to improve comprehension
Stars icons for list-style bullet points
Drop Caps

Remember, a well-crafted design is all about the smallest details. Always add design elements that improve the user experience. Don’t add elements that would distract the user or clutter the interface.

Takeaway n°5

Art-directing and refining your designs is essential to creating a distinctive website. This approach enhances the user’s experience and helps create lasting impressions that stick in people’s minds. On Amalia’s website, the mix of fonts, colours, and picture styles evokes an emotional response from people and communicates that the brand is friendly, vibrant, reliable, and premium.

Conclusion: the outcome

A few weeks after I released the site to live, I was very pleased with the outcome. It is one of the best websites I have ever made.

Amalia is super excited about her new website because it finally communicates her personality and clearly tells the story of her products and services. The website elevates her brand and attracts more customers to her business.

Customer feedback is also very positive. Right after launching her new site, Amalia has gained two new important clients for her business. That was a key indicator of success!

These Key Performance Indicators (KPIs) were useful to evaluate the impact of the strategies and actions I implemented throughout the project. Monitoring performance relates to the “Control” phase of the SOSTAC® framework.

My goal with this series was to demonstrate my strategy for designing a distinctive, engaging, and successful website. To read more about my design approach, read my book “Don’t Start With Visuals”.

I hope this case study has inspired you to think about strategies you could use to successfully solve creative challenges!

Thanks for reading.

Jerome Kalumbu

If you are interested, here are the resources that helped me during this project. I am sure they will help you improve the quality of your work, too:

Articles:

Books:

Building a StoryBrand by Donald Miller
Marketing Made Simple by Donald Miller
This Is Marketing by Seth Godin

5 strategies to Get Ahead While Others Panic About AI

2024-06-17T00:00:00Z

The digital revolution has caused a major shift in the workforce. Artificial Intelligence (AI) is significantly changing how creative professionals like UX and product designers, artists, illustrators, and photographers learn and engage with their work.

Today, we are constantly bombarded with content on YouTube, LinkedIn, and other social media platforms about AI technologies. Unfortunately, the hype around AI models such as ChatGPT, Midjourney, or DALL-E 2, just to name a few, generates lots of anxiety in designers.

Many fear AI could displace them from their jobs because it can produce a wide range of materials, including writing blog posts, computer code, essays, scripts and creating artwork quickly and for free.

To avoid seeing AI as a threat or becoming obsolete, we must step back and filter the information that we consume carefully. First, we must understand AI’s actual impact on our industry. Second, we must embrace AI technologies and raise our profile to navigate the AI age with confidence (Cal Newport, 2023).

What we know today

AI models such as ChatGPT, Midjourney, or DALL-E 2 have been pre-trained from huge amounts of data and user feedback, allowing anyone to create human-like text or visual content on demand easily.

However, since AI can’t think creatively or strategically or apply any judgment like humans, it can’t fully replace designers in jobs like UX or product design, where —human interaction, strategic thinking, creativity, and empathy—are critical to thrive.

To help me understand better how we should approach our careers in the age of AI, I spent the last few months studying how successful designers and other professionals have started to use AI in their work and the attributes that make them stand out from the majority of people.

This article is mainly for creative professionals, including UX and product designers working solo or in-house. I will develop the five strategies I learnt and hope they will help you gain confidence and become remarkable.

Below are the strategies that I will cover in this article:

Let’s get started!

Strategy #1: Become a great problem solver

Today, it has become more challenging for us designers to stand out because the market is flooded with AI-generated content.

Since anyone with no experience in UX or product design can use AI to create artwork, content, or a website with minimal effort, we are finding more junk than ever, including lousy designs, writing, and pointless products.

Today, we must be excellent at solving real business problems to stand out from amateurs. We should use our strategic, tactical, and critical thinking to better serve our clients’ or stakeholders’ needs.

What sets great designers apart from amateurs is that the former knows the importance of understanding the challenges of designing effective solutions, while the latter focuses on following trends without solving the real challenge.

For example, whenever I work on a design project, I ask the right questions and actively listen to the client to understand the real challenge I have to solve. As Seth Godin once said, the future belongs to those who excel in gaining insights and creating value, thus becoming indispensable in the marketplace (Godin, 2010).

That’s why using our unique human capabilities — knowledge, creativity, empathy, emotional intelligence, and strategic thinking — is essential to solving problems effectively and adding value to the marketplace.

Being a great problem solver, focusing on the “why” before thinking about the “how” is critical to race to the top in a saturated market of AI-generated works created by amateurs.

Strategy #2: Define clear goals

With significant changes happening quickly in the design industry, some designers find it challenging to stay updated. As I write this, OpenAI has just launched its latest model version, ChatGPT-4o!

One reason many people become obsolete is that they don’t have defined goals. They live their lives and careers on ‘autopilot,’ going through the motions without actively following a clear career path. They refuse to adapt to industry changes or leave their comfort zone.

To stand out from 80% of people and boost your self-esteem, start by defining the designer you want to become. One effective way to do this is by learning from successful designers you admire. Their journeys can provide valuable insights and inspiration to help you develop your own unique style.

From there, work backwards: Use your vision of your future self to set goals, determine your present actions, and find the best ways to move toward becoming the designer you aspire to be. The more connected you are to your future self, the more effective you will be in the present. This connection will help you filter out noise that can create unnecessary anxiety and derail you from your bigger goal (Benjamin Hardy, 2022).

For example, my ultimate career goal is to become a creative director specializing in growing businesses through distinctive digital products and helping thousands of designers worldwide to excel in their work.

Two designers who inspire me daily in this mission are Andy Clarke and Chris Do. Studying their career paths and accomplishments, particularly how they embrace industry changes, such as integrating AI into their workflow, has helped me stay updated with the industry changes and push beyond my comfort zone.

In short, setting clear goals is a powerful way to boost self-confidence and achieve high performance. Remember, it’s the small daily actions that add up over time and lead to great achievements.

Strategy #3: Expand your skills

Expanding our skills to build deep knowledge in any field is fundamental to increasing our value in the marketplace.

Most people are unwilling to work hard on themselves and perform undesirable tasks, such as reading books, attending training, or studying successful people, to become excellent at their work and indispensable to their organizations or clients.

To deepen our expertise and raise our value, we must commit to lifelong learning — especially in a competitive field like UX Design, where mastery cannot be achieved with shortcuts or quick fixes.

Here is a roadmap to help you build expertise:

Build a solid knowledge foundation

If you’re beginning your career, start as a generalist to explore different areas of the discipline. Learn as much as possible about UX and product design to develop a broad and solid knowledge base. Focus on the fundamentals, including usability, heuristics, information architecture, UX research, interaction design principles, and interface design.

Stand out with deep expertise

After you accumulate experience and career capital, consider specializing in your best area of interest to develop deep expertise. When you specialize, you position yourself as an expert in a specific area. For example, I specialized in designing websites that grow businesses by using my creative and technical skills because that’s what I do best, and I want my expertise to be recognized in this area.

Leveraging Mentorship

Whenever you can, seek mentors to gain knowledge. An experienced designer can guide you through challenges, offer valuable insights, and provide constructive feedback to help you improve your work. You don’t necessarily need to meet these mentors in person. Engaging with their books can also bring you closer to their approach.

Learning Through Resources

Attending conferences and reading books about the discipline is an excellent way to access what the smartest people in your field, such as industry leaders, renowned authors, or experienced practitioners, have already figured out.

I regularly read and attend UX and web design training to develop my skills. In addition, I like to study related areas such as marketing, branding, business strategy, web development, graphic design, and AI to build specific and unique knowledge.

Engage with deliberate practice

As Cal Newport suggests in his book Be So Good They Can’t Ignore You (2012), to master any skill, you must engage in deliberate practice.

For example, if you want to improve your website or product design skills, you must practice the discipline by working on real projects, gathering immediate feedback from mentors or peers, and repeating the process to improve performance.

Mastering UX design — or any skill — requires time, dedication, and adaptation to new technologies like AI. There are no shortcuts. Stay patient and focused. The compound effect will reward your efforts.

Strategy #4: Become an art-director

Technology evolves, but key aspects of human nature — such as emotional drives, behaviours, and cognitive processes — remain unchanged.

Creative professionals with strong human skills — like problem-solving, critical thinking, and emotional intelligence — hold unique value in the age of AI because these attributes cannot be replicated by machines (Toyama, 2023).

We should use our hearts, souls, minds, and craftsmanship to create work that resonates deeply with people. By infusing our work with humanity, we can transform our stakeholders, clients, and end-users into happier, more engaged individuals.

In short, individuals who bring their unique perspective, creativity, and emotions to their work will thrive in the age of AI.

Use Emotional Intelligence

Emotional intelligence and empathy are crucial attributes to consider when interacting with stakeholders, clients, and end-users. We can truly understand their challenges, pain, and aspirations by asking insightful questions and listening attentively.

This approach not only builds trust but also fosters collaboration. It is equally important to communicate our design process clearly, enabling stakeholders and clients to visualize the steps we take to help them achieve their goals.

Add Personality to Your Work

Everyone should art-direct to add meaning to their work. This approach involves conveying emotion into our actions to provoke feelings in the receiver. It is also about adding personality to our work to design products that connect emotionally with the audience.

When I work on a project, after discussing the goals to achieve, the challenge to solve, and the target, I work on designing the solution. Part of the process includes defining the visual style of my product design based on the emotions I want to convey.

Thinking about design elements such as typefaces, layouts, colours, images, and storytelling allows me to create distinctive interfaces that evoke feelings and elevate a brand. In today’s world flooded with AI-generated content, we must consider how we want someone to feel to produce unique work.

Empathy, emotional intelligence, and art direction create memorable experiences that engage on a human level. AI is a tool that helps us execute, but it cannot replace our input and expertise.

Strategy #5: Integrate AI to your workflow

Utilizing AI as an assistant is essential for gaining a competitive advantage in today’s business world.

For designers, AI tools like ChatGPT or Midjourney are helpful as they can elevate the quality of our work, free up time for working on meaningful tasks, and boost our performance and productivity.

This is how I use AI to enhance my design creative process. Hopefully, this will also inspire you to use it in your work.

ChatGPT

These days, I mostly use ChatGPT to work on different tasks, including writing content outlines, fixing code, and doing user research.

a. Content creation

When I need to prepare the content for a web page or a new article, ChatGPT is excellent for generating content ideas for my designs, including brainstorming site structures and labels. It’s my preferred tool because it avoids the frustration of starting from a blank page.

In addition, when I write about a particular topic, I often use ChatGPT to complement my research from books, articles, podcasts, and videos. It’s a time-saver for organizing and improving my ideas more effectively.

b. Writing and fixing code

My work also involves writing HTML and CSS and occasionally tweaking PHP code to implement my custom designs. ChatGPT is great at fixing my code whenever I face coding issues.

Last year, I designed this website, but I faced some challenges implementing the design because I had to write some PHP code to make it work on WordPress.

Since I am not proficient in writing PHP code, ChatGPT was very helpful in guiding me through writing and fixing my code so that I could implement the design effectively.

Another good point is that when I work on content-heavy pages where writing the code can be tedious, I find ChatGPT very useful for speeding up the process.

Example of a request I submitted ChatGPT to debug a code on WordPress.

c. User research

Speaking to users to gather insights before redesigning an app, website, or system is often challenging.

Whenever I encounter this challenge, I can use ChatGPT to better inform my research, including discovering user questions and objections, performing top-task analysis, drafting accurate user profiles and content, and performing brand exercises.

While speaking directly to users to understand their needs is always better, AI can complement additional research well and save time and money, especially when working under constraints!

Mid-journey

Without AI, finding specific types of images that suit a design atmosphere or coming up with new ideas can be difficult. Thankfully, with Midjourney, finding inspiration, including bespoke images, becomes easier—although it shouldn’t replace traditional searching methods.

While it might be tempting to use Midjourney’s images exactly as they are when generated, it’s our responsibility to transform these raw inputs into unique designs that communicate the intended messages.

Remember, it’s not the AI that makes the artist. Focus on being great at communicating a message visually, and then use AI to execute your ideas.

Here is an example of how I like to use Midjourney to create human faces and bring more personality into my designs whenever possible. The result is astonishing!

AI-generated profile I created with Midjourney, using the prompt’ Italian woman, 40 years old entrepreneur, with a shirt and wearing glasses, smiling.’

Attention-Insights

I use Attention Insights to test the accessibility of my designs whenever I doubt the structure of my page layout or visual hierarchy. Attention Insights is AI-based, so it doesn’t require direct input from real users.

When you submit a design for a test, it will be scanned based on a large database of eye-tracking studies to predict where users will look at it and then guide you on how to improve it.

As Paul Boag suggests, using Attention Insights is a great way to convince clients if they are worried about users missing an element on the page (2023).

Clarity test of a wireframe I did using Attention-Insights.

Conclusion

In conclusion, using generative AI tools like ChatGPT or Midjourney to enhance our creative processes is crucial for staying competitive and improving our work experience and productivity.

While concerns about AI’s impact on creative professionals are valid, the key to gaining confidence and standing out from average designers lies in leveraging our unique human skills, embracing new technologies, and developing deep expertise in our field.

While writing this article, I am also creating my custom GPT (with the premium version of Chat GPT) that I train with my own data because I want to find ways to speed up my work and give designers access to my ideas whenever they need it.

AI is the future. Those who see AI as a companion rather than a threat will thrive. Developing the right skills, mindsets, and approaches will allow us to create exceptional work for our clients, stakeholders, and users and make us remarkable in the marketplace.

Thanks for reading!

Jerome Kalumbu

Here are a few resources you can browse and explore, which I used for my research to build this article:

Articles

There Is No Turning Back on AI
How Generative AI Is Changing Creative Work
How Generative AI Could Disrupt Creative Work
How Generative AI Can Augment Human Creativity
How AI Technology Will Transform Design
The Future Of Design: Human-Powered Or AI-Driven?
Supercharge Your Projects with AI: My Personal Experience

Books

Co-Intelligence: Living and Working with AI
AI 2041: Ten Visions for Our Future
Linchpin: Are You Indispensable?
So Good They Can’t Ignore You
The Win Without Pitching Manifesto
Be Your Future Self Now

How storytelling made Omnia Safety’s technical service feel human

2025-09-11T00:00:00Z

For the past six months, I redesigned the website for Omnia Safety, a consultancy that helps companies comply with safety regulations. The goal was simple: make their message clear and their brand memorable.

Why change was needed

The old site was like many corporate websites—confusing, impersonal, and difficult to trust. Through storytelling and creative direction, I turned it into a site that’s easier to understand, visually distinctive, and more engaging for potential clients.

Screenshots of the original Omnia Safety website.

To solve this, I used storytelling and creative direction to create a website with clear communication, a stronger identity, and a user experience that builds confidence.

In this case study, you’ll see how a simple narrative, clear structure, and thoughtful visuals can turn a confusing website into one that connects with users, earns trust, and drives business growth. It’s an approach you can easily apply to your own projects.

This is how the new website I redesigned looks!

Shaping the story around user Needs

When visitors landed on Omnia Safety’s website, many felt anxious — worried about inspections, fines, or compliance issues. They came looking for clarity and reassurance.

Instead, they found long pages written in formal language that felt cold and distant. The copy was full of jargon, hard to scan, and easy to abandon.

When people have to work too hard to understand what you do, they leave — and that’s exactly what was happening.

Old hero. The headline “Safety is not optional!” and 360° services subtext remained vague and technical, leaving the offer unclear.

Reframing the Story Around the User

I used Donald Miller’s StoryBrand (SB7) framework to rewrite every page around the user’s story. The goal was simple: help people quickly see how Omnia Safety can help their company stay safe, compliant, and protected from costly penalties.

In this new narrative, Omnia Safety isn’t the hero — the user is. The company plays the role of a trusted guide, offering the expertise and direction needed to overcome challenges and move forward with confidence.

New hero, redesigned with SB7: “Bring your company in line with safety regulations.” Subtext clarifies the guide role and the user transformation—from fear of fines to confidence.

Answering Users’ Questions and Objections

Each page and content block was written from the user’s point of view, answering their most important questions, objections, and concerns — all to help them complete their top tasks without friction.

People decide on average in five to eight seconds whether to stay or leave a page. For them to stay, it's crucial that our core messages address their questions and alleviate their doubts.

To support this, I applied Paul Boag’s content-block approach, mapping each page into modular sections that respond directly to user needs and guide them toward action.

Content-block planning: modular sections that answer user questions and support conversion.

By humanising the message and improving the structure, each page now feels both emotional and practical. Users can see themselves in the story, understand the value quickly, and feel confident reaching out for help.

Complex information was transformed into a clear, trustworthy story that naturally leads users to book a consultancy with confidence.

Guiding users toward the right action

While rewriting the content, I also refined the call-to-action hierarchy. Each page now includes a clear primary action — “Richiedi una consulenza” — driving the main business goal.

For users who need more time, I added secondary buttons like “Scopri di più.” These lower-commitment choices let visitors explore the offer further while naturally guiding them toward conversion.

Styles of call-to-action used accross the website.

Turning layouts into living narratives

The old site looked cluttered and outdated — important details were lost among dense blocks of content, making it difficult for users to scan, focus, or find what they needed.

To fix that, I built every page to bring rhythm, movement, and clarity to the story through distinctive grids. Each layout now guides users naturally, making the content feel alive, balanced, and easy to follow.

Here’s how I approached the design of my layouts through creative direction:

Sketching the story

I always begin with pen and paper. Quick sketches help me explore ideas freely and find the most natural way to structure the story. It’s a fast, intuitive step that keeps creativity flowing without technical limits.

Defining Structure

Once the concept feels right, I move to black-and-white wireframes. This stage is about testing structures, pacing, and visual rhythm. Without the distraction of colour, I can focus on how the eye moves, where to pause, and what should stand out. I explore multiple variations until one clearly tells the story and feels ready to grow.

Low-fidelity homepage wireframe exploring content flow and spacing.

When the structure felt right, I began exploring how to bring the story to life through colour, typography, and imagery.

Adding emotion and energy

With the foundation in place, I added emotion through colour, typography, and imagery to bring personality and clarity — turning each interface into a meaningful user experience. Like rhythm in music, every element plays its part: grids create balance, hierarchy directs focus, and a touch of asymmetry adds movement and energy that keep users engaged.

Art-directed layouts for homepage and consultancy pages, using different grids to create visual energy and rhythm.

The art-directed approach made the design distinctive, intuitive, and memorable. Each layout now guides users naturally, blending clarity with personality and helping them navigate the content with confidence.

With the structure and emotion in place, I focused on how visual storytelling could add warmth and relatability.

Bringing stories to life

Because we are biologically programmed to focus on faces, I introduced lead characters for each page to enhance the storytelling. Each character represents a specific role, designed to capture attention, direct the eye to key messages, and highlight call-to-action buttons.

Lead characters introducing the page messaging.

When you mix pictures with stories on a website, it gives personality to the site. This helps users feel connected and excited to explore the different content available.

Guiding understanding through icons

Icons play a key role in shaping clarity and storytelling. On the site, I used them to visually define consultancy and training services, helping users quickly identify these sections.

Combined with imagery and layout, icons add personality and give the brand a strong voice.

I built a consistent icon library aligned with Omnia Safety’s visual identity. Each service has its own recognisable symbol, turning complex information into clear and intuitive messages.

Example icons from the library.

Combined with imagery and layout, icons add personality and accessibility. The brand voice becomes both authoritative and warm—ensuring the content is understood and remembered.

Shaping mood and consistency

The earlier palette felt cold and flat. To add personality and energy, I expanded the original colours with fresh tints and shades. The new spectrum of blues and greens, balanced with neutral greys and bright accents, created consistency across text, surfaces, backgrounds, links, and calls-to-action.

The new palette applied to light and dark themes.

To enhance user experience and accessibility, I implemented both light and dark themes, giving users a choice of interface.

The light theme evokes clarity and trust with crisp blues, soft greys, and green tones. The dark theme uses deeper shades of blue and grey to create focus and atmosphere. Together, they define a unified brand identity across contexts.

Light and dark theme examples.

By creating an improved palette and two complementary themes, the design now supports storytelling, improves usability, and makes the brand more memorable.

Giving the brand a voice

The previous site had a weak hierarchy with low contrast and shallow scaling, which made scanning difficult.

Weak hierarchy and low contrast made the content hard to scan.

I introduced a larger visual scale to create stronger contrasts between headings, paragraphs, and lists, using size and weight to emphasise key messages and capture the user's attention. This improved readability, strengthened narrative flow, and gave the design more character.

Stronger contrast and larger scale improved readability and pace.

I selected Outfit for its range of weights and modern character. Its generous x-height improves paragraph readability while keeping headlines sharp and noticeable.

To add more personality, I designed custom headline styling. Underlined headlines act as graphic devices, emphasising key sections without overwhelming the content.

Outfit’s generous x-height keeps paragraphs readable and headlines sharp.

The result is a typographic system that significantly improves usability while elevating the narrative experience.

Conclusion

The redesign transformed Omnia Safety’s website into a clear, human experience built around user needs. Using the SB7 framework, I shaped the story so every page speaks directly to what matters most — helping users understand, trust, and act.

By treating the interface like a well-directed story — with structure, rhythm, and emotion — the site now feels alive and purposeful. It guides users naturally, balances clarity with character, and turns complex information into a confident, engaging journey.

How I redesigned Comunicare in Farmacia to clarify its message and drive sales

2026-01-09T00:00:00Z

The Problem: A Website That Didn't Sell

Three years ago, Alfonso Di Stasio, the owner of Comunicare in Farmacia, asked me to redesign his website to better promote his services to pharmacist-owners.

The site lacked clarity, making it difficult for visitors to understand:

What they were buying
How Alfonso's expertise could help them
Why they should choose him over competitors

Beyond that, the reading experience was frustrating, and the design failed to differentiate the brand in a crowded market.

The Turning Point: A Site That Cost Clients & Revenue

A year later, Alfonso reached out again—frustrated that his website was actively costing him clients and money.

This time, we approached the redesign with a clear focus on business outcomes, defining four goals:

Clearly communicate Alfonso's offerings
Grow the newsletter subscriber base to build authority
Increase consultancy inquiries
Strengthen brand awareness

I applied insights from Amalia's redesign and my mentorship with Andy Clarke, combining UX principles, storytelling, and creative direction to design a site that builds emotional connection, expresses a clear personality, and supports business growth.

Example of screens of the old website lacking clarity and a distinctive personality.

The Process: 5 Rules for a Website That Works

Rule #1: Say It Fast, Say It Right

Users spend only a few seconds deciding whether to stay on a website. If the value proposition is unclear, they leave—and the business loses opportunities.

When I audited Alfonso's original site, the content was:

Too vague — users didn't know what was being sold
Too minimal — key questions were unanswered
Too generic — it lacked emotion and distinction

To fix this, I rebuilt the content around users' real questions and objections, ensuring that:

Key information was delivered quickly
Concerns were addressed upfront
Trust was built through clarity
Users were guided toward action
Perceived risk was reduced

I combined Alfonso's business insights with AI-supported research to surface objections, pain points, and motivations for each key page. Following Paul Boag's content principles helped reshape the site from the user's perspective, not the brand's ego.

A clear message builds trust. Storytelling makes it memorable.

Rule #2: Stop Talking About Yourself

Alfonso's original site focused heavily on his achievements, rather than how he could help pharmacists solve their problems.

This is a common mistake: brands position themselves as the hero instead of positioning the customer as the hero and the brand as the guide.

I rewrote the homepage and service pages using clear storytelling principles, ensuring each page answered the questions users actually care about:

Why should I care?
Do you understand my problem?
What happens if I say yes?
What's in it for me?
How does it work?
What's stopping me?
Can I trust you?
What's the next step?

The result was content focused on transformation, not self-promotion—supported by benefits, proof, and clear calls to action.

When storytelling is done right, it doesn't just engage—it persuades.

Rule #3: If They Can't Scan It, They Won't Stay

The original site suffered from:

Dense paragraphs
Weak hierarchy
Poor typography

To improve readability, I focused on:

Clear content hierarchy with structured headings
Bullet points and lists to break up text
Optimised typography for long-form reading
Strong spacing and white space to reduce cognitive load

Comparison of article layouts showing improved hierarchy and readability.

The goal was simple: make the content effortless to scan and comfortable to read on any device.

Bullet points and lists to break up text.

Rule #4: If You Don't Ask, They Won't Click

The old site failed to guide users toward action. CTAs were unclear and inconsistent.

I introduced a clear CTA strategy with two roles:

Transitional CTAs

To guide users gently—exploring services, learning more, and building confidence without pressure.

A transitional CTA invites exploration without pressure.

Direct CTAs

Placed after benefits, proof, and reassurance to drive commitment and reduce hesitation.

A direct CTA clarifies the next step and drives action.

Every page ends with a clear next step, removing uncertainty and friction from the decision-making process.

Rule #5: Take Risks. Design to Stand Out.

The original site showed signs of good art direction, but it didn't fully express the brand's personality.

I pushed further by using:

Typography

Pairing Source Serif 4 with Montserrat and applying careful typesetting to create a calm, book-like reading experience.

Dynamic layouts

One of the major changes compared to the former design is that I used compound and modular grids to create a variety of distinctive and energetic layouts for each content type.

Below is an example of how I improved the original layout of the blog landing page, which was based on a 12-column grid, into a stand-out layout using a modular grid to create the blog section.

Comparison of the blog landing page layout before and after using a modular grid.

Imagery and graphics

To create an approachable atmosphere on the homepage, I featured an image of a pharmacist-owner helping a customer while using a digital device.

Across the website, I also used icons and symbols to reinforce the site's personality and enhance content readability. This approach allowed me to tell the brand's story better and forge emotional connections with users.

Colour system

I enhanced the original colour palette by keeping the core colours while introducing additional tints and shades for greater design flexibility. The combination includes light colours for backgrounds and borders, with accent colours to highlight primary calls to action.

I used darker colours on the background and text to create contrast where needed. To improve UX and accessibility, I also created an alternative dark theme, giving users another option for viewing the website.

The Impact

The redesigned website is no longer just an online presence—it's a business tool.

✔ A clear message that answers users' questions
✔ Storytelling that builds trust and emotional connection
✔ Art direction that expresses a strong, recognisable identity
✔ An interface designed to support engagement and conversion

Key Lessons

A high-performing website isn't built on visuals alone. It's built on clarity, storytelling, and thoughtful design decisions.

If your website isn't delivering results, ask yourself:

Is the message immediately clear?
Does the story speak to real user problems?
Does the design feel intentional and distinctive?

When these elements align, your website stops being a cost—and starts becoming an asset.

How Swiss grid systems helped me redesign a digital publication for Italian pharmacists

2026-07-14T00:00:00Z

The site had no editorial identity. That was the real problem.

I designed the original Farmacia Virtuale site back in 2019.

At the time, it stood apart since most pharmacy blogs ran on generic WordPress templates, and this one didn't.

But I opened it again in 2026, and the problems were obvious.

The structure was clunky. The layouts were predictable. The reading experience never felt like the authority the publication had earned.

In a market where any publication can look competent and interchangeable, looking competent is not enough. Sameness was the real liability.

Most digital publications make the same mistake. They borrow a theme, and the theme decides who they are. It rarely reflects the brand, rarely matches how people read, and rarely carries the authority the work deserves.

Alfonso runs Farmacia Virtuale, and he wanted more from it. His brief was short: focus on readability, make content easier to find, use fewer images, and turn the site into a leading publication for Italian pharmacists.

To get there, I needed two things — a clearer structure and a real identity. One line in that brief decided how I would build both.

One line in the brief decided everything

Alfonso's brief took away the easiest tool in editorial design: use fewer images.

Most sites lean on photography to do the heavy lifting. A big image tells you what matters. A photo grid sets the rhythm. Pictures carry the mood, the energy, the sense that someone is in charge.

Take the images away, and all of that has to come from somewhere else.

With no photographic crutch, the design had to build authority from structure alone.

That is the whole story of this redesign. Every choice that follows — the navigation, the grid, the typeface, the colour — is a consequence of that one move.

So, I stopped thinking about pictures and started thinking about what would carry the weight instead: the structure, the grid, the type, the colour. That is where Swiss design came in.

Before I opened Figma, I went to Geneva

The brief pointed one way: Swiss design.

Its whole philosophy — clarity, legibility, and stripping away anything that doesn't help the reader — was exactly what a site with fewer images needed.

So, before I touched a single layout, I went back to the people who did this best. I wanted to understand how designers like Josef Müller-Brockmann and Karl Gerstner built authority out of structure, type, and restraint.

Mid-century Swiss design had already solved the exact problem I faced — clarity and authority built from grid and type alone, with almost no photography.

I studied Müller-Brockmann's Grid Systems in Graphic Design and Gerstner's Designing Programmes to get deep into the principles. Brockmann shaped most of my choices — the grid, and the way I worked with type.

The source material — Brockmann's Grid Systems in Graphic Design and Swiss editorial magazines I bought in Geneva. Principles first, software later.

The reading settled one thing before I opened any software: this redesign had to stand on proven principles.

The 2019 site buried its content. The architecture followed the site's own logic and ignored how pharmacists actually look for things. Key topics hid behind a dropdown, and you had to already know the site to use it.

With no images to pull the eye toward what mattered, I couldn't afford a structure that hid things. The reader had to see the full range of the publication at a glance.

To fix that, I started with the site's three audiences. I worked with Alfonso to map what they actually needed.

Discovery mapped three audiences — pharmacy owners, practising pharmacists, and industry representatives — each with different tasks. Their needs set the structure.

Then I rebuilt the navigation around those real tasks. Primary categories and actions moved into a mega menu, so the full depth of the site shows up front. Secondary pages — contact, about, privacy — moved to the footer, out of the way.

The mega menu shows the full publication at a glance. A first-time reader sees the whole range before choosing where to go — order as the first proof of authority.

Navigation became the first editorial statement of the redesign. Before a layout is seen, before a word is read, the structure already tells the reader one thing: this publication knows exactly what it is.

With no images to lead the eye, the grid had to lead it

On most sites, images guide the eye — where to start, what matters, where to rest. Without them, that job fell to the grid.

So, the grid had to set the hierarchy, the rhythm, and the emphasis on its own.

To address that, I built the main pages on a four-column modular grid. A modular grid divides the page into a repeating set of blocks, so every element sits in a deliberate place and the whole page reads as ordered.

Then I broke the symmetry on purpose. An even grid can feel static, so I composed the blocks asymmetrically to create tension and pull the eye through the page. Asymmetry gave the layout rhythm and personality without giving up clarity.

The modular grid across the homepage and a category page. The asymmetric blocks create the hierarchy and movement — the grid doing the work photography usually does.

To add energy, I let larger blocks act as anchors. A lead article takes a bigger module with one supporting image, pulling the reader in, while smaller blocks carry the stream of stories around it.

The lead article spans a larger module as a visual anchor, with supporting stories in smaller blocks beside it. The grid decides what matters, so a photograph doesn't have to.

Generous space separates each section, and that space does real work. It gives the publication a calm, curated feel — a distinctly Swiss character on every page, without a single extra picture.

When type carries the message, it has to be the right type

Strip out the images, and type is left holding almost the entire message.

The old site wasn't ready for that. It used Merriweather for headings and Open Sans for body, and the pair struggled at size, especially on phones. Long reading felt like work.

So, I replaced both with a single typeface: Inter.

I chose Inter because it shares its roots with Helvetica and the Swiss tradition the whole redesign leans on. Its tall x-height and open shapes stay clear in a big headline and in a long paragraph alike.

One typeface doing both jobs also keeps the reading calm. Nothing competes; the words just carry.

Then I set the sizes on a Minor Third scale — a fixed ratio of 1.2 between each step. That ratio gives controlled, even jumps from body text to subhead to headline, so the hierarchy feels consistent on every screen.

An article page and the About page, both set in Inter on a Minor-Third scale. Typography carries the whole reading experience — structured and authoritative, without one decorative image.

On a page with no decorative image, the type carries everything — the structure, the voice, and the authority, all at once.

Colour stopped being decoration and became a signal

With images gone, colour couldn't just be mood. It had to mean something.

I used it to say three things clearly: what kind of publication this is, which content matters most, and where to take action.

To keep the reading calm and focused, I held the palette to colours that feel serious and rigorous. Black and greys build the typographic structure. Soft blues separate one section from the next in light mode.

One vibrant blue does the pointing. It marks links, buttons, featured content, and key areas like the footer. Because blue is Farmacia Virtuale's signature colour, I kept it restrained, so it still means something when it appears.

The same homepage in light and dark. Colour only confirms the hierarchy the grid has already built — one signature blue for action, neutral greys for the structure, held steady across both themes.

Then I built a dark theme on the same logic, reversed. White type and lighter elements hold the same hierarchy against dark surfaces, so a pharmacist reading late at night gets the same calm, the same signals, the same order.

The full restraint — blacks and greys for text, one signature blue for action, two background tones to reinforce the grid. Every colour has a job.

Colour never leads here. It confirms what the grid and the type have already said. That restraint is the point.

Farmacia Virtuale now looks like what it truly is

The content that was buried is easy to find. The grid makes the hierarchy visible on every page. The type stays comfortable on every screen.

And it all holds up without leaning on photography.

Most of all, the site now feels like a serious publication with a clear point of view — one that signals authority before a pharmacist has read a single article.

“I found myself in front of a prepared, reliable, serious, precise UI/UX designer, capable of interpreting our needs and putting them into practice.”

Alfonso Di StasioDirector, Farmacia Virtuale

One line in a brief did all of this. “Use fewer images” wasn't a limit to work around. It was the design decision. It told me where the authority had to come from, and everything else followed.

A constraint is a brief in disguise. Take away the easy tool, and you're forced to find the honest one.

That's what art direction does.