But, most websites haven\u2019t been optimized from a design perspective. <\/p>\n\n\n\n
But let’s take a closer look. <\/p>\n\n\n\n
Why is design so important? Simple really. <\/p>\n\n\n\n
It takes just 50 milliseconds<\/a> for a new website visitor to form an opinion about your site.<\/p>\n\n\n\n People are judging your website within fractions of a second of landing on it. The first impression determines whether or they like your site and if they\u2019re going to stay or leave. <\/p>\n\n\n\n 94% of first impressions are design-related.<\/p>\n\n\n\n Beyond the visual appeal, web design has a significant impact on the performance of a website as well. <\/p>\n\n\n\n Web design has an effect on conversions, branding, and the credibility of your business. <\/p>\n\n\n\n That\u2019s why well-designed websites are so successful. If your web design has been optimized for UX, visitors will convert and return in the future. <\/p>\n\n\n\n For those of you who are getting your feet wet with web design, this guide is perfect for you. <\/p>\n\n\n\n Whether you\u2019re creating a new website from scratch or revamping your site\u2019s existing design. <\/p>\n\n\n\n If you’re learning how to become a web designer, we provide you with web design tips and best practices that set you up for success. <\/p>\n\n\n\n When you think about web design, most people automatically jump to the visual elements of a website. But before you focus on colors, images, themes, or page layouts, you need to get your site structure right. <\/p>\n\n\n\n What is website structure?<\/p>\n\n\n\n In short, site structure determines how your website is connected. It dictates how your home page and other main pages lead deeper into other pages on your site. <\/p>\n\n\n\n Optimal site structure<\/a> is based on hierarchy, starting with the homepage at the top. It will look something like this:<\/p>\n\n\n\n Why is this important to web design?<\/p>\n\n\n\n If you strip away all of the other design elements (graphics, typography, whitespace, etc.), a well-designed website is all about site structure.<\/p>\n\n\n\n This component will have the most significant impact on user experience. <\/p>\n\n\n\n When people land on a website, they expect things to be found in a certain way. Site structure is all about the user. It\u2019s about creating a logical hierarchy of pages in a way that makes sense to the navigation. <\/p>\n\n\n\n For example, if you have a website about sports equipment, you wouldn\u2019t put \u201cbaseball bats\u201d or \u201cgolf tees\u201d as a main top page leading to subtopics about \u201cfootball\u201d or \u201csurfing.\u201d That doesn\u2019t make any sense. Instead, \u201cbaseball bats\u201d would be a subtopic of the \u201cbaseball\u201d page. <\/p>\n\n\n\n Site structure falls within the technical scope of website design. In addition to improving the user experience, it\u2019s also excellent for SEO purposes. So once you get the site structure right, then you can focus on other design elements. <\/p>\n\n\n\n The homepage is the backbone of your website; everything starts here. <\/p>\n\n\n\n Every homepage must be optimized for conversions. <\/p>\n\n\n\n Sometimes people get so caught up in designing a website, they lose sight of their goals\u2014getting traffic to convert. <\/p>\n\n\n\n To build a high-converting homepage, you need to leverage tools that will tell you exactly how visitors are navigating on your website and where they\u2019re getting stuck. This will allow you to make data-driven design changes. <\/p>\n\n\n\n The Crazy Egg heatmap tool<\/a> is the best way to do this. <\/p>\n\n\n\n Heatmaps will help show you exactly where you should place certain website elements. <\/p>\n\n\n\n Without these tools, your web design is just guesswork. It\u2019s like throwing a dart and putting your CTA button wherever it lands. What are the chances that your random guess was the most optimal position for design elements? It\u2019s very unlikely. <\/p>\n\n\n\n Use Crazy Egg to get visual reports about your homepage. Run A\/B tests to make sure that all of your conversion elements have been properly optimized. From content placement to copy, images, CTA, colors, and more, this tool will turn your homepage into a conversion machine.<\/p>\n\n\n\n To get started, check our step-by-step guide for how to create a heatmap online for free in less than 15 minutes<\/a>. <\/p>\n\n\n\n Consumers are constantly being bombarded with advertisements. In fact, the average consumer<\/a> is exposed to 5,000 ads in 24 hours. <\/p>\n\n\n\n With such a marketing overload, people have learned to just drown them out and ignore the majority of this exposure. So trying to be the loudest brand in the room to seek attention and stand out from the crowd isn\u2019t enough. You must draw consumers in with magnetic branding. <\/p>\n\n\n\n Position your business in a way that attracts people. Create a physiological connection between your brand, your audience, and their experiences. <\/p>\n\n\n\n Web design and branding go hand-in-hand. It\u2019s crucial that you design a website that represents your company\u2019s branding strategy, which will draw people to your business. <\/p>\n\n\n\n Something as simple as your company logo and the color scheme on your website can have a significant impact on your brand\u2019s magnetic power. So you need to keep this in mind as you\u2019re designing each element of your website, which we\u2019ll discuss in greater detail shortly. <\/p>\n\n\n\n This is a common question that I hear all of the time. Is it more important to focus on website copy or design? <\/p>\n\n\n\n The reality is this; both of these components matter equally. <\/p>\n\n\n\n Focusing all of your efforts on one and neglecting the other is a recipe for disaster. A great design is useless if the copy isn\u2019t written well. The best copy in the world won\u2019t matter if the design stinks. <\/p>\n\n\n\n Both copy and design will have an effect on user experience, conversions, branding, SEO, and the ultimate success of your website. <\/p>\n\n\n\n With that said, it\u2019s easier to design components of your website around its copy. It\u2019s much more difficult to try and plug-in text to a predefined design.<\/p>\n\n\n\n So always write your copy first. Then create your design around that copy. <\/p>\n\n\n\n Now that you have a background on some general web design best practices, it\u2019s time to take a look at some of the specifics. <\/p>\n\n\n\n I\u2019ve narrowed down the top nine most important website elements for beginner designers to focus on. For each one, I\u2019ll give you some tips on how to design them properly. <\/p>\n\n\n\n The site menu is the blueprint for user navigation. Your menu should echo the site structure, which we talked about earlier. That\u2019s why it\u2019s so important to get your site structure right ahead of time. <\/p>\n\n\n\n Limit the number of items in your top-level navigation menu. Less is more. Depending on who you ask, most experts will tell you that a high-converting menu should have no more than 5 or 7 options. <\/p>\n\n\n\n Why? It all falls back on user experience. <\/p>\n\n\n\n According to a recent study, users say that simple navigation is the most important factor in the design of a website. <\/p>\n\n\n\n If your menu has dozens of navigation options, your visitors will be overwhelmed. They won\u2019t be able to easily find what they\u2019re looking for, which will cause frustration and bounces. <\/p>\n\n\n\n In order to convert, visitors must click on your call-to-action button. Think of your CTA as your \u201cmoney button\u201d as you\u2019re going through the design process. <\/p>\n\n\n\n People who land on your website should be able to spot the CTA immediately. If it\u2019s hidden at the bottom of your pages, buried between other site elements, or camouflaged with your background, people won\u2019t convert. <\/p>\n\n\n\n Remove clutter surrounding your CTA, so it\u2019s easy for people to see. Use a heatmap tool to get data-driven analytics for the best CTA placement. <\/p>\n\n\n\n Consider placing your CTA on a sticky navigation bar<\/a> at the top or side of the screen. So when visitors scroll on the page, it remains in plain sight at all times. <\/p>\n\n\n\n A signup form or opt-in form can be another component of a CTA. <\/p>\n\n\n\n In some cases, this could be a singular form field asking for an email address. In other instances, the sign-up form could be asking for more information, including a name and billing information for a subscription service. <\/p>\n\n\n\n Whatever the case might be, make sure to design your signup forms as simple as possible. The more form fields you have, the lower the conversion rates will be. <\/p>\n\n\n\n For longer signup forms, put the fields into columns so the entire form fits on the screen without any scrolling required. <\/p>\n\n\n\n All of the visual components of your web design need to blend well, including the images. <\/p>\n\n\n\n While images are an important piece of web design, make sure to use them sparingly. Try not to have more than one image on the screen at the same time. This can overwhelm the visitor since they won\u2019t know where to look. As the visitor scrolls down the page, a new image can appear with more relevant and supporting content.<\/p>\n\n\n\n Each time you insert a new image into your design, consider its level of importance compared to the surrounding elements. Is the image just used for aesthetic purposes? Or should it be a focal point of the page?<\/p>\n\n\n\n Check out this example from the Bluehost<\/a> home screen. <\/p>\n\n\n\n The design choices here are excellent. While the image isn\u2019t necessarily related to the brand or product itself, it serves a purpose in terms of aesthetics. <\/p>\n\n\n\n But that\u2019s not all. Notice the gaze of the woman\u2019s face. It leads you directly to the copy on the left side of the screen.<\/p>\n\n\n\n If the face were staring straight at you or gazing in the opposite direction, the effect wouldn\u2019t be as impactful. A second or third image somewhere on this page would be too overwhelming. <\/p>\n\n\n\n Headlines are the best way to separate different areas of your design. Depending on the type of page you\u2019re designing, headlines can serve multiple purposes. <\/p>\n\n\n\n Don\u2019t make your headlines too long. From a design perspective, this can pose a problem for other elements on the page. Use size, spacing, and contrast to draw attention to your headlines. <\/p>\n\n\n\n Headlines aren\u2019t meant to tell the full story. When designing for headlines, plan to accommodate supporting text in the same area. <\/p>\n\n\n\n This piggybacks off our last point. Headlines are just one component of your copy. But you\u2019ll need to write more text that is impactful while still making sense for your design.<\/p>\n\n\n\n Check out this example of copy from a Lululemon<\/a> product page. <\/p>\n\n\n\n The headline is short but clearly shows the visitor what this section of the page is about. While the headline is the focal point, the supporting copy tells the rest of the story. <\/p>\n\n\n\n Typography is an important, but often overlooked, element of website design.<\/p>\n\n\n\n By definition, typography is the art or practice of arranging letters to make written text legible, readable, and appealing when displayed. Elements of typography include things like typeface, font, alignment, weight, size, and kerning. <\/p>\n\n\n\n Look back at the sample we used in the previous section about copy. The typography of the header and text below are both very different. When you look at an example like this, it might seem obvious to arrange your typography this way. But you\u2019d be surprised how many beginner web designers make mistakes here. <\/p>\n\n\n\n Your typography must be legible while always establishing a hierarchy. Size and placement are two of the easiest ways to create a hierarchy with typography. <\/p>\n\n\n\n The best web designs are simple. Don\u2019t feel obligated to fill every section of the page. Use blank space to your advantage. <\/p>\n\n\n\n The key to using blank space effectively is by finding ways to draw attention to the most important sections of the screen. <\/p>\n\n\n\n Here\u2019s a simple example<\/a> to showcase my point. <\/p>\n\n\n\n The design on the left side is a bit more cluttered. The CTA is crammed between the headline and the supporting copy below. <\/p>\n\n\n\n Now, look at the design on the right. All of the content is identical, but spacing was added around the CTA. This design choice helps your CTA breathe. It stands out more, draws attention, and will ultimately have a better impact on your conversions. <\/p>\n\n\n\n Color scheme is another website design element that many people consider an afterthought. Does it matter if your website is blue vs. purple? Green vs. red? Black vs. white?<\/p>\n\n\n\n In short\u2014yes.<\/p>\n\n\n\n The color of your website has a direct correlation to your branding strategy. Refer back to what we talked about earlier in terms of creating a magnetic brand. <\/p>\n\n\n\n Different colors make people feel a certain way. Other colors are difficult to read. I\u2019ll give you a couple of extreme examples to illustrate my point. <\/p>\n\n\n\n What would you think about a law firm website that had a pink and purple color scheme? Or what would you think about any website that had yellow text on a red background?<\/p>\n\n\n\n Pink and purple work for some websites, but they generally don\u2019t convey professionalism for a lawyer. Yellow and red can also work well together (think McDonald\u2019s); but the contrast can make text difficult to read. <\/p>\n\n\n\n These are the types of design choices that you need to keep in mind when you\u2019re choosing a color scheme and layout for your website. <\/p>\n\n\n\n The design of your website will have a direct impact on conversions. But with so many elements to take into consideration, how can you possibly know which is the most optimal design for you?<\/p>\n\n\n\n What will happen to your conversions if you move the CTA button? Do headers convert better on the left or right side of the screen? Are your images in the right place?<\/p>\n\n\n\n The list of questions is never-ending. The truth is this; no website will ever be 100% perfect. But there is always room for improvement.<\/p>\n\n\n\n Heatmaps allow you to make data-driven design choices. That\u2019s why it\u2019s always in your best interest to use a heatmap tool before redesigning your website<\/a>. <\/p>\n\n\n\n Once you see a data visualization report, you\u2019ll have a better understanding of which design elements can remain the same and which ones need improvement. If you\u2019re on the fence about what changes to make, the best heatmaps have additional tools for things like A\/B testing. <\/p>\n\n\n\nGetting Your Site Structure Right<\/h2>\n\n\n\n
![\"\"](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2020\/05\/11173542\/Site-Structure-1024x461.png\")
<\/figure>\n\n\n\nBuilding a High-Converting Homepage<\/h2>\n\n\n\n
![\"\"](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2020\/05\/11173528\/Crazy-Egg-Heatmap-1024x464.png\")
<\/figure>\n\n\n\nHow to Design a Magnetic Brand<\/h2>\n\n\n\n
Copy vs. Design: What Matters More?<\/h2>\n\n\n\n
Perfecting 9 Website Elements<\/h2>\n\n\n\n
1. Menus<\/h3>\n\n\n\n
![\"\"](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2020\/05\/11173539\/Menu-1024x955.png\")
<\/figure>\n\n\n\n2. CTA Buttons<\/h3>\n\n\n\n
3. Signup Forms<\/h3>\n\n\n\n
4. Images<\/h3>\n\n\n\n
![\"\"](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2020\/05\/11173515\/Bluehost-1024x579.png\")
<\/figure>\n\n\n\n5. Headlines<\/h3>\n\n\n\n
6. Copy<\/h3>\n\n\n\n
![\"\"](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2020\/05\/11173533\/Lululemon-1024x411.png\")
<\/figure>\n\n\n\n7. Typography<\/h3>\n\n\n\n
8. Blank Space<\/h3>\n\n\n\n
![\"\"](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2020\/05\/11173545\/Whitespace-1024x698.png\")
<\/figure>\n\n\n\n9. Color Scheme<\/h3>\n\n\n\n
Increasing Conversions From Your Website Design<\/h2>\n\n\n\n