How to design a website — a step-by-step tutorial.

Adobe Experience Manager Sites allows you to create your own web pages with ease, whether desktop or mobile focused. Before you can begin creating your website, you’ll need to have a design that you can follow. In this guide we’ll cover everything from deciding on your website’s purpose and identifying your target audience to designing, choosing a platform, and crafting wireframes.

In this guide:

• Decide what your website is for and what you want it to achieve.
• Define your website’s target audience and what they need from it.
• Choose a website platform to build your site.
• Plan your website’s structure and layout with a sitemap.
• Define page types and develop wireframes for each one.
• Create and gather your website content — copy, imagery, graphics.
• Design your website’s structural and visual elements for UX.
• Review your website and its contents for accessibility.
• Test and launch your website.
• Monitor site performance using analytics tools and iterate.

Before you can make decisions on the design of your website, it’s important to focus on why you’re designing a site. Think about who will visit your site, as this can help inform decisions later down the line.

Start by thinking about what you want your site to do. For example, are you a retailer trying to reach new customers, or are you more concerned with sharing information about your nonprofit? It’s common to have multiple reasons for building a site. If this is the case, consider building a page to suit each purpose.

Common websites include:

• Ecommerce website
• Event website
• Nonprofit website
• Travel website
• Business website
• News website

Once you know the type of website you want and the purpose behind it, you can start to think about the design of your webpages.

In addition to your website’s purpose, your target audience will dictate the design of your webpages.

Knowing your audience comes with a variety of benefits. It allows you to tailor your message and your website to the people you want to speak to and direct them to the right channels.

Understanding your audience can also make it easier to know their pain points and main concerns — something you can address on your site. Tailoring your content to your customer’s needs allows you to build strong relationships, increasing customer retention, advocacy and loyalty.

Website builders and content management systems (CMS) are tools that can help you design, publish, and customize your website. Using a website builder or CMS speeds up development, with prebuilt solutions and templates that streamline processes.

Selecting the right platform or CMS is a critical step in website design. You should evaluate each platform based on factors like ease of use, customization options, scalability, and available templates.

Features to consider when choosing a website builder platform.

When selecting a platform to build your site, look for:

• Quick site creation
• Ease of use on both mobile and desktop devices, and pages that load quickly
• A content management system that allows you to build a common shared environment
• Content insights on your platform
• Project workflows
• A website builder or CMS that aligns with your budget
• Versatility

Website builder platforms to consider.

Here are the pros and cons of some of the leading platforms:

• WordPress. One of the most popular platforms for designing a website because of its flexibility. It’s easy to use if you stick to the basic elements, but more complex functions may require a developer.
• Wix. Known for being intuitive and easy to use with a library of templates, built-in SEO features and helpful support options.
• Squarespace. A favorite among people in creative fields, Squarespace is known for its high-quality, award-winning templates.
• Adobe Creative Cloud. Creative Cloud provides a free website builder, Adobe Express, which allows you to create a single webpage quickly and easily. Learn how Deloitte used Adobe Creative Cloud to make an impact with content.
• Shopify. For those running an online store, Shopify helps you build an ecommerce website with extensive sales features that let you tap into different channels, and manage inventory.
• Adobe Commerce. Also focused on the online shopping experience, Adobe Commerce uses artificial intelligence (AI) and integrations with other Adobe products to help you build highly personalized customer experiences. The drag-and-drop interface is easy to use, and Commerce supports managing multiple channels, brands, and geographic locations. See how Coca Cola increased their revenue and conversions with Adobe Commerce.

A solid structure is essential to any website and ensures that both users and search engines can navigate the site effectively. Website navigation, or being able to find the right page, is an important part of the user’s experience and prevents visitors from feeling frustrated exploring your site.

Single page layout.

A single page layout is exactly what it sounds like. Instead of having multiple pages on a website, a single page layout puts everything on one scrollable page. This format works best when websites don’t have too much information to share.

Multi-page structure.

Multi-page websites are the most common type found online. They will typically have a homepage, with links to other pages spread across the site. The multi-page structure is useful for sites that contain a lot of information and want to have multiple purposes.

Grid-based design.

A well-organized grid lets users easily scan on-page content and interact with the site. It can also help maintain consistency across different screen sizes.

F pattern and Z pattern.

Eye tracking software has shown that people generally scan websites in an F or a Z shaped pattern. Content designers will often try to prevent scanning and instead encourage readers to engage with all the text.

Your site’s layout will also depend on what makes the most sense for your goal. You should make it easy for users to quickly find the most important information on the page. Here’s a closer look at how you would lay out the sites we looked at earlier.

• Online stores. An online store could have a homepage featuring products that visitors may be interested in — like Amazon.com. Or you could use a page that mixes products with editorial content — like Nike.com.
• Portfolio sites. Professionals in areas like photography, graphic design, and marketing often create portfolio sites to showcase their work. A photographer’s portfolio site might just be a gallery of images, while a marketing agency might share case studies with a mix of text and images.
• Business websites. Business sites should be organized in a way that clearly communicates the value that the business provides. Businesses should also consider how to encourage users who visit the site to make a purchase or fill out a lead capture form.
• Event pages. Event pages should clearly communicate the important information that most people are looking for.
• Blogs. Blogs need to be organized in a way that users can find the newest or most popular content on site quickly, while also communicating what the site is about to new readers.

The next step in designing your website is to create a map of the pages you need to build. This could be a list, or it could be a visual depiction of the pages with lines to indicate how they are connected to each other.

Mapping out your website ensures that you include all the important pages and information. This is a good time to review your goals and apply them to specific pages in your map.

Start with a homepage with clear navigation links to other pages. It’s also important to create a contact page with details on where people can connect with you. You could also consider an FAQ page or a creative 404 error page. The pages you include will depend on your purpose.

Pages almost every website needs to have:

1. Homepage. Your homepage is likely the most important page on your website. Include a prominent call to action (CTA) on your homepage that encourages users to engage with your site.
2. About. The about page should share your company’s mission, background, team members, and unique value proposition.
3. Contact. This page should provide visitors the information they need to get in touch with you or your customer service team.
4. Product page. A product page provides detailed information about an individual product or service being offered.
5. Blog. Your blog page will typically display a list or grid of your latest blog articles published on your site.
6. FAQ. Rather than having your team answer the same question multiple times, you can publish an FAQ page to answer your customers’ questions.

Once you have the foundations and structure of your website, you can start adding content.

The first pages you create will typically be the pages we discussed above, but the content you’ll need will depend on your site’s purpose. Your content could include images, text, logos, videos, and more.

Ensure each page has a clear purpose.

Using your site map, think about what information potential customers are seeking when they visit. Each page should have a specific goal.

Write in plain English and avoid complex jargon.

Compelling content is the main component of any successful website. Craft original and engaging content that communicates your message clearly. Your content should be relevant, concise, and easy to read quickly.

Break up page content with headings and bullet-points.

Using headings, bullet-points and other formatting styles can break up large amounts of text and make it much easier and quicker to read.

Edit copy and imagery to meet brand guidelines.

This is also a good time to utilize your brand guidelines and make sure your voice and images are consistent with your brand.

Use original photography or high-quality stock imagery.

It can be tempting to use stock photos on a new website — especially if you don’t have images of your own — but this makes your site less likely to engage your audience.

Examples of the types of content on different websites.

• Online stores. For ecommerce sites, it’s important to give users plenty of product info and high-quality images because they can’t see and feel your products in person.
• Portfolio sites. A portfolio site will likely present a mix of visual media and text content.
• Business websites. Business websites will use a range of content types such as testimonials, product information, or blog posts.
• Event pages. Event websites might share photo galleries from past events, promotional graphics, or text content.
• Blogs. Traditionally, blogs were a text-based platform, but today’s blogs share photo and video content, animations, infographics, and more.

While every site is different, here are some elements you need to consider as you create a positive user experience on your website:

• Site architecture. To make your site easy to navigate, your pages should be organized and linked in an intuitive way. Visitors should be able to find the most important pages on your site quickly in the navigation bar or through links on your site pages.
• Navigation menu. Your navigation menu should include links to the most important pages on your site organized in a logical way. Consider using categories or groups to avoid your menu getting cluttered. Your menu also needs to be responsive so that it works properly on all devices.
• Colors. You can use a color wheel to create a harmonious color palette to use on your website. As a rule, you should limit your color scheme to three colors — a primary that you use 60% of the time, a secondary that you use 30% of the time, and a tertiary color that you use 10% of the time.
• Fonts. Like colors, you should select fonts that align with your brand guidelines. You also need to prioritize fonts that are legible — even on small screens.
• Header and footer. Your header should help users clearly identify your website with your logo and the navigation where they can find links to important pages on your site. Your footer should include contact information, social media links, and a CTA.
• Motion. While moving elements on your page can be engaging and help keep users on your site longer, you should use animation sparingly. Too much movement on your site can cause slow load times or distract users from the content that matters.

The visual design choices you make on your site play a significant role in shaping visitors’ impressions about your brand. Having a clean, polished aesthetic will portray your brand as professional and trustworthy, while a cluttered, inconsistent look could cause users to go elsewhere.

Accessibility on your website is important. Regardless of a visitor’s needs, they should be able to navigate your site comfortably and complete tasks. There are several things you can do to make your site more accessible. We explore them below.

How people use your website.

While most users will use a mouse to scroll through your site, and will view it with default settings, not everybody will. You should consider the following things:

• Some visitors will use a keyboard instead of a mouse to navigate your pages
• Some may change the browser settings to make your content easier to read
• Those with visual impairments may choose to use a screen reader to ‘read’ or speak the content out loud
• Others may use a screen magnifier to enlarge parts of their screen
• Some may rely on voice commands to navigate a website

Content structure.

For visitors who use a screen reader, the heading structure can help them make sense of where they are on a page, and how paragraphs relate to each other. Using HTML headings such as H1, H2, and H3 can be extremely useful.

Keyboard-only users.

For those who use a keyboard only, it’s important they can interact with the site. Consider the average interactions of a typical user and think about how you can make this work for keyboard users too.

Images and media.

One important thing to consider with accessibility is the use of alt text for images and media. Alt text isn’t typically shown on a site but can be read by screen readers and is used to describe what an image or media contains.

Color and contrast.

When designing your website think about the color of fonts and backgrounds. Some colors work better together than others, especially if visitors are visually impaired or are color blind. Text and backgrounds should contrast, ensuring text shows up clearly on the page. Likewise, don’t rely on color as the only way to explain things.

Moving content.

Moving content on your site, whether gifs, videos or animations, should have play, pause and stop functions that are simple to control. Likewise, if content flashes or blinks, it should have a ‘disable’ function.

Testing your website before launch ensures functionality, speed, security, and usability. It’s important to thoroughly test your website regularly to prevent issues from impacting user experience like broken pages or links.

Functionality testing.

Few things annoy visitors like websites that don’t work. Before you launch, check everything functions as it should, whether that’s links, navigation menus, buttons, dropdowns or forms.

Mobile responsiveness testing.

The majority of people who access the internet do so through their cell phones, so it’s important that your site is tailored to both traditional web browsers and the various mobile platforms.

Site speed and performance testing.

Patience on the internet is short, so your website needs to load in a matter of seconds. You can check how fast your site loads using tools such as the Google PageSpeed Insights tool.

A/B testing.

A/B testing is a useful way of trialing alternative options and seeing which works best for your audience. You can test everything from images to layout.

Usability testing.

Usability tests or user testing is the act of monitoring the use of your website to identify issues or complications. Often done before a full launch, it’s a great way to check your website functions as intended.

Once your website is live, you can begin reaping all the benefits, including the opportunity to collect information about how it’s performing. That information is precious, and you’ll need it to continually optimize and maintain your website.

Track your site’s performance through web analytics.

Most platforms have built-in analytics to measure the performance of your websites, and you also have the option to connect your site to Google Analytics to track specific metrics like page views, the time users spend on each page, conversion rates, and bounce rates.

This data can help you know how people are moving through your website and which pages need to be improved, including those that could use better on-page SEO. The more attention you pay to your analytics, the more you’ll learn about your audience and what works for them.

Refresh and monitor your site through site maintenance.

Maintenance is also an important part of designing a website. Links and keywords change over time and design trends do too, so you can’t simply create a website once and let it run without regular upkeep. Checking links and images, updating keywords, monitoring your site’s loading speed, and adding or removing content on a regular basis will keep your site feeling fresh and relevant.

Analytics and maintenance practices are powerful tools that allow you to not only troubleshoot but also improve and scale your website as demand requires. Staying on top of your website performance will help keep you in tune with your audience and position you to make smart, agile business moves when the time is right.

Getting started.

Now that you’re equipped with the knowledge and guidance provided in this article, it’s time to embark on your website design journey. Take inspiration from successful websites, but let your creativity shine through.

Adobe Experience Manager helps you create and manage your own websites so you can keep your audience engaged with personalized web experiences. Create experiences for multiple channels, customize templates, and update content all from a single platform.

Learn more about how Experience Manager can help you create your own site for your business.