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.
Technical 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“).
WIX website templatesFinally, mobile-friendly makes for a better user experience. And ultimately, it’s all about the user. They’re the ones opening their wallets to keep your business afloat. So what’s a non-designer to do? First, see if your site is considered mobile-friendly by Google with their mobile-friendly test. It’s also a good idea to check it yourself by going to your site on your phone. If it doesn’t score well or look good, you have some work to do. Mobile-friendly test Yay, we’re mobile-friendly! Besides hiring a designer, your best bet is to change your site’s template. This is the easiest and most affordable way to make your site mobile-friendly and responsive.
Here are some mobile-friendly templates for popular site builders: Mobile-friendly WordPress templates Mobile-friendly Shopify templates Mobile-friendly BigCommerce templates Mobile-friendly Magento templates Template Monster for multiple platforms Fast Website Load Speed According to surveys done by Akamai and Gomez.com, nearly half of web users expect a site to load in 2 seconds or less, and they tend to abandon a site that isn’t loaded in 3 seconds! That doesn’t give you much wiggle room. But if you’re still not convinced, get this: Roughly 79% of online shoppers who have trouble with website performance say they won’t return to the site to buy again, and around 44% of them would tell a friend if they had a poor experience shopping online. In other words, if your site speed sucks, you lose. Big Time. So how do you ensure a fast load speed? Try this: Like the mobile-friendly test, Google also has a page speed test. However, some believe it’s not very accurate, so it can’t hurt to also try Pingdom and GT Metrix.