Behind these experiences, front-end developers play a pivotal role. They don’t just turn mockups into functioning code – they shape the bridge between design and functionality, making user experiences come to life.

To do this effectively, front-end developers need to understand UI (User Interface) and UX (User Experience) design.

• UI focuses on the look and feel of the product, including colors, typography, buttons, layouts, and visual consistency.

• UX focuses on how users interact with the product, including ease of use, accessibility, responsiveness, and overall satisfaction.

In today’s competitive digital landscape, knowing only code isn’t enough. Let’s explore why UI/UX knowledge is crucial for front-end developers and how it impacts both the developer’s career and the end-user experience.

Table of Contents:

• Why Front-End Devs Should Understand UX/UI

• Key UI/UX Principles Every Front-End Developer Should Know

• Benefits of UI/UX Knowledge for Front-End Developers

• How Developers Can Learn UI/UX

• What to Keep in Mind about UX/UI

• Conclusion

Why Front-End Devs Should Understand UX/UI

Front-end development is not just about writing clean code. It’s also about creating experiences. A developer might know every JavaScript framework and CSS trick, but if they don’t understand UI (User Interface) and UX (User Experience) principles, their work risks feeling clunky, confusing, or unappealing.

Why UI/UX Knowledge Matters

1. Bridging the gap between design and development: Front-end developers act as the bridge between design mockups and functional applications. By understanding UI/UX principles, developers can implement designs more accurately, while also identifying potential improvements in usability or accessibility.

2. Improving usability: UI/UX knowledge helps developers think beyond visuals. They consider user flow, navigation, responsiveness, and accessibility. For example, a button’s size, contrast, and placement affect how easily users interact with it.

3. Creating consistent experiences: Without consistency, users get frustrated. Developers who understand design systems and UX patterns ensure that spacing, typography, colors, and interactions feel uniform across the app.

4. Boosting collaboration with designers: Developers who know UI/UX can speak the same language as designers. This leads to smoother handoffs, fewer revisions, and faster delivery. Instead of just “coding what’s given,” they can proactively suggest alternatives when something won’t scale well.

5. Improving user satisfaction and business goals: Ultimately, great UI/UX translates to happy users. An application that is visually appealing, easy to navigate, and responsive encourages engagement, reduces bounce rates, and drives conversions.

Key UI/UX Principles Every Front-End Developer Should Know

A website or application may be powered by complex logic in the background, but what users truly experience is the interface. This is where understanding UI/UX principles becomes essential. Let’s explore some of the core ideas every developer should master.

Consistency Builds Trust

One of the most fundamental principles of good UI/UX is consistency. When layouts, typography, buttons, and navigation behave the same way across an application, users instantly feel more confident.

Imagine a scenario where a “Sign Up” button looks completely different on each page – one rounded, another outlined, another square. This inconsistency doesn’t just look unprofessional, it breaks trust and forces users to pause and think. A consistent interface, on the other hand, feels reliable and predictable.

Example:

The image below compares two sets of buttons to highlight the importance of design consistency. On the left, the "Consistent Buttons" example shows "Sign Up" and "Login" buttons that look identical in color, shape, and style, making the user interface appear clear and professional. On the right, the "Inconsistent Buttons" example displays the same buttons but with different colors, shapes, and text styles, which can make the interface confusing and visually unappealing.

Guiding Users with Visual Hierarchy

Users rarely read web pages word by word. Instead, they scan for what matters. That’s why visual hierarchy is so important. By adjusting size, contrast, color, and spacing, developers can subtly guide attention. Headlines should naturally stand out from body text, and primary actions like “Buy Now” or “Sign Up” should be visually stronger than secondary options.

A great example of this is a pricing page where the recommended plan is highlighted with a brighter color and a slightly larger card, drawing the eye instantly.

Example:

The image below shows three pricing plans Base, Pro, and Enterprise, with the Pro plan visually highlighted in the center. The design uses size, color contrast, and placement to guide users attention toward the Pro plan, illustrating the concept of visual hierarchy for easier decision-making.

Accessibility for Everyone

A beautiful interface is meaningless if it’s not usable by all. Accessibility ensures that people with disabilities can interact with your site just as easily as others. This means paying attention to color contrast so text remains readable, using semantic HTML so screen readers can interpret content, and adding descriptive alt text to images.

Even small improvements – like ensuring forms have proper labels – can transform usability. A login form without labels may look clean, but it excludes users who rely on assistive technology.

Example:

The picture below compares two login forms to show the difference between poor and good form design. The "Bad Form" on the left lacks clear labels for its input fields and has a dull, hard-to-see login button, making it less user-friendly. The "Good Form" on the right uses visible labels for each field and a prominent, easy-to-find login button, which improves clarity and usability for users.

Designing for All Screens

With most traffic now coming from mobile devices, responsive design is no longer optional. A layout that looks perfect on desktop but breaks on mobile will drive users away.

Mobile-first thinking encourages developers to start small and then expand layouts for larger screens. This ensures that buttons are touch-friendly, text remains readable, and navigation adapts naturally. A dashboard that stacks neatly into a single column on mobile but expands gracefully on desktop provides a consistent experience everywhere.

Example:

The image below shows how pricing plans are tailored for various screen sizes. On the left, the "Desktop Design" displays multiple plans side by side, allowing easy comparison. On the right, the "Mobile Design" stacks the plans vertically, making them easy to read and navigate on smaller screens.

Clear Feedback and Interaction

Users should never be left guessing. Every interaction must provide feedback – whether that’s a hover animation on a button, a loading indicator when submitting a form, or a success/error message after an action.

Consider a “Submit” button: if it does nothing after being clicked, the user may think the site is broken. But if it shows a spinner followed by a success message, the experience feels reassuring and complete.

Example:

The gif below demonstrates clear user feedback during a button interaction. When the "Submit" button is clicked, a loading spinner appears to show that the action is being processed, followed by a success message once the process is complete. This ensures users know their action is registered and provides reassurance, preventing confusion or uncertainty.

Designing with the User in Mind

At the heart of UI/UX is empathy. A developer must always ask: “Is this intuitive for someone seeing it or using it for the first time?”

Placing the search bar at the top of a page makes sense because that’s where users expect it. Hiding it deep inside a menu might seem clever, but it often frustrates users. The best interfaces are designed around user expectations, not developer preferences.

Example:

The GIF image below demonstrates the impact of user-centered design in UI/UX. The "Good UX" example places the search bar at the top of the page, making it immediately visible and easy for users to find. In contrast, the "Bad UX" example hides the search bar inside a menu, which makes it harder to access and can frustrate users.

Benefits of UI/UX Knowledge for Front-End Developers

Front-end developers often see themselves as the builders, the ones who transform design files into functional web pages and applications. But those who also understand UI and UX principles unlock a significant advantage. Their work doesn’t just “look like the design” – it feels intuitive, efficient, and enjoyable for the end user.

Bridging the Gap Between Design and Code

Designers create mockups with a vision in mind, but many of those details get lost when moving into code. A developer with UI/UX knowledge understands why spacing is generous, why a button changes color on hover, or why a particular layout improves navigation.

Instead of copying pixels mechanically, they preserve the intent of the design. Without this understanding, designs may look “close enough” but feel awkward in practice.

Example:

The image below compares bad versus good UI design. The left side shows a messy header with mismatched buttons that have different shapes, sizes, and colors, demonstrating poor design consistency. The right side shows the same header redesigned properly with uniform blue buttons that are consistently sized and aligned, creating a much cleaner and more professional appearance.

Building for Usability, Not Just Functionality

Functionality answers the question: Does this work? Usability asks: Does this feel natural to use? Developers who understand UI/UX instinctively add helpful touches like loading indicators, clear error messages, and accessible labels.

Without this mindset, users encounter confusing flows, tiny buttons, hidden actions, or forms with no feedback. The product works, technically, but it doesn’t work well.

Example:

The image below shows a login form comparison between poor and improved UX design. The left side demonstrates bad UX with empty input fields that have no placeholder text, a bland gray login button, and unclear help text that says "Forgot password? Not obvious." The right side shows the improved version with helpful placeholder text like "Enter your email" and "Enter your password," a prominent blue login button that's more visually appealing, and clearer, actionable help text that says "Forgot password? Click here to reset."

Faster Collaboration and Fewer Iterations

When developers understand design language, they can talk specifics, “The spacing here should follow the 8px grid,” instead of vague complaints like “This looks off.” This cuts down on revisions, keeps teams aligned, and builds trust between designers and developers.

Without this shared language, collaboration slows. Misinterpretations multiply, feedback loops drag on, and projects risk missing deadlines.

Stronger Problem-Solving and Adaptability

Projects rarely stick to the original plan. Edge cases and new requirements always emerge. Developers with UI/UX insight can make smart, user-centered choices on the fly, selecting layouts, typography scales, or navigation patterns that enhance the experience.

Without this knowledge, fixes tend to be purely technical, functional, but clunky, leaving users to struggle through awkward flows.

Example:

The image below demonstrates dashboard navigation design. The left side shows a "Cluttered Dashboard" with nine separate menu items scattered randomly (Users, Settings, Reports, Analytics, Notifications, Billing, Integrations, Logs, Support), making it overwhelming and difficult to navigate. The right side shows a "UX-Improved Dashboard" that organizes the same options into three logical categories: "User Management" (Users, Roles), "Settings" (General, Billing, Integrations), and "Analytics & Support" (Reports, Analytics, Support). The improved version reduces cognitive load by grouping related functions, making the interface much easier to understand and navigate.

Competitive and Professional Advantage

In today’s job market, many developers can code a responsive layout. What makes someone stand out is their ability to think about both aesthetics and usability. Employers and clients value these hybrid professionals who bridge two traditionally separate worlds.

Without UI/UX awareness, developers risk blending into the crowd. Their work may be solid, but it lacks the polish and empathy that win user trust and give products a competitive edge.

Missed Opportunities for User Trust

Users form judgments about applications within seconds. If the interface looks clunky or confusing, it signals to them that the product may not be reliable. Developers who overlook UI/UX miss this psychological layer of trust. An intuitive, visually consistent interface not only helps users accomplish their tasks but also assures them that the product is worth relying on.

Without UI/UX, developers often:

• Push out features that confuse rather than guide.

• Create inconsistent layouts that erode confidence.

• Overwhelm users with unnecessary complexity.

Example:

The image below illustrates how UI/UX design affects user trust. The left side shows "Missed Trust" with a poorly designed interface that has inconsistent styling - a basic input field, a small gray "Continue" button, and a confusing pink "Next Step?" button that creates uncertainty about what action to take. The right side shows "Built for Trust" with a clean, professional design featuring a well-styled input field with placeholder text and a prominent, clear "Continue" button that gives users confidence in their actions.

Inclusivity and Accessibility

Accessibility is a core part of good UX. Developers with this awareness naturally consider screen reader support, keyboard navigation, and high-contrast modes. This ensures products welcome all users.

Without it, developers unintentionally exclude large groups of people and may even face compliance issues. The result isn’t just a less usable product, it fails to respect and include its audience.

How Developers Can Learn UI/UX

For a long time, developers and designers were seen as working on two separate islands. Developers wrote code, designers crafted interfaces, and the two worlds met somewhere in the middle. But today, the line is much blurrier. Employers and teams increasingly expect developers to have at least a foundational understanding of UI/UX.

The good news is that UI/UX isn’t a mysterious art that only designers can master. Developers can learn it step by step, much like they learned programming languages or frameworks. It requires observation, practice, and empathy for the end user.

Start with Observation

One of the simplest ways to begin learning UI/UX is by observing products you already use every day. Pay attention to how you navigate your favorite apps or websites. Notice how buttons are placed, how forms are structured, or how feedback is given when you complete an action. Ask yourself: Why does this feel easy to use? Why does this frustrate me?

Observation builds awareness. Once you start noticing design decisions in your daily digital life, you’ll begin to understand the invisible rules that shape user experiences.

Understand the Basics of UX Principles

Before diving deep, you should familiarize yourself with some core UX principles. These aren’t abstract theories but practical guidelines for making products usable. To review them:

• Consistency: Users expect familiar patterns. A back button should always go back, not do something unpredictable.

• Clarity: Every element should serve a purpose. If it confuses, it doesn’t belong.

• Feedback: Users need to know when an action has been registered, whether it’s a loading spinner, a success message, or an error prompt.

• Accessibility: Interfaces should be usable by everyone, including people with disabilities.

Learning these basics gives you a strong foundation for evaluating and improving your work.

Practice Through Side Projects

Theory alone won’t help – as a dev, you need to practice. A simple way to start is by taking small side projects and focusing not just on functionality but also on experience. Build a to-do app, for instance, but pay attention to how tasks are added, how the interface responds, and how information is displayed.

Treat each project as a learning ground for experimenting with usability, not just coding. You’ll begin to notice where users get stuck and how small tweaks can create big improvements.

Learn Design Tools, But Don’t Get Overwhelmed

You don’t need to become a master of Figma or Sketch overnight, but learning the basics of design tools can help you bridge the gap between development and design. Being able to open a Figma file, understand layout grids, or inspect spacing gives you a significant advantage when collaborating with designers.

The goal isn’t to replace designers but to communicate better with them and reduce misinterpretations.

Follow Real-World UI/UX Examples

Another powerful way to learn is by studying existing products. Look at how popular apps like Spotify, Airbnb, or Notion structure their interfaces. Read UX case studies where designers explain their decisions. These real-world examples give context to abstract principles and help developers see how theory translates into practice.

Seek Feedback from Designers and Users

Learning UI/UX isn’t just about self-study. It’s also about listening. Share your projects with others, especially designers or actual users, and ask for feedback. What felt easy? What was confusing? As a developer, you may overlook usability issues because you’re too close to the code. External feedback helps you see the product with fresh eyes.

Build Empathy Through Testing

Nothing teaches UI/UX faster than watching someone use your product. Conduct informal usability tests with friends, colleagues, or even strangers. Observe where they hesitate, where they click instinctively, and where they get frustrated. This direct exposure helps developers understand that design isn’t just about what looks good, it’s about what feels natural in practice.

Keep Learning from Design Communities

UI/UX is a constantly evolving field. You can grow by engaging with design communities, reading blogs, or following design challenges. Platforms like Dribbble, Behance, and UX Collective provide inspiration and practical lessons. Over time, this exposure sharpens your design instincts and keeps you aligned with industry trends.

Some Helpful Resources to Learn UI/UX:

📚 Books:

• Refactoring UI (Adam Wathan & Steve Schoger): https://refactoringui.com/book (I’ve read this book, and the feedback is awesome)

• The Design of Everyday Things (Don Norman): https://jnd.org/the-design-of-everyday-things/

• Laws of UX (Jon Yablonski): https://lawsofux.com/

🌐 Blogs & Guides:

• Smashing Magazine: https://www.smashingmagazine.com/category/uxdesign/

• UX/UI Design Tutorial: https://www.freecodecamp.org/news/ui-ux-design-tutorial-from-zero-to-hero-with-wireframe-prototype-figma/

• UX Collective: https://uxdesign.cc/

• Nielsen Norman Group (NNG): https://www.nngroup.com/articles/

🎥 YouTube:

• DesignCourse (Gary Simon): https://www.youtube.com/c/DesignCourse

• Flux Academy: https://www.youtube.com/c/FluxWithRanSegall

• Steve Schoger (Design Tips): https://www.youtube.com/c/SteveSchoger

• Kevin Powell: https://www.youtube.com/kepowob

🛠️ Tools & Practice:

• Figma: https://www.figma.com/

• Dribbble: https://dribbble.com/

• Behance: https://www.behance.net/

• Mobbin: https://mobbin.com/

What to Keep in Mind about UX/UI

Some of these tips might feel counterintuitive to anyone who lives in code all day. Yet they explain why users behave the way they do, and why some products succeed where others fail. Here are some of the weird but true things about UI/UX that every developer should know.

Users Rarely Read. They Scan….

You may spend hours ensuring error messages, tooltips, or onboarding text are written clearly. But here’s the strange reality: most users don’t actually read them. They scan. Their eyes dart across headings, buttons, and visuals, often skipping over entire paragraphs.

This means your beautifully worded instructions may never be read. Instead, design needs to be built around visual cues and intuitive flows that guide users without relying on text.

Example:

The image contrasts verbose versus concise user instructions. The left side shows "Wordy Instructions" with a lengthy paragraph that overwhelms users with unnecessary details about clicking settings, navigating tabs, selecting preferences, and remembering to save changes. The right side demonstrates "Quick Setup" with a clean, numbered three-step process: "1. Open Settings, 2. Choose Preferences, 3. Click Save" followed by a clear "Save & Continue" button. The improved version eliminates cognitive overload by presenting the same information in a scannable, actionable format that's much easier for users to follow and complete successfully.

A Button’s Size Can Outweigh Its Functionality

From a developer’s perspective, a button either triggers a function or it doesn’t. But in UX, the size, placement, and color of that button can matter more than the functionality behind it.

For example, two buttons may perform the same action, but if one is too small, hidden, or styled poorly, users might not notice it at all. The function exists in code, but in practice, it doesn’t exist for the user.

Example:

The image shows how button size and design affect usability. The left side has a small, gray "Save" button that's hard to notice and might be missed by users. The right side has the same "Save" button but larger, darker, and more prominent, making it much more likely that users will see and click it. Same function, but better design leads to better user interaction.

More Features Often Mean Less Usability

It feels logical to think that giving users more options and features adds value. But weirdly, the opposite is often true. The more you add, the harder the product becomes to use.

This is called the paradox of choice: too many options create decision fatigue. Developers love shipping features, but good UX often means stripping things away until only the essentials remain.

“Ugly” Designs Sometimes Work Better

Developers may assume a slick, modern UI always wins, but there are cases where “ugly” or “dated” designs perform better because they feel familiar and trustworthy. Think of Craigslist: it hasn’t changed much in decades, but people use it because it feels simple. This shows that usability can beat aesthetics when it comes to building trust.

Example:

The image illustrates that modern aesthetics don't always equal better usability. The left side shows a "Modern & Slick" design with a sleek, dark "Explore" button that looks impressive and cutting-edge but might feel unfamiliar or untrustworthy to some users. The right side shows an "Old-School & Familiar" design with a simple gray "Continue" button that appears outdated but feels trustworthy and familiar to users.

Users Don’t Think Like Developers

This might be the weirdest truth of all: users don’t care about code efficiency, data structures, or the elegant architecture behind the app. They only care about what’s on their screen and whether it makes sense.

For example, a developer might proudly optimize a search algorithm, but if the search bar is hidden in a menu instead of being front and center, users will complain that “the app doesn’t have search.” The feature exists, but in their minds, it doesn’t.

Example:

The GIF image demonstrates the impact of user-centered design in UI/UX. The "Good UX" example places the search bar at the top of the page, making it immediately visible and easy for users to find. In contrast, the "Bad UX" example hides the search bar inside a menu, which makes it harder to access and can frustrate users.

Small Delays Feel Bigger Than They Are

From a technical side, shaving 300 milliseconds off a request may not feel like a huge deal. But to a user, even slight delays feel magnified. A loading spinner that lingers for a second can feel like forever. UX research shows that anything beyond 2–3 seconds risks losing the user’s attention.

This means developers must think not only about raw performance but also about perceived performance using skeleton screens, micro-animations, or progress indicators to make waits feel shorter.

Example:

The image compares the loading experience design. The left side shows "Feels Slow" with just a basic spinner and "Loading..." text that makes even short delays feel endless to users. The right side shows "Feels Faster" using skeleton screens - gray placeholder blocks that mimic the content structure while loading, making the same delay feel much shorter because users can see that progress is happening and get a preview of what's coming.

Accessibility Isn’t Just for “Some” Users

Developers sometimes assume accessibility features (like screen reader support, keyboard navigation, or high-contrast modes) are niche concerns. But here’s the reality: everyone benefits.

Captions help people in noisy environments, large touch targets help on small screens, and good color contrast improves readability for everyone. Accessibility isn’t just about inclusivity – it’s about creating universally better experiences.

Conclusion

In modern web development, understanding UI/UX isn’t optional. It’s essential. Front-end developers aren’t just programmers – they are the architects of user experience. By learning design principles, developers improve collaboration, write smarter code, and create products that truly serve users.

Whether you’re just starting or already experienced, investing time in UI/UX knowledge will set you apart and open new opportunities. Explore design resources, collaborate closely with designers, and experiment with small design tasks in your projects.

At the end of the day, the best front-end developers don’t just write code, they create experiences users love.

UX and UI design are two technical terms that can often be confusing.

Many people may use these two terms interchangeably, incorrectly, or assume they are the same thing. But that is not the case, as they are two different fields.

In a nutshell, UX design focuses on how well the product works and how the user feels when using it, whereas UI design focuses on how that software product looks.

Both are equally important and play a vital role when creating and developing software.

Think of it like this: a pretty UI may attract visitors, but if the product is not functional, the visitors won't stick around. And if the product works properly but doesn't look good, users will feel frustrated and look elsewhere to satisfy their needs.

There needs to be a balance.

With that said, the definition above only scratches the surface.

In this article, you will learn about the differences between UX and UI design and understand what UX and UI designers do in their day-to-day work.

Here is what we will cover:

1. What is UX design and why is it important?
2. What does a UX designer actually do? The UX design process explained
   1. Understanding phase
   2. User research phase
   3. Analyze and define phase
   4. Ideate and design phase
   5. Reporting phase
3. What is UI design?
   1. What does a UI designer do?
4. UX VS UI design - what's the difference?

What Is UX Design and Why Is It Important?

UX design is short for user experience design.

The term was coined and popularized in the early 1990s by Donald Norman, an American researcher, professor, and author, during his time at Apple.

According to Norman:

User experience encompasses all aspects of the end-user’s interaction with the company, its services, and its products.

Note that the original definition of UX referred to physical and digital products. Nowadays, UX design mainly relates to digital products.

So, user experience design is a process that involves cultivating a good relationship between a company, the company's software products /services, and the company's clients/customers.

The relationship is based on how a user feels when using the company's products.

UX has to do with feelings, emotions, thoughts, behaviors, and human psychology.

Specifically, good UX depends on the following points:

• How does a person feel when using the product?
• How accessible is it for the person to navigate the product? Can everyone use it?
• How usable is the product? Does it work as intended?
• How easy is it for the person to navigate and find the necessary information?
• How well-planned and intuitive are the steps a user needs to take to accomplish a task?
• How logical is the sequence of actions a user needs to perform to accomplish their goal with ease?
• Does it make it easy for them to achieve their initial goal?
• How well structured is the content available? Does it follow a logical hierarchy?
• How useful is the product?
• How valuable is the product?
• Does it serve a purpose?

All of the above are part of what makes good UX design and contribute to the value the software offers.

UX is all about solving problems and always keeping the user in mind.

The end goal is to provide a pleasant and positive experience for the user, create digital products that a user feels comfortable using, and for the user to accomplish their task and have their needs met.

All in all, it focuses on anything and everything that affects the user's journey when trying to solve a problem they have.

Good user experience is vital for every business. If the user/customer is happy and not frustrated, they are more likely to remain loyal.

If users can't use the product with ease, this will result in them giving up on it and looking for an alternative product/service that meets their needs, resulting in a loss for the business. They are unlikely to return to a product after a bad experience.

What Does A UX Designer Actually Do? The UX Design Process Explained

The UX design process is comprised of many parts. It is a sequential process with the end user always in mind throughout all stages.

The role of a UX designer will vary from business to business and depends on the size of the team they are on.

On a small team, a UX designer will probably be responsible for the whole UX process from start to finish. On a larger team, they might be involved in only one part of the process, such as UX research.

That means a UX designer may not be part of all the stages outlined in the following sections.

Now, let's see the different phases in the UX design process in more detail.

Understanding Phase

The first step in the UX design process is understanding the brand and its users.

Specifically, it is about understanding how the project the UX designer is working on aligns with the brand's mission, vision, and goals.

And it is about understanding the brand's users/customers.

A UX designer can't make assumptions about what the users really want or what problems they are facing when using the product/service. They will only know once they ask the users directly.

The UX designer needs to understand, be in tune with, and empathize with the problems users are facing and their pain points. They need to understand their users' wants and needs.

The key word here is empathy! Empathy is the ability to understand the user's hopes, goals, frustrations, and needs.

Once the UX designer has gathered those insights and identified the goals of the brand and the problems the users are facing, they can figure out how to solve problems and provide solutions through their designs and how they can create products/services that solve those problems.

User Research Phase

As mentioned in the section above, a UX designer can't assume, and if they do, they need to question those assumptions by conducting user research.

There are two main methods for conducting user research:

• Qualitative methods
• Quantitative methods

Qualitative research methods focus on observational and non-numerical findings, human behaviors, opinions, and emotions.

They include creating customer feedback surveys and asking open-ended questions to understand the key frustrations and pain points and what needs improving.

They also include reaching out to customers directly and conducting 1:1 face-to-face or online user interviews or focus groups of 3-5 target users for usability testing.

Quantitative methods focus on numbers, metrics, and measurable data points.

They include using web analytics tools and researching how the current design is performing. For example, they might find out how many visitors of an e-commerce site are clicking on a particular item and adding it to their cart, or what is the average time spent on the checkout page.

To learn more about user research, check out the following resources:

• Why you need a UX researcher on your product team
• Use User Research to Create the Perfect UI Design
• Qualitative VS Quantitative Definition – Research Methods and Data

Analyze and Define Phase

After gathering user insights, the next phase in the UX design process is for the UX designer to analyze and make sense of all the information and define the problem they need to solve for the user.

They define what their focus should be and what would have the most impact on the users.

At this stage, it is crucial not to lose sight of the user's needs.

For this reason, the UX designer will create user personas based on the research they've gathered.

A user persona is a fictional character that will use the product/service.

It represents a typical target user and identifies their needs, frustrations, behaviors, and goals.

User personas allow UX designers to understand their users better and make wise design decisions.

At this stage, a UX designer might also create use cases.

A use case is a description of how different users might use and interact with the product or service.

Finally, a UX designer might also create journey maps.

A journey map is a visual and graphic representation of how the user will interact with the product/service from start to finish, and a map depicting the whole user journey until the user accomplishes their goal.

Journey maps are useful for understanding the different pain points a user faces when using the product and where those pain points occur, which leads to restructuring the product/service.

To learn more about user personas and use cases, check out the following resources:

• How To Write User Stories, Epics, & Personas
• Use cases and organizational structure

Ideate and Design Phase

The ideate phase is all about brainstorming and exploring out-of-the-box design ideas.

At this stage, the UX designer will come up with different creative options for how to solve the problem at hand.

They will brainstorm ideas and sketch them on paper before using any digital tools.

They will also create wireframes. Wireframes are rough prototypes and visual representations of what the UI and its various components will look like and which act as a guide and direction for the final design.

They will outline the steps and the complete path a user will take while using the product/service.

The end goal of this phase of the UX design process is to design low or high-fidelity versions of the structure and layout of the product (which may or may not be interactive) and of what the final design will look like. The first design is never the final design.

After continuously iterating the designs, adding new ideas and features, rigorous testing, and feedback, the UX designer will have a detailed and carefully crafted digital mockup.

The mockup will look almost identical to the final product, which they hand off to the engineering team. The engineering team will build and ship the real-world working product.

To learn more about creating wireframes, check out the following resources:

• What is a Wireframe? This UX Design Tutorial Will Show You.
• How to Design a Website Prototype from a Wireframe

Reporting Phase

After the product launches, the next phase of the UX design process is the reporting phase. This includes conducting usability testing, observing how users are using the end product, collecting feedback, and gaining additional insights.

This phase helps the UX designer and their teams understand if the end product solves the initial problem and if it meets the needs of their end users.

At this phase, here are some of the questions that a UX designer may ask:

• "What did we do right?"
• "What didn't we do right, and why?"
• "What did we learn?"
• "How can we improve in the future?"
• "How are users responding to the product/service? Did we solve their problems and pain points?"

With that said, the UX design process doesn't end here, since there are continuous iterations and improvements to be made.

What Is UI Design and Why It's Important? An Overview of UI Design

So far, you have seen that UX design involves every aspect of a user’s experience when using a product. So what exactly is UI design, then?

Back in the 1970s, to use a computer, you had to use a command line interface (or CLI for short), and users needed to know a programming language to communicate with the machine.

At that time, you needed a lot of technical knowledge and skills to complete a simple task with a computer.

That changed in the 1980s with the introduction of Graphical User Interfaces (or GUIs for short) and personal computers.

A mouse, application icons, buttons, menus, checkboxes, and folders replaced the cryptic command line. Anyone could use a computer. Users could easily create, update, move, and delete files and send emails – no coding required.

The people that created these early graphical user interfaces were called User Interface (or UI for short) designers.

Nowadays, the term user interface involves every visual part of a digital product/service that a user interacts with. This includes mobile apps, websites, screens, touchscreens, keyboards, and wearable technology such as smartwatches, to name a few.

You can think of it as the bridge between the user and technology.

A UI designer is responsible for designing every step that allows a user to interact with the digital product/service. This includes layouts, structure, buttons, colors, and animations.

UI design is all about the look, feel, and aesthetics of a digital product. It involves every visual aspect and appearance of the product the user interacts with.

The end goal of a UI designer is to make something visually appealing to the user that's easy to interact with.

Good UI is vital for drawing attention to potential customers and attracting new users. Everyone appreciates a well-designed, clean, intuitive, and modern design.

But how does all this relate to UX design? You can think of UI design as a subset of UX design and a small part of the UX design process. But it is a separate discipline in its own right.

What Does A UI Designer Do? UI Design Skills Definition and Examples

UI designers need to have visual design skills.

Specifically, they need to know the following concepts and disciplines:

• Color theory, creating color palettes and creating accessible contrast that ensures both usability and readability.
• Typography.
• Layout, spacing, structure, and effective placement of elements on a page.
• Graphics, icons, and illustration design.
• Interaction design principles, animation effects, and motion design.
• Branding – creating a consistent visual identity for a brand/product and communicating the brand's mission and message.
• Responsive design, and ensuring the UI looks good on all screen sizes and devices.
• Creating style guides.
• Creating design systems.
• Knowledge of industry tools such as Figma
• Wireframing and prototyping.

UX VS UI Design – What's the Difference? The Difference Between UX and UI Design Explained in Plain English

By this point, you hopefully understand what UX and UI design involves.

To summarize their differences:

UX design is how things work and how useful they are. UX design focuses on the whole experience and the journey a user takes when using a product from start to finish. It involves the overall experience a user has when trying to solve a problem.

UX requires knowledge of psychology, cognitive science, human behavior, identifying the user's pain points, and solving their problems.

UI design is how things look. UI design is a subset of UX design and is a more specialized field. It focuses only on the visual aspects that a user interacts with and creates inclusive, accessible, pleasant, and aesthetically pleasing digital interfaces.

UI design also focuses on creating a brand aesthetic that leads to an emotional connection with users/customers.

Both UX and UI design are equally important in creating useful, usable, and modern digital products and services and meeting the needs of their users.

Conclusion

This marks the end of the article – thank you so much for making it to the end!

Hopefully, this guide was helpful, and it gave you some insight into what UX and UI design are, what UX and UI designers do in their day-to-day work, and what the differences between those two terms are.

Thank you for reading!

In this article, I will provide definitions for UI/ UX design as well as starting salary information from around the world.

What is UX design?

The term User Experience refers to how users interact with a product or service. Whenever you login into a website, or play a game on your phone, your interaction with that application is considered user experience.

If you find a product to be easy to use and understand, then that would be considered a positive user experience. But if the product is confusing and frustrating then that would be considered a negative user experience.

If you want to learn more about UX design, and find resources to start learning, then I would suggest reading my article on What is UX Design?

What is UI design?

The term User Interface refers to the look and feel of a product. For digital products, UI design focuses on all visual aspects including fonts, colors, spacing, responsive design and more.

Good UI design is considered to be simple, easy to understand and consistent. You don't want users to have to struggle with navigating through the product because it is not intuitive.

Bad UI design is considered to be inconsistent and difficult to understand. If users are confronted with low quality images, inconsistent fonts or poor contrast in visual content, then the user will want to leave the product as soon as possible.

If you are interested in learning the fundamentals of UI design, then I would suggest reading through this Per Harald Borgen article.

Resources to start learning UI/UX design

Here is a list of resources to learn UI/UX design.

• Foundations of User Experience (UX) Design
• The 2019 UI Design Crash Course for Beginners
• Figma Tutorial – A Free UI Design/Prototyping Tool
• UXpin: Free UX Ebooks

Salaries around the world for UI/UX designers

In this section, I will show you some salaries from around the around for entry level UI/UX designers.

United States

This data was pulled from indeed.com, payscale.com, and ZipRecruiter.

This data represents the national average. If you want data for your specific city, then you can search for that in these job sites.

Canada

This data was pulled from ZipRecruiter.

Mexico

This data was pulled from payscale.com and is in MXN currency.

UK

This data was pulled from uk.talent.com. The average entry level salaries for UI/UX designers would start at £35,000.

Other Countries around the world

If you want to explore other UX salaries from around the world, you can look into https://uxdesignersalaries.com/

You can also use popular job sites in your area, to find out the average entry level salary for UI/UX designers.

I hope you enjoyed this article and best of luck on your UI/UX journey.

You're not the only one.

We live in a beautiful era of design, with new techniques and trends coming and going. Frontend development is also gaining increased momentum, with more and more developers getting involved in UI/UX design.

While both UI and UX design are often placed on the same pedestal, they are fundamentally different, and beginners should understand the difference between the two.

Knowing this, my team from Creative Tim and I have done a lot of research and created a comprehensive guide on the most important parts of these two huge domains:

1. UI Design — How Things Look
2. UX Design — How Things Work
3. What Are the Key Differences Between UI and UX Design?
4. What Do UI/UX Designers Do?
5. What Are the Disadvantages of a Combined UI/UX Role?
6. How Do UI/UX Designers Work Together?
7. What Are the Salaries of UI and UX Designers?
8. How Do You Become a UI or UX Expert? What Kind of Design Courses/Tutorials Should You Take?
9. Which Should You Specialize In? UI or UX Design?

UI Design — How Things Look

A UI (User Interface) deals with the application's graphical layout, which includes buttons, screen layout, animations, transitions, micro-interactions, and so on. In short, UI is all about how things look.

UI design includes the following formats:

• Graphical User Interface (GUI): GUI design involves how users interact with the visuals and digital control panels of a system. The computer's desktop is an example of a GUI.
• Voice-controlled Interface (VUI): VUI design deals with the interaction between a user and a system using voice. Smart assistants like Bixby for Samsung mobile devices and Siri for iPhones are examples of VUIs.
• Gesture-based Interface: This is mostly used in virtual reality (VR) and other gesture-based design scenarios, which deal with the engagement of users within 3D spaces. Here is an example of our fully coded simulation of the Soft UI Admin Dashboard in VR:

Source

For good UI design, you should take these characteristics into consideration:

• The design should be focused on helping users complete tasks quickly with minimum effort. Completing tasks should be a seamless experience.
• It should be enjoyable, satisfactory, and free from frustration.
• The UI design should communicate the brand value of the company/organization.

UX Design — How Things Work

UX (User Experience) design deals with how users interact with the system. Logical navigation and how smooth and intuitive the experience is all fall under UX design. In short, this type of design helps users have a positive experience.

To get a feeling of the UX process, here are the main steps:

• Interaction Design deals with how users can complete their tasks effortlessly by using the interactive components of a system (page transitions, animations, buttons, and so on).
• User Research involves conducting extensive research, collecting feedback and ideas from new or existing customers, understanding end user needs, and making design decisions based on these parameters.
• Information Architecture involves the organization of information and content that users need to do their tasks. This requires a UX designer to understand the relationship between different sets of content and present them in the most understandable way possible.

For good UX design, you should follow these practices:

• The product should be easily usable, logical, and self-explanatory.
• The product should solve users's problems.
• The product should be accessible and usable to a wide range of people.
• The product should create a positive experience for the user, allowing them to complete tasks without frustration.

Cognitive Biases

Great UX designers must be aware of the cognitive biases that we all have, as this can affect the interaction between the user and interfaces. Many marketing strategies are based on these biases:

_Source_

What Are the Key Differences Between UI and UX Design?

UI and UX design have often been used as interchangeable terms.

While the end product requires consideral input from both design methodologies, the process of designing UI and UX is very different.

UX design mostly deals with the user’s entire journey to solve a problem.

On the other hand, UI design is focused on how the product looks and feels when the problem is being solved.

Here are the main differences between UI and UX design:

• Main focus: The main focus of UI designers is to deal with the quality and visuals of the end product, and use hi-fi models as prototypes. UX designers focus more on the purpose and functionality of the end product, and care more about logic. Additionally, UI designers deal with the technicalities of the product design, while UX designers focus more on project management and analysis of the project.
• Use of color: UI designers design prototypes in full color while UX designers do so in black, white, or grey.
• Tools: UI designers use tools like Sketch, Flinto, Principle, and InVision for collaborative image designing. UX designers use wireframe-based prototyping tools like Mockplus.
• Artistic Component: UI designers have to include an artistic component in their design since it is related to what the end user sees, hears, and feels. UX design has more of a social component, as it needs to understand what a user wants to experience in the end product.

Here is an example of UX and UI prototypes for the same end product:

Source

What Do UI/UX Designers Do?

If you want to become a greate UI designer, you should develop the following skills/responsibilities:

• Working in agile teams.
• Creating user flows, wireframes, prototypes and so on.
• Visualization tools such as InVision, Sketch, Photoshop, Figma, etc. For more details about which tool to choose, check out our research in this article: InVision vs Sketch vs Figma vs Photoshop
• Frontend programming languages such as HTML5, CSS3, and JavaScript.
• Executing visual design stages from inception to final hand-off.
• Collaborating with UX designers, developers, QA, and product managers to design and implement innovative visual ideas for products.
• Communicating the branding and style of the company to users through design.
• Creating the look and feel of the product using customer analysis and research.
• Managing the responsiveness, interactivity, and animation of a product and making it adaptive to all device screen sizes.

If you want to become a great UX designer, you should develop these skills/responsibilities:

• Working in agile teams.
• A strong understanding of the UX process.
• Prototyping tools like Adobe Creative Suite, Sketch, InVision, Axure, etc.
• Problem solving skills and curiosity about everything related to design, people, life and technology.
• Stakeholder management and client interaction.
• Creating process flows, wireframes, sitemaps, prototypes, and UX deliverables.
• Collaborating closely with developers, product managers, UI designers, external stakeholders, and QA Engineers to iterate designs based on market dynamics, user feedback, and tech constraints.
• Analyzing customer needs, competitors, product structure, and strategies for designing the experience of a product.
• Creating seamless design and interaction strategies for mobile, web, desktop, and other hardware endpoints.

What Are the Disadvantages of a Combined UI/UX Role?

Having a combined UI/UX role is almost like wearing two different hats at the same time.

While most organizations advertize a UI/UX role as a single, combined role, a UI and UX designers have different skill sets. Their main focus, way of thinking, and method of prototyping a product differ greatly.

A combined UI/UX role requires constant switching between conceptualization and visualization, which is often difficult and can reduce the amount of attention that each discipline requires.

How Do UI/UX Designers Work Together?

While UI design and UX design require very different skill sets, they are both important components that must work in harmony to give the best experience to end users.

A UI design might be beautiful, but it can be clunky and confusing to navigate without a good UX design. On the other hand, the user experience of a product can be flawless, but it is nothing without a good looking user interface.

Any frontend development and design process should start with understanding the needs of the user. UX and UI designers should work in collaboration with other developers, managers, and product owners to understand what the end product should be able to do, how it should feel, and what it should look like.

UX designers are generally involved in the earlier phases of a product design since they need to design the flow of activities that take place when a user needs to solve a problem. This involves analytic and project management activities.

Later, a UI designer builds on the aesthetics and interactions based on the models provided by the UX designer.

Given this, it is safe to state that UX and UI go hand in hand. And while there are instances when the same person does both, one design principle cannot exist without the other.

What Are the Salaries of UI and UX Designers?

UI designers earn an average of 50k worldwide, with the average salary in the USA being 91k, Germany being 57k, France being 47k, and 67k in the UK.

UX designers earn slightly more, with an average of 52k worldwide. UX designers in the US earn 102k on average, with Germany paying 53k, 49k in France, and 68k in the UK. (Source: Glassdoor)

Note: All the salaries listed above are an average for the area, and are in USD.

How Do You Become a UI or UX Expert? What Kind of Design Courses/Tutorials Should You Take?

Becoming a UI or UX expert starts with being genuinely interested in UI/UX design. Once you know you're interested, you should find resources and take design courses that help prepare you for the job market.

There are online courses like the UI Design Program and Learning UI Design that can help you kickstart your journey towards becoming a UI designer.

For UX design, you can study online, paid courses, or courses from online universities. You can also look at the best online course websites to learn UI/UX so you can see which websites offer courses for free and the user feedback on these websites.

For UX design, there are a number of paid courses, of courses from online universities. You can also check out a list of the best online courses to learn UI/UX design so you can see which websites offer courses for free, and read user feedback.

Suppose you already have some of the required skills to be a UI/UX designer. In that case, you can also take a look at articles like the behavior patterns for UX design, UX methods that you can use, inspirational graphic designs from the world's best designers, and academic research papers that designers should read.

Which Should You Specialize In? UI or UX Design?

Specializing in UI or UX design is a personal preference that depends on your particular skillset.

However, there are a huge number of companies that advertise a combined UI/UX designer role.

While the roles and responsibilities of both these vary differently, there is still a niche market for UI/UX design, making it a good idea to have adequate knowledge about both.

While difficult to implement, a combined UI/UX career can prove fruitful in terms of salary compensation and importance in the company.

However, a combined UI/UX designer role is difficult to perform since it needs constant switching from one mindset to the other. So it is often a better option to specialize in one role instead.

For example, if you are artistic, know effective color combinations, and understand how products can be visually enhanced, UI design is a good choice for you.

On the other hand, if you are good with managing user and stakeholder needs, have excellent analysis skills, and understand how user experiences can be improved, UX design would be more suited to you.

Final Thoughts

User Interface and User Experience design both require an understanding of what users need.

Once you have this understanding, frontend development and design do not have to be a complex affair — there are a lot of ready-made components, tools, and kits that can make design easier and more effective.

Creative Tim offers you a huge number of free and premium, fully coded UI tools like Templates, Dashboards, and Design Systems.

If you want to build your illustrations using hand-drawn sketch components in a scalable manner, look no further than Creative Tim’s product: IRA Design.

And let's keep in touch on Twitter.

1. Wireframe
   Sketching the layout
2. Prototype
   Preparing the user interface from the wireframe
3. Design in Figma
   Completing the design from the prototype with color, image, etc

Watch the full video course with the step-by-step process in the YouTube embed below for free:

Step #1: How To Make a Wireframe

The first step to designing a website: wireframe it.

A good wireframe can give you the vision for the entire layout and functionality of your website. It can also serve as the first stage of a design.

Wireframes give you an idea of the overall structure pages will take, and how navigation will flow.

If you are considering building a website, you can do a wireframe quickly and easily. You don't even have to be a graphic designer to do so.

To get started, all you need is a pencil and some paper. (Or if you want to get an iPad and iPencil.)

We are going to create a wireframe and show how it allows for a quick, iterative design process. This will create a living piece of documentation that you can use for yourself and for a client. And you can use this to reason through your planning – all before you invest any time in actually coding it.

Here are some steps we'll cover in this article (and in the accompanying video tutorial):

1. Sitemap planning
2. Creating a homepage wireframe
3. Using markup in wireframes
4. Wireframe components (header, menu, footer)
5. Wireframing your Features Page and Contact Page
6. Mobile Responsive Wireframes

Sketching out a sitemap

Wireframe #1: Sitemap Planning

Getting started with wireframing begins with a good sitemap. Before you create a page wireframe, a sitemap will give you some structure. This way, you'll understand which pages you're going to build, and how they will all connect to one another.

Most small sites may not need a sitemap. They usually just have either a single landing page, or a few common pages like Features, About, and Contact Us.

This said, as soon as your website or application becomes larger and more complex, you'll want a sitemap.

Sitemaps provide you with a brief overview of where items exist and how they interconnect.

In our example, we will create a simple sitemap which will contain just the Home Page, Features Page, and Contact Us page.

You don't have to spend too much time on this. Just add a few boxes to show each page, lines underneath to show sub-pages, and that's it.

Creating a homepage wireframe

Wireframe #2: Creating Homepage Wireframe

We are going to create our first wireframe page. If you haven't wireframed before, the process is quite simple. Each aspect of a website is represented with a shape or simple graphic, such as:

• boxes with diagonal lines through them to represent images
• horizontal lines to represent paragraphs of text
• and a circle with an L in it to represent your logo.

For the homepage, we'll build out a slider image, menu, and logo. We'll also give it a few labels to show what each item is.

This is also useful to organize each section into rectangles that we can later copy-paste onto other pages (especially for the header and footer).

Creating a wireframe for the body of our home page

Let's also create another section for an introduction to the company (About Us) and a sponsor section (with logos and images of our sponsors).

As we progress through the design, we can also implement other items into the homepage, like call-to-action buttons in areas that would be appropriate.

We finalize the design with a Footer section where we add common elements such as a Contact Form, Contact Info, and reuse the Logo once more.

Creating additional page elements in our wireframe

Wireframe #3: Using Markup in Wireframes

The wireframe is often viewed not just by designers, but by developers, clients, and management. So it's useful to add some markup to each part of the content. This can help guide people viewing your wireframe for the first time. I usually do this at the end of completing a page.

In our example, let's markup the homepage and label each part of the content with red text.

Aspects you want to markup include items such as sections, titles, contact forms, and what images might be.

Note that Markup doesn't have to literally explain what the content will eventually be – just what it represents. So instead of putting in the actual "Example of intro title", you can label the title as "Intro Title."

How to Markup a wireframe

Wireframe #4: Add Other Wireframe Components like Header, Menu, and Footer

Now that we have already created a header and footer, we can reuse them for additional pages. If you're working digitally, you can copy-paste headers, footers, and other recurring elements into new page wireframes. (And if you are just using paper and pen, you can always use a razor and a photocopier to achieve the same effect.)

This allows your wireframe design to remain consistent. Tools like Figma will allow you to create asset components which you can also copy-paste throughout your design. You can even configure them to dynamically update other parts of your wireframe when you change your root component.

In our example, we are going to reuse components to build a features page. By creating our first features section component, we can then copy and paste it below several times to build out our entire features page in just a few minutes.

Adding wireframe components and reusing them on different pages

Wireframe #5: Features Page and Contact Page

It gets easier and easier to building out additional pages once you get started with wireframing and build out some components. With the features page finished, we can create a Contact Us page. All we really have to do is add a few common elements, such as a Google Map, Contact Us form, and some basic contact details like a phone number and email address.

In this example, I have small logos for a phone and email, and large blocks to represent where they will be located on the page.

The contact form will be located below (without a box outline), as well as a Google map on the right hand side.

Wireframing the Contact Us Page

Wireframe #6: Make a Mobile Responsive Wireframe

No good wireframe can exist these days without a mobile version. This is because much of the web today is viewed on mobile devices.

It's good to know how a design might collapse down to smaller viewports. If you are have more time on your hands, you can also build out a tablet version of the responsive wireframe as well.

In our example, we build out the home page design wireframe section-by-section. Most of the rows and columns are collapsed. And since we're on a mobile viewport, many of the images, texts and blocks reduce in size.

Because of this, it's possible for some of the sections to still have the same amount of height as their respective desktop versions. On the other hand, some sections with lots of images (like the sponsors section) might end up having much more scroll height.

Due to this, I often also add additional markup to show which desktop version sections correspond to which responsive equivalents for the mobile version.

The final wireframe with several pages designed, the sitemap, and mark-up

Wireframe Conclusion

Wireframing is a quick way to get a better idea of your website or application visually. I recommend you try it for your next project to help you plan how it might function and look.

Wireframing is the ideal approach for this, since it takes so much less time than having a designer do a full-blown User Interface prototype.

Step #2. How to Make a Website Prototype

You may have heard the old saying: "Measure twice, cut once." Well that is exactly why you should plan out a website before you build it. And that's where prototyping comes in.

When we design our websites, we progress from wireframing to prototyping to – finally – a full design.

I wanted to explore and expand on what Prototyping actually means by taking you through the full process.

In this part, we'll cover:

1. What an Early Prototype is
2. Creating a Structure: Frame, Rows, Columns
3. Adding Content: Header, Slider, About
4. Designing Sections
5. Conclusion: What we've learned from the prototyping process

Prototype #1: What is an Early Prototype?

A prototype is normally the secondary iteration of a design, as it is built on top of a wireframe.

A wireframe usually involves a simple drawn sketch via paper, pen, or online tool. Next we build the prototype, which is our more refined mockup for the website or app.

Let's take a look at the early wireframe we built so far.

The wireframe we created in [my previous wireframing course](https://www.freecodecamp.org/news/what-is-a-wireframe-ux-design-tutorial-website/" style="box-sizing: inherit; margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-size: 17.6px; vertical-align: baseline; background-color: transparent; color: var(--gray90); text-decoration: underline; cursor: pointer; word-break: break-word;).

It has a number of pages, sections, and areas where text and images will be added later.

The goal, then, in the Prototype is to build this visually, but without adding color or images.

In this example, I will be using Figma to do the Prototype. You can view the whole Figma protype here.

Prototype #2: How to Create a Website Prototype Structure: Frame, Rows, Columns

When we created the wireframe, we considered the grids – but they were hand drawn.

When doing an early prototype, we have to define them properly so that the whole design follows the grid structure.

In this example, I will be using a 12-column design with a regular width of 1140px, which is traditionally used and seen in Bootstrap designs. This gives us a 15-30px margin between grid units.

This will be useful later when we collapse the columns to rows for mobile responsiveness.

You can create your own grid structure in Figma. But be aware that you (or someone else) will later need to actually code these designs.

Whenever you're designing something, be sure to take the developer into consideration.

Prototype #3: How to Add Content to a Website Prototype: Header, Slider, Sections

Unlike the Wireframe, we are no longer representing text with lines, and headers with blocks. Instead we need to fill out content for a mockup.

This doesn't mean adding colors or images. But it does mean we have to show real text.

At this stage, it's a great idea to make sure that the header and sections are shown with the actual content they will be intended to hold. This will allow better selection for colors and images in later stages of the design.

In this part of the example, I built out the slider with hero text, and a description underneath. There are a few things to look out for at this phase of the prototype process:

• Font sizing and positioning
• Content location and spacing
• Margins and padding between sections and content

Prototype #4: How to Design Sections of the Website Prototype

For prototyping and the final mockup, it's important to start layering your groups and sections. Sections can include things like the header, the "about us" section, and the sponsors section.

You can create groups in your UI tool (Figma does this with Ctrl+G). Label your sections and set them with different background colors. This will make it easy to identify them, and will allow you to easily move them about.

Too many times I've been asked to move certain parts of a website up and down the grouping. By grouping all your components into sections, you will make it much easier on yourself during the prototype phase of the design work.

Prototype Conclusion: What We Have Learned from the Prototyping Process

As we build out the rest of the design, it's important to ensure that this early prototype does not become a full mockup for a website design.

It's easy to get carried away. But the goal of doing a prototype after a wireframe is to ensure that we can continue to plan the website's development.

It's much easier to identify problems and issues in the early planning stages and update them before diving into creating the full design. Such prototyping may only take you a few hours, but it can save days worth of effort later in the process.

Step #3. How to Build a Website Design in Figma

Our final step will pull all the elements together so far, and fill in the space between. This includes replacing blank boxes with real images, placeholders with content and greys with color.

It's important to do a bit of research into what sort of product or website you will be building. Most things can often be extrapolated from the logo, such as what kind of design and color will be used.

Design #1: Introducing the Logo

The introduction of this logo will show the colors for this design, which will include blacks and blues, as well as the design aesthetic, which has a more simple box like model.

The logo should not be too large and overwhelming, as the main focus should be on the hero content, and the menu, but it should be enough to stand out on its own when placed at the top of a website.

Design #1: Hero Section

Using the shades from the logo, we can apply the same colors to the background of the hero image. In this case, it's black with white text. This immediately allows for better contrast of the logo, menu and text in this section.

The hero section can be improved further by adding in a background image that is subtle in nature, and doesn't take focus away from our text, as well as an image that can bring into perspective the product, service or content we are trying to deliver.

Design #2: Content

The content of a design can be further improved by applying good photography or imagery.

While stock photography is useful to bring more life, if you have good images of the product or service, those always deliver more context when paired with the description, such as an about us section.

Design #3: Testimonials

It's always a good idea to bring reputation and authority to your website, so whenever designing a page, a good testimonial section provides just this.

We customise the design of this section by letting it stand out with an alternative color – in this case blue. This blue also makes this section be segregated from the section above it.

Then white is used for each of the testimonials themselves. If you only have one or two, that's fine, you can divide the boxes. However if you have many, it's also useful to turn this section into a swiping slider.

Design #4: Footer

Finally the footer. This part of the design is usually one of the easiest and doesn't require too many changes.

First we match the dark colors we have been using so far. Adjusting the contact form to fit more inline with the text of the website as well as including the logo in once more at the bottom. We make sure the same spacing is applied from the bottom and top and we are complete!

Conclusion: What the Finished Website Looks Like

What the finished website will look like

I hoped you enjoyed this journey on developing the wireframe, prototype and full design.

You can view the whole process in real time on YouTube at this link, which will cover a lot more elements, such as the mobile and responsive design, and additional thinking process for each stage.

You can also access the Figma design files to view or use if you want to give this example a go yourself, or create your own personal version using this as reference.

This whole process is part of what I am trying to teach on my own channel and also part of a course/book I am writing on design called Enhance UI. The goal is to help developers understand the fundamentals of design. Check out my Enhance Ui Book below:

I hope you enjoyed this article. If you don't know who I am, I'm Adrian from Australia. I have a tiny channel on Twitter & YouTube, so if you want to know more about me or enjoy my content, check me out sometime. 😉

• YouTube: https://youtube.com/adriantwarog
• Twitter: https://twitter.com/adrian_twarog

As a way to improve my UI/UX skills I decided to read the guidelines for 10 popular UI/UX design systems. In this article I will give you a concise summary of the most important concepts.

follow me on twitter for future updates and tutorials: https://twitter.com/iqbal125sf

Biggest Takeaway

The biggest thing I learned about UI/UX from these libraries is that good UI/UX is about simplicity more than anything else.

A lot of good UI/UX is common sense and the problems come from overthinking things. Even without formal training or knowledge most people can eyeball a good or bad UI.

If it looks right it probably is, and if it looks off it probably is.

I don’t want to list specific examples, because that may seem like I'm denigrating the design system, but I would recommend looking at the “Dos and Donts” section of some of the libraries. It’s pretty obvious why the components/elements are bad UI. For example, having vague or verbose button text. Having mislabeled inputs fields, etc.

Most of the counterexample UIs come from vagueness or over complicating things, both of which can be solved with simplicity.

Good UX

A lot of good UX also has to do with empathy and being able to predict and address the needs of users. Most of this has got to do with setting up your UI to be as simple and direct as possible. Bad UX is vague or overly complex.

UI should not be the focus. Make it “invisible”, so the user should barely notice it.

Good Content

Unanimously all 10 design systems agreed that text content should be written in a simple natural conversational style. Almost like you are talking to a friend or acquaintance.

Also things to note:

• Break up walls of text with meaningful headings
• Content should be concise and to the point.
• Content should not sound condescending in order to appear authoritative.

Some Good heuristics:

• Use light backgrounds. dark backgrounds for nighttime mode only.
• Be as unobtrusive as possible with popups. Modals should only block the main UI to confirm urgent actions, such as deleting assets.
• Have about 60-80 characters per line for written content
• Familiarity: use easily recognizable icons for common tasks. shopping cart icon and Floppy disk for save
• Forgiveness: have a way to undo important actions
• Graceful error handling: If something fails or doesn’t function as intended it should be obvious to the user why
• Use skeleton components instead of loading screens
• Use BEM naming scheme or something similar for CSS

Here are the libraries:

Google: https://material.io/design/

Shopify: https://polaris.shopify.com/design/colors

IBM: https://www.carbondesignsystem.com/guidelines/accessibility/overview

SalesForce: https://www.lightningdesignsystem.com/guidelines/builder/

Apple: https://developer.apple.com/design/

UK Government: https://design-system.service.gov.uk

Mailchimp: https://ux.mailchimp.com/patterns

Starbucks: https://www.starbucks.com/developer/pattern-library

US government: https://v2.designsystem.digital.gov/Ui-patterns: http://ui-patterns.com/patterns/