STUDENTS
arnold on Sep 21, 2019
***Updated 10/22/2023***
Coming up with an attractive website design can be tough, especially if you are creating a website from a template. This guide is going to cover the most important elements of design that a website needs to look both attractive and modern. The information is going to cover what is currently trending and all the elements we talk about will be simple enough so that anyone can incorporate them.
Large Hero Images
The first design element we will cover is the header. The header is the very top of your website, and usually includes a menu, and is the first thing a website user will see when they visit your website. Your header has one main purpose and that is to let your website visitor know what your website or business is about. A website visitor should be able to figure out the purpose of your website in two seconds or less simply by looking at your header.
Your header needs to be clear and it needs to be attractive. This can be accomplished with a large hero image (or a hero video) that goes under a clearly written message.
Below are some examples of hero images that I find attractive and clear.
EXAMPLE 1:
EXAMPLE 2:
EXAMPLE 3:
Unique and Large Typography:
Another major element of modern and attractive websites is Typography that is Large and Unique. In the header examples above one of the main things that helps them look attractive and stand out is large fonts and the use of different weights and colors within the fonts. In order to break up the information in the header and make it easier to read, all the headers either have two fonts or variations of one font.
Before you start designing a website, you need to choose a font pairing that matches your vision for the website. There are a few good websites that help you to pick fonts that work well together.
2. Fontpair.co is a good way to browse font combinations and it shows what they look like in a short paragraph.
Clear Call To Action
Another important element of a modern and attractive website design is to have a clear call to action. A call to action is a button or a link on your website that guides a visitor to tell them what to do next.
The first thing you need to consider when designing a page on your website is to identify the page objective. Do you want to get a website visitor to call your business? Then you have to make a very simple and obvious call to action for them to find your number and be able to call you. Do you need them to sign up on your email list? Then you should have a contact form directly in your page and it needs to be easy and obvious for them to submit their info.
Going back to the three hero images above you can see that all of them have the ability to take an action above the fold in the header. The strongest call to action comes from the first hero image where the website user can get a free website analysis directly from the hero images.
Call To Action Netflix Header Example:
Call To Action From the Middle of a CrossFit DNR Page That My Company Designed:
Good Use Of White Space (Negative Space)
An attractive and modern website has to have a good use of White space in the design. White Space is also called “negative space,” and it is the space left between other elements of a page. The negative space does not necessarily have to be white.
The most common mistake I see with students when designing their first website is the poor use of white space. Sometimes there is too much white space that makes portions of the website look empty. And sometimes there is too little white space which makes the website look cramped. The example below from 99designs shows the difference in a design when white space is used appropriately.
The image below is the entire homepage of a local CrossFit gym. There are a lot of problems with this homepage but it also offers a glaring example of how not to use white space. The negative space in the menu bar at the top is uneven which makes for a menu that is hard to read.
The section below the header has one image that is off centered to the left with no text to support it. The white space to the right of the image makes the website look incomplete. In the footer of the website, the website designer used three different sized and different shaped images which makes the bottom of the website look sloppy and incomplete.
Here is another portion of a BBQ website that has an disproportionate use of white space which makes the website look incomplete:
As a contrast to the poor use of white space in the CrossFit and BBQ websites above, the image below shows a website that makes good use of white space. This website has some really nice image sections and to break it up they have some white background sections that make good of white space so the dark image sections don’t get overwhelming.
Use Images/Videos and Keep The Text Short!
Websites have evolved over the years going from text heavy to image and video heavy. Website visitors don’t put as much cognitive effort into browsing as they used to so they will often skip sections of the website that have too much text.
As a result, one rule I always have is to keep paragraphs one or two sentences at the most. Anything longer and most people won’t put the effort in to read it.
Because of this website designers need to use more images, videos, graphics, etc in order to tell the story of the website and help guide visitors through the website.
The quality of a website will only be as good as the images. You can’t take poor quality, grainy photos and make an attractive and modern website. Invest in professional photos if possible and if not, then spend a little extra on higher quality stock photos.
Here is an example that shows how a professional photo can carry the header of a website by itself:
And here is an example that shows how a mosaic of food images look great on a page while portraying the quality of the product to the website visitor:
User Experience (UX)
UX encompasses all aspects of the website user’s interaction with the website. A website needs to look attractive and modern but not at the expense of the experience of the user. There are a lot of websites that look great and have a ton of special effects, but when it comes to finding the information you need, it can be almost impossible.
In order for a website visitors to have a good experience there needs to be several elements including some we already talked about (White Space. Typography, etc.)
First a user needs to be able to find the information they need quickly and easily. A clear and easy to use menu is part of good UX but before you even start designing you have to do your research about what information needs to go into the homepage and the rest of the website.
As discussed before, the amount of words needs to be minimized and there needs to be a good use of Headings and Sub-headings so that website visitors can easily navigate the website and find the information they are looking for.
You also need to limit distractions and useless information. Stay clear of popups unless you have an explicit reason for using them. Don’t add information to your page just to make it longer. Everything on the page needs a purpose. Do you really need blog posts on your home page? What other information may be useless for website visitors?
Lastly, your website needs to load fast and run without errors. This is covered in detail in other articles on this website.
Strong But Limited Color Palette
Your website is going to need to need to have a well thought out color scheme. Most modern and attractive websites have three dominate colors and two accessory colors. The five colors you use on your website are called a color scheme or a color palette.
If you have a logo or existing branding your color scheme will probably come from this. If you are creating a website from scratch then you may need to put some time into coming up with your color scheme.
There a ton of websites that go in depth in picking color schemes. Some of my favorites are shown below.
This CANVA tutorial will show you how to put color palettes together to create more attractive designs.
Graphic Mama shows websites with attractive color schemes and the five color codes the website used:
Canva has a blog post that does something similar as Graphic Mama:
Canva also has a program where you can upload an image and it will give you the color codes based on the image.
Lastly, if you want a website that helps you to put a custom palette together then you should check out Coolors.co:
