Whether you are creating a website for a small business, product, service, or your own portfolio, it is essential to get acquainted with web design basics. There are several key elements to consider, such as the purpose of your website, identifying the audience, design, usability and branding.

Understanding web design basics can help boost your brand or business’s reputation by building credibility and establishing trust with your visitors. Though there are many aspects of web design to consider, we will cover some of the web design basics you’ll need to get started on your website.

Getting started on your website—

Define the purpose

The first stage of creating your website is determining the purpose of your website. Are you creating a digital portfolio, showcasing your business’s services to potential customers, or selling products online? What is the goal of your website? Clarity is key: if users do not understand your website, they will leave. Your website’s purpose should be clear and direct.

Once you establish the intent of your website, the next step is to determine your target audience.

Identify your target audience

Who is your website for? Designing for your intended users is one of the quintessential basics of web design. If you are a product designer looking for a new job, your target audience for your portfolio site would be hiring managers and recruiters. This will help shape what is a priority on your website and how to funnel users into the right place.

To identify your target audience, conduct user research on demographics, location and user goals. Consider looking at competitor websites and their social media pages to analyze who their target audience is and compare them to your website’s needs. Also try to research your target audience and tailor your website’s content and copy towards their needs. This increases their chances of remembering your site.

Razer creates gaming peripherals for computers and video game consoles. Razer’s branding, color scheme, and use of dark imagery all appeal to gamers, who tend to play in darker settings. Through the use of imagery of their gaming products as well as tone in their language, advertising their products’ “unfair advantage,” the company has audibly defined their target audience.

Razer makes concerted efforts to reach out to its audience through its community portal. On your new website, consider including a community section, or at the very least, a contact page.

Make a plan

Now that you know the purpose and audience of your website, it is time to make a plan. Are you creating your website through hiring a developer or trying to figure out HTML, CSS, and Javascript? If you aren’t, do not be discouraged. There are services such as Squarespace, Wix and WordPress that offer no-code ways to build a website that supports desktop and mobile platforms.

Once that’s decided, figure out your budget for web hosting and domain. And decide on when you will launch your site.

Search for inspiration

Generate ideas for your website by seeking inspiration from other sites! If you’re feeling stuck, confused about where to start, or are unsure of how you want your website to look, there are a plethora of websites to satisfy your palette.

You can start by looking at Awwwards, the go-to inspiration source for many different types of designers. They feature dozens of award-winning, dazzling websites. And of course, taking a look at competing businesses and products or portfolios of other artists and designers may also spark ideas for your website.

The landing page of Figgy & Plum, pictured above, is a deliciously tempting example of web design inspiration. It makes me want to eat at this bakery. Your website should inspire your users to take action, whether it is buying a product, generating leads, or contacting you for a job interview.

Design and appearance—

Grids and layouts

One of the web design basics involves designing with a grid. The grid system is a layout based on measurements and guidelines. The grid is made up of columns (designated spaces for content placement) and gutters (the empty spaces between the columns). They break up the page into sections to organize content and hierarchy.

When thinking about grids and layout, it’s important to think of how that will impact your responsive design. This means how your web designs will adapt to different screen sizes. Here are some types of layouts:

• Fixed layouts are static and the container of the website does not move. Sizes are specified in pixels. This isn’t ideal because if a screen gets small enough, the user will have to scroll horizontally

• Fluid layouts use percentages instead of pixels for sizing. This allows for flexible layouts which adjust as you make the window smaller and larger. The one downside is the layout doesn’t know when too small is too narrow.

• Adaptive layouts are grids that have different breakpoints. This means the website will stay the same until the window gets small or big enough that it goes to the next size of the layout design.

• Responsive layouts are a mix of fluid and adaptive layouts. This layout feels like a fluid layout because the screen is adjusting as the user makes the screen larger and smaller, but the layout isn’t based on percentages. Rather it’s having designs for each breakpoint, usually for each screen size available. This means your website will look good in every screen size available.

Visual hierarchy

Your website should combine extensive use of information architecture and a potent visual hierarchy to create a seamless experience for your users. If your website’s information is easily digestible and aesthetically well-structured, it will help your visitors complete their user tasks quicker.

There are many ways to improve your site’s visual hierarchy. Some ways to improve visual hierarchy are to use color and contrast to draw attention to specific text and buttons, to add more negative space around an element you want the user to focus on and to have balance and symmetry in the layout can keep things simple and easy to use.

Understanding reading patterns can also help determine where to put keep information. Research has shown many visitors scan websites in an F or Z pattern. Usually, a user will scan text-heavy pages in an F pattern.

That’s why the most important and relevant information goes on the top left and across the top of the page. Simple landing pages that are less text-heavy are often scanned in a Z pattern. But over time this could change as screen sizes change, or if mobile use becomes the primary device. To avoid this, always keep your user in mind and do research into your users and how they use your website.

Navigation

The basics of creating good website navigation are logical hierarchy, simplicity and versatility. Good navigation is key to helping users find what they need and go where they need to.

There are several types of navigation you might encounter on any website. Some mobile apps and sites will employ a combination of them.

• Top navigation is the most common type of navigation, displayed at or near the top of a website. If you have a lot of pages, you could use a dropdown navigation that expands more options when the user hovers over a menu item.

• Hamburger navigation is the three horizontal bars usually tucked away in the upper right or left corner. When the user clicks on the hamburger icon, the menu will appear. This is a great way to minimize clutter on a website. It’s a common feature on mobile websites or if you want a clean or simple look for your website.

• Footer navigation is at the bottom of the website and has a lot of key information. It might not be the key things you want users to access right away, but they are important in providing support and other key information for the user when they need it. Oftentimes that information includes social media icons, terms and conditions, FAQs and blogs, to name a few.

• Bottom navigation is the same as a top navigation, but it’s just at the bottom. With the rising popularity of mobile usage, there are options for bottom navigation to make it easier for users to click with their thumb. Some websites use a combination of both.

Colors and fonts

Branding is integral to how a user identifies with your website. What kind of image do you want your website to portray? What do you want your visitors to say about it? Branding dictates the answers to those questions. Be sure to pay close attention to the color scheme and typography. Your website’s color scheme and font choices should be consistent with your brand.

Familiarizing yourself with the basics of color theory will go a long way to establishing your brand and your website. Here are some common color schemes using the color wheel to get started:

• Complementary colors are two opposite colors.

• Analogous colors are three colors adjacent to each other.

• Triadic colors are 3 colors that are equally spaced apart on the color wheel.

Typography encapsulates your brand without sacrificing readability. And choosing the right fonts adds to the overall style of your website and brand. Furniture designer Mikiya Kobayashi has an excellent website that mimics his furniture’s aesthetic: clean, elegant, and functional. He accomplishes this mostly through typography, with a bold header and navigational font combined with crisp, thin typefaces.

Make sure to check if your fonts are websafe. This means making sure the browsers support the font. If the font isn’t web safe that could lead to your website’s text not being displayed properly on that browser.

Now that you know where to look, there are just a couple things to keep in mind when picking your font:

• Serif fonts are for headlines: typically serif fonts are used for headlines because they are harder to read at a smaller size. Sans serifs is the better option for body text.

• Keep fonts minimal: Pick a few fonts for your website. The more fonts you use on your website the more cluttered your website will seem! Plus having too many fonts might create stylistic clashes.

Content

The content of your website, which consists of copy, images, videos, and other interactive elements, is the meat of your site. It draws people in and keeps them engaged. It gives your site a sense of purpose and inspires users to take action, whether it is to contact you or buy a product.

Some marketers and web designers try to reinvent the wheel by attempting to stand out from the crowd or heavily focusing on trendy content. Instead, I suggest doing your best to make your content authentic. It should feel like you and true to your brand. Talk about your products, services, case studies, or what you have to offer.

Imagery

Another powerful tool of web design basics is the use of imagery. It can captivate your audience and guide them towards your website’s content.

The below example by DSKY vividly encapsulates the aesthetic of the lager’s brand through imagery. It uses cute, vibrant illustrations portraying a serene, perfect moment in a natural environment. The pictures work together to create a digital mural. This effect invites the visitor to scroll down and engage with the copy and content of the landing page. It is also worthy to note Perfect Moment showcases images of their lagers.

Imagery is a great way to entice viewers so use this tool to your advantage. Bonus points if you include a demonstration, video, or product configurator. Make sure the file sizes of your images are small for better page load times. Your images should have a resolution of 72 PPI, which is the standard for the web. If you must use high-resolution images, consider using thumbnails that link to the original images.

Interactive elements

Interactivity is a fascinating element of web design basics. How will users interact with your site? Adding interactive elements such as the example pictured, will make your website more fun and stand out. It also benefits user engagement. These elements might intrigue visitors’ curiosity, inspiring them to explore other aspects of your website. What hidden secrets will they unfurl?

Interactivity offers an opportunity for users to learn more about your product. Online automobile configurators are a great way for potential buyers to visualize their next car. Interactive elements can provide support and troubleshooting for fixing potential problems. For example, PC manufacturers can provide step-by-step instructions on how to upgrade a desktop computer’s RAM. Implementing interactive elements on your website can save users time, increase engagement, and educate visitors about you, your product, service, or business.

Your website’s user experience—

As a UX designer, I firmly believe usability is the most important aspect of web design basics. It takes time to invest and research into the user experience of your website, but it pays off tremendously. Usability will make or break your website. Users might form an emotional connection towards your site, creating a memorable experience for them. If your website is difficult to use or visitors get lost, they will leave.

Design for desktop and mobile

To reach a greater audience, design your website for desktop, tablet, and mobile devices. Worldwide, mobile traffic has been steadily increasing since 2015. It accounts for over half of all global traffic. Therefore, it is crucial to avoid alienating mobile users. Create a responsive design that adjusts automatically based on device, such as the example pictured below.

Responsive sites automatically adapt to different devices without sacrificing usability or removing elements. Mobile-friendly websites are based on desktop sites, (designed desktop first), which scale down for mobile sizes. Mobile-optimized sites are specifically designed for prioritizing mobile devices.

It is good practice to offer consistent experiences and the same features across multiple devices. There are exceptions, which include mobile-only features such as paying with Apple Pay. Designing for multiple devices ensures your website reaches as many visitors as possible and may also reduce unnecessary clutter.

Accessibility

Your website should be accessible and pass accessibility standards. This helps establish better usability, covering a broad range of users, as well as being inclusive.

There are many tools out there to test color and font for accessibility, such as a color contrast ratio analyzer. Another thing that you could do is to add alt text to images that describe what the image is. This can also help when images don’t load or are broken. Providing captions and transcriptions for audio and video recordings is also another way to create accessible content.

There is a range of accessibility you could do, some websites start with alt text, captions and transcripts. And other websites might provide full accessibility functions, where you can tweak and change your settings. By designing with accessibility in mind, you are maximizing the potential number of visitors who interact with your site. It will also improve the user experience.

Optimization

Optimization is a fine example of the basics of web design. It’s a basic of web design because it’s something you have to keep doing to keep your website up-to-date. And knowing what you need to consider when optimizing your website will go a long way to making your website successful.

There are many different types of optimization: page load, content, SEO, user experience, device optimization, and more. If your website takes a long time to load, your bounce rate will skyrocket. It is not 1999 anymore: visitors will not wait for websites to load. Reducing page load times also makes your website more accessible for those who do not have fast internet connections.

Find the right keywords for your website to improve your SEO. Optimizing your site’s content can boost leads, instill trust, and strengthen SEO. Regardless if your website is for a business or portfolio, optimizing it in multiple ways will bring more visitors, enhance the user experience, and make it more accessible.

Communicate with users

Visitors should always have a convenient way of contacting you or your business. Include a contact page and social media links so they have a means to engage with you, your product, or your services. If you are running a business, offering a contact form can improve relations with existing customers and even land new ones.

Visitors may reach out to inquire about your services, ask questions before purchasing your product, or even seek advice or support. Communication is also a great way to gather feedback and improve not only your website, but your portfolio, product, or anything your business offers.

Ready to build your website?—

Now that you know the web design basics, it is time to put them to good use! From what you need to get started, to key design elements and layouts for websites, to thinking about user experience and usability, these are all the basics of web design that can help you on your way to creating an engaging, successful and inspiring website. Aren’t you pumped to get your website up and running?