What do you want people to think when they see your site? Edgy, modern, satirical, professional, something else? You can convey those things through your design. Just take a look at the psychology of color – different colors convey different emotions. In fact, a study titled “Impact of color on marketing” found that up to 90% of snap judgments made about products can be based on color alone, depending on the product. Beyond color, you also have font choice. And yes, there is a psychology behind font choice as well. Ted Hunt from Crazy Egg made this cool infographic about it: Psychology behind font choice Regardless of the font you choose for your logo and branding efforts, you should always choose readability over emotional feel for your main body font. Typically that means sans serif fonts, as they read the best on the web. One last tip on font choice: Don’t use more than two fonts in your design. Pick two that compliment each other and stick with those for your entire brand.
Key Takeaway: Choose no more than three colors and two fonts to represent your brand. Write down the fonts and color codes and use them consistently across your entire site and marketing efforts. Finding, Designing, and Using Images Imagery is a major part of website design. And yet so many people do it wrong. Great images add value to the visitor. They help explain a key point and give the eyes a break. They even help sell your products and services. For example, if you’re an eCommerce site, you want your product photos to be high-quality and show tons of different angles.
Which of these flowers would you rather buy? Website imagery (Source) If you even saw the image on the right, you’d probably leave and never come back. The middle image is better, but still not great. The one on the left makes you trust the website. Just be careful, because bad images actually reduce readership. Remember design principle #1: Great design has a purpose in mind. Any image that doesn’t have a purpose is a bad image. Period. If you needed more incentive, page load speed (which I discuss in section two), is extremely important to SEO and usability. Having too many big images slows your site down.
So, how do you find, design, and use images on your website? We wrote about some tools to make great images in this post. Go check it out. But to give you some inspiration, here are a few examples of good images you can use: Charts and graphs of data points Screenshots High-quality stock photography (choose wisely) Custom designs and vector graphics Professional (or at least well-done) photography Key Takeaway: Use images, but do so with a purpose in mind. 3 Examples of Beautiful Websites Knowing what makes a good website is easier when you see real-life examples.
Here are a few I love: KlientBoost is completely devoted to amazing website design. Their site oozes beautiful visuals. Klientboost Website Design CoSchedule is a site I look up to as well. Their whole site is based on great formatting and consistent branding. CoSchedule design example Expedia: Visit Britain received a developer award for its design. expedia-great-britain You can also see more examples that actually won awards for great design at Awwwards and Webby Awards. (Note: I also give a list of website templates with great visuals in the next section on responsive design, in case you’re like me and can’t code.) Enough about visuals. Let’s get a little geekier.
WIX website templatesTechnical Website Design (AKA “Geeky Stuff”) Technical web design includes things like: Responsive design and mobile-friendliness Fast load speeds Search engine optimization (SEO) SSL encryption Site architecture & navigation If any of these things made you say “What?”, don’t worry. I’ll explain them all in laymen’s terms. Responsive Design and Mobile-Friendliness
According to Smashing Magazine’s post Responsive Web Design: What It Is And How To Use It: “Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation.” Responsive Web Design In other words, a responsive site is one that plays well on all screens and devices. It’s mobile-friendly and caters to the device you’re viewing it on. If you think that sounds complicated… it is. But it’s important. In fact, smartphones now account for over 51% of all online traffic, and tablets came in at just over 12%. And that number is growing. Also, Google cares a lot about mobile-friendliness. In fact, they now place a priority on ranking mobile-friendly sites (an update called “Mobilegeddon“).