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.
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.
Writer Elna Cain’s website is a great example. Above the fold of the landing page, the viewer quickly learns Elna is a freelance writer who specializes in digital marketing and backs it up with her experience, testimonials and results. A user can tell right away she offers copywriting, ghostwriting, and blog writing.
Once you establish the intent of your website, the next step is to determine 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.
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. If you want more information on how to create a website, choose a domain, and web hosting, we got you covered.
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. We also have plenty of inspiring web designs and mockups on display on our discover page. 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.
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:
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.
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.
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:
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. Check out our list of the best web safe fonts.
Now that you know where to look, there are just a couple things to keep in mind when picking your font:
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.
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.
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.
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.
Ensure your website follows the 5 principles of usability: availability, clarity, recognition, credibility and relevance. Make it as easy as possible for users to complete their site goals and tasks. Before launching your website, it is a good idea to perform usability testing. What are the biggest problems users have with your site? Iron out as many issues as possible before deploying your site to the world. NNGroup has a fantastic write-up with over 100 usability tips for your website.
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. Read more about tailoring your website for desktop and mobile readers here.
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 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.
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.
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?
This article was originally written by Alex Bigman and published in 2014. It has been updated with new examples and information.

You can’t forget the importance of the user experience! As soon as someone lands on your site it must be completely instinctive: where to click, how to navigate, where the important information is… If they can’t figure it out they’ll go looking someplace else.
Dane nailed it!
This stuff gives me Ebola x2
I agree with Dane, user experience should not be forgotten when web design is the topic. Creating a functional website is more important than an ornate one. Nonetheless, I like the points raised in this article. Thanks for sharing your insight.
Grid system is getting very common nowadays and I think it’s better to use it due flexibility in the code.
It comes down to the basics. On the path to glory, we don’t give much importance to basics not just in this field. But one has to be in touch with the basics and keep refreshing it. Great guide and this’ll apply even to the Wizs.
Nice post thanks for sharing this. India’s Top Call Center Software.
Improve Your Productivity with Our Best Call Center Software. Get Easy Setup, Integration & Upgrade. 1000+ Happy Clients
Our newsletter is for everyone who loves design! Let us know if you’re a freelance designer (or not) so we can share the most relevant content for you.
By completing this form, you agree to our Terms of Service and Privacy Policy. This site is protected by reCAPTCHA and the Google Privacy Policy and Google Terms of Service apply.
Designers, check out these contests so you can start building your career.
Our newsletter is for everyone who loves design! Let us know if you’re a freelance designer (or not) so we can share the most relevant content for you.
By completing this form, you agree to our Terms of Service and Privacy Policy. This site is protected by reCAPTCHA and the Google Privacy Policy and Google Terms of Service apply.
Our newsletter is for everyone who loves design! Let us know if you’re a freelance designer (or not) so we can share the most relevant content for you.
By completing this form, you agree to our Terms of Service and Privacy Policy. This site is protected by reCAPTCHA and the Google Privacy Policy and Google Terms of Service apply.