Source: Shutterstock Blog

Whether you’re brimming with creative ideas or you’re not sure where to start, this quick-start guide for web design beginners can help you to create website layouts that are both beautiful and functional.

No matter how much design expertise you have, a brand new website is the equivalent of a writer’s blank page — there’s so much you could do that it’s hard to even start. So before you start playing with the Lorem Ipsum, read over these 10 rules of website design. Even if you know exactly what you want, we promise you’ll find something helpful in these guidelines. Scroll to the bottom of the article to discover our tried-and-tested three-step process on how to design a website — from favicons to web fonts, site maps to hex colors — and pick up pro tips on designing for ecommerce, businesses/agencies/firms, portfolios, or blogs.

All together, these guidelines and tips will help you keep visitors on your page for longer and lead them seamlessly from point A to point B. 

---

10 Rules for Designing Website Layouts That Work

Before you get started with building your website (eager beavers scroll down to discover a failsafe build process), consider these ten rules as useful guidelines for making your website layouts not only more stylish, but more effective too.

Rule #1: Avoid clutter

Layouts cluttered with a diverting array of images, buttons, and do more than make layouts look unbalanced. They also prevent visitors from reaching the next step you want them to take, whether it’s landing on your contact page or adding a product to their basket. Remember, white space is your friend.

Rule #2: Prioritize design above the fold

The “fold” refers to the bottom border of the browser*. Any content below the fold can only be reached by scrolling, which means the user needs to be compelled to do that in the first place! Always place key content and information above this line.

*Note that the fold is shorter on mobile sites, giving you even less space to convince the visitor to keep scrolling. Make it count. 

Rule #3: Keep Hick’s Law in mind 

Hick’s Law states that increasing the number of choices will increase the time it takes for an individual to make a decision. Make sure your visitor’s attention isn’t drawn elsewhere on the web by limiting the options at each stage of the user experience. One call-to-action button is much more effective than lengthy menu options.  

Rule #4: Encourage scrolling, not clicking 

Scrolling allows for a seamless continuation of your web layout. Compare it to clicking, which can add loading time to the experience. Scrolling’s also more intuitive on mobile.

Above all, scrolling is lazier than clicking, meaning users stay on a site for longer. A recent Crazy Egg study proved this when it showed a growth in conversion rates of 36% by switching from clicking to scrolling.

Rule #5: Keep photos authentic and natural

Did you know that web visitors “tune out” artificial photos? Overly-posed shots of model business teams might seem like a good fit for a corporate site, but more authentic images of you or your team members will connect with viewers. True to life, natural stock images are a great alternative. In fact, we’ve already curated the best categories of stock images for your website, so that you can easily choose a look that fits your brand.

Rule #6: Use visual cues 

Using images or graphics to direct users, such as photos of people looking towards a button or arrows pointing towards a menu option, is a tried-and-tested technique for guiding visitors to important actions. Obvious? Maybe. Effective? Definitely.

Rule #7: Type should be legible first, stylish second

Have you ever landed on an achingly-hip website only to find your neck craning while you attempt to read an illegible italic serif? There are plenty of beautiful web fonts, but many of them don’t belong on websites.

Legible, clear-to-read text offers no distractions and ensures key information is readable on a range of screen sizes. Clean, geometric sans serifs or chunky display types are the best fonts for websites, compared to serifs or italics.

Rule #8: Color is psychological

Color is an instant way to inject your website layout with a particular mood and personality. What’s more, the right color choice can also influence how users respond to your site. Did you know that orange can communicate good value to customers? Or that blue is associated with intelligence and imagination (making it a perfect fit for creative agencies)? Read up on the psychology of color, and make the color choice that will give your visitors the right impression.

Rule #9: Design for mobile first

Most first-time web designers imagine their website being viewed on a generously proportioned desktop, but in reality around half of all browsing sessions worldwide are on mobile devices. For some sectors the proportion of mobile users might be much higher.

Many pro web designers would advise to design your website layout with mobile in mind first, but at least giving equal attention to both will ensure you have a site that is effective and beautiful across a range of devices. 

Rule #10: Design for everyone

The World Health Organization (WHO) identifies that at least 2.2 billion people globally have a vision impairment or blindness, which means that 28.5% of the world’s population have some form of vision impairment. Improving color contrast on your layout, such as pairing black text with a white background, and opting for large-scale sans-serif fonts are two simple ways to help make your site design as accessible and inclusive as possible. 

---

How to Design a Website: A Practical Guide for Beginners

With these ten handy tips for creating beautiful website layouts in mind, you’re ready to start designing your website.

Creating a website can be fun…but it can also be a little frustrating if you’re not sure where to begin. Here, discover our tried-and-tested process for designing a website from a practical perspective. 

Consider this your build plan for creating any professional website design. Bookmark this page and see your website take shape in no time.

Step 1: Establish the Identity of Your Site

Every website needs a uniform look and style which acts as a sort of brand identity across all the pages of your site. This not only gives your site a polished and professional look, but can also help to keep vistors engaged as they move across the site. If pages look markedly different from each other, this can negatively affect the user’s experience and shorten session time, so it pays to spend time on refining the overall identity of your site.

An effective site identity includes the following:

• Site icon
• Logo
• Typography
• Color scheme

Keep reading to learn how to incorporate each into your website identity.

Site icon

An icon is an identifying graphic for your website, used across WordPress.com in widgets and as the bookmark or home screen app icon when saved to a browser or phone. A small version of the icon, a favicon, appears next to the website title on a browser tab. 

Site icons are square, at least 512 by 512 pixels, and usually saved as PNG, GIF, or ICO files. Favicons can be smaller, but need to be at least 196 by 196 pixels for the high-res specs used by Chrome on Android devices. 

It’s important to upload your site icon with the correct dimensions and file type so that it displays seamlessly. Usually, the theme you’re working with will tell you this information, but as a rule of thumb it’s best to upload icons as PNGs instead. There are a lot of rules about web image display that you can learn more about in this breakdown of common file types.

Logo

A logo is a more comprehensive version of the site icon. For example, a site icon might just use a simple visual graphic, whereas a logo might include some text, such as a company name, in addition to a graphic. 

Logos need to be sized appropriately to work effectively across different devices. The main thing to be aware of is that some devices, such as Macs and other Apple products, use Retina Display technology. This technology displays more dots per inch than older devices, at around 300 DPI, resulting in clearer, crisper images.

To ensure your logo looks as good on standard displays as it does on retina displays, the easiest thing to do is to double the size of your retina logos. So, for example, if your website CMS prompts you to upload a logo sized 100 by 100 pixels, you should upload a 200 by 200 pixel version.

If you’re starting a new brand or business, use this as an opportunity to optimize your logo for responsive web design. This will account for all the places on the web (and in print) where your logo will appear, each needing a different format and levels of complexity. One option is to create a flexible type logo that plays with your brand’s letterforms to make logo variations for any type of media.

Regardless of how you design your logo, it’s important to know how to save the file correctly. Logos should always be saved as vectors so that you can revisit it and make changes, like resizing it or tweaking the colors. When you’re ready to upload to your website, make sure you save the logo file as a PNG so that is displays crisply and without pixelation.

Web Fonts and Typography

As with print design, typography for websites also follows many of the same guiding principles. It’s important to establish a hierarchy of type on your website, and these will be defined by H-tags. “H” stands for “Header,” with H1 defining the most important and largest text style, H2 the next largest and most important, and continuing down the scale to H6.

You will need to find web fonts that are legible when set at any H size. As a result most web designers favor ultra-clear sans serifs for smaller headings, experimenting with serifs, display styles, or italics only for H1 or H2 text. 

You can install a web font onto your website, which means that visitors will download the font when they access the site, allowing you to closely specify the style of the typography on your site. Google Fonts provides a huge range of free open source web fonts, but you can also discover more free and paid-for web fonts on a range of font stores. Scroll through our edit of 101 of the best free fonts on the web to find one you like.

It’s arguably more important on websites than print media to focus on making text more legible. This is because mobile devices can be small as well as the emittance of light from screens making readability more difficult for visually-impaired readers.  You can also improve legibility by increasing the size of fonts, using fonts that are clearer to read (such as sans serifs), and increasing color contrast between font color and background.

We’ve accounted for web display factors in our selection of the best fonts and fonts combinations for your website design, so you an easily pick a header and body font to implement in your identity.

Color

Color is sometimes neglected until the end of the build process, but it’s a powerful tool for not only unifying the pages of your website but also for its ability to affect the mood and perception of users. 

For websites, colors are defined as HEX codes. HEX codes are a coded version of an RGB color, in the format #RRGGBB (#RedRedGreenGreenBlueBlue). (If you’re really curious, learn how HEX Colors work.) Not sure how to convert your CMYK or RGB swatches to HEX? HTML Color Codes allows you to easily find and convert color codes using the online color picker and color chart tools.

You might have an existing brand color palette to use, but if not, you can use the theory of color psychology to help inform your color decisions. Different colors have strong psychological effects on viewers, making your choice of color palette a potentially significant way of keeping users on the page for longer.   

Discover how different colors can affect visitors’ perception of and response to your website: 

• Neons
• Orange
• Blue
• Green
• White

Keep in mind that your brand colors – likely the colors in your logos – don’t have to be the only colors on your website. In fact, if your logo is bright orange and yellow, you might want to use these colors only as accents; a bright yellow background will strain viewers’ eyes and make it hard to read any text. Like typography, color choices impact the legibility of your site and has a huge effect on the user’s experience.

To see a few color palettes that work for the web, check out our handpicked color schemes for websites. These not only take into account UX factors, but also offer unique combinations that can help distinguish your site.

Step 2: Build the Homepage of Your Site

There’s no place like home. This is certainly true for websites as well as in life. 

The homepage, or landing page, is the focal point of your website­. It’s usually the first point of contact for visitors arriving from search engines, the page at the center of the site map, and the page that visitors are often referred back to after browsing other pages. The homepage should set the stylistic tone for the rest of the website, as well as direct users to other pages using calls-to-action (such as buttons), visual cues (such as arrows), or menu options. 

A good rule of thumb for the homepage is to abide by Hick’s Law (see golden rule #3, above), ensuring that users are only presented with a limited number of options for how to proceed. 

For example, you might want to encourage readers to scroll down, for which an arrow or call-to-action above the fold can act as a prompt. Want to encourage a click across to a different page? Prominent buttons or menu options should be the focal point of the layout. For search-centric sites, the search bar should be clear, prominent and ideally centered on the page. 

The hero image is the image that dominates the landing page. However, you can replace it with prominent typography, animation, or video if you prefer. The function of this image is to give the user an instant impression of your site, as well as to foster a more immersive user experience. It might make use of a particular color scheme or style to reinforce the visual identity of your site. 

The hero image can also be cleverly used as a visual cue. A distinct area of color or pattern might draw the eye towards a button or, more obviously, a portrait might look or point towards a certain element on the layout to direct the user. 

• Discover the best website-ready images to launch your online presence.

Step 3: Build Templates for Other Pages

So, you’ve created a layout for your homepage and worked out the main directions you want users to take from the home page. Now you should already start to have some of the site map in place. All websites are different and serve different purposes, but generally there are some core pages that all sites need. These include:

• About page 
• Contact page
• Category pages (pages that feed in posts from a certain category, e.g. “Menswear” on a clothing ecommerce site)
• Services pages (for corporate sites)
• Project pages (for blogs and portfolios)
• Product pages (for ecommerce sites)
• News page or Blog post page

If your website has a search function, there will also be a page for search results. 

Design each of these pages to accommodate different elements. A category page pulls in lots of post previews, so it’s likely you will want to base the layout on a Pinterest-style grid with lots of columns and rows. The contact page might need to include a map, as well as phone and address details. The about page might include profile pictures of team members, as well as introductory text. 

Web designers use wireframes to work out how elements should be arranged on different pages of a site. Wireframes are visual guides that represent the skeletal framework of a web page. You can use wireframe software to mock these up, such as Adobe XD or Moqups, use vector software like Adobe Illustrator, or simply draw the wireframes by hand. However you create them, these will function as the basic blueprints for your website layouts. It can also be helpful to note dimensions of elements, such as images and columns on your drawings, to refer back to as you build the site. 

While building your wireframes it’s important to refer back to both the site identity you established (in step one of the build process) and the homepage layout (step two). Both of these will help inform decisions about how you layout and style the other pages. Keep some features consistent across pages, such as the typography, image style, and color scheme. This will ensure your final website design has a unified and consistent look.

• 6 tips for building website wireframes.

For guidance on images, look to the hero image you’ve selected for your homepage. Does this have particular features that could be imitated across other images, such as a black-and-white color scheme or style of portraiture?

Once you’ve selected and edited your images, you will also need to resize them for web use. In Adobe Photoshop, go to File > Export > Save for Web to save your images with specific pixel dimensions in JPEG, GIF, or PNG format. The free online Bulk Resize Photos is also a handy tool for resizing and compressing batches of images if you don’t have access to photo editing software.