The key differences between UX and web design

When creating a successful website, it’s easy to assume that web design and UX design are the same thing. But while they work closely together, they have different roles and objectives. Understanding the distinction can help businesses create websites that not only look professional but also deliver a seamless experience for visitors. 

In this guide, we’ll explore the differences between UX and web design, explain how they complement one another and answer the common question: Is web design and UX design the same? 

Is web design and UX design the same? 

The short answer is no. 

Although the two disciplines overlap, they focus on different aspects of a website. Web design is primarily concerned with how a website looks, while UX (user experience) design focuses on how it works and how users interact. 

A visually stunning website won’t perform well if visitors struggle to find information or complete tasks. Likewise, a highly functional website may fail to build trust if it looks outdated or inconsistent. The best websites combine both strong web design and thoughtful UX design. 

What is web design? 

Web design is the visual side of building a website. This includes layout, branding, typography, colours, imagery and responsive design. The aim is to create an attractive, engaging and on-brand site that reflects a business’s identity and appeals to its audience. 

Typical elements of web design include:  

The goal of web design is to create a professional first impression while guiding visitors through content in a visually appealing way. 

A well-designed website should instantly communicate credibility, reinforce your brand and make content easy to scan and understand. 

What about UI design? 

UI (user interface) design is a subset of web design. It focuses specifically on the interactive elements users engage with, such as buttons, forms, menus, navigation, icons and other interface components. The goal is to make these elements visually clear, consistent, and easy to use.   

What is UX design? 

UX design, or user experience design, focuses on how people interact with a website. Rather than concentrating on appearance, UX designers aim to make every journey intuitive, efficient and enjoyable. 

UX design comes before and alongside UI design. It involves user needs, planning user journeys, organising content, improving accessibility and ensuring the website is efficient and converts users into sales.  

UX design considers questions such as: 

• Can users find what they’re looking for quickly? 

• Is the navigation logical? 

• Are important actions easy to complete? 

• Does the website work well on different devices? 

• Are there unnecessary obstacles during the user journey? 

To achieve this, UX designers often research user behaviour, create wireframes, map customer journeys and test different layouts before the final design is developed. 

The ultimate aim is to remove friction and create a smooth, user-friendly experience that helps visitors achieve their goals with minimal effort. 

UX and web design: How do they work together? 

Whether you’re refreshing your current website or launching a brand new one, UX and web design work best when they’re developed together. 

For example, imagine an online retailer launching a new website. The web designer creates an attractive homepage using the company’s branding, carefully selected typography and high-quality product imagery. Meanwhile, the UX designer ensures customers can easily browse products, filter results, add items to their basket and complete checkout without confusion. 

Neither role is more important than the other. An attractive design encourages visitors to stay, while excellent UX helps convert those visitors into customers. 

Ultimately, investing in both web design and UX design helps businesses improve website performance by increasing engagement, boosting conversions, reducing bounce rates, enhancing accessibility and building customer confidence. 

By balancing creative design with user-centred thinking, businesses can create websites that not only make a strong first impression but also deliver measurable results and long-term success.  

UX and web design: What are the key differences?  

It’s important to know the main differences between UX and web design, and how each element can benefit your business. To recap: 

Although these responsibilities differ, they constantly influence one another. Design decisions affect usability, while UX improvements often influence visual layouts.  

Why do UX and web design both matter? 

A website that looks great but is difficult to navigate can frustrate users, while one that is easy to use but visually outdated may struggle to build trust. That’s why web design and UX design are equally important in creating a successful website. 

While an attractive design helps build trust, reinforce your brand identity, create a strong first impression and stand out from competitors, UX design ensures visitors can navigate the site easily and complete tasks without frustration. 

A well-planned user experience can improve navigation, increase conversions, encourage visitors to stay longer and boost overall customer satisfaction. When web design and UX design are considered together from the start of a project, the result is a website that not only looks professional but also delivers a seamless, user-friendly experience that supports user needs and business goals.  

UX and web design: Which comes first? 

In many website projects, UX design is established before the visual design begins. UX designers often create user journeys, wireframes and site structures to ensure the website meets user needs. Once the layout and functionality have been planned, web designers apply branding, imagery, typography and other visual elements. 

However, the process is rarely linear. UX and web design typically evolve together, with designers refining both the appearance and functionality throughout the project. 

The most effective websites combine both disciplines from the outset, creating digital experiences that are visually engaging, easy to navigate and designed with the user in mind. By investing in both UX and web design, businesses can create websites that not only attract visitors but also keep them engaged and convert them into customers. 

Looking for a UX and web design partner? Get in touch 

If your website isn’t attracting leads, engaging visitors or converting customers, it may be time for a fresh approach. At Kraam, we specialise in dynamic UX and web design and can create a site that’s not only visually impressive but also smart, user-friendly and built around your audience’s needs. 

By combining eye-catching design with a seamless user experience, you can improve engagement, increase conversions and make it easier for customers to take action. Whether you’re launching a new website or redesigning an existing one, investing in both web design and UX design will help you create a stronger online presence and achieve better long-term results. Get in touch today to discover how the right web and UX design strategy can supercharge business growth.  

The Most Hated Fonts You Use Every Day (And Why Designers Wish You’d Stop)  

You’re building a website, refreshing pages or mocking up a design – and without a second thought, you reach for a familiar font. Arial. Tahoma. Times New Roman. Easy. Barely anyone gives it a second thought.  

But here’s the thing: those everyday font choices are quietly working against you. At Kraam, our designers see the same fonts cropping up repeatedly, often chosen out of habit rather than intention. 

It’s not that these fonts are obscure or gimmicky – it’s that they’re too familiar, regularly used without stopping to consider whether they’re actually doing the job they’re meant to do.  

The Fonts Designers Love to Hate  

To understand why certain styles cause so much frustration, our design team looked at a selection of widely used fonts through the same lens they use every day: how readable they are, how consistent they feel and how well they perform across modern screens and layouts.  

Each font was assessed across several practical design considerations:  

• Proportions – how balanced and readable the overall letter shapes are   

• Stroke consistency – how controlled and consistent the line weight feels   

• Apertures & spacing – how open and easy the characters are to read   

• Distinguishability – how clearly similar characters can be told apart   

• Structural consistency – how well the font works as a cohesive system  

Each was scored out of 10 for every category (50 total). Here’s how the worst offenders stacked up.   

1. Arial Narrow – Score: 30/50

Arial Narrow, scoring the lowest of all, has one core issue; its compressed structure. The reduced character width pushes letters tightly together, limiting the natural spacing the eye relies on to scan text comfortably. That creates a visually cramped experience, especially across longer passages.   

On a website, that compression becomes a usability problem. Users tend to scan rather than read in detail, and tightly packed text slows that process down. On smaller screens, the lack of spacing can cause characters to blur together, increasing effort and reducing clarity – both of which can impact engagement and time on page. 

2. Microsoft Sans Serif – Score: 31/50

Microsoft Sans Serif lacks refinement in its proportions and spacing, giving it a slightly unbalanced, utilitarian feel. It was designed for older system environments – and that legacy still shows today.   

From a web perspective, this translates into a subtle but important issue – perceived quality. Even if the text is readable, the font can make a site feel dated or less polished. That perception can influence how users judge credibility, particularly on first impressions.  

3. Century Gothic – Score: 32/50

Century Gothic’s geometric design relies on near-perfect circles and uniform strokes, which reduces distinction between individual letterforms. This can make words feel visually repetitive and slightly harder to process quickly.  

Its wide proportions also result in fewer words per line, increasing scroll depth and breaking reading flow, especially on mobile. What looks clean in isolation can become inefficient in real-world layouts.  

4. Tahoma – Score: 33/50

Tahoma features thick, sturdy letterforms and relatively tight spacing, which can create a dense, heavy appearance. While functional, it lacks the openness that supports comfortable reading over longer stretches of text.  

On websites, this kind of density quickly becomes tiring – especially on content-heavy pages. When text blocks appear visually heavy, users are less likely to engage with them, making it harder to guide attention and establish clear content hierarchy.  

5. Arial – Score: 34/50

Arial’s neutral structure and minimal contrast make it highly versatile, but also visually unremarkable. It lacks the subtle characteristics that help guide the eye or create rhythm across text.  

From a usability standpoint, it performs adequately – but doesn’t enhance the reading experience. On websites, this often results in content that feels generic. In competitive digital environments, that lack of distinction can impact both brand perception and user trust. 

6. Trebuchet MS – Score: 35/50

Trebuchet MS introduces more personality through its varied letterforms, but this comes at the cost of consistency. Some characters feel slightly exaggerated, which can interrupt the visual rhythm of text.  

Over longer passages, this can subtly disrupt reading flow. While it remains readable, it’s less predictable than more modern sans-serif fonts – which can affect how smoothly users move through content on a page. 

7. Times New Roman – Score: 36/50

Times New Roman is optimised for print. Its high stroke contrast and tight spacing work well on paper – but not always on screens. 

For users skimming content (which most people do), this creates friction. It can also feel out of place in modern UI design, where cleaner, simpler typography is expected.  

8. Verdana – Score: 37/50

Verdana’s generous spacing and large x-height give it excellent legibility. The downside? It takes up more space than necessary.  

On a website, that inefficiency can impact layout. Fewer words fit within a given space, leading to longer pages and increased scrolling. While still readable, it’s less space-efficient than newer fonts designed specifically for modern displays. 

9. Georgia – Score: 38/50

Georgia offers a more refined serif structure, with solid proportions and reliable readability. However, its traditional design can feel slightly out of step with modern digital aesthetics.  

On websites, this can affect how current or aligned a brand feels. While it performs well in editorial contexts, it’s not always the best choice for interfaces or conversion-focused pages where speed and clarity take priority.  

10. Candara – Score: 39/50

Candara features smooth curves and open spacing, which support a comfortable reading experience. Structurally, it avoids many of the issues seen in lower-ranked fonts.  

However, it lacks strong defining characteristics. On a website, that means it won’t hinder usability, but it also won’t actively support hierarchy, emphasis, or brand identity. It performs adequately but doesn’t add much to the overall effectiveness of the design.  

The Do’s and Don’ts of Website Typography  

Across all ten fonts, the same themes kept cropping up, from cramped spacing and weak hierarchy to inconsistent proportions. Based on those patterns, a few practical typography rules stand out.  

Do:  

• Choose fonts designed for digital readability.   

• Prioritise open spacing and clear letterforms.   

• Maintain consistency across your site.   

• Test typography across devices and screen sizes.   

Don’t:  

• Use condensed fonts for body text.  

• Default to system fonts without considering brand identity.   

• Overlook spacing, hierarchy, and structure.  

• Mix too many conflicting styles. 

Why this matters for your website  

Individually, the flaws we’ve highlighted might seem minor but together, they shape how users experience your website – often subconsciously influencing whether they stay and trust your content or leave.   

Typography isn’t just about how something looks. It’s about how it works.  

As Kraam’s Senior Designer, Keith Blues, puts it: “Typography is one of the most important parts of digital design because it directly affects how people consume information.   

“If text is hard to read or feels visually off, users won’t spend time figuring out why – they’ll just disengage.”  

If you’re unsure whether your typography is helping or hurting your site, our team is on hand to help. Reach out via our contact page here.  

Multimodal UX: What is it and why does it matter? 

As digital products evolve, users interact with technology in more ways than ever before. From voice commands and touch gestures to visual interfaces and haptic feedback, modern experiences rarely rely on a single interaction method. This shift has led to the rise of multimodal UX — a design approach that combines multiple interaction modes to create more flexible and intuitive user experiences. 

In this guide, we explain what multimodal UX is, how multimodal interfaces work and where they appear in everyday technology. We also explore why multimodal UX matters for modern web design, the benefits and challenges of implementing it and best practices for creating effective multimodal experiences. 

What is Multimodal UX? 

Multimodal UX (User Experience) refers to designing digital experiences that support multiple forms of user interaction simultaneously or interchangeably.  

Rather than forcing users to interact with an interface in one specific way, multimodal systems enable a combination of input and output methods. Typical interaction modes include: 

User Inputs 

• Voice commands 
• Touch interactions 
• Keyboard input 
• Gesture controls 
• Eye tracking or gaze 

System Outputs 

• Visual interfaces 
• Audio feedback 
• Haptic responses (vibration or touch feedback) 
• Animations and motion 

By combining these modes, designers can create experiences that feel more intuitive and adaptable to different contexts. 

How multimodal interfaces work 

Multimodal systems rely on technologies that interpret different types of user input and translate them into actions. These technologies often include: 

Speech recognition systems 

Used in voice assistants to interpret spoken commands. 

Gesture detection 

Sensors or cameras track hand movements and translate them into actions. 

Touch interfaces 

Touchscreens detect taps, swipes and multi-touch gestures. 

Visual feedback systems 

Interfaces display visual cues, animations or notifications in response to user actions. 

When these technologies work together, users can switch seamlessly between interaction types. For example, a user might start a search using voice input and then refine it using touch navigation. 

Multimodal UX vs traditional UX 

Traditional digital interfaces typically rely on a single form of interaction. Multimodal UX expands this by offering multiple pathways for interaction. 

This shift reflects how people naturally interact with technology today. Rather than using a single device or input method, users move fluidly between screens, voices and gestures. 

Pros and cons of multimodal UX 

Below are the pros, cons and considerations when making the switch to multimodal UX design. 

Why multimodal UX matters in modern web design 

As digital experiences become more complex, multimodal UX offers several key advantages. 

Improved accessibility 

Multimodal interfaces can make technology more accessible for users with different abilities. For example: 

• Voice input can help users with mobility limitations 
• Audio feedback assists visually impaired users 
• Visual interfaces support users who prefer visual navigation 

By supporting multiple interaction methods, designers can create more inclusive digital experiences. 

Greater user flexibility 

Users interact with technology in many different environments. Someone might: 

• Use voice commands while driving 
• Use touch gestures on mobile devices 
• Use keyboard input on desktops 

Multimodal UX allows users to switch between interaction modes depending on their context. 

Enhanced user engagement 

Rich and varied interactions can make digital experiences more engaging. Visual feedback, animations, voice responses and gesture interactions help create interfaces that feel dynamic rather than static. This can improve: 

• User satisfaction 
• Time spent on platforms 
• Overall product usability 

Cross-device experiences 

Users increasingly move between devices throughout the day. Multimodal UX helps maintain consistency across: 

• Mobile devices 
• Desktop applications 
• Wearable technology 
• Smart speakers 

Designing with multiple interaction modes in mind ensures smoother transitions between these platforms. 

Build better digital experiences with Kraam 

Designing effective digital products requires more than just attractive interfaces – it requires thoughtful user experience design and robust development.  

At Kraam, we help businesses create modern websites and platforms through our design and development services, while ensuring long-term performance with reliable hosting and maintenance. 

If you’re exploring ways to improve user experience or bring a new digital project to life, you can also explore more insights on the Kraam blog, or contact us to discuss your project. 

Mobile Fonts: Why Size Matters 

Mobile users now make up the majority of website traffic, yet many websites still rely on typography choices that were originally designed for desktop screens. Text that’s too small forces users to zoom and strain, while oversized content disrupts layout flow and increases unnecessary scrolling.

Poorly optimised mobile font size can quickly damage readability, accessibility, and overall user experience. In turn, this friction often leads to higher bounce rates and fewer conversions, directly impacting commercial performance.

In this comprehensive guide, we’ll explore the best font size for mobile website design, along with practical mobile font performance tips to help you improve readability, enhance UX, and support stronger SEO performance across devices of all shapes and sizes.

Why mobile font size matters for performance, UX, and SEO

With mobile traffic now dominating most websites, readability on smaller screens is a key performance and SEO factor.

However, font size and typography are often the most overlooked components of a customer’s phone experience.

If text is too small, users struggle to read your content. If it’s too large, you risk poor layout balance, excessive scrolling, and slower load times.

Choosing the ideal font size for mobile directly affects engagement metrics like bounce rate, dwell time, and conversion rates. All of which influence how your site performs in search results.

Why mobile font size is critical for website performance

Google now prioritises the mobile version of your website when determining rankings (focusing on mobile-first indexing). This means your typography must support usability on smaller screens, not just look good on desktop and tablet.

Poorly optimised mobile font size can lead to:

• Increased bounce rates
• Reduced session duration
• Accessibility issues
• User frustration & scroll fatigue
• Lower engagement signals
• Lower conversion rates

All of these factors feed into the behavioural data Google uses to evaluate page experience, which is an integral ranking factor.

Implementing practical mobile font performance tips helps guarantee your content is readable without zooming, scrolling feels natural, and navigation remains intuitive.

This improves mobile usability scores and reduces friction across your site which is often rewarded by users and search engines.

What is the best font size for mobile website readability?

Choosing the best font size for mobile website content requires balancing readability with responsive layout design.

Mobile users typically view content from a greater distance than desktop users and interact using touch, which means text needs to be easily legible without manual zooming.

Recommended base mobile font sizes

Below are commonly accepted guidelines for effective font size on mobile devices:

A 16px base size is widely considered the minimum for body text paragraphs because it aligns with default browser rendering on most mobile devices.

Anything smaller may mean users have to pinch-zoom, disrupting the reading experience and increasing abandonment rates.

By setting an appropriate mobile font size, you make it easier for users to scan content, interact with interface elements, and consume information comfortably on the move.

How mobile font size impacts UX and SEO

Typography affects more than visual presentation — it directly influences how users interact with your website.

An optimised font size for mobile can:

• Increase dwell time
• Reduce ‘pogo-sticking‘ (when a user lands on a page and instantly leaves because of difficult navigation and bad design – a negative ranking signal)
• Improve content comprehension
• Support accessibility compliance
• Encourage deeper page interaction
• Improve conversion rates

These outcomes contribute to stronger user engagement signals, which Google uses as part of its page experience evaluation.

Additionally, properly sized text ensures your site meets mobile usability standards, reducing the likelihood of errors flagged in tools like Google Search Console.

That’s why improving readability through effective mobile font size choices ultimately enhances both UX and SEO performance.

Mobile font performance tips for faster load times

Typography also plays a role in website performance.

Fonts are external assets that require loading, rendering, and layout adjustments, which can impact Core Web Vitals such as Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS).

Here are some essential mobile font performance tips to improve website speed:

Use system fonts where possible

System fonts load instantly because they’re already installed on users’ devices. This eliminates additional HTTP requests and reduces render-blocking delays.

Limit font weights

Each font weight adds another file to load. Restricting your design to two or three weights improves load time and minimises layout recalculations.

Avoid text-blocking web fonts

Large font files can delay text rendering, causing invisible text (FOIT) or flashes of unstyled text (FOUT).

Use responsive typography (rem/em)

Avoid fixed pixel values where possible. Relative units like rem or em allow your mobile font size to scale dynamically based on device settings and viewport dimensions.

Implement font display swap

Using the font-display: swap property ensures text appears immediately while custom fonts load in the background.

Together, these adjustments support faster rendering and reduce the performance overhead associated with custom typography.

Responsive design and scaling mobile font size

Modern responsive design uses flexible text that automatically adjusts to different screen sizes. Instead of setting a fixed font size for every device, fluid sizing allows your mobile text to scale up or down depending on the screen it’s viewed on.

Responsive typography can include:

• Using flexible sizing instead of fixed pixel values
• Letting text adjust based on the width of the screen
• Applying rules that change layouts at certain screen sizes
• Gradually scaling font sizes between devices

These methods help keep your content easy to read on mobiles, tablets, and desktops, while still giving designers control over how the site looks.

By allowing your mobile font size to respond to screen size and user settings, you create a more accessible and adaptable experience that works well across a wide range of devices.

Common mobile typography mistakes to avoid

Even well-designed websites can suffer from typography issues that negatively affect usability and performance.

Watch out for:

• Using desktop-optimised font sizes on mobile
• Including too many font families
• Ignoring line height & spacing
• Setting fixed pixel sizes for all breakpoints
• Choosing overly thin or lightweight fonts

These mistakes can reduce readability, slow down rendering, and create accessibility challenges. Ensuring your best font size for mobile website setup accounts for spacing, contrast, and responsiveness helps maintain both visual clarity and technical performance.

Expertly optimise your mobile typography with Kraam

Improving your mobile font size isn’t just a design tweak; it’s an important performance decision that directly impacts readability, accessibility, and user experience.

At Kraam, we take a performance-first approach to mobile web design, helping organisations implement responsive typography that enhances usability without slowing down your site.

From scalable font systems and lightweight design and development to accessibility-focused UX and ongoing optimisation, we ensure your mobile experience supports both engagement and speed.

If you’re looking to improve your mobile website performance and drive commercial growth, contact our team today.