research on web design

• How it Works
• Case Studies
• The GDD Slack
• State of GDD Report
• Workshops and Events
• Methodology

Growth-Driven Design Blog

• Web Design (11)
• Website Strategy (8)
• Conversion Rate Optimization (CRO) (5)
• GDD Process (5)
• Agile Web Design (4)
• Optimization Experiments (4)
• UX Research (4)
• User Experience (3)
• Continuous Improvement (2)
• UX best practices (2)
• Website Content and Messaging (2)
• Copywriting Best Practices (1)
• Launch Pad Website (1)
• Navigation (1)
• Technical / Coding (1)
• Web Design Agency (1)
• Website Analytics and Reporting (1)
• Website Assets (1)

8 UX Research Methods to start using in Web Design

Need to build or optimize your website, but not sure how to make real impact? Well... stop building and listen first! 

It has become easier than ever to build a website, but just building items you think will help is a sure-fire way to see lack-luster results. We don't want to just build anything, we want to build the RIGHT items to deliver user value and drive business impact.

How do you do this? - Listen first, problem solve second, build third. Listening start with user experience (UX) research to gain a deep understanding of the desired outcomes of your audience and the challenges they are running into in trying to achieve them. 

Where do you get started with UX research ? This blog outlines the eight most common UX research methods to use when starting your UX reserach for your web design and optimization efforts. 

"Wait, why is ux research important in web design?"

Here’s one typical train of thought: “I need a website for my business. Let’s have a look at some templates. That one looks great. There we go, it’s installed and there are products on it. Traffic’s picking up. Hang on, why has no one bought anything after six months? It’s got to be the theme, I’ll find a new one…”

The relative ease of creating a basic site often means that the nuances of creating a high-performing website can get lost in the ether. Having a website as an online storefront isn’t enough. It also needs to provide returns, generate new leads on a consistent basis, convert sales and gather relevant consumer data if you’re serious about long-term business growth.

It’s not enough for your website to simply look good, either. While some sites do look incredible thanks to the creative use of HTML5, the real art of web development lies in creating an unbeatable user experience (often abbreviated to UX). Essentially, users need a site that flows, informs, entertains and – overall – intuitive to their needs.

THE UX RESEARCH PROCESS

Before we dive into specific types of UX research, it's important to know what the overall process looks like. Generally speaking there are three steps: Developing user questions, performing user research, and summarizing findings into a report. 

1. Developing User Questions:  The goal of this step is to collect observed user challenges, friction points, or gaps of understanding and formulate specific user-focused questions that you can then work to answer.

2. Performing User Research : The goal of conducting research is to gain a clear understanding of the underlying challenges, motivations, and behaviors of your users to answer the questions you created in the previous step.

3. Summarizing into a Report:  The goal of the analyze and report step is to review your findings and summarize the key takeaways, learning lessons, and recommendations. Your job is to boil down all of the information you collected to the core findings and turn them into something actionable for your team and company.

Want to learn more about the user research process? Join the (free) Growth-Driven Design Certification to watch an entire lesson the the process - including process steps, templates, and examples. 

8 UX research METHODS FOR WEB DESIGN

The better you know your audience and their needs, the more likely you are to engage them as soon as your site launches. To do this, you need to put some effort into learning what your audience want to know, how they use the internet, and who represents your biggest competition in the market.

So, how do you approach your research if you’re a junior designer or a total beginner to web design? Read on for five simple UX research methods to incorporate. 

1: Socialise with your audience

It really is that simple. You may already be aware that every successful inbound marketing strategy starts with persona research. By learning as much as you can about your target market, you can then approach the right people more effectively through search, social and biddable campaigns.

The same rule applies to UX research – you need to know what your audience look for in a website.

Social media platforms allow you to reach out to target audiences easier than ever before, while email can be effective when conducting research amongst existing leads. Incentivised surveys and feedback campaigns can help you collect crucial information with direct and in-depth inquiries.

2: USER INTERVIEWS

User interviews help you uncover the deep challenges and motivations of why users behave a certain way. What drives and motivates a person, and why they behave the way they do is a deep-rooted matter, and so user interviews are better than some other research methods to get at that “why?”

A user interview is the most common method used when beginning to try to solve a problem. Often, in the strategy phase, your team is starting out on gaining understanding of the current state of affairs and what user problems you should be addressing. That can mean you don’t have the data you need or perhaps any data at all. User interviews can be an efficient way to get the data.

You can learn more about user interviews and watch more videos on the " UX Research - User Interviews " page on the GDD How it Works section. 

3: Card sorting

Ready for some interactive customer research? Card sorting is a really effective way of discovering how users may potentially use a site, and what they consider the most important parts of their online journey. There are two types of card sorts – closed and open – that can be done both on- and offline.

Closed card sorting sees the developer providing people with a set of cards complete with numerous categories, while the open version allows people to create their own categories. The goal is for your audience to create the most effective user journey with their cards, revealing what steps are most important to them.

Not only can this help you better analyse your site’s architecture, it’s also great for developing your overall online sales funnel.

4: Usability testing

Usability testing is arguably one of the most important parts of UX research. This can again be done moderated or unmoderated (with the assistance of surveys and testing software), and offline or online through live streaming sites, screen share apps and more.

Usability testing is essentially a real-world test scenario where groups of users are asked to complete certain tasks. Some usability testers go as far as employing an independent moderator to ask questions and get results. The benefits of usability testing range from achieving real-time, real-world data from users navigating your site, and providing their thoughts and observations, to picking up on errors that may have slipped through the net during development.

Want to learn a bit more about user testing? - Read and watch videos on the " UX Research - User Testing " page on the GDD How it Works section. 

5: Eye movement tracking

Eye movement tracking is a technique that wouldn’t have been possible a few short years ago. Thanks to advances in hardware and software though, prices have come down and the technology is becoming more accurate, allowing developers to track users’ eye movements in real-time.

The technology does what it says on the tin, tracking users’ eye movements when they’re presented with a site in testing conditions. This reveals which parts instantly attract their attention, which parts are ignored and which areas could be improved upon. Eye movement tracking is brilliant for assessing the appeal of a site design and evaluating the effectiveness of your calls to action, allowing you to tweak specific areas of your inbound campaign to improve conversions.

6: Click Heatmaps / scroll heatmaps

Setting up eye tracking studies can be quite technical and require a big time and money investment. A great alternative to understanding user attention on your website is to leverage click heatmaps, scoll heatmaps, and user recordings. 

Click heat maps are a visual report of where actual users are getting on the site, and what are they trying to click on.

Example click heatmap on GrowthDrivenDesign.com

It's a great way for we to identify areas of confusion where users are trying to click on something that they think is linked or they think is a menu item, or they think they should be going somewhere and it's not. 

We can also use it as a gauge to see what users care about. If we have five different types of products, we can see which one is getting the most clicks. We can see where people are clicking on the menu and which menu items are getting the most clicks. This can inform how we structure the menu.

Additionally, we can see what users are overlooking or missing. If there are calls to action, or if there are menus that are not being used or clicked on, that can help inform in the brainstorming session how to improve those things that we want users to find and interact with. What are the things that they're not interacting with now?

In addition to click heat maps, scroll heat maps allows you to understand how far down website users are scrolling down on the page. 

This allows you to determine how engaging your content is and if it is being consumed or missed by website users. 

7: USER RECORDINGS

Session recordings are also valuable tools. With session recordings, we receive live recordings of  users’ sessions on our website. we'll see what they're scrolling on, clicking on, and where they're stopping.

It's a great way for we to understand what challenges users are running into at a very specific spot. I want to underline that specific spot because we want to avoid falling in the trap of watching a ton of user recordings just to watch them. They're a cool feature, but we're not going to get a lot of insight as just by watching a ton of different user recordings.

Instead, what we want to do is pinpoint a specific area where we're running into challenges, where people are dropping off, where there's low time on site, high bounce rate, whatever those metrics are that we're measuring, those leading indicators, or even the focus metric, and start with the quantitative data. This is the data that's telling we where they're dropping off, and then when we want to start diagnosing the issue. When we want to start digging deeper at a very specific URL or a very specific spot on a page, then we can start looking at user recordings to help get some idea on what the problem is and actually diagnose it so that we can brainstorm solutions. That's my word of caution with this. Make sure that we have a very specific spot we want to dig into before going and looking at session recordings. Don't start with session recordings. Otherwise we'll be watching a whole ton of them and not necessarily walking away with a ton of focused action items.

8: A/B testing

Although technically a hypothesis testing tool, A/B testing can offer some great insights and user learnings based on how the interact with your proposed solution.

Once you've completed your research, problem solve, and build a proposed solution to the original isue identified in your research - you must test to see if your solution actually helped.

A/B testing can help answer these types of questions: If you’re linking an important call to action on your website, what would generate better results, an image or a text-based link? How do you know which forms are best for your checkout page? Would making a button a different colour help attract eyeballs and improve conversions?

A/B testing allows you to find the answers to all these questions, as you randomly present two test versions of your site to an equal number of users, collecting analytical data to see which version is most effective and gets the best results. A/B testing is also great when updating older sites, as it helps you discover which changes work and which areas are best left untouched.

UX research saves you time and money in the long-term

Although this might seem like extra up-front work to add to your process, integrating UX reserach and testing will save you time, money, and drive better results in the long run. 

Comprehensive UX research is an essential part of the overall design process. After all, would you launch a business or a product without doing some basic market research? Of course you wouldn’t, so why not go to the same lengths when building a website?

The very nature of online marketing is constantly changing, due to new algorithms from search and social providers, smart devices introducing new needs (mobile-optimised websites anyone?) and individual developing unique online habits. Continual UX research allows your web designers and developers to keep up with emerging trends and offer the best customer experience possible.

Costly mistakes and large alterations to the design of a site will also be less likely If you research before starting the build. This means your creative team has more time and resources to spend on other design and development projects, and more potential to turn big profits for your business.

Want to dive futher into UX research? Join the (free) Growth-Driven Design Certification to learn more about UX research and all the other pieces for building a peak performing website. 

Have specific questions? - Leave a comment below and I'd be happy to help! 

• UX Research ,

Chris Knowles

Chris is Head of Design & Development at Six & Flow, an inbound marketing agency based in Manchester, UK.

• Legal Stuff
• Privacy Policy

• Reviews / Why join our community?
• For companies
• Frequently asked questions

What is Web Design?

Web design refers to the design of websites. It usually refers to the user experience aspects of website development rather than software development. Web design used to be focused on designing websites for desktop browsers; however, since the mid-2010s, design for mobile and tablet browsers has become ever-increasingly important.

• Transcript loading…

A web designer works on a website's appearance, layout, and, in some cases, content .

Appearance relates to the colors, typography, and images used.

Layout refers to how information is structured and categorized. A good web design is easy to use, aesthetically pleasing, and suits the user group and brand of the website.

A well-designed website is simple and communicates clearly to avoid confusing users. It wins and fosters the target audience's trust, removing as many potential points of user frustration as possible.

Responsive and adaptive design are two common ways to design websites that work well on both desktop and mobile.

What is Responsive Web Design?

© Interaction Design Foundation, CC BY-SA 4.0

Responsive Web Design (a.k.a. "Responsive" or "Responsive Design") is an approach to designing web content that appears regardless of the resolution governed by the device. It’s typically accomplished with viewport breakpoints (resolution cut-offs for when content scales to that view). The viewports should adjust logically on tablets, phones, and desktops of any resolution.

In responsive design, you can define rules for how the content flows and how the layout changes based on the size range of the screen.

Responsive designs respond to changes in browser width by adjusting the placement of design elements to fit in the available space. If you open a responsive site on the desktop and change the browser window's size, the content will dynamically rearrange itself to fit the browser window. The site checks for the available space on mobile phones and then presents itself in the ideal arrangement.

Best Practices and Considerations for Responsive Design

With responsive design, you design for flexibility in every aspect—images, text and layouts. So, you should:

Take the mobile-first approach —start the product design process for mobile devices first instead of desktop devices.

Create fluid grids and images .

Prioritize the use of Scalable Vector Graphics (SVGs). These are an XML-based file format for 2D graphics, which supports interactivity and animations.

Include three or more breakpoints (layouts for three or more devices).

Prioritize and hide content to suit users’ contexts . Check your visual hierarchy and use progressive disclosure and navigation drawers to give users needed items first. Keep nonessential items (nice-to-haves) secondary.

Aim for minimalism .

Apply design patterns to maximize ease of use for users in their contexts and quicken their familiarity: e.g., the column drop pattern fits content to many screen types.

Aim for accessibility .

What is Adaptive Web Design?

Adaptive design is similar to responsive design—both are approaches for designing across a diverse range of devices; the difference lies in how the tailoring of the content takes place.

In the case of responsive design, all content and functionality are the same for every device. Therefore, a large-screen desktop and smartphone browser displays the same content. The only difference is in the layout of the content. 

In this video, CEO of Experience Dynamics, Frank Spillers, explains the advantages of adaptive design through a real-life scenario.

Adaptive design takes responsiveness up a notch. While responsive design focuses on just the device, adaptive design considers both the device and the user’s context. This means that you can design context-aware experiences —a web application's content and functionality can look and behave very differently from the version served on the desktop.

For example, if an adaptive design detects low bandwidth or the user is on a mobile device instead of a desktop device, it might not load a large image (e.g., an infographic). Instead, it might show a smaller summary version of the infographic.

Another example could be to detect if the device is an older phone with a smaller screen. The website can show larger call-to-action buttons than usual.

Accessibility for Web Design

“The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.” —Tim Berners-Lee, W3C Director and inventor of the World Wide Web

Web accessibility means making websites and technology usable for people with varying abilities and disabilities. An accessible website ensures that all users, regardless of their abilities, can perceive, understand, navigate, and interact with the web.

In this video, William Hudson, CEO of Syntagm, discusses the importance of accessibility and provides tips on how to make websites more accessible.

The World Wide Web Consortium (W3C) lists a few basic considerations for web accessibility:

Provide sufficient contrast between foreground and background . For example, black or dark gray text on white is easier to read than gray text on a lighter shade of gray. Use color contrast checkers to test the contrast ratio between your text and background colors to ensure people can easily see your content.

Don’t use color alone to convey information . For example, use underlines for hyperlinked text in addition to color so that people with colorblindness can still recognize a link, even if they can’t differentiate between the hyperlink and regular text.

Ensure that interactive elements are easy to identify . For example, show different styles for links when the user hovers over them or focuses using the keyboard.

Provide clear and consistent navigation options . Use consistent layouts and naming conventions for menu items to prevent confusion. For example, if you use breadcrumbs, ensure they are consistently in the same position across different web pages.

Ensure that form elements include clearly associated labels . For example, place form labels to the left of a form field (for left-to-right languages) instead of above or inside the input field to reduce errors.

Provide easily identifiable feedback . If feedback (such as error messages) is in fine print or a specific color, people with lower vision or colorblindness will find it harder to use the website. Make sure such feedback is clear and easy to identify. For example, you can offer options to navigate to different errors.

Use headings and spacing to group related content. Good visual hierarchy (through typography, whitespace and grid layouts) makes it easy to scan content.

Create designs for different viewport sizes . Ensure your content scales up (to larger devices) and down (to fit smaller screens). Design responsive websites and test them thoroughly. 

Include image and media alternatives in your design . Provide transcripts for audio and video content and text alternatives for images. Ensure the alternative text on images conveys meaning and doesn’t simply describe the image. If you use PDFs, make sure they, too, are accessible.

Provide controls for content that starts automatically . Allow users to pause animations or video content that plays automatically.

These practices not only make a website easier to access for people with disabilities but also for usability in general for everyone.

Learn More about Web Design

Learn how to apply the principles of user-centered design in the course Web Design for Usability . 

For more on adaptive and responsive design, take the Mobile UX Design: The Beginner's Guide course. 

See W3C’s Designing for Web Accessibility for practical tips on implementing accessibility.

Questions related to Web Design

Designing a web page involves creating a visual layout and aesthetic.

Start by defining the purpose and target audience of your page.

Understand the type of content and what actions the user will perform on the web page.

Sketch ideas and create wireframes or mockups of the layout.

Select a color scheme, typography, and imagery that align with your brand identity.

Use design software like Figma or Sketch to create the design.

Finally, gather feedback and make necessary revisions before handing off the development design.

In each step, remember to keep the user experience and accessibility considerations foremost. Here’s why Accessibility Matters: 

The salary of web designers varies widely based on experience, location, and skill set. As of our last update, the average salary for a Web Designer in the United States is reported to be approximately $52,691 per year, according to Glassdoor. However, this figure can range from around $37,000 for entry-level positions to over $73,000 for experienced designers. It is crucial to mention that salaries may differ significantly by region, company size, and individual qualifications. For the most up-to-date and region-specific salary information, visit Glassdoor .

To become a web designer, you should start by understanding design principles, usability best practices, color theory, and typography. Next, learn the essential tools like Adobe Photoshop, Illustrator, and Sketch. Familiarize yourself with web design languages such as HTML, CSS, and JavaScript. It's important to create a portfolio of your top work to impress potential employers. Additionally, consider taking online courses to enhance your knowledge and skills. 

Interaction Design Foundation offers a comprehensive UI Designer Learning Path that can help you become proficient in user interface design, a key component of web design. Lastly, continuously practice web design, seek feedback, and stay up-to-date with the latest trends and technologies.

The role of a web designer entails the task of designing a website's visual design and layout of a website, which includes the site's appearance, structure, navigation, and accessibility. They select color palettes, create graphics, choose fonts, and layout content to create an aesthetically pleasing, user-friendly, and accessible design. Web designers also work closely with web developers to verify that the design is technically feasible and implemented correctly. They may be involved in user experience design, ensuring the website is intuitive, accessible, and easy to use. Additionally, web designers must be aware of designer bias, as discussed in this video. 

Ultimately, a web designer's goal is to create a visually appealing, functional, accessible, and positive user experience.

Web design and coding are closely related, but they are not the same. Web design involves creating the visual elements and layout of a website, while coding involves translating these designs into a functional website using programming languages like HTML, CSS, and JavaScript. Typically, dedicated web developers translate the designs to code. Several design tools can also export code directly.

Although some web designers also have coding skills, it is not a requirement for all web design roles. However, having a basic understanding of coding can be beneficial for a web designer as it helps in creating designs that are both aesthetically pleasing and technically feasible.

Responsive web design guarantees that a website adapts its format to fit any screen size across different devices and screen sizes, from desktops to tablets to mobile phones. It includes the site to the device's resolution, supports device switching and increases accessibility and SEO-friendliness.

As Frank Spillers, CEO of Experience Dynamics mentions in this video, responsive design is a default, and not an optional feature because everyone expects mobile optimization. This approach is vital for Google's algorithm, which prioritizes responsive sites.

To learn web design, start by understanding its fundamental principles, such as color theory, typography, and layout. Practice designing websites, get feedback, and iterate on your designs. Enhance your skills by taking online courses, attending workshops, and reading articles. 

Consider the Interaction Design Foundation's comprehensive UI Designer learning path for essential skills and knowledge. If you're interested in expanding your skill set, consider exploring UX design as an alternative. The article " How to Change Your Career from Web Design to UX Design " on the IxDF Blog offers insightful guidance. Start your journey today!

Absolutely, web design is a rewarding career choice. It offers creative freedom, a chance to solve real-world problems, and a growing demand for skilled professionals. With the digital world expanding, businesses seek qualified web designers to create user-friendly and visually appealing websites. Additionally, web design offers diverse job opportunities, competitive salaries, and the option to work freelance or in-house. Continuously evolving technology ensures that web design remains a dynamic and future-proof career.

Web design and front-end development are related but distinct disciplines. Web design involves creating the visual layout and aesthetics of a website, focusing on user experience, graphics, and overall look. Front-end development, on the other hand, involves implementing the design into a functional website using coding languages like HTML, CSS, and JavaScript. While there is overlap, and many professionals have skills in both areas, web design is more creative, and front-end development is more technical.

In this Master Class webinar, Szymon Adamiak of Hype4 shares his top tips for smooth designer-developer relationships, based on years of working as a front-end developer with teams of designers on various projects.

Yes and no! A web page is a type of user interface—it is the touchpoint between a business and the user. People interact with web pages. They may fill out a form, or simply navigate from one page to another. A web designer must also be familiar with UI design best practices to ensure the website is usable.

That said, in practice, the term UI is most often associated with applications. Unlike web pages, which tend to be more static and are closely related to branding and communication, applications (on both web and mobile) allow users to manipulate data and perform tasks.. 

UI design, as explained in this video above, involves visualizing and creating the interface of an application, focusing on aesthetics, user experience, and overall look. To learn more, check our UI Design Learning Path .

A modal in web design is a secondary window that appears above the primary webpage, focusing on specific content and pausing interaction with the main page. It's a common user interface design pattern used to solve interface problems by showing contextual information when they matter. 

The video above explains the importance of designing good UI patterns to enhance user experience and reduce usability issues. Modals are crucial for successful user-centered design and product development like other UI patterns.

In web design, CMS refers to a Content Management System. It is software used to create and manage digital content. 

The video above implies that the content, including those managed by a CMS, is crucial in every stage of the user experience, from setup to engagement. The top 10 CMS in 2023 are the following:

Magento (more focused on e-commerce)

Squarespace

Shopify (more focused on e-commerce)

The popularity and usage of CMS platforms can vary over time, and there may be new players in the market since our last update. 

Literature on Web Design

Here’s the entire UX literature on Web Design by the Interaction Design Foundation, collated in one place:

Learn more about Web Design

Take a deep dive into Web Design with our course Mobile UX Design: The Beginner's Guide .

In the “ Build Your Portfolio” project, you’ll find a series of practical exercises that will give you first-hand experience with the methods we cover. You will build on your project in each lesson so once you have completed the course you will have a thorough case study for your portfolio.

Mobile User Experience Design: Introduction , has been built on evidence-based research and practice. It is taught by the CEO of ExperienceDynamics.com, Frank Spillers, author, speaker and internationally respected Senior Usability practitioner.

All open-source articles on Web Design

Repetition, pattern, and rhythm.

• 1.2k shares

Adaptive vs. Responsive Design

• 3 years ago

How to Change Your Career from Web Design to UX Design

• 1.1k shares

Emphasis: Setting up the focal point of your design

• 8 years ago

Accessibility: Usability for all

• 2 years ago

How to Design Great 404 Error Pages

• 4 years ago

Emotion and website design

Parallax Web Design - The Earth May Not Move for Us But the Web Can

Fitts’ Law: Tracking users’ clicks

Video and Web Design

• 7 years ago

The Best UX Portfolio Website Builders in 2024

10 of Our Favorite Login Screen Examples

Web Fonts: Definition and 10 Recommendations

What is Eye Tracking in UX?

Open Access—Link to us!

We believe in Open Access and the  democratization of knowledge . Unfortunately, world-class educational materials such as this page are normally hidden behind paywalls or in expensive textbooks.

If you want this to change , cite this page , link to us, or join us to help us democratize design knowledge !

Privacy Settings

Our digital services use necessary tracking technologies, including third-party cookies, for security, functionality, and to uphold user rights. Optional cookies offer enhanced features, and analytics.

Experience the full potential of our site that remembers your preferences and supports secure sign-in.

Governs the storage of data necessary for maintaining website security, user authentication, and fraud prevention mechanisms.

Enhanced Functionality

Saves your settings and preferences, like your location, for a more personalized experience.

Referral Program

We use cookies to enable our referral program, giving you and your friends discounts.

Error Reporting

We share user ID with Bugsnag and NewRelic to help us track errors and fix issues.

Optimize your experience by allowing us to monitor site usage. You’ll enjoy a smoother, more personalized journey without compromising your privacy.

Analytics Storage

Collects anonymous data on how you navigate and interact, helping us make informed improvements.

Differentiates real visitors from automated bots, ensuring accurate usage data and improving your website experience.

Lets us tailor your digital ads to match your interests, making them more relevant and useful to you.

Advertising Storage

Stores information for better-targeted advertising, enhancing your online ad experience.

Personalization Storage

Permits storing data to personalize content and ads across Google services based on user behavior, enhancing overall user experience.

Advertising Personalization

Allows for content and ad personalization across Google services based on user behavior. This consent enhances user experiences.

Enables personalizing ads based on user data and interactions, allowing for more relevant advertising experiences across Google services.

Receive more relevant advertisements by sharing your interests and behavior with our trusted advertising partners.

Enables better ad targeting and measurement on Meta platforms, making ads you see more relevant.

Allows for improved ad effectiveness and measurement through Meta’s Conversions API, ensuring privacy-compliant data sharing.

LinkedIn Insights

Tracks conversions, retargeting, and web analytics for LinkedIn ad campaigns, enhancing ad relevance and performance.

LinkedIn CAPI

Enhances LinkedIn advertising through server-side event tracking, offering more accurate measurement and personalization.

Google Ads Tag

Tracks ad performance and user engagement, helping deliver ads that are most useful to you.

Share Knowledge, Get Respect!

or copy link

Cite according to academic standards

Simply copy and paste the text below into your bibliographic reference list, onto your blog, or anywhere else. You can also just hyperlink to this page.

New to UX Design? We’re Giving You a Free ebook!

Download our free ebook The Basics of User Experience Design to learn about core concepts of UX design.

In 9 chapters, we’ll cover: conducting user interviews, design thinking, interaction design, mobile UX design, usability, UX research, and many more!

Web Design: 15 Important Research Findings You Should Know

A small selection of research findings related to web design, usability, and accessibility, most of them obtained from Human Factors International . With some of them being known, others may add to the understanding of our profession:

Design is a key determinant to building online trust with consumers. For motivated users of an information site, bad design (busy layout, small print, too much text) hurts more than good design helps .

—Sillence, Briggs, et al. (2004).

For online trust and credibility, also see Stanford University’s Guidelines for Web Credibility .

Layout on a web page (whitespace and advanced layout of headers, indentation, and figures) may not measurably influence performance, but it does influence satisfaction .

—Chaperro, Shaikh, and Baker (2005).

Experience matters: Blue links are easier to click than black ones , even though black ones have higher visual contrast and are easier to see.

—Van Schaik and Ling (2003).

It’s important to consider the users when you have a choice of icons, links, or both. Initial performance is best with the link alone. Frequent users can use either equally effectively. Icons are not faster, relative to text links alone.

—Wiedenbeck (1999).

Rules of thumb for icons: Make them as large as feasible , place frequently used icons in a persistent task bar, and arrange them either in a square (first choice) or in a horizontal layout.

—Grobelny, Karwowski, and Drury (2005).

The acceptance and impact of animation is enhanced when users are warned to expect it and allowed to start it when they want.

—Weiss, Knowlton, and Morrison (2002).

Use of whitespace between paragraphs and in the left and right margins increases comprehension by almost 20% .

—Lin (2004).

A format of 95 characters per line is read significantly faster than shorter line lengths; however, there are no significant differences in comprehension, preference, or overall satisfaction , regardless of line length.

—Shaikh (2005).

Applications vs. websites: In general, visual layout guidelines for GUIs also apply to the web, but there are differences to be aware of. For example, dense pages with lots of links take longer to scan for both GUI and web; however, alignment may not be as critical for web pages as previously thought.

—Parush, Shwarts, et al. (2005).

Narrative presentation enhances comprehension and memory. Narrative advertisements produce more positive attitude about the brand and a higher incidence of intent to purchase.

—Escalas (2004).

On sites with clear labels and prominent navigation options, users tend to browse rather than search. Searching is no faster than browsing in this context.

—Katz and Byrne (2003).

Users will wait longer for better content. Users will wait between 8-10 seconds for information on the web, depending on the quality of the information.

—Ryan and Valverde (2003).

Consumer purchase behavior is driven by perceived security, privacy, quality of content and design , in that order.

—Ranganathan and Ganapathy (2002).

In 2001, Bernard found that prior user experience with websites dictated where they expected common web page elements to appear on a page. The same still holds true today: Users have clear expectations about where to find the things they want (search and back-to-home links) as well as the things they want to avoid (advertising).

—Shaihk and Lenz (2006).

When assessing web accessibility under four conditions (expert review, screenreader using JAWS, automated testing via “Bobby,” and remote testing by blind users) those using screenreaders find the most issues , while automated testing finds the least number of accessibility issues.

—Mankoff, Fait, and Tran (2005).

Comments (Closed)

Too few people believe in the power of usable web design… And in a professional environment, it is unfortunately usually not the first thing considered for investment…

Very nice post! May I forward it to my colleagues and put it on my blog?

Grüsse aus München

Nathan, of course! And indeed, sensitization is an important aspect of our work.

I am one of the usability and accessibility advocates too, so you can imagine I love this entry you have put up. It sums up what we know, and in the manner we can just flick to those who are still not yet convinced!

We don’t need to sacrifice design for accessibility all the time! The judgement call is always on who your target audience and purpose of the project. Gee!

Alicia, thank you, and no, we don’t need to sacrifice design for accessibility.

Wow, this was really nice. Every webdesigner should be aware of these.

Fantastic post! thanks!

i figured out the following:

compared to grey background color #555555 to #cccccc white background really hurts the eyes. it is derived from book paper color, however monitors are active light sources! background color provides no information, and thus can be reduced to #555555 / #777777 easily.

web designers should stop to see hypertext screen space as ordinary paper.

Alex, I guess you refer to Meares-Irlen Syndrome, or Scotopic Sensitivity, respectively?

Hello, I work as a web coordinator at a higher education institution. Although I really like your entry, there are a few things that I would not leave uncontested:

Point 8: This would be a very new revelation. The last time I read about this (I think it was Jakob Nielsen), it said that optimal line lengths were between 55 and 75 characters… who to believe now? The tricky bit with 95 characters is that on some monitors, and also depending on your own distance to the screen, you can start to experience difficulties to get to the correct start of the next line. And that really hinders easy comprehension.

Point 10: Are they refering to the writing style? Because that would significantly decrease scanability of the text. Or does it relate to product presentation in general, ie with images and all?

Point 12: I very much doubt that! This would only be the case if users already knew in advance that something good was to come up on their screens. But how should they know in advance? If a web site needs 10 seconds to build, I am long gone… and especially with the high level of substitution on the web, people would flock to the competitor who can offer a similar degree of content without that click-and-wait stress.

Point 14: I like this point. It would mean that if we found out where on the web our users spend most of our time (like MySpace among students) we could determine quite accurately where they would expect certain things to come up on our site. I will look into that.

Sardionerak:

Regarding line length—there are different numbers, indeed. Performance and comprehension differ between people, some prefer less, some prefer more characters per line. (There are similar results when it comes to preferred fonts, so assertions in both areas are not “universally valid.”)

Regarding latency acceptance—there also are several studies that confirm the mentioned effect. The load time of trusted sites appears to be perceived differently than that of unknown or untrusted sites. I wanted to include a link to a recent study, but ***, I cannot find it yet.—There’s no doubt that you should nonetheless focus on fast load time!

Last but not least, regarding user expectations—at the end of the day it’s probably all about fulfilling user expectations.

Are many of those papers available online? It would be really useful to have links to them.

Simon—you caught me being lazy 😉 Some studies have been published over at the ACM (not at no charge), but I’ll try to collect and add links. Thanks for raising this.

Thanks for this clear and effective post! I’ll talk about it on my French blog…

Thak you for the clues.

There is a very interesting book about it: www.usability.gov/…

Salutation de Geneva (Switzerland)

“Use of whitespace between paragraphs and in the left and right margins increases comprehension by almost 20 %.”

I like this one… Very nice article, thanks.

wonderful post. Amazing research on webdesign usability. i supposed to agree to this point “Users will wait longer for better content. Users will wait between 8-10 seconds for information on the web, depending on the quality of the information” exactly in your post.

every web designer should aware of this 15 important valuable points while developing a professional website.

so here seems to be a contradiction. In one post you advise against Conditional Commenting, while it seems to help for achieving better accessibility, as Dive Into Accessibility book shows in chapter on font sizes .

Do you know any more elegant way of achieving this relative size effect?

Lazar, what do you mean with “contradiction,” and how may I help concerning relative font sizes?

In his book Mark uses conditional comment type of ‘trick’ to hide certain properties from Netscape, and he does that to achieve consistent accessibility regardless of the browser. I am trying for some time to figure out the best and most elegant (without tricks) way to do this with CSS. I try to avoid using Javascript to solve this font size issue. Any suggestion will be appreciated!

Sometimes I don’t express my thoughts well. Let me clarify it.

Every site that has option for changing font sizes that I have seen so far achieves it with Javascript. Another option is to use php sessions or cookies. Is there a way to do it with only CSS without reloading the page?

Follow-up: Web Design: 10 Additional Research Findings You Should Know .

I am undergraduate BA student in Mogadishu - Somalia; I am currently under the preparation of the diploma thesis. Therefore, your support is highly needed by Mohamed. For instance, free samples of early written thesis etc.

Hello, I’m starting a classifieds website on my city(Jaraguá do Sul - Brazil) and this post was of definitely great help to me! Would it be possible, if not asking much, for you to give me 1 or 2 tips on my website? Thanks in advance!

You know, this is a very good article but may I suggest you take a leaf from your own book here and redesign your site! Your information is all white space and layed out and rendered to the left! Why? Don’t kid yourselves that users will wait for better content. Users do not want not wait longer for anything let alone better content. They want information a nd quick! Where on Earth does that derive? Our experience tells us that users do not want to wait and if they are made to will go elsewhere. Good design is a little like obscenity, you can’t describe it but you know it when you see it.

“Layout on a web page (whitespace and advanced layout of headers, indentation, and figures) may not measurably influence performance, but it does influence satisfaction. – Chaperro, Shaikh, and Baker, 2005.” Other than that nice article. Thank you.

To only pick a few: Point 1. To much text? You arrive on your site and what do you see? Point 12. Are you serious? To make my comment short. The rules to apply depend on your indent and audience.

Layout is important but it has also to navigate very easy, also for older people, which is often the problem. More and more older people are going online and often are fighting with websites they do not understand.

• Next: 1 + 1 = 3: Explaining Busyness and Background Noise on Websites
• Previous: Internet Explorer Filter or Hack Using Character Escapes

• Get started Get started for free

Figma design

Design and prototype in one place

Collaborate with a digital whiteboard

Translate designs into code

Get the desktop, mobile, and font installer apps

See the latest features and releases

• Prototyping
• Design systems
• Wireframing
• Online whiteboard
• Team meetings
• Strategic planning
• Brainstorming
• Diagramming
• Product development
• Web development
• Design handoff
• Product managers

Organizations

Config 2024

Register to attend in person or online — June 26–27

Creator fund

Build and sell what you love

User groups

Join a local Friends of Figma group

Learn best practices at virtual events

Customer stories

Read about leading product teams

Stories about bringing new ideas to life

Get started

• Developer docs
• Best practices
• Reports & insights
• Resource library
• Help center

Web design explained—key elements and best practices

Savvy brands know that a well-designed website helps build trust with their target audience. But what does it take to actually make a good web design? Visual appeal is important, but making your website easy to understand is key to user-centric design.

Read on to learn more about:

• What good web design is—and how it benefits your organization
• The fundamentals of website design
• Web design best practices you can apply with Figma

What is web design?

Web design involves creating attractive, user-friendly web pages and web-based apps. User experience design, user interface design, and visual design all play key roles in the web design process. Web design teams take both form and functionality into account, balancing strong visuals with sound usability.

3 benefits of good web design

When users land on a web page, it takes them just 50 milliseconds to form an opinion about it. That’s why good web design matters. Not only does it help you make a great first impression, but it can also:

• Build your brand identity. Compelling, cohesive web design makes your brand memorable, helping your business stand out and connect with users.
• Improve user experience. Simple, intuitive website design makes it easy for users to understand and find what they’re looking for.
• Increase visibility among your target audience. Good web design helps drive search engine optimization and better search rankings.

Web design vs. web development: What’s the difference?

Web design leans on visual, UX, and UI design to shape a website or app’s look and feel. This covers design elements such as your brand’s color palette, fonts, and typography. It also includes UX design for page templates, wireframes, and prototyping.

Meanwhile, web development applies coding languages such as hypertext markup language (HTML), cascading style sheets (CSS), and JavaScript (for dynamic content). Web developers turn wireframes and prototypes into working web pages, bringing back-end functionality to front-end design.

The 5 fundamentals of effective website design

Want your web design to make a positive impact on your company’s bottom line? Start by addressing five key components of web design:

Before you jump into design mode, consider what content users need. On-page elements such as headers, text, images, and CTA buttons can support user goals and needs.

Arrange web page content for an easy-to-use, accessible user experience. Use wireframes to structure page information with basic headings and UI elements, then build prototypes to create and test interaction flows.

Most websites use menus, bars, breadcrumbs, or sliders for navigation. Design and validate nav elements to get users where they need to go quickly and easily.

Visual style

Use your brand style guide to build visual elements with a consistent color scheme, imagery, and typeface. Apply graphic design principles to build in visual hierarchy, balance, movement, and white space.

Good web design factors in metrics like page loading time and mobile device usage. Fun fact: An ecommerce site that loads in just one second has a conversion rate that’s 2.5 times higher than a site that takes five seconds to load.

Web design best practices

To plan and design high-quality web pages that resonate with your users, keep the following web design best practices in mind:

• Design for your users. User research helps you understand your target audience—it's a generative first step in human-centered design.
• Opt for mobile first. On average, more than half of website traffic comes through mobile devices. If your target audience spends more time on mobile, prioritize designing for smartphone browsers and mobile apps.
• Apply responsive web design. Organize your website content on a flexible grid system, so that your pages dynamically adjust to fit different screen sizes.
• Grab your users’ attention. Add interactive elements such as animations and videos to engage and guide users.
• Design for readability. Set visual hierarchy with different font sizes, weights, and typeface combinations to make web pages easy to scan and read.
• Boost SEO by designing a mobile-friendly, responsive website. Include accessible, user-centric content that’s easy to share across social media platforms.
• Test and refine. Perform user testing to rev your web designs before translating the designs into HTML, CSS, and JavaScript.

Jumpstart web design with Figma

Looking for inspiration to help you kick off your web design process? Visit the Figma community, where design pros share their know-how — including expertly crafted web design templates and examples . For more on web design, consults these resources:

• Try wireframing and prototyping tools to help you hit the ground running.
• To expand your web design skill set, read up on UX design , UI design , and design basics in the Figma resource library.
• Check out Figma’s YouTube channel for tips and tutorials on how to make the most of Figma’s UX and UI design tools.
• Learn about developing your design career at Shortcut .

Ready to create engaging, user-friendly web pages?

Keep reading

What is UI design

What is UI design today, and what role does it play in the design thinking process?

What is visual hierarchy

If everything looks the same, then you see nothing. Visual hierarchy can change that.

Read on to find out what it takes to design engaging UI, and create a memorable UX.

9 Guidelines & Best Practices for Exceptional Web Design and Usability

DOWNLOAD NOW: FREE UX TEMPLATES

3 templates for conducting user tests, summarizing your UX research, and presenting your findings.

Updated: 08/11/22

Published: 05/27/21

When it comes to designing or redesigning a website , it’s easy to get hung up on the aesthetics. Does that shade of blue look right? Should the logo be on the right side of the screen, or left? What if we put a giant animated GIF in the middle of the page?

However, in a world where folks have more than 1.8 billion websites they can potentially land on, you need to make sure yours is not just a pretty face . It should be designed for usability , how easy your website is to use, and user experience (UX) , how enjoyable it is to interact with your website.

Now, you could spend years studying the ins and outs of these disciplines But for the sake of giving you a jumping-off point, we've assembled a list of the fundamental guidelines and best practices you can apply to your next website redesign or website launch . Then, we’ll review 10 features you’ll need on your site to put these recommendations into practice. Let’s dive in.

Website Design Guidelines

Website design best practices, website design requirements.

• Visual Hierarchy
• Navigability
• Consistency
• Responsivity
• Accessibility
• Conventionality
• Credibility
• User-Centricity

1. Simplicity

While the appearance of your website is certainly important, most people aren't coming to your site to evaluate how slick the design is. They want to complete some action, or to find some specific piece of information.

Therefore, unnecessary design elements (i.e., those which serve no functional purpose) will only overwhelm and make it more difficult for visitors to accomplish what they're trying to accomplish.

From a usability and UX perspective, simplicity is your best friend. If you have all the necessary page elements, it’s hard to get too simple. You can employ this principle in a variety of different forms, such as:

• Colors: Basically, don't use a lot. The Handbook of Computer-Human Interaction recommends using a maximum of five (plus or minus two) different colors in your design.
• Typefaces: The typefaces you choose should be highly legible, so nothing too artsy and very minimal script fonts, if any. For text color, again, keep it minimal and always make sure it contrasts with the background color. A common recommendation is to use a maximum of three different typefaces in a maximum of three different sizes.
• Graphics: Only use graphics if they help a user complete a task or perform a specific function (don't just add graphics willy-nilly).

Here's a great example of a simple but effective homepage design from HERoines Inc :

Image Source

2. Visual Hierarchy

Closely tied to the principle of simplicity, visual hierarchy means arranging and organizing website elements so that visitors naturally gravitate toward the most important elements first.

Remember, when it comes to optimizing for usability and UX, the goal is to lead visitors to complete a desired action, but in a way that feels natural and enjoyable. By adjusting the position, color, or size of certain elements, you can structure your site in such a way that viewers will be drawn to those elements first.

In the example below from Spotify , you can see that the main heading “Get 3 months of Premium for free” sits atop the visual hierarchy with its size and page position. It draws your eye to their mission before anything else. This is followed by the "Get 3 Months Free" CTA, which prompts action. Users can click this CTA, or scan the menu items above for more actions.

3. Navigability

Planning out intuitive navigation on your site is crucial to help visitors find what they're looking for. Ideally, a visitor should land on your site and not have to think extensively about where to click next. Moving from point A to point B should be as frictionless as possible.

Here are a few tips for optimizing your site's navigation:

• Keep the structure of your primary navigation simple (and near the top of your page).
• Include navigation in the footer of your site.
• Consider using breadcrumbs on every page (except your homepage) so users remember their navigation trail.
• Include a search bar near the top of your site so visitors can search by keywords.
• Don't offer too many navigation options per page. Again, simplicity!
• Include links within your page copy, and make it clear where those links go.
• Don't make users dig too deep. Try making a basic wireframe map of all your site pages arranged like a pyramid: Your homepage is at the top, and each linked page from the previous forms the next layer. In most cases, it’s best to keep your map no more than three levels deep. Take HubSpot’s site map, for example.

One more pointer: Once you've settled on what your site's main (top) navigation will be, keep it consistent. The labels and location of your navigation should remain the same on every page.

This leads us nicely into our next principle...

4. Consistency

In addition to keeping your navigation consistent, the overall look and feel of your site should be similar across all of your site's pages. Backgrounds, color schemes, typefaces, and even the tone of your writing are all areas where consistency has a positive impact on usability and UX.

That's not to say every page should follow the same layout. Instead, create different layouts for specific types of pages (e.g., landing pages, informational pages, etc.). By using those layouts consistently, you'll make it easier for visitors to understand what type of information they're likely to find on a given page.

In the example below, you can see that Airbnb uses the same layout for all of its "Help" pages, a common practice. Imagine what it would be like from a visitor's perspective if every "Help" page had its own, unique layout. There would probably be a lot of shoulder shrugging.

5. Responsivity

According to Statista , 48% of page global views were from mobile devices like smartphones and tablets. And according to our research , 93% of people have left a website because it didn’t display properly on their device.

The takeaway here: To provide a truly great user experience, your site has to be compatible with the many different devices that your visitors are using. In the tech world, this is known as responsive design .

Responsive design means investing in a highly flexible website structure. On a responsive site, content is automatically resized and reshuffled to fit the dimensions of whichever device a visitor happens to be using. This can be accomplished with mobile-friendly HTML templates, or by creating a special mobile site.

Ultimately, it's more important to provide a great experience across different devices than look identical across those devices.

Alongside mobile-friendliness, it’s worth your while to test your website’s cross-cross browser compatibility. In all likelihood, you’ve only viewed your site on one web browser, be it Google Chrome, Safari, Firefox, or something else.

Now is the time to open your pages on each of these browsers and evaluate how your elements appear. Ideally, there won’t be much difference in presentation, but you can’t know for sure until you see for yourself.

6. Accessibility

The goal of web accessibility is to make a website that anyone can use, including people with disabilities or limitations that affect their browsing experience. As a website designer, it’s your job to think of these users in your UX plan.

Like responsiveness, accessibility applies to your entire site: structure, page format, visuals, and both written and visual content. The Web Content Accessibility Guidelines (WCAG) , developed by the Web Accessibility Initiative and the World Wide Web Consortium, set the guidelines for web accessibility. In a broad sense, these guidelines state that websites must be:

• Perceivable: Visitors are aware of the content on your site.
• Operable: The functionality of your website should be possible in different ways.
• Understandable: All content and alerts can be easily understood.
• Robust: Your website is usable across different assistive technologies, devices, and browsers.

For a deeper dive into this topic, see our Ultimate Guide to Web Accessibility .

7. Conventionality

A big challenge in web design is balancing originality with your expectations. Most of us are expert internet users, and there are specific conventions we’ve grown accustomed to over time. Such conventions include:

• Placing the main navigation at the top (or left side) of a page.
• Placing a logo at the top left (or center) of a page.
• Making the logo clickable, so it always brings a visitor back to the homepage.
• Having links and buttons that change color/appearance when you hover over them.
• Using a shopping cart icon on an ecommerce site. The icon also has a number badge signifying the number of items in the cart.
• Ensuring image sliders have buttons users can click to manually rotate slides.

While some might opt to throw these out the window for the sake of uniqueness, this is a mistake. There’s still plenty of room for creativity within the constraints of web conventionality.

Let’s briefly consider another field of design, architecture. Building codes are put in place so that folks can easily and safely inhabit spaces. An architect doesn’t complain about these codes or violate them because, aside from legal repercussions, they assure safety and comfort of guests. It doesn’t matter how dazzling the building looks — if you trip on uneven stairs or you can’t get out in a fire, you might prefer to stay outside.

In the same way, you can craft a memorable experience while meeting user expectations. If you violate what users anticipate, they may feel uncomfortable or even frustrated with your site.

8. Credibility

Sticking to web conventions lends your site credibility. In other words, it increases the level of trust your site conveys. And if you're striving to build a site that provides the best user experience possible, credibility goes a long way.

One of the best methods to improve your credibility is to be clear and honest about the product or service you're selling. Don't make visitors dig through dozens of pages to find what it is you do. Be up-front on your homepage, and dedicate some real estate to explaining the value behind what you do.

Another credibility tip: Have a pricing page, also linked on the homepage. Rather than force people to contact you to learn more about pricing, list your prices clearly on your site. This makes your business appear more trustworthy and legitimate.

Here's an example of an effective pricing page from the Box website :

9. User-Centricity

At the end of the day, usability and user experience hinge on the preferences of the end-users. After all, if you're not designing for them, who are you designing for?

So, while the principles detailed in this list are a great starting point, the final key to improving the design of your site is to conduct user testing, gather feedback, and implement changes based on what you've learned.

And don’t bother testing usability by yourself. You’ve already invested a lot of time into your design, which brings your own biases into the equation. Get testers who have never seen your site before, the same as any first-time visitor.

Here are a few user testing tools to get you started:

• Website Grader : Our free tool evaluates your website based on several factors: mobile, design, performance, SEO, and security. It then offers tailored suggestions for improvement. You can learn more about Website Grader in our dedicated blog post .
• Crazy Egg : Track multiple domains under one account and uncover insights about your site's performance using four different intelligence tools -- heat map, scroll map, overlay, and confetti.
• Loop11 : Use this tool to easily create usability tests -- even if you don't have any HTML experience.
• The User Is Drunk : Pay Richard Littauer to get drunk and review your site. Don't believe me? We tried it .

For even more helpful options, see our list of the best user testing tools .

Hopefully, these guidelines are useful in informing the structure of your web pages and website as a whole. But, how does one put these guidelines into practice? Let's take a look at some actionable best practices you can follow during the design process. 

• Select a typography that’s easy to read and skim.
• Choose a color scheme that suits your brand.
• Use white space to break up text and other elements.
• Use texture to add personality and depth.
• Add images to engage and inform readers.
• Simplify your navigation.
• Make your CTAs stand out.
• Optimize for mobile.
• Limit the options presented to users.

1. Select a typography that’s easy to read and skim.

Typography refers to how type — meaning letters and characters — are arranged and presented on the page. Since website typography affects not only how we read but how we feel about text on a web page, it’s important to pick carefully. 

Ideally, you want a typeface that is:

• easy to read
• easy to skim
• accessible to all users
• legible across multiple devices and screen sizes

You also want it to match the look and feel of your brand. For example, the luxury fashion brand Burberry refreshed its logo for the first time in 20 years in 2018. It replaced the old serif typeface with a bold, all-caps, sans serif typeface and dropped the knight emblem. The result is a simpler and more modern-looking logo that’s easier to read on any screen — and that reflects changes in the company to become more transparent and appeal to a younger generation. 

2. Choose a color scheme that suits your brand.

Like typography, color can affect not only how we understand and interact with content, but how we feel about it. Your color scheme should therefore check off the same boxes as your website typography. It should:

• reinforce your brand identity
• make your site easy to read and navigate
• evoke emotion

Buzzfeed, for examples, uses the primary colors yellow and red to grab users' attention and get them excited about the content. It reserves the use of the primary color blue — which is associated with trust — exclusively for links and CTA buttons. Both emotions are ideal to evoke for a media site. 

3. Use white space to break up text and other elements.

Whitespace refers to the negative areas in any composition. Whitespace provides users with visual breaks as they process a website’s design or content, which is not only aesthetically pleasing. By minimizing distractions, whitespace makes it easier for users to focus, process information, and understand what it’s important. 

That means you can use whitespace to avoid causing information overload or analysis paralysis — and to emphasize important elements on the page. This might help persuade users to take a specific action, like sign up for a newsletter, shop your latest collection, and more.

For example, Eb & flow Yoga Studio uses whitespace to lead users toward a specific action: to sign up for three weeks of classes. Notice that whitespace doesn’t mean the absence of color or imagery. Instead, it means that every element on the page is positioned strategically, with lots of space in between, to avoid overwhelming or confusing visitors. 

4. Use texture to add personality and depth.

Resembling a three-dimensional, tactile surface, web textures aim to replicate the physical sensation of touch with another sensation — sight. They’re a great design alternative to solid color backgrounds, particularly if you want to add personality and depth to your site. 

Take a look at the texture on the homepage for the Santa Barbara-based restaurant Mony’s Tacos below. It looks like chalk drawn on a blackboard, doesn’t it? I don’t know about you but I can almost feel the chalk on my fingers just from looking at it. It's the perfect look for a restaurant that aims to be California's preferred Funk Zone choice for Mexican delights.

5. Add images to engage and inform readers.

Striking a balance between text and images is essential in website design. Incorporating visuals can make your content more informative, engaging, and memorable. You’ve probably heard the statistics that people remember only 20% of what they read, but 80% of what they see ? While the exact percentages are debated, the basic idea isn’t. It’s easier for some people to learn and process information visually.

Here's a unique example of breaking up text with images from a cosmetic company's website. This shows how endless the possibilities of incorporating imagery into your website design are. 

6. Simplify your navigation.

Navigation is one of the most important design elements on a website. It impacts whether visitors arrive on your homepage and browse, or click the “Back” button. That’s why it’s important to keep it as simple as possible. 

Many websites opt for a horizontal navigation bar. This navigation style lists the major pages side by side and is placed in the website header . 

Take the navigation bar on Blavity as an example. The sections featured include three content categories — “News,” “Op-Eds,” and “Lifestyle” — as well as links to their submission page and sign-up page. This provides visitors with easy access to the pages they’re likely looking for. Other nav items are placed in a dropdown menu labelled "More" so they're still easy to find but not cluttered into the top-level navigation. Finally, the navigation bar is sticky so visitors won’t have to scroll up and down the page to browse the site. 

7. Make your CTAs stand out.

CTAs are elements on a web page, advertisement, or another piece of content that encourages the audience to do something. The call to action could be to sign up, subscribe, start a free trial, or learn more, among many others.

You want your CTAs to pop in your website design. To make that happen, consider how you’re using color as well as other elements like background color, surrounding images, and surrounding text.

Square provides an excellent call-to-action example . Using a single image to showcase the simplicity of using their product, Square uses bold typography to also show how unique and future-oriented their product is. Against this dramatic backdrop, the blue "Get Started" CTA awaits your click.

8. Optimize for mobile.

We’ve already discussed how important it is for your website to be responsive. But since mobile devices accounted for 59% of organic search engine visits in 2021, we’re doubling down on how important it is to design your website to be mobile-friendly. That might mean altering or removing some elements that would clutter smaller screen sizes or negatively impact load time. 

For an example of one of the best mobile website designs , compare Etsy’s homepage on desktop vs mobile. On desktop, you’ll see a navbar with categories. Hovering over each category will reveal a dropdown menu.

On mobile, this collapses behind a hamburger button, which improves the appearance and performance of the mobile site. You'll also notice that the images are larger — perfect  for tapping with your finger on a mobile screen.

9. Limit the options presented to users.

According to Hick’s Law , increasing the number and complexity of choices will increase the time it takes for a person to make a decision. This is bad news in website design. If a website visitor is presented with too many options, they might get frustrated and bounce — or they might pick an option you don’t want, like abandoning their cart. That’s why it’s important to limit the number of options presented to a user. 

Pro-Tip: Don't have the time to follow the rules? You can always download a pre-built website template that will provide a sound foundation for your site. 

Now we understand the principles and best practices that should guide you throughout the design process. In the next section, let's run down the essential page elements that you should strongly consider including in your design plan.

• Header and Footer
• Menu Navigation
• Color Palette
• Clear Labels
• Visuals and Media
• Calls to Action (CTAs)

1. Header and Footer

The header and footer are a staple of just about every modern website. Try to include them on most of your pages, from your homepage , to your blog posts, and even your “No results found” page .

Your header should contain your branding in the form of a logo and organization name, menu navigation, and maybe a CTA, and/or a search bar if well-spaced and minimal. On the other end, your footer is where many users will instinctively scroll for essential information. In your footer, place contact information, a signup form, links to your common pages, legal and privacy policies, links to translated versions of your site, and social media links.

2. Menu Navigation

Whether it’s a list of links across the header or a tidy and compact hamburger button in the corner, every website needs a guide for navigation positioned at the top of at least your homepage and other important pages . A good menu limits the number of clicks to reach any part of your website to just a few.

To reduce clutter, you might consider making some or all menu options a dropdown menu with links within it, as can be seen on HubSpot's homepage .

3. Search Bar

In addition to menu navigation, strongly consider placing a search bar at the top of your pages, so users can browse your site for content by keyword. If incorporating this functionality, make sure your results are relevant, forgiving of typos, and capable of approximate keyword matching. Most of us use a high-quality search engine every day, be it Google, Amazon, YouTube, or elsewhere. These all set the standard for your own site search.

4. Branding

Remember the conventions we’ve discussed? One that you see practically everywhere is a logo in the top left corner. On first landing, many visitors’ eyes will instinctively shift to this region to check they’re in the right place. Don’t leave them hanging.

To reinforce this notion, incorporate your company branding into every element you add, piece of content you post, and color scheme you create. That’s why we recommend establishing brand guidelines if you haven’t already — check out our style guide for a reference.

5. Color Palette

Color choice plays a major role in your site’s usability and UX as well. This decision tends to be more subjective than other requirements in this list. But, like everything else we’ve discussed, try to simplify — limit your color selection to 3-4 prominent colors at most.

Starting a color palette from scratch can be surprisingly difficult the first time. We seem to intuitively pick up on which colors work well together and which don’t, but we stumble when trying to pick from the infinite combinations available.

The solution? Try a color palette that’s been shown to work on other websites. Take influence from your favorite sites, and see our list of our favorite website color schemes to get started.

6. Headings

Headings are key to establishing the visual hierarchy we discussed earlier, especially on text-heavy pages. As users skim your pages what you need, a clear and to-the-point heading alerts readers to stop scrolling after finding what they want. Use only as many headings as there are distinct sections of your page, as too much blown-up and bolded text will dampen this effect.

7. Clear Labels

Whenever a user takes an action on your website, it must be obvious exactly what they’re doing and/or where they’re going. All buttons should have clear text or an icon to precisely and concisely signal their purpose. The same goes for in-text links and widgets (simple interactive elements, like dropdowns and text forms).

For example, a button linking to a pricing page should just read “Pricing” — anything beyond that (e.g., “See our prices”, “Check out the pricing page for a deal”) is superfluous. A search bar/button only needs a search glass icon (🔍), and perhaps also the word “Search”, to denote its purpose.

User testing can be a major help here. While you yourself know what all of your interactive page elements do, the same can’t be said for a new user. Testing will give valuable insight into what users think your labels mean beyond your own perspective.

8. Visuals and Media

When incorporating static images, gifs, videos, and other media into your pages, remember to be consistent and intentional in your choices. These elements will draw attention over most other text and will likely stay in users’ minds, so choose wisely.

Here’s just one example of effective media on a homepage. Notice how every image complements the page aesthetic and supports the offer of personalized fitness training with results.

Also, all images and videos should be optimized for search engines and include descriptive alt text for accessibility.

9. Calls to Action (CTAs)

Having a pleasing website is great, but how do you know whether your visitors are actually doing what you want? Are they engaging with your content? This is where CTAs come into play.

A CTA is any page element that prompts user action. The action could be adding a product to a card, downloading a content offer, or signing up for an email list. Make your CTA elements prominent in the visual hierarchy (remember our Spotify example), but not intrusive or distracting like many click-through ads tend to be.

If you need ideas for sleek CTAs that drive more conversions, see our CTA examples list .

10. Whitespace

As mentioned above, sometimes it’s about the elements you don’t include. After reading these guidelines and requirements, you may feel tempted to stuff your pages with all the bits and bobs needed for a flawless UX. Don’t forget that your viewers need room to digest all this new info, so give your elements room to breathe.

But, how much whitespace should you have? That’s another personal call, and varies from site to site. So, user testing is handy here as well. What are people focusing on? Do they feel overwhelmed with the density of content? Once again, it all ties back to our first guideline, simplicity.

Design that Puts Users First

Indeed, web design is largely subjective — your website’s look and experience isn’t going to please everyone. However, there are also tried-and-true UX principles that, when carefully considered and incorporated, help visitors feel more at home.

According to Amazon Web Services , 88% of website visitors are less likely to return to a website after a poor experience. And how could you blame them? We’ve surely all been there.

So, as a final bit of usability/UX wisdom, start caring more! Imagine yourself into the shoes (or, more accurately, browser windows) of your visitors, and keep them in mind every step of the design process.

Don't forget to share this post!

Related articles.

Does your Website Make the Grade in 2021?

13 Quick Tips to Improve Your Web Design Skills

The 29 Dominating Web Design Trends for 2024

How the Internet Works: An Explanation Even Non-Techies Can Understand

25+ Web Design Statistics that Are Essential to Know in 2023

24 Best “Meet the Team” Pages We’ve Ever Seen

30 Proven Tips to Improve SEO Performance

How to Optimize Your 404 Error Page for SEO & Conversions

11 Elements of Modern Web Design (And Web Design Trends to Watch)

Product Launch Plan: 17 Tips to Ensure a Seamless Launch

Access hundreds of website templates in HubSpot's Theme Marketplace

Marketing software that helps you drive revenue, save time and resources, and measure and optimize your investments — all on one easy-to-use platform

An official website of the United States government

The .gov means it’s official. Federal government websites often end in .gov or .mil. Before sharing sensitive information, make sure you’re on a federal government site.

The site is secure. The https:// ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.

• Publications
• Account settings

Preview improvements coming to the PMC website in October 2024. Learn More or Try it out now .

• Advanced Search
• Journal List
• HHS Author Manuscripts

A Literature Review: Website Design and User Engagement

Renee garett.

1 ElevateU, Los Angeles, CA, USA

Sean D. Young

2 University of California Institute for Prediction Technology, Department of Family Medicine, University of California, Los Angeles, Los Angeles, CA, USA

3 UCLA Center for Digital Behavior, Department of Family Medicine, University of California, Los Angeles, Los Angeles, CA, USA

Proper design has become a critical element needed to engage website and mobile application users. However, little research has been conducted to define the specific elements used in effective website and mobile application design. We attempt to review and consolidate research on effective design and to define a short list of elements frequently used in research. The design elements mentioned most frequently in the reviewed literature were navigation, graphical representation, organization, content utility, purpose, simplicity, and readability. We discuss how previous studies define and evaluate these seven elements. This review and the resulting short list of design elements may be used to help designers and researchers to operationalize best practices for facilitating and predicting user engagement.

1. INTRODUCTION

Internet usage has increased tremendously and rapidly in the past decade ( “Internet Use Over Time,” 2014 ). Websites have become the most important public communication portal for most, if not all, businesses and organizations. As of 2014, 87% of American adults aged 18 or older are Internet users ( “Internet User Demographics,” 2013 ). Because business-to-consumer interactions mainly occur online, website design is critical in engaging users ( Flavián, Guinalíu, & Gurrea, 2006 ; Lee & Kozar, 2012 ; Petre, Minocha, & Roberts, 2006 ). Poorly designed websites may frustrate users and result in a high “bounce rate”, or people visiting the entrance page without exploring other pages within the site ( Google.com, 2015 ). On the other hand, a well-designed website with high usability has been found to positively influence visitor retention (revisit rates) and purchasing behavior ( Avouris, Tselios, Fidas, & Papachristos, 2003 ; Flavián et al., 2006 ; Lee & Kozar, 2012 ).

Little research, however, has been conducted to define the specific elements that constitute effective website design. One of the key design measures is usability ( International Standardization Organization, 1998 ). The International Standardized Organization (ISO) defines usability as the extent to which users can achieve desired tasks (e.g., access desired information or place a purchase) with effectiveness (completeness and accuracy of the task), efficiency (time spent on the task), and satisfaction (user experience) within a system. However, there is currently no consensus on how to properly operationalize and assess website usability ( Lee & Kozar, 2012 ). For example, Nielson associates usability with learnability, efficiency, memorability, errors, and satisfaction ( Nielsen, 2012 ). Yet, Palmer (2002) postulates that usability is determined by download time, navigation, content, interactivity, and responsiveness. Similar to usability, many other key design elements, such as scannability, readability, and visual aesthetics, have not yet been clearly defined ( Bevan, 1997 ; Brady & Phillips, 2003 ; Kim, Lee, Han, & Lee, 2002 ), and there are no clear guidelines that individuals can follow when designing websites to increase engagement.

This review sought to address that question by identifying and consolidating the key website design elements that influence user engagement according to prior research studies. This review aimed to determine the website design elements that are most commonly shown or suggested to increase user engagement. Based on these findings, we listed and defined a short list of website design elements that best facilitate and predict user engagement. The work is thus an exploratory research providing definitions for these elements of website design and a starting point for future research to reference.

2. MATERIALS AND METHODS

2.1. selection criteria and data extraction.

We searched for articles relating to website design on Google Scholar (scholar.google.com) because Google Scholar consolidates papers across research databases (e.g., Pubmed) and research on design is listed in multiple databases. We used the following combination of keywords: design, usability, and websites. Google Scholar yielded 115,000 total hits. However, due to the large list of studies generated, we decided to only review the top 100 listed research studies for this exploratory study. Our inclusion criteria for the studies was: (1) publication in a peer-reviewed academic journal, (2) publication in English, and (3) publication in or after 2000. Year of publication was chosen as a limiting factor so that we would have enough years of research to identify relevant studies but also have results that relate to similar styles of websites after the year 2000. We included studies that were experimental or theoretical (review papers and commentaries) in nature. Resulting studies represented a diverse range of disciplines, including human-computer interaction, marketing, e-commerce, interface design, cognitive science, and library science. Based on these selection criteria, thirty-five unique studies remained and were included in this review.

2.2. Final Search Term

(design) and (usability) and (websites).

The search terms were kept simple to capture the higher level design/usability papers and allow Google scholar’s ranking method to filter out the most popular studies. This method also allowed studies from a large range of fields to be searched.

2.3. Analysis

The literature review uncovered 20 distinct design elements commonly discussed in research that affect user engagement. They were (1) organization – is the website logically organized, (2) content utility – is the information provided useful or interesting, (3) navigation – is the website easy to navigate, (4) graphical representation – does the website utilize icons, contrasting colors, and multimedia content, (5) purpose – does the website clearly state its purpose (i.e. personal, commercial, or educational), (6) memorable elements – does the website facilitate returning users to navigate the site effectively (e.g., through layout or graphics), (7) valid links – does the website provide valid links, (8) simplicity – is the design of the website simple, (9) impartiality – is the information provided fair and objective, (10) credibility – is the information provided credible, (11) consistency/reliability – is the website consistently designed (i.e., no changes in page layout throughout the site), (12) accuracy – is the information accurate, (13) loading speed – does the website take a long time to load, (14) security/privacy – does the website securely transmit, store, and display personal information/data, (15) interactive – can the user interact with the website (e.g., post comments or receive recommendations for similar purchases), (16) strong user control capabilities– does the website allow individuals to customize their experiences (such as the order of information they access and speed at which they browse the website), (17) readability – is the website easy to read and understand (e.g., no grammatical/spelling errors), (18) efficiency – is the information presented in a way that users can find the information they need quickly, (19) scannability – can users pick out relevant information quickly, and (20) learnability – how steep is the learning curve for using the website. For each of the above, we calculated the proportion of studies mentioning the element. In this review, we provide a threshold value of 30%. We identified elements that were used in at least 30% of the studies and include these elements that are above the threshold on a short list of elements used in research on proper website design. The 30% value was an arbitrary threshold picked that would provide researchers and designers with a guideline list of elements described in research on effective web design. To provide further information on how to apply this list, we present specific details on how each of these elements was discussed in research so that it can be defined and operationalized.

3.1. Popular website design elements ( Table 1 )

Frequency of website design elements used in research (2000–2014)

Seven of the website design elements met our threshold requirement for review. Navigation was the most frequently discussed element, mentioned in 22 articles (62.86%). Twenty-one studies (60%) highlighted the importance of graphics. Fifteen studies (42.86%) emphasized good organization. Four other elements also exceeded the threshold level, and they were content utility (n=13, 37.14%), purpose (n=11, 31.43%), simplicity (n=11, 31.43%), and readability (n=11, 31.43%).

Elements below our minimum requirement for review include memorable features (n=5, 14.29%), links (n=10, 28.57%), impartiality (n=1, 2.86%), credibility (n=7, 20%), consistency/reliability (n=8. 22.86%), accuracy (n=5, 14.29%), loading speed (n=10, 28.57%), security/privacy (n=2, 5.71%), interactive features (n=9, 25.71%), strong user control capabilities (n=8, 22.86%), efficiency (n=6, 17.14%), scannability (n=1, 2.86%), and learnability (n=2, 5.71%).

3.2. Defining key design elements for user engagement ( Table 2 )

Definitions of Key Design Elements

In defining and operationalizing each of these elements, the research studies suggested that effective navigation is the presence of salient and consistent menu/navigation bars, aids for navigation (e.g., visible links), search features, and easy access to pages (multiple pathways and limited clicks/backtracking). Engaging graphical presentation entails 1) inclusion of images, 2) proper size and resolution of images, 3) multimedia content, 4) proper color, font, and size of text, 5) use of logos and icons, 6) attractive visual layout, 7) color schemes, and 8) effective use of white space. Optimal organization includes 1) cognitive architecture, 2) logical, understandable, and hierarchical structure, 3) information arrangement and categorization, 4) meaningful labels/headings/titles, and 5) use of keywords. Content utility is determined by 1) sufficient amount of information to attract repeat visitors, 2) arousal/motivation (keeps visitors interested and motivates users to continue exploring the site), 3) content quality, 4) information relevant to the purpose of the site, and 5) perceived utility based on user needs/requirements. The purpose of a website is clear when it 1) establishes a unique and visible brand/identity, 2) addresses visitors’ intended purpose and expectations for visiting the site, and 3) provides information about the organization and/or services. Simplicity is achieved by using 1) simple subject headings, 2) transparency of information (reduce search time), 3) website design optimized for computer screens, 4) uncluttered layout, 5) consistency in design throughout website, 6) ease of using (including first-time users), 7) minimize redundant features, and 8) easily understandable functions. Readability is optimized by content that is 1) easy to read, 2) well-written, 3) grammatically correct, 4) understandable, 5) presented in readable blocks, and 6) reading level appropriate.

4. DISCUSSION

The seven website design elements most often discussed in relation to user engagement in the reviewed studies were navigation (62.86%), graphical representation (60%), organization (42.86%), content utility (37.14%), purpose (31.43%), simplicity (31.43%), and readability (31.43%). These seven elements exceeded our threshold level of 30% representation in the literature and were included into a short list of website design elements to operationalize effective website design. For further analysis, we reviewed how studies defined and evaluated these seven elements. This may allow designers and researchers to determine and follow best practices for facilitating or predicting user engagement.

A remaining challenge is that the definitions of website design elements often overlap. For example, several studies evaluated organization by how well a website incorporates cognitive architecture, logical and hierarchical structure, systematic information arrangement and categorization, meaningful headings and labels, and keywords. However, these features are also crucial in navigation design. Also, the implications of using distinct logos and icons go beyond graphical representation. Logos and icons also establish unique brand/identity for the organization (purpose) and can serve as visual aids for navigation. Future studies are needed to develop distinct and objective measures to assess these elements and how they affect user engagement ( Lee & Kozar, 2012 ).

Given the rapid increase in both mobile technology and social media use, it is surprising that no studies mentioned cross-platform compatibility and social media integration. In 2013, 34% of cellphone owners primarily use their cellphones to access the Internet, and this number continues to grow ( “Mobile Technology Factsheet,” 2013 ). With the rise of different mobile devices, users are also diversifying their web browser use. Internet Explorer (IE) was once the leading web browser. However, in recent years, FireFox, Safari, and Chrome have gained significant traction ( W3schools.com, 2015 ). Website designers and researchers must be mindful of different platforms and browsers to minimize the risk of losing users due to compatibility issues. In addition, roughly 74% of American Internet users use some form of social media ( Duggan, Ellison, Lampe, Lenhart, & Smith, 2015 ), and social media has emerged as an effective platform for organizations to target and interact with users. Integrating social media into website design may increase user engagement by facilitating participation and interactivity.

There are several limitations to the current review. First, due to the large number of studies published in this area and due to this study being exploratory, we selected from the first 100 research publications on Google Scholar search results. Future studies may benefit from defining design to a specific topic, set of years, or other area to limit the number of search results. Second, we did not quantitatively evaluate the effectiveness of these website design elements. Additional research can help to better quantify these elements.

It should also be noted that different disciplines and industries have different objectives in designing websites and should thus prioritize different website design elements. For example, online businesses and marketers seek to design websites that optimize brand loyalty, purchase, and profit ( Petre et al., 2006 ). Others, such as academic researchers or healthcare providers, are more likely to prioritize privacy/confidentiality, and content accuracy in building websites ( Horvath, Ecklund, Hunt, Nelson, & Toomey, 2015 ). Ultimately, we advise website designers and researchers to consider the design elements delineated in this review, along with their unique needs, when developing user engagement strategies.

• Arroyo Ernesto, Selker Ted, Wei Willy. Usability tool for analysis of web designs using mouse tracks. Paper presented at the CHI’06 Extended Abstracts on Human Factors in Computing Systems.2006. [ Google Scholar ]
• Atterer Richard, Wnuk Monika, Schmidt Albrecht. Knowing the user’s every move: user activity tracking for website usability evaluation and implicit interaction. Paper presented at the Proceedings of the 15th international conference on World Wide Web.2006. [ Google Scholar ]
• Auger Pat. The impact of interactivity and design sophistication on the performance of commercial websites for small businesses. Journal of Small Business Management. 2005; 43 (2):119–137. [ Google Scholar ]
• Avouris Nikolaos, Tselios Nikolaos, Fidas Christos, Papachristos Eleftherios. Advances in Informatics. Springer; 2003. Website evaluation: A usability-based perspective; pp. 217–231. [ Google Scholar ]
• Banati Hema, Bedi Punam, Grover PS. Evaluating web usability from the user’s perspective. Journal of Computer Science. 2006; 2 (4):314. [ Google Scholar ]
• Belanche Daniel, Casaló Luis V, Guinalíu Miguel. Website usability, consumer satisfaction and the intention to use a website: The moderating effect of perceived risk. Journal of retailing and consumer services. 2012; 19 (1):124–132. [ Google Scholar ]
• Bevan Nigel. Usability issues in web site design. Paper presented at the HCI; 1997. [ Google Scholar ]
• Blackmon Marilyn Hughes, Kitajima Muneo, Polson Peter G. Repairing usability problems identified by the cognitive walkthrough for the web. Paper presented at the Proceedings of the SIGCHI conference on Human factors in computing systems.2003. [ Google Scholar ]
• Blackmon Marilyn Hughes, Polson Peter G, Kitajima Muneo, Lewis Clayton. Cognitive walkthrough for the web. Paper presented at the Proceedings of the SIGCHI conference on human factors in computing systems.2002. [ Google Scholar ]
• Braddy Phillip W, Meade Adam W, Kroustalis Christina M. Online recruiting: The effects of organizational familiarity, website usability, and website attractiveness on viewers’ impressions of organizations. Computers in Human Behavior. 2008; 24 (6):2992–3001. [ Google Scholar ]
• Brady Laurie, Phillips Christine. Aesthetics and usability: A look at color and balance. Usability News. 2003; 5 (1) [ Google Scholar ]
• Cyr Dianne, Head Milena, Larios Hector. Colour appeal in website design within and across cultures: A multi-method evaluation. International journal of human-computer studies. 2010; 68 (1):1–21. [ Google Scholar ]
• Cyr Dianne, Ilsever Joe, Bonanni Carole, Bowes John. Website Design and Culture: An Empirical Investigation. Paper presented at the IWIPS.2004. [ Google Scholar ]
• Dastidar Surajit Ghosh. Impact of the factors influencing website usability on user satisfaction. 2009. [ Google Scholar ]
• De Angeli Antonella, Sutcliffe Alistair, Hartmann Jan. Interaction, usability and aesthetics: what influences users’ preferences?. Paper presented at the Proceedings of the 6th conference on Designing Interactive systems.2006. [ Google Scholar ]
• Djamasbi Soussan, Siegel Marisa, Tullis Tom. Generation Y, web design, and eye tracking. International journal of human-computer studies. 2010; 68 (5):307–323. [ Google Scholar ]
• Djonov Emilia. Website hierarchy and the interaction between content organization, webpage and navigation design: A systemic functional hypermedia discourse analysis perspective. Information Design Journal. 2007; 15 (2):144–162. [ Google Scholar ]
• Duggan M, Ellison N, Lampe C, Lenhart A, Smith A. Social Media update 2014. Washington, D.C: Pew Research Center; 2015. [ Google Scholar ]
• Flavián Carlos, Guinalíu Miguel, Gurrea Raquel. The role played by perceived usability, satisfaction and consumer trust on website loyalty. Information & Management. 2006; 43 (1):1–14. [ Google Scholar ]
• George Carole A. Usability testing and design of a library website: an iterative approach. OCLC Systems & Services: International digital library perspectives. 2005; 21 (3):167–180. [ Google Scholar ]
• Google.com. Bounce Rate. Analyrics Help. 2015 Retrieved 2/11, 2015, from https://support.google.com/analytics/answer/1009409?hl=en .
• Green D, Pearson JM. Development of a web site usability instrument based on ISO 9241-11. Journal of Computer Information Systems. 2006 Fall [ Google Scholar ]
• Horvath Keith J, Ecklund Alexandra M, Hunt Shanda L, Nelson Toben F, Toomey Traci L. Developing Internet-Based Health Interventions: A Guide for Public Health Researchers and Practitioners. J Med Internet Res. 2015; 17 (1):e28. doi: 10.2196/jmir.3770. [ PMC free article ] [ PubMed ] [ CrossRef ] [ Google Scholar ]
• International Standardization Organization. ISO 2941-11:1998 Ergonomic requirements for office work with visual display terminals (VDTs) -- Part 11: Guidance on usability: International Standardization Organization (ISO) 1998. [ Google Scholar ]
• Internet Use Over Time. 2014 Jan 2; Retrieved February 15, 2015, from http://www.pewinternet.org/data-trend/internet-use/internet-use-over-time/
• Internet User Demographics. 2013 Nov 14; Retrieved February 11, 2015, from http://www.pewinternet.org/data-trend/internet-use/latest-stats/
• Kim Jinwoo, Lee Jungwon, Han Kwanghee, Lee Moonkyu. Businesses as Buildings: Metrics for the Architectural Quality of Internet Businesses. Information Systems Research. 2002; 13 (3):239–254. doi: 10.1287/isre.13.3.239.79. [ CrossRef ] [ Google Scholar ]
• Lee Younghwa, Kozar Kenneth A. Understanding of website usability: Specifying and measuring constructs and their relationships. Decision Support Systems. 2012; 52 (2):450–463. [ Google Scholar ]
• Lim Sun. The Self-Confrontation Interview: Towards an Enhanced Understanding of Human Factors in Web-based Interaction for Improved Website Usability. J Electron Commerce Res. 2002; 3 (3):162–173. [ Google Scholar ]
• Lowry Paul Benjamin, Spaulding Trent, Wells Taylor, Moody Greg, Moffit Kevin, Madariaga Sebastian. A theoretical model and empirical results linking website interactivity and usability satisfaction. Paper presented at the System Sciences, 2006. HICSS’06. Proceedings of the 39th Annual Hawaii International Conference on.2006. [ Google Scholar ]
• Maurer Steven D, Liu Yuping. Developing effective e-recruiting websites: Insights for managers from marketers. Business Horizons. 2007; 50 (4):305–314. [ Google Scholar ]
• Mobile Technology Fact Sheet. 2013 Dec 27; Retrieved August 5, 2015, from http://www.pewinternet.org/fact-sheets/mobile-technology-fact-sheet/
• Nielsen Jakob. Usability 101: introduction to Usability. 2012 Retrieved 2/11, 2015, from http://www.nngroup.com/articles/usability-101-introduction-to-usability/
• Palmer Jonathan W. Web Site Usability, Design, and Performance Metrics. Information Systems Research. 2002; 13 (2):151–167. doi: 10.1287/isre.13.2.151.88. [ CrossRef ] [ Google Scholar ]
• Petre Marian, Minocha Shailey, Roberts Dave. Usability beyond the website: an empirically-grounded e-commerce evaluation instrument for the total customer experience. Behaviour & Information Technology. 2006; 25 (2):189–203. [ Google Scholar ]
• Petrie Helen, Hamilton Fraser, King Neil. Tension, what tension?: Website accessibility and visual design. Paper presented at the Proceedings of the 2004 international cross-disciplinary workshop on Web accessibility (W4A).2004. [ Google Scholar ]
• Raward Roslyn. Academic library website design principles: development of a checklist. Australian Academic & Research Libraries. 2001; 32 (2):123–136. [ Google Scholar ]
• Rosen Deborah E, Purinton Elizabeth. Website design: Viewing the web as a cognitive landscape. Journal of Business Research. 2004; 57 (7):787–794. [ Google Scholar ]
• Shneiderman Ben, Hochheiser Harry. Universal usability as a stimulus to advanced interface design. Behaviour & Information Technology. 2001; 20 (5):367–376. [ Google Scholar ]
• Song Jaeki, Zahedi Fatemeh “Mariam”. A theoretical approach to web design in e-commerce: a belief reinforcement model. Management Science. 2005; 51 (8):1219–1235. [ Google Scholar ]
• Sutcliffe Alistair. Interactive systems: design, specification, and verification. Springer; 2001. Heuristic evaluation of website attractiveness and usability; pp. 183–198. [ Google Scholar ]
• Tan Gek Woo, Wei Kwok Kee. An empirical study of Web browsing behaviour: Towards an effective Website design. Electronic Commerce Research and Applications. 2007; 5 (4):261–271. [ Google Scholar ]
• Tarafdar Monideepa, Zhang Jie. Determinants of reach and loyalty-a study of Website performance and implications for Website design. Journal of Computer Information Systems. 2008; 48 (2):16. [ Google Scholar ]
• Thompson Lori Foster, Braddy Phillip W, Wuensch Karl L. E-recruitment and the benefits of organizational web appeal. Computers in Human Behavior. 2008; 24 (5):2384–2398. [ Google Scholar ]
• W3schools.com. Browser Statistics and Trends. Retrieved 1/15, 2015, from http://www.w3schools.com/browsers/browsers_stats.asp .
• Williamson Ian O, Lepak David P, King James. The effect of company recruitment web site orientation on individuals’ perceptions of organizational attractiveness. Journal of Vocational Behavior. 2003; 63 (2):242–263. [ Google Scholar ]
• Zhang Ping, Small Ruth V, Von Dran Gisela M, Barcellos Silvia. A two factor theory for website design. Paper presented at the System Sciences, 2000. Proceedings of the 33rd Annual Hawaii International Conference on.2000. [ Google Scholar ]
• Zhang Ping, Von Dran Gisela M. Satisfiers and dissatisfiers: A two-factor model for website design and evaluation. Journal of the American society for information science. 2000; 51 (14):1253–1268. [ Google Scholar ]

How to learn web design: Step by step guide in 9 steps

Discover how to learn web design and learn the basics of UI, UX, HTML, CSS, and visual design.

Build completely custom, production-ready websites — or ultra-high-fidelity prototypes — without writing a line of code. Only with Webflow.

Learning how to design a website doesn’t have to be difficult. If you want to know the basic fundamentals, we’ve put together this guide that covers everything you need to know to get started.

Web design has so many different facets and it can be hard to know just where you should begin. We want to make things easier for you and we’ve put together a wealth of great information to help get you on your way to becoming a web designer.

We’ll explore these fundamental steps to learning web design:

• Understand the key concepts of visual web design
• Know the basics of HTML
• Understand CSS
• Learn the foundation of UX design
• Familiarize yourself with UI design
• Understand the basics of creating layouts
• Learn about typography 
• Put your knowledge into action and build something
• Get a mentor

What is web design and what elements make it work?

If you want to learn how to design websites, the first step is understanding what exactly web design is.

Web design is part artistry and part science, tapping into both the creative and analytical sides of a person’s mind.

Web designers take what’s conceptual and translate it into visuals. Images, typography, colors, text, negative space, and structure come together offering not only a user experience but a conduit for communicating ideas. Web design skills cover a variety of techniques and expertise in creating websites that are both functional and visually engaging.

A good web designer understands the significance of each piece of a design. They make choices on a granular level, styling each element, while never losing sight of how the elements will come together and function in delivering on the design’s greater goals.

No matter how spectacular the visuals of a web design are, they're meaningless without organization. Logic needs to guide the arrangement of ideas and visuals on each page, as well as direct how users will travel through it. A skilled web designer creates designs that deliver in the least number of clicks.

Web design can be broken down into several subdisciplines. Some designers make their careers specializing in areas like user interface (UI) , user experience (UX) , search engine optimization (SEO), and other areas of expertise. As you begin your journey as a designer, you should know a little bit about all these different facets of web design.

Web designs are powered by the back end

You’re going to come across the terms back end and front end as you learn to design websites. Most beginners mix these up, so it’s important to know how they’re different.

The back end is everything that runs behind the scenes in displaying a website. Websites reside on servers. When a user requests to navigate to a specific section of a website, the server takes this incoming information and in turn, shoots out all of the HTML and other code so that it displays in the user’s browser correctly. Servers host the data a website requires to function.

Web developers who specialize in back-end development are often programmers who work in such languages as PHP. They also might use a Python framework like Django, write Java code, manage SQL databases, or use other programming languages or frameworks to make sure that servers, applications, and databases are all working together.

To become a web designer, you don’t need to go too deep into what happens on the back end, but you should at least understand its purpose. This is an advanced topic but for those who want to become full-stack developers, it’s as important as understanding front-end fundamentals like HTML & CSS. And speaking of front-end web development...

Front end relates to what site visitors see

The back end is considered the server side while the front end is the client side. The front end is where HTML , CSS, JavaScript , and other code work together to display a website. This is the part of a web design that people engage with.

As you advance in your career you might get into more specialized areas of learning web development. You may end up working with frameworks like React or Bootstrap or go deeper with JavaScript or jQuery. These are more advanced areas that you shouldn’t worry too much about in the beginning.

Good visual design make websites stand out

Though the best web designs look effortless in execution, they’re all based on the guiding principles of visual design. Though there are those rare web designers who have an innate eye for visual design, for most of us, this is a topic that we must learn on our own. Those who can tell the difference between good and bad design will have an easier time learning web development. Understand how visual design works. Know the rules of composition and understand how elements like shapes, space, color, and geometry come together.

A great starting point is our post about visual design principles for web designers . Studying concepts like reification, emergence, and invariance will allow you to incorporate these principles into your design process. Learning how to be a web designer also means understanding the history of design and web design trends . We’ve put together this in-depth graphic design archive to show you all of the major developments in design that have brought us to where we are today.

How to become a web designer

1. understand the key concepts of visual design.

Every letter, border, and division in a layout is made up of lines that make up their greater structure. Learning web design means understanding the how to use lines to create order and balance in a layout.

The three basic shapes in visual design are squares, circles, and triangles. Squares and rectangles work for blocks of content, circles work for buttons, and triangles are often used for icons that accompany an important message or call to action. Shapes also have a sense of emotion, with squares associated with strength, circles with harmony and comfort, and triangles with importance and action.

Texture replicates something in the real world. Through texture, we get an idea of whether something is rough or smooth. Textures can be seen throughout web design. From paperlike backgrounds to the colorful wisps of a Gaussian blur, be aware of the different kinds of textures that can make your designs more interesting and can give them a sense of physicality.

If you want to learn how to web design and create websites that aren’t an eye strain, you should educate yourself in color theory . Understanding the color wheel, complementary colors, contrasting colors, and the emotions that different colors evoke will make you a better web designer. A huge part of knowing how to web design is knowing what color combinations look good together.

Grids have their roots in the earliest days of graphic design. They  bring order to images, texts, and other elements in a web design. Learn how to structure your web layouts using grids.

2. Learn HTML basics

Hypertext markup language (HTML) provides the directions for how the content, images, navigation, and other elements of a website display in someone’s web browser. Though you don’t need to be an expert in HTML, it still helps to have some familiarity with how it works, even if you’re using a visual-based design platform like Webflow. 

HTML tags are the instructions a browser uses to generate a website. Headings, paragraphs, links, and images are all controlled by these tags. You’ll especially want to know how header tags like H1, H2, and H3 tags are used for content hierarchy. In addition to affecting layout structure, header tags are important in how web crawlers classify a design and affect how they show up in organic search rankings.

Visit Webflow University to learn more about the basic concepts of HTML and CSS .

3. Understand CSS

CSS (or Cascading Style Sheets) provides styling and additional instructions on how an HTML element is going to appear. Doing things like applying fonts, adding padding , setting alignment, choosing colors, and even creating grids are all possible through CSS.

Knowing how CSS works will give you the skills to create unique-looking websites and to customize existing templates. Let’s go over a few key concepts of CSS.

CSS classes

A CSS class is a list of attributes that come together in styling an individual element. Something like body text could have the font, size, and color as part of a single CSS class.

CSS combo classes

A combo class is built on an existing base class. It inherits all of the attributes like sizing, color, and alignment that may already be in place. Attributes can then be changed up. Combo classes save you time and let you set up variations of a class that you can apply wherever you need to in a web design.

Knowing how CSS works is essential when learning web design. Visit Webflow University to see our courses on CSS styling and CSS layouts .

From the fundamentals to advanced topics — learn how to build sites in Webflow and become the designer you always wanted to be.

4. Learn the foundations of UX design

Those who want to learn web development often confuse UI and UX . User experience is the magic that brings a website to life, transforming it from a static arrangement of elements into something that engages with the emotions of someone scrolling through it. 

The color scheme, content, typography, layout, and visuals all come together to serve your audience. User experience design is about precision and evoking feelings. It offers someone not only a smooth journey but connects them with the entity or brand behind the web design.

Here are a few UX principles you’ll need to know.

User personas

If you want to learn website design, you must be cognizant of the connections between websites and the people who visit them.

Web design means understanding end users. You should learn how to do user research and how to create user personas. In addition, you’ll need to know how to use this information to create a design that’s optimized for an audience’s needs.

Information architecture

Without clear organization, people will get confused and bounce. Information architecture and content mapping provide a blueprint for how the website and each section will work together in providing a clear customer journey.

Constructing user flows may come into play when you work your way up to more extensive design projects, but you’ll be better off in the future if you start thinking about these and building them out for your early designs. User flows communicate how people will move through a design. They help you to prioritize the most important sections and make sure that people can access them.

Wireframes show where on a web page headings, text, visuals, forms, and other elements are going to be placed. Even if you’re building a simple one-page web design , mapping out a wireframe will give you a solid guide to work from. As you move on to more complicated websites, wireframes are essential in creating a consistent experience, structuring layouts, and not missing anything that needs to be included. 

Prototyping

Prototypes can have different levels of fidelity but act as a representation of a functioning design. Images, interactions, content, and other important elements are all in place and replicate the real-world design. Prototypes are used to get feedback and fine-tune a design throughout the process.

5. Familiarize yourself with UI design

UI (user interface) design is another huge subject you’ll dive into as you learn website design. A user interface is a mechanism that puts a piece of technology into action. A doorknob is a user interface. The volume control on your car radio that your significant other won’t stop messing around with is a user interface. And the keypad that you enter your PIN into at an ATM is a user interface. Just as buttons and other mechanisms in the real world allow someone to interact with machines, the user interface elements on a website allow someone to put actions into motion.

Let’s review two key UI principles: intuitive design and simplicity.

How to create intuitive interfaces

Interacting and engaging with a website should be consistent and follow repeatable patterns. People landing on a website should immediately understand the systems that are in place in navigating through it.

Make UI simple

UI exists to optimize usability. This means making the controls easy to use, as well as obvious in their functionality. Whether you’re minimizing the number of navigational options, making the checkout process quick, or integrating other interactive elements that increase accessibility, understanding UI will help you streamline someone’s experience in interacting with a website.

Of course, UI is a vast subject that can’t be captured in just a few paragraphs. We suggest you check out the blog post 10 essential UI (user interface) design tips as a primer to UI.

6. Understand the basics of creating layouts

Our eyes latch on to certain design patterns automatically, making for an easy route through a web design. We intuitively know where to look because we’ve seen these same patterns over and over as we’ve consumed media throughout our lives. Knowing design patterns will help you create websites that have a smooth flow to the content and visuals. Two common web layout patterns you need to know about are Z-patterns and F-patterns.

For layouts with an economy of words and images and generous amounts of negative space, the Z-pattern makes for an efficient way to cruise through a website. When you start paying attention to where your eyes are going through a design, you’ll recognize right away when a Z-pattern is in place.

Designs heavy on text, like for an online publication or a blog, often follow a distinct F-pattern. On the left-hand side of the screen, you’ll see a list of articles or posts, and in the main body of the page, you’ll see rows of related information. This pattern is optimized to give people all the information they need, even if they’re quickly glancing through it.

Related reads: Web page layout: website anatomy every designer needs to learn

Understand responsive web design

Along with understanding layout patterns, it’s also important to know the fundamentals behind responsive web design. A responsive website functions and has a consistent look no matter what device they’re being displayed on.

Related reads: Intro to responsive web design

7. Learn about typography

Fonts can impart different tones or emotions as well as affect readability. If you’re learning about web design, knowing how to use typography is essential.

Typography serves several purposes in web design. First, it serves the utilitarian purpose of making content legible. But it can also evoke emotion and atmosphere, and the tasteful use of stylized typography can add to the overall aesthetic.

Here are three basic typographic concepts you should know.

Serif typefaces have minuscule lines known as serifs that grace each letter. This typographic style can be traced back to print.

As the name implies, sans serif typefaces lack the identifying lines of serif typefaces. These typefaces are found throughout the digital realm of websites and apps.

Display typefaces are often used for headlines and can be either large and impactful or made of sharp, thin lines. They usually have sophisticated letterforms and are meant to grab someone’s attention.

Related reads: Typographic design: font styles and resources for designers

8. Put your knowledge into action and build something

You can watch tutorials, read blog posts, enroll in free web design courses , and absorb all of the theory and information you can about web design, but the only way to become a web designer is to begin web designing.

Start with a simple project. Maybe someone you know needs help creating a portfolio or has a side hustle that is lacking any sort of web presence. Offer to design them something for free.

A blog is also another great beginner project. This will give you practical design experience in learning how to use things like a content management system (CMS) , as well as provide a showcase for your writing skills.

Building a website for a fake company or business is another fun creative exercise in developing your design chops. Plus, you can add it to your portfolio.

9. Get a mentor

Mentors are valuable because they’ve been where you are — at the very beginning — and have the desire to help you out through the hard-earned lessons they’ve learned. They have a deep well of expertise and knowledge. They’re a great resource for getting feedback on your work and finding what you’re doing right and what needs improvement.

In searching for the appropriate mentor, make sure you find someone who does the type of design you admire and specializes in what you want to learn. Mentors can give you a clear path from years spent in the field so you don’t have to stumble through learning web design.

Visual development provides an easy entry into web design

There was a time, not that long ago when you had to have a deep understanding of HTML and CSS to manually write the code behind a web design. Today, visual development tools like Webflow, it’s possible to put together a website and launch it in a short amount of time. What took days or weeks can now happen in hours.

Of course, so much goes into creating a good web design. Learning the fundamentals behind visual design, the basics of UI and UX, and knowing how the front end and back end function will make you a more well-rounded designer.

Whether you’re just starting or are an expert, Webflow offers an intuitive visual web development platform to empower you to realize your creativity. Webflow has an entire community to give you advice and to help you level up your skills. We look forward to seeing your work in our user submitted Made in Webflow collection of websites.

Subscribe to Webflow Inspo

Get the best, coolest, and latest in design and no-code delivered to your inbox each week.

Related articles

12 best web design courses of 2024 (free + paid)

Find the best web design courses, free and paid, to sharpen your skills as a web designer and visual developer.

Essential web designer skills: 20 techniques to learn

From typography to communication, learn the skills web designers should have.

Simple web design tips for beginners: A complete guide

Just getting started in web design? This guide will get you ready to tackle your first project as a beginner.

Web page design: 3 steps every designer should follow

Have you ever wondered what makes a great web page design? Here’s a quick guide to building a conversion-boosting business website.

What is html?

HTML is a markup language that serves as the foundation of the World Wide Web.

A deep dive into brutalism

An overview of brutalism including its origins, key features, and examples of brutalist web design.

Get started for free

Try Webflow for as long as you like with our free Starter plan. Purchase a paid Site plan to publish, host, and unlock additional features.

Transforming the design process at

• Interactions
• Localization
• Figma to Webflow Labs
• DevLink Labs
• Feature index
• Accessibility
• Webflow vs WordPress
• Webflow vs Squarespace
• Webflow vs Shopify
• Webflow vs Contentful
• Webflow vs Sitecore
• Careers We're Hiring
• Webflow Shop
• Accessibility statement
• Terms of Service
• Privacy policy
• Cookie policy
• Cookie preferences
• Freelancers
• Global alliances
• Marketplace
• Libraries Beta
• Hire an Expert
• Made in Webflow
• Become an Expert
• Become a Template Designer
• Become an Affiliate

• Online Degree Explore Bachelor’s & Master’s degrees
• MasterTrack™ Earn credit towards a Master’s degree
• University Certificates Advance your career with graduate-level learning
• Top Courses
• Join for Free

What Does a Web Designer Do (And How Do I Become One)?

As a web designer, you are responsible for big-picture decisions, like the menus listed on the site, and smaller details, like which fonts, colors, and graphics to use.

A web designer creates the layout and design of a website. In simple terms, a website designer makes a site look good. They use design programs to create visual elements. Website designers usually have expertise in UI, or user interface, which means they strategically design a site that’s intuitive and easy for visitors to navigate. If your interest is piqued, let’s dig into this career and see what it takes to become a successful web designer.

Website developer vs. website designer

It’s common for a website designer to be confused with a website developer . A developer uses coding languages to create the framework of a website. They build the structure and then turn the site over to a designer to beautify it. 

What do web designers do?

Before talking about the skills or education needed, let’s uncover the daily tasks of a website designer so you can see if it’s something that suits your interests. Regularly, a website designer will:

Design and layout websites

Think through the navigation of a site to provide the best user experience

Design sample pages and create mockups

Work in Adobe programs to create visuals, graphics, or animations

Register web domains

Organize files 

Collaborate on website updates or “refreshes”

Coordinate with writers and designers to create a site

Job outlook for web designers

The aesthetics of a website directly impacts a user’s opinion of the site and the company. Research shows it takes visitors less than one second to judge a website, and that first impression is often associated with the brand. Seventy-five percent of consumers admit to judging a brand’s credibility based on its website, according to a research summary from the Stanford Persuasive Technology Lab [ 1 ].

As a result, companies are putting more emphasis on website design, and it’s reflected in the job market. Jobs in this field are growing 23 percent faster than the national average, according to the US Bureau of Labor Statistics (BLS) [ 2 ].

Web designer salary

For those exploring this job opportunity, there isn’t just growth in the field but good wages as well. The median annual pay for a web designer in the US is $64,209 [ 3 ]. This figure includes an average base salary of $59,317 per year and a median additional pay of $4,892 annually. Additional pay insights may include commissions, profit-sharing, and bonuses.

What kind of skills should you develop to become a website designer? 

If you’re interested in becoming a website designer, there are certain skills you can develop to start down this career path. The next couple of sections outline workplace and technical skills that you can expand upon as an aspiring web designer.

Workplace web design skills

Workplace skills are also known as non-technical or soft skills. Here are a few examples:

Communication

A designer needs the ability to talk with a company about what they want, ask questions about the intended audience, and convey their ideas for an effective site. Being able to communicate is just the start, companies want a responsive designer too. A responsive designer keeps a company informed, explains issues as they arise, and discusses deadlines. 

Time management

As a web designer, you might take a freelance approach where you work with a variety of companies at once or you might work for one company. Either way, you’ll need the ability to manage your time effectively to keep multiple projects moving. 

Collaboration

A website designer often works with other people to create a site. There could be a copywriter, graphic designer, or even members of an IT department participating in website creation. If that’s the case, you’ll need the ability to listen, collaborate, and take constructive criticism. 

Technical skills

Technical skills are specialized abilities that fall under the discipline of web design. Here are a few examples:

Visual design

The core part of a website designer’s job is to create visual elements for a site, so having a firm grasp of design principles is a must. Visual design incorporates various best design practices that hone in on things like proportions, symmetry, typography, and color systems.

UX design, or user experience design, influences the way a person feels about visiting a site. A designer’s purpose is to create a layout that’s easy to navigate and visually pleasing, which results in a positive customer experience. 

To generate the right experience for the audience, a designer often researches the audience and studies actions taken on the site to build a website experience that fits a brand’s target market. 

Knowledge of design programs

Website designers must have proficiency in design programs like Adobe Creative Cloud, CorelDraw Graphics Suite, or Inkscape. These programs are often used to create visual elements, produce mock-ups, and manipulate images, all of which are needed in web design. 

Some coding knowledge

A designer doesn’t write the code to make a site function, but it doesn’t hurt to know a little about HTML or CSS to make small tweaks to a site. With a basic understanding, you’ll be able to manipulate templates, enhance fonts, or adjust the placements of objects easier. 

Read more: Hard Skills vs. Soft Skills: What’s the Difference?

Do you need a degree to land a job as a website designer?

Many website designers have a bachelor’s degree in website design or a related field, according to the BLS. However, a four-year degree isn’t the only path to this creative career, obtaining certifications is another option. Let’s take a closer look at both degree programs and certifications. 

Degree programs 

There are four-year degree programs that can provide the necessary training to become a website designer. Here’s a look at a few options: 

Bachelor’s degree in computer science: A degree in computer science provides a well-rounded education in computing skills, problem-solving, and design work. Within some programs, like BSc Computer Science from the University of London, you can pick an area of focus, like user experience (UX), to narrow your skill set. 

Bachelor’s degree in website design: Some students decide to get a specific degree in website design, which has a more narrow focus on design skills and layout principles that are all taught in concert with the technical programs that website designers use, like the Adobe programs mentioned earlier. 

Web Design Certificate Programs and Courses 

Obtaining a bachelor’s degree isn’t the only option, you can also explore certification programs or take courses to build your web design skills. Some employers may prefer candidates with relevant, up-to-date industry certificates. Here are a few relevant examples:

Google UX Design Professional Certificate : Learn from industry leaders at Google in this series of courses that cover foundational UX concepts. Build job-ready skills like wireframing, prototyping, and user research as you complete projects for your design portfolio. 

UI/UX Design Specialization : This series of courses from the California Institute of the Arts offers practical, skill-based instruction to help students understand the UI/UX development process, website architecture, site maps, wireframing, and best practices to create a delightful online experience for the end user.

Responsive Website Development and Design Specialization : With a growing number of people using mobile devices to search online, understanding how to make responsive, mobile-ready websites is a valuable skill. This specialization from the University of London has students develop and design responsive sites with built-in multi-user experiences. While this class might lean more towards web development, an understanding of these skills will bolster your web design knowledge. 

Web designer portfolio

With the right skills honed and the right educational background, securing a website designer job includes building an impressive online portfolio. To help, here’s a list of tips to curate the best examples possibilities:

Quality over quantity: A portfolio should contain your best work, but it’s important to be selective. It’s better to showcase fewer, higher-quality sites than many sites that don't showcase your best work. 

Highlight the kind of work you want to do : Is there a particular industry that you’d like to serve? Do you want to focus on creating online stores as opposed to single-page sites for small businesses? Your portfolio should include the kind of work you want to do and showcase examples that you’re passionate about creating. 

Provide context: Your portfolio is a visual representation of your best work, but it is also an opportunity to provide context about your impact and projects. Consider providing a quick three-to-four-sentence description that explains the site’s purpose, its challenges, and why it’s in your portfolio.

Update it regularly: It’s a good idea to set aside scheduled time once a quarter to update your portfolio. Even if you are not adding new work, you might have additional context to add, or edits to make, based on your ongoing learnings and goals. It's a lot easier to update when things are fresh in your mind versus months or years later. 

Still building your portfolio?

Building a portfolio takes time. If you need to fill the gaps in your portfolio, consider enrolling in a Guided Project in web design on Coursera. You can browse relevant options in the list below:

Design and Develop a Website using Figma and CSS

Build a website using Wix Artificial Design Intelligence

Develop a Company Website with Wix

Use WordPress to Create a Job for Your Business

Take the next step toward a career in web design with Coursera

Are you ready to take the next step toward building a career as a website designer? If so, consider earning a credential from an industry leader with the Meta Front-End Developer Professional Certificate . By the end of this 100 percent online, self-paced course, you’ll create a professional portfolio that you can use in your job search. 

Article sources

Stanford Web Credibility Research. "Stanford Guidelines for Web Credibility, http://credibility.stanford.edu/guidelines/index.html ." Accessed February 16, 2023.

US Bureau of Labor Statistics. " Occupational Outlook Handbook: Web Developers and Digital Designers , https://www.bls.gov/ooh/computer-and-information-technology/web-developers.htm." Accessed February 16, 2023.

Glassdoor. "How much does a Web Designer make? https://www.glassdoor.com/Salaries/web-designer-salary-SRCH_KO0,12.htm ." Accessed February 16, 2023.

Keep reading

Coursera staff.

Editorial Team

Coursera’s editorial team is comprised of highly experienced professional editors, writers, and fact...

This content has been made available for informational purposes only. Learners are advised to conduct additional research to ensure that courses and other credentials pursued meet their personal, professional, and financial goals.

• Website builder
• Link in bio
• Pagecloud Start
• Apps and integrations
• Keyword Research
• Design Sidekick
• Professional services
• Small business
• Art & design
• Community & non-profit
• Entertainment & music
• Fashion & beauty
• Health & fitness
• Landing pages
• Photography
• Restaurant & food
• Travel & leisure
• Product updates

What is Web Design? The Ultimate Guide To Website Design [2023]

Robin Gandy, January 4, 2023

What is Web Design?

Web design is the process of planning, conceptualizing, and arranging content online. Today, designing a website goes beyond aesthetics to include the website’s overall functionality. Web design also includes web apps, mobile apps, and user interface (UI) design, and user experience (UX). 

Did you know that web design can have a huge impact on your performance in search engines like Google? This article will give you some helpful insight into how to create a website that not only looks good, but functions properly and ranks highly in search. 

In this article we will cover:

Finding Inspiration

Choosing a web design tool.

• Visual Elements
• Functional Elements
• Types of Web Design: Adaptive vs. Responsive

Are you looking to create a website? Get started with Pagecloud for free! You can publish a one page website at no cost with access to Pagecloud's powerful design features, and unlimited draft pages. Sign up for a free website today !

Designers look for inspiration everywhere. Having an idea of the overall look and feel of your website can help you choose a tool and begin to conceptualize your website layout. Here are some of the best sites to help get your creative juices flowing: 

• Web design inspiration
• Site Inspire

Check out our blog post for more tips on finding inspiration here . You can also use browser extensions like Design Sidekick to instantly identify colours and typography on any web page, and save the style for later. 

There are two main ways to design a website: using a desktop app or using a website builder. The tool you decide to use will vary greatly based on your team size, your budget, and the type of site you wish to build and its technical requirements.  

1. Desktop Apps 

Desktop apps require designers to create their design and send it to a development team who can then convert the design to code. The most popular desktop apps for designing websites are Photoshop and Sketch . 

Typically, this is the standard for large and/or complex websites. The benefits of using a desktop app include:

• Designers can focus on the overall look and feel of the website 
• Technical challenges are transferred to developers 
• The website is not limited to the feature set of a website builder

Unfortunately, this process can be expensive and time-consuming because multiple resources, skill sets, and team members are required. 

To avoid involving a developer, it is beneficial to use a website builder to design a website with fewer technical requirements. 

2. Website Builders

There are many website builders on the market today that offer a wide range of features and services. Wix , Squarespace , Webflow , and Pagecloud , are just a few examples of popular website builders that vary in design capabilities, template options, price, and overall editing experience. Be sure to do your research, experiment with free trials, and determine which platform best fits your website needs. 

Website builders create either adaptive or responsive websites, which offer different building experiences. These concepts will be discussed in more detail below so you can best understand which builders will work for you. If you don’t know how to code, becoming familiar with the freedoms and limitations of various website design tools is essential. For example, although Wordpress is the most used website platform, it’s not popular with visual designers because of its limited customization options.  

Before you start building a website, determine your website needs: Are you creating a photo gallery? How often will you update your site? Do you need a contact form? Choose a website builder that can help you effectively accomplish those goals. 

Web Design Elements

When designing a website it’s important to consider both the site’s appearance and functionality. Integrating these elements will maximize the site’s overall usability and performance. Your site’s usability includes elements such as an easy-to-navigate interface, appropriate use of graphics and images, well-written and well-placed text, and a color scheme. Your site’s performance refers to its speed, ranking, searchability, and ability to capture your audience. 

Visual elements

Here’s a quick overview of the elements you should consider while designing your website to make sure everything works well together. Each section will provide tips and tricks to help you get started. 

Written copy

Fundamentally, your website’s appearance and text go hand-in-hand. It’s important to have your content writers and designers work together in order to create a cohesive design with balanced elements. Focus on creating chunks of text (using text blocks) in order to compliment your graphics and images. 

Related: Written Content or Design, Which Comes First?

Choose a font that compliments your overall design. Font should pair with your color scheme, graphics, images, and strengthen the overall tone of your website. Tools like Canva’s Font Combinator can help you find a perfect match for your font. Web design tools like PageCloud even include numerous font pairings within their app.

Related:  The Easy Way to Add Fonts to Your Website (Including Custom Fonts)

Colors are one of the most important elements to consider when designing a website. Keep in mind there are many misconceptions about the psychology of color , and it’s more important to focus on colors that compliment your overall design and tone of your website. Align your color scheme with your brand and the messages you want to convey to your audience. 

(Source:  www.freshconsulting.com )

Related:  Choosing a Color Scheme for your Website that doesn’t suck

How you decide to arrange your content will have a dramatic impact on both the usability and functionality of your site. There are no specific rules to follow when choosing a layout, however, there are a few main principles to keep in mind . Make sure to consider the needs of your target audience and avoid using an overstimulating layout that might detract from the messages you want to convey. 

The use of graphic elements in web design can help seamlessly integrate text and images, and help with the site’s overall appearance. Combining beautiful colors and shapes can help direct the attention of your sites visitors and contribute to your site’s overall flow. 

Related:  The Use of Shapes in Web Design with 30 Examples

Spacing is a key element to creating visually pleasing and easy to navigate websites. Every element in your design will incorporate spacing in one way or another. Appropriate use of whitespace is crucial in creating a design that perfectly balances text, photos, and graphics. Keeping your spacing consistent can help your users navigate your website with ease. The concept of whitespace is definitely a priority of modern web designers. 

Images & Icons

Amazing designs can communicate a lot of information in just a few seconds. This is made possible with the use of powerful images and icons. Choose images and icons that support and strengthen your message. A quick Google search for stock images and icons will generate thousands of options. To help simplify your search, here are a few favourites: 

Free images and icons

Premium images and icons

• Shutterstock (Getty)

Integrating videos into web design is becoming increasingly popular amongst designers. When used properly, videos can help your users experience or understand a message that can’t be properly conveyed through text or image. Keep in mind that like having a TV screen on in a restaurant, visitors’ eyes will be drawn to moving images. Make sure your videos don’t compete with or detract from other important elements. 

Related:  How to use Video Background on Your Website - The Right Way!

Functional elements

These functional elements are imperative to consider when designing your website. A website that functions properly is crucial for ranking highly on search engines, and giving your users the best possible experience. 

Your website’s navigation is one of the main elements that determines whether your website is functioning properly. Depending on your audience, your navigation can serve multiple purposes: helping first time visitors discover what your site has to offer, giving easy access to your pages for returning visitors, and improving every visitor's overall experience. Check out these best practices for more tips on navigation. 

User Interactions 

Your site visitors have multiple ways of interacting with your site depending on their device (scrolling, clicking, typing, etc.). The best website designs simplify these interactions to give the user the sense that they are in control. Here are a few examples: 

• Never auto-play audio or videos Never underline text unless its clickable 
• Make sure all forms are  mobile-friendly
• Avoid pop ups 
• Avoid  scroll-jacking 

There are tons of web animation techniques that can help your design grab visitor’s attention, and allow your visitors to interact with your site by giving feedback. For example, adding “like” buttons or forms can keep your site’s visitors engaged. If you’re new to web design, we’d recommend keeping your animations simple to avoid developer intervention. 

No one likes a slow website. Having to wait more than a few seconds for a page to load can quickly deter a visitor from remaining on or returning to your site. Regardless of how beautiful, if your site doesn’t load quickly, it will not perform well in search (i.e. won’t rank high on Google). 

Top site builders typically compress your content for faster load times, however, there are no guarantees. Make sure to research which site builders will work best for the content you will have on your site. For example, PageCloud optimizes your images to ensure fast loading times for sites with large and/or multiple photos. 

Related:  Google’s Page Speed Test

Site structure

A website’s structure plays an important role in both user experience (UX) and search engine optimization (SEO). Your users should be able to easily navigate through your website without encountering any structural issues. If users are getting lost while attempting to navigate through your site, chances are “crawlers” are too. A crawler (or bot) is an automated program that searches through your website and can determine its functionality. Poor navigation can lead to a poor user experience and site ranking. 

Related:  How to Create a Site Structure That Will Enhance SEO

Cross-browser & cross-device compatibility

A great design should look polished on all devices and browsers (yes, even Internet Explorer). If you’re building your site from scratch, we’d recommend using a cross-browser testing tool to make this tedious process faster and more efficient. On the other hand, if you’re using a website building platform, the cross-browser testing is typically taken care of by the company’s development team allowing you to focus on design. 

Types of Website Design: Adaptive vs. Responsive

Understanding the pros and cons of adaptive and responsive websites will help you determine which website builder will work best for your website design needs. 

You might come across articles online that talk about a whole bunch of different website design styles (fixed, static, fluid, etc.). However, in today’s mobile-centric world, there are only two website styles to use to properly design a website: adaptive and responsive. 

Adaptive websites

Adaptive web design uses two or more versions of a website that are customized for specific screen sizes. Adaptive websites can be split into two main categories based upon how the site detects what size needs to be displayed:

1. Adapts based on device type 

When your browser connects to a website, the HTTP request will include a field called “user-agent” that will inform the server about the type of device attempting to view the page. The adaptive website will know what version of the site to display based on what device is trying to reach it (i.e. desktop, mobile, tablet). Issues will arise if you shrink the browser window on a desktop because the page will continue to display the “desktop version” rather than shrinking to the new size. 

2. Adapts based on browser width 

Instead of using the “user-agent”, the website uses media queries (a CSS feature that enables a webpage to adapt to different screen sizes) and breakpoints (certain width sizes) to switch between versions. So instead of having a desktop, tablet, and mobile version, you will have 1080px, 768px, and 480px width versions. This offers more flexibility when designing, and a better viewing experience as your website will adapt based on screen width.

(image credit:  UX Alpaca )

• WYSIWYG editing (what you see is what you get) 
• Custom designs are faster and easier to build without code 
• Cross-browser and cross-device compatibility 
• Fast-loading pages  
• Websites that use “device-type” can look broken when viewed in a smaller browser window on a desktop
• Limitations on certain effects that only responsive sites can accomplish

Responsive Websites

Responsive websites can use flexible grid layouts that are based on the percentage each element takes up in its container: if one element (e.g. a header) is 25% of its container, that element will stay at 25% no matter the change in screen size. Responsive websites can also use breakpoints to create a custom look at every screen size, but unlike adaptive sites that adapt only when they hit a breakpoint, responsive websites are constantly changing according to the screen size.

• Great experience at every screen size, regardless of the device type
• Responsive website builders are typically rigid which makes the design hard to “break”
• Tons of available templates to start from
• Requires extensive design and testing to ensure quality (when starting from scratch)
• Without accessing the code, custom designs can be challenging

It’s important to note that website builders can include both adaptive and responsive features. For example, Pagecloud recently introduced a series of features that allow your content to act responsive even though the website itself is still adaptive. 

Adaptive Website Builders 

Wix and Pagecloud are arguably the two best visual website builders on the market today. Both use an adaptive approach, meaning their drag-and-drop and WYSIWYG capabilities are second to none. You can build just about anything without having to write a single line of code. 

Wix has been around since 2006 and has since developed a wide range of features and templates to suit just about every business need. Today, it’s considered one of the easiest tools for beginners. 

Although it’s hard to choose a winner in this category, here are few things to keep in mind: 

• If you’re looking for the most customizable experience, choose Pagecloud. 
• If you’re looking for something really easy and don’t have much design experience, choose Wix. 
• If you’re looking to work with a developer, choose Pagecloud. 
• If you want many template options, choose Wix.  
• If you like shortcuts and the experience found in desktop publishing apps, choose Pagecloud.

As both platforms offer free trials, we’d recommend trying them both before deciding. 

Responsive Website Builders 

Tools like Squarespace offer responsive website builders, however, this means your editing experience is more limited. Creating a fluid responsive website is hard, and without knowing how to code, it is nearly impossible to build unique websites using responsive website builders. 

This is where more complex web design tools, like Webflow and Froont , come into play. Here are some of the pros and cons to consider when looking to adopt one of these tools: 

• Ability to create custom responsive sites without having to write code
• Unmatched control over every element on the page 
• Ability to export code to host elsewhere 
• Complex tools with steep learning curves
• Slower design process than adaptive website builders

E-commerce websites are an important part of website design. Creating an online store that is easy to navigate, informative, and accurately displays your products is crucial to creating the best online shopping experience for your customers. 

If you want to learn more about starting an online store, check out our article for 5 easy steps to creating an e-commerce website!

Next Steps 

Hopefully this article helped you to better understand the essentials in web design. To review, let’s take a look at some key elements in designing a website that is both beautiful and functional: 

1. The user always comes first: user experience should be at the forefront of your design, as your users will ultimately be the ones to determine whether your website is worth visiting. 

2. Choose the best website builder for your needs: ask yourself what your website’s major functions will be, and choose a website builder that will ensure those needs are met. 

3. Balancing visual elements: it’s important to maintain a balance between your text, graphics, multimedia, and color scheme to avoid an overstimulating website that detracts from the messages you are trying to convey.

Now that you’ve mastered the basics in website design, be sure to check out more posts to learn more about types of website builders, design trends, design elements, and much more. 

Robin Gandy

• online store
• website builder

Create your no-code landing page, website, or online store in no time.

Publish your homepage for free, no credit card required.

Product Updates

December Product Update

how to's

The Easy Way to Add Fonts to Your Website (Including Custom Fonts)

Numbers, Facts and Trends Shaping Your World

Read our research on:

Full Topic List

Regions & Countries

• Publications
• Our Methods
• Short Reads
• Tools & Resources

Read Our Research On:

U.S. Surveys

Pew Research Center has deep roots in U.S. public opinion research.  Launched initially  as a project focused primarily on U.S. policy and politics in the early 1990s, the Center has grown over time to study a wide range of topics vital to explaining America to itself and to the world. Our hallmarks: a rigorous approach to methodological quality, complete transparency as to our methods, and a commitment to exploring and evaluating ongoing developments in data collection. Learn more about how we conduct our domestic surveys  here .

The American Trends Panel

Try our email course on polling

Want to know more about polling? Take your knowledge to the next level with a short email mini-course from Pew Research Center. Sign up now .

From the 1980s until relatively recently, most national polling organizations conducted surveys by telephone, relying on live interviewers to call randomly selected Americans across the country. Then came the internet. While it took survey researchers some time to adapt to the idea of online surveys, a quick look at the public polls on an issue like presidential approval reveals a landscape now dominated by online polls rather than phone polls.

Most of our U.S. surveys are conducted on the American Trends Panel (ATP), Pew Research Center’s national survey panel of over 10,000 randomly selected U.S. adults. ATP participants are recruited offline using random sampling from the U.S. Postal Service’s residential address file. Survey length is capped at 15 minutes, and respondents are reimbursed for their time. Respondents complete the surveys online using smartphones, tablets or desktop devices. We provide tablets and data plans to adults without home internet. Learn more  about how people in the U.S. take Pew Research Center surveys.

Methods 101

Our video series helps explain the fundamental concepts of survey research including random sampling , question wording , mode effects , non probability surveys and how polling is done around. the world.

The Center also conducts custom surveys of special populations (e.g., Muslim Americans , Jewish Americans , Black Americans , Hispanic Americans , teenagers ) that are not readily studied using national, general population sampling. The Center’s survey research is sometimes paired with demographic or organic data to provide new insights. In addition to our U.S. survey research, you can also read more details on our  international survey research , our demographic research and our data science methods.

Our survey researchers are committed to contributing to the larger community of survey research professionals, and are active in AAPOR and is a charter member of the American Association of Public Opinion Research (AAPOR)  Transparency Initiative .

Frequently asked questions about surveys

• Why am I never asked to take a poll?
• Can I volunteer to be polled?
• Why should I participate in surveys?
• What good are polls?
• Do pollsters have a code of ethics? If so, what is in the code?
• How are your surveys different from market research?
• Do you survey Asian Americans?
• How are people selected for your polls?
• Do people lie to pollsters?
• Do people really have opinions on all of those questions?
• How can I tell a high-quality poll from a lower-quality one?

Reports on the state of polling

• Key Things to Know about Election Polling in the United States
• A Field Guide to Polling: 2020 Edition
• Confronting 2016 and 2020 Polling Limitations
• What 2020’s Election Poll Errors Tell Us About the Accuracy of Issue Polling
• Q&A: After misses in 2016 and 2020, does polling need to be fixed again? What our survey experts say
• Understanding how 2020 election polls performed and what it might mean for other kinds of survey work
• Can We Still Trust Polls?
• Political Polls and the 2016 Election
• Flashpoints in Polling: 2016

Sign up for our Methods newsletter

The latest on survey methods, data science and more, delivered quarterly.

OTHER RESEARCH METHODS

Sign up for our weekly newsletter.

Fresh data delivered Saturday mornings

1615 L St. NW, Suite 800 Washington, DC 20036 USA (+1) 202-419-4300 | Main (+1) 202-857-8562 | Fax (+1) 202-419-4372 |  Media Inquiries

Research Topics

• Age & Generations
• Coronavirus (COVID-19)
• Economy & Work
• Family & Relationships
• Gender & LGBTQ
• Immigration & Migration
• International Affairs
• Internet & Technology
• Methodological Research
• News Habits & Media
• Non-U.S. Governments
• Other Topics
• Politics & Policy
• Race & Ethnicity
• Email Newsletters

ABOUT PEW RESEARCH CENTER  Pew Research Center is a nonpartisan fact tank that informs the public about the issues, attitudes and trends shaping the world. It conducts public opinion polling, demographic research, media content analysis and other empirical social science research. Pew Research Center does not take policy positions. It is a subsidiary of  The Pew Charitable Trusts .

Copyright 2024 Pew Research Center

Terms & Conditions

Privacy Policy

Cookie Settings

Reprints, Permissions & Use Policy

Naval Postgraduate School

Where Science Meets the Art of Warfare

NPS Researchers Recognized for Modeling Integrated Deterrence in INDOPACOM Region

MC2 Janiel Adames   |  April 22, 2024

Members of an interdisciplinary team of NPS and Naval War College Monterey researchers were recognized for their efforts to develop a series of detailed models supporting a high-interest operational scenario in the U.S. Indo-Pacific Command region.

In recognition of their efforts to advance future force design and the next-generation Joint Warfighting Concept, several researchers from the Naval Postgraduate School (NPS) were recently honored with the U.S. Navy’s Civilian Service Commendation Medal for the development of quantifiable models that relate operational variables and integrated deterrence in a high-interest operational scenario in the U.S. Indo-Pacific Command (INDOPACOM) region.

The awards recognized the collective efforts and outstanding contributions of Associate Chair Brian Greenshields and Associate Professor Tommy Jamison, both from NPS’ Department of Defense Analysis; Professor of the Practice Jeffrey Kline and Faculty Associates-Research Mary McDonald and Stephen Upton from the Department of Operations Research; Department of Defense Management lecturer Dr. Mitchell McCarthy; and numerous other NPS personnel and students. 

Also honored were two resident faculty members from the Naval War College (NWC) at NPS – Dr. Yvonne Chiu, Associate Professor of Strategy and Policy, and Dr. Jonathan Czarnecki, Professor of Joint Military/Maritime Operations. 

Dr. Andy Hernandez, a retired U.S. Army colonel and current Associate Chair for Operations with the NPS Department of Systems Engineering, serves as lead principal investigator on the project.

Initiated in April 2022 at the behest of then-Vice Adm. Stuart Munsch, director of Joint Force Development (J7) on the Joint Staff, the project aimed to develop detailed models encompassing critical variables pertinent to an operational scenario in the INDOPACOM region.

Specifically, the request was for NPS to develop an independent, multidisciplinary academic approach to examine the effects of operational variables on deterrence and to quantify those relationships. The initial study on military deterrence included a combination of problem structuring techniques, systems analysis, campaign analysis, wargaming, computer simulation and experimentation, political analysis, and thorough regional expertise. More than two dozen faculty members and researchers, along with more than a dozen students, contributed to the research effort.

The interdisciplinary team was comprised of experts from diverse fields, including regional security studies, political science, military operations, systems engineering, and computer science. The team was assembled from NPS and the Naval War College, as well as other government and non-governmental institutions.

Chiu served as team leader for the project’s indications and warning, as well as value modeling efforts, and was one of many significant contributors to the project’s success.

“The value modeling and the simulations models prompted some reconsideration and revision of existing DOD doctrine, and generated actionable strategic, operational, and force design recommendations across the relevant operational variables for Joint Staff J7 and INDOPACOM,” noted Chiu. “This project also demonstrates the use and value of this particular multi-method and multi-disciplinary approach to mission engineering.”

Beyond its immediate impact, the project lays the groundwork for future endeavors, particularly in the realm of economic deterrence. 

“Other DOD units have expressed interest in both the project’s results and its tools and methodology,” said Chiu. “So, there will be applications of the results, tools, and methodology for other DOD research and planning projects.”

The project team’s results were presented to multiple offices, including J7, the Navy’s Warfighting Development team (OPNAV N7), and INDOPACOM’s Strategic Planning and Policy Directorate (J5), from July to October 2023. In February 2024, the team presented results regarding “Posture” as an operational variable during INDOPACOM’s Posture Conference. The discussion led the INDOPACOM J56 to make some decisions in its current approach.

Hernandez emphasized the significance of integrating the team’s results into future concepts. 

“The J7 will use these results to inform Joint Force Design and the next generation of the Joint Warfighting Concept,” said Hernandez. “Additionally, the NPS project results prompted J7 to expand the work. While the initial effort was on the military instrument of national power, the work for FY24 and FY25 will develop economic deterrence options … These FY24 and FY25 efforts can greatly contribute to developing INDOPACOM’s theater engagement plan and deterrence efforts.”

The next phase for the project team is the development of functional economic deterrence options (FEDO). This effort began in February 2024 and is ongoing.

“NPS’ emphasis on STEM education alongside its regional and strategic studies education in its own departments and in the resident NWC-at-NPS program provided a central pool of diverse experts who already converse with each other on national security issues,” said Chiu. “This was a solid foundation on which to build their collaboration and broader coordination with other institutions for this project.” 

The recognition highlights NPS’ pivotal role in advancing defense capabilities and underscores the institution’s commitment to excellence in defense research and education.

MEDIA CONTACT  

Office of University Communications 1 University Circle Monterey, CA 93943 (831) 656-1068 https://nps.edu/office-of-university-communications [email protected]

• Skip to main content
• Skip to search
• Skip to footer

Products and Services

Cisco certifications

Get that career in IT. Earn that promotion. Stand out in your field.

A little over 30 years ago, in a routing and switching room at Cisco, a dream was born...

Today, Cisco certifications are the gold standard in IT training. We’ve certified more than 4 million people so far. In the next 30 years, we aim to train over 10 million more people in our pledge to close the IT skills gap and reshape diversity in the tech industry.

of organizations surveyed use technical certifications to make hiring decisions.

of employers believe IT certifications are a reliable predictor of a successful employee.

of employers associate IT certification holders with increased quality and value of work contribution.

Networking Academy is a great start for students

Learn from anywhere, anytime with self-paced courses or take instructor-led courses from academies across the globe. Earn digital badges and prepare for industry-recognized certifications in topics like cybersecurity, networking, and Python.

Certifications for all levels and technologies

Popular certifications.

Cisco Certified Networking Associate (CCNA)

The network is the heartbeat of the digital future, and companies need trusted specialists to manage their systems. With a CCNA certification, you could be the right person for the job.

CyberOps Associate

The cybersecurity field is booming, and so is the IT job market. Be head and shoulders above other job-seekers with a CyberOps certification.

Professional

Cisco Certified DevNet Professional

Prove you have the skills to develop and maintain applications built on Cisco platforms.

Cisco Certified Networking Professional (CCNP) Enterprise

Prepare to configure, troubleshoot, and manage the networks of the largest companies in the world.

Collaboration

Power the dynamic global workforce.

Meet the challenges of today and tomorrow to build and maintain secure infrastructures that boost productivity for a worldwide workforce.

Cisco Certified Network Professional (CCNP) Collaboration

Proves you have what it takes to build the solutions that empower our evolving collaboration technologies.

Cisco Certified Internetwork Expert (CCIE) Collaboration

Become a technical leader by validating your end-to-end lifecycle skills in complex collaboration solutions.

Protect the digital landscape

As the cybersecurity field grows, companies of all sizes need experts to design and run their security operations. From attack prevention to daily threat monitoring, there’s a role for every career goal. Become your organization’s greatest security asset — we’ll show you how.

Cisco Certified Support Technician (CCST) Cybersecurity

A great place to start if you’re new to the security field. This certification validates your skills and knowledge of entry-level concepts.

Cisco Certified CyberOps Associate

Tests the day-to-day, tactical knowledge and skills Security Operations Center teams need to detect and respond to cybersecurity threats.

Cisco Certified CyberOps Professional

Elevates your skills to address nuanced security challenges.

Data Center

Drive the data tech transformation.

Technology advances generate more data than ever before. Optimize the applications and infrastructure that connect what matters most to any business — its people, systems, and data.

Cisco Certified Network Professional (CCNP) Data Center

Proves that you can run the data centers of today and tomorrow. Core technologies include network, computing, storage, automation, and security.

Cisco Certified Internetwork Expert (CCIE) Data Center

Distinguishes you as a leader in data center technologies. This certification validates your skills in the end-to-end lifecycle for the most complex data center network infrastructures.

Get your license to design as a leader in complex network solutions

Show the world you’ve got what it takes be an elite designer of IT solutions.

Cisco Certified Design Expert (CCDE)

Be armed with the breadth of knowledge and skills to navigate the waters of complex IT projects in network architecture and design.

Harness the power of applications and automation

Now more than ever, streamlining network operations is a must for any business. Become a vital member of today’s IT with expertise in all phases of network automation.

Cisco Certified DevNet Associate

Validates that you can automate workflows across network, security, collaboration, and computing infrastructures.

Showcases the skills you need to develop and maintain applications built on Cisco platforms, securely and at scale.

Cisco Certified DevNet Expert

Validates your expert knowledge and proficiency in network automation, programmability, and secure automation tools.

Manage the world’s largest networks

The only constant in IT is change — and enterprise network technologies are evolving rapidly. Stay ahead of the curve by proving your skills in maintaining and managing today’s most complex networks.

Cisco Certified Support Technician (CCST) Networking

Validates your skills and knowledge of entry-level networking concepts and topics.

Cisco Certified Network Associate (CCNA)

Demonstrates skills and knowledge in a broad range of fundamentals for the latest networking technologies, software development skills, and job roles.

Cisco Certified Network Professional (CCNP) Enterprise

Tests your skills in the ever-changing landscape of enterprise network technologies. 

Cisco Certified Internetwork Expert (CCIE) Enterprise Infrastructure

Validates your ability to maximize the potential of enterprise infrastructure solutions. 

Cisco Certified Internetwork Expert (CCIE) Enterprise Wireless

Proves your ability to maximize the potential of enterprise wireless solutions.

It’s time to expand your multicloud expertise

Show the world you have what it takes to deploy, secure, manage, and monitor complex public and private multicloud networks.

Cisco Certified Specialist - Enterprise Network Assurance

Demonstrate your knowledge of network assurance design and implementation leveraging platforms and architecture, data collection, implementation, data analysis, insights and alerts.

Cisco Certified Specialist - Cloud Connectivity

Certify that you can design and implement cloud connectivity, including architecture models, IPsec, and Software-Defined Wide Area Network (SD-WAN) solutions.

Cisco Certified Specialist - Secure Cloud Access

Certify your knowledge of designing and implementing secure architectures, users and devices, networks, applications, data, and more.

Build security and resilience

Secure and protect the on-premises and cloud network infrastructures that organizations rely on.

Cisco Certified Network Professional (CCNP) Security

Proves you can step into any security environment and protect the networks and data that clients rely on.

Cisco Certified Internetwork Expert (CCIE) Security

Proves your skills with complex security solutions.

Service Provider

Propel next-gen networking solutions.

Revolutionize IT infrastructure for businesses worldwide. Stay ahead of emerging technologies, and master strategic network design skills to provide unparalleled services to clients.

Cisco Certified Network Professional (CCNP) Service Provider

Proves your ability to configure, verify, and optimize next-gen service provider IP network infrastructures.

Cisco Certified Internetwork Expert (CCIE) Service Provider

Proves your skills with complex service provider network solutions. 

Additional certifications

Consider additional certification possibilities.

Check out these additional training programs to get certified. You might discover your perfect match!

AppDynamics

Whether you’ve been tasked with implementing AppDynamics software or are responsible for setting up a monitoring dashboard, you’re sure to find certifications that align with your role.

Cisco Certified Technician (CCT)

Cisco Certified Technicians have the skills to diagnose, restore, repair, and replace critical Cisco networking and system devices at customer sites. Technicians work closely with the Cisco Technical Assistance Center (TAC) to quickly and efficiently resolve support incidents.

Cisco Customer Experience

Cisco Customer Experience training and exams prepare you for key roles in services or subscription-based organizations. These exams validate your skills in accelerating time to value and ensuring your customers achieve their business goals by implementing, adopting, expanding, and renewing your software and service subscriptions.

Cisco Meraki Solutions

Cisco Meraki Solutions are sweeping the world, with over 2.5 million active networks in more than 190 countries. But who can run these new networks? You can. The Cisco Meraki Solutions Specialist certification validates your ability to design, implement, and operate Meraki technologies.

Land your dream role

Whether you’re interested in servers and hardware, network security, or software development, your dream role is out there - and a certification can help pave the way.

In-demand roles in tech

Network engineer.

Apply a range of technologies to connect, secure, and automate complex networks.

Systems engineer

Be the expert behind any project that optimizes systems for an organization.

CyberOps analyst

Continuously assess network security and look for ways to ensure security measures are well-planned and in place.

Showcase your unique skill set

Every professional- and expert-level exam now earns a Specialist certification. Specialist certifications help to showcase your unique skill set by validating your expertise in the areas that matter to you, from Enterprise to DevNet and everything between.

Certification Success Stories

Ccna moved elvin up the career ladder.

"Passing that CCNA exam triggered a chain of events I could never have predicted. First, I was a student, then a teacher, then a Cisco instructor, and I eventually became a Cisco VIP"

Elvin Arias Soto, CloudOps engineer

CCNA, CCDP, CCDA, CCNP, CCIE

Certifications give Kevin instant credibility at work

"People always want to know who they're talking to. They want to know if you’re qualified. Certifications give you instant credibility."

Kevin Brown, CyberOps analyst

CCNA, CyberOps Associate

Ben made a career change with a Cisco certification

"I chose to pursue Cisco certifications because I knew it would put me in the best position to start a career in networking."

Ben Harting, Configuration Engineer

Engage with a vibrant learning community of peers and experts

The Cisco Learning Network Community is more than just an online platform - it’s your global study group. Connect with peers, learn from experts, and access a wealth of resources that empower your learning journey.