An artist’s sketch, a hairdresser’s updo, or a photographer’s portrait—it’s no surprise that these turn out better than our own doodles, hairstyles, and selfies. Is the same true for websites?
Not necessarily. With a little know-how and a few tricks of the trade, you can use some of the same techniques that professional designers use, and take your own website from good to great. What’s the secret? Read on for 10 design tips that the pros use when they build Jimdo websites.
1. Choose 1-2 accent colors, and stick with them
When it comes to using color on a Jimdo website, the sky’s the limit. But you don’t need an extensive color palette to get good results. What many designers do is choose just a few select colors and stick with them throughout the website.
On many professionally-designed sites, you’ll see that they start with a neutral or predominantly white website, black text, and then use one or two accent colors to really pop. Here are some examples of Jimdo websites that have stuck with this approach:
A few places you might use this accent color:
What color do you use? It might be a color you already have in your logo or existing branding, or even a color that you pick up from your background image.
If you decide to go with a bold accent color, the trick is to keep the other colors on your site pretty minimal, like white, black, and gray. Just like if you were to wear a really bright shirt, you’d probably pair it with black pants or jeans (at least we hope—but hey, everyone’s got their own taste).
2. Choose 2-3 fonts
Good designers know how to balance fonts that are easy to read with fonts that are more creative or expressive. Usually, you’ll see that they choose one font that’s more decorative or has more personality for their headings and other accent areas, but they stick to easy-to-read sans serif fonts like Open Sans for the body of their websites.
They might use a third, complementary font for navigation menus, but they usually keep this very simple and easy to read.
3. Invest in a logo
If you’re serious about professionalizing your website, a logo is a great visual place to start. It sends a signal that you’re a legit, established business, and it also provides the basis for the colors and fonts you might use throughout your website.
We recommend going with a professional rather than designing your own logo. They can design something creative but also make sure that it’s high-quality enough to use in lots of different contexts. They also have the design software to give you a logo with a transparent background, and in different colors (full color, white, black, and gray are a good place to start). We recommend starting a design contest with 99designs to get an original logo customized just for you.
If you don’t have a logo yet, no problem. Just leave the Logo Area on your website empty. Don’t try to squish a photo in there—it won’t look very good!
4. Use white space
If you’re familiar with graphic design, you may have heard the term “white space” thrown around, and how important it is. White space is basically referring to the space around your elements. It doesn’t literally mean the space has to be white, just empty. The idea is that instead of cramming lots of content into a web page, it’s much better to give each piece some breathing room, in the form of some empty “white” space around it.
Designers know that websites with a good amount of white space are much easier for people to read and navigate. The lack of clutter is inviting, and it helps people prioritize what to look at. Interestingly enough, white space also sends a signal that a brand is more sophisticated and elegant—similar to how a discount clothing store will have its racks stuffed with clothing, while a high-end boutique will only have a few items on each rack.
These two Jimdo websites provide good examples of using “white” or empty space well:
How can you put more white space on your own website? Check out the Columns and Spacing Elements. Use a Spacing Element to add vertical empty space on your website between elements. To create empty space on the sides of an element, use a Columns Element and leave some of the columns empty.
5. Don’t use too much text
How much text are web visitors willing to read? The answer is: not much. Online attention spans are short, and people want to get the necessary information right away. If they can’t find it, they’ll go elsewhere. If a visitor comes to your site and just sees big blocks of text running the full width of your page, it sends the message that your website is going to be a chore to get through.
The first step is to really prioritize your information and remove anything that isn’t essential. Can you get your message across in one paragraph rather than two? Can you eliminate some pages from your website to shorten your navigation menu?
Once you’ve cut what you can, arrange the text you do need in a more welcoming way. Insert pictures and Heading Elements, and surround your text with white space. Break up any large text blocks into Columns Elements instead, which are easier to read than a full-width Text Element (that’s why newspapers have columns of text).
6. Use icons
Ready-made icons are an easy way to add more visuals to your website without needing to actually be a graphic designer.
You’ll see icons put to use on a lot of professionally-designed websites. They break up text, add visual interest and color to a website, and they help reinforce the messages in text blocks (that people might not actually be reading, see above).
To do the same on your own website, first you need to find some icons. There are a ton of sites out there that provide professionally-designed icons for free, and in many cases you can customize the colors to match your site. Check out this post for a list of our favorites. Make sure you’re choosing icons that go together. If you have something unique in mind, you could also schedule a 1-1 project with a designer from 99designs who can create the exact icons you need.
Once you have the icons, upload them to your site in a Photo Element. Use Columns to get them to align correctly with one another.
7. Line everything up neatly
If you were going to a job interview, you’d straighten your tie, iron your shirt, and comb your hair. The same wisdom applies to creating a professional website. Good designers take their time to make sure that everything on a website is lined up correctly and neatly. A little bit of effort here goes a long way towards creating a clean, polished look.
The secret weapon in alignment is the Columns Element. Use it to place elements side-by-side and be sure that they are aligned correctly without needing to eyeball anything.
In many of the websites in this post, you’ll see icons, text, and columns working together. In the example below, I’ve created three columns. Each column has an icon uploaded as a Photo Element, a Small Heading below that, and then a Text Element.
Another secret of the best-designed websites: they aren’t afraid to cut their text to fit exactly where they need it. In the example above, the text in each column is the same length, making each column the same length too. Nothing wrong with a little creative editing to get everything to fit nicely.
Another alignment tip: Keep your blocks of text left-aligned rather than centered. Though it may be tempting to center your text because you’ve centered everything else, like your headings and icons, humans actually have an easier time reading text that has an even lefthand margin (like text in a book or newspaper). It looks neater too because your lines of text won’t be “ragged” like they would be if you centered them.
8. Invest in some good photos, and crop them to the same size
Photography can have perhaps the biggest impact on your website, overall. Good photos, used well, can take a ho-hum website and make it look truly great.
Designers start with high quality photographs that have a similar look and feel. Then, they crop them to be the same size and proportions before uploading them to the website. By doing this, they know that each photo will line up nicely with the other ones.
If you’re struggling to find good photos, check out some of our favorite resources for royalty-free stock images. If you need product photos, investing in the help of a professional can make a huge difference.
Once you have your photos, spend a little bit of time resizing them and cropping them, using PhotoShop or a free program like Pixlr. If you know you’re going to want three photos in a row, for example, crop them to be the same size and shape. Then upload them into a Columns Element, and they will fit together perfectly.
For more details on how to crop and optimize images, check out How to Optimize Website Images for Better Design and SEO.
9. Develop a consistent layout and use it on every page
In all of these tips, one word shows up again and again: consistency. You can apply this principle to your page layout too. For example, if you start your About Page with a large heading, a horizontal line, and a 20 px Spacing Element, make sure you do the same on all of your pages. This will create a consistent, smooth experience as your visitors move from page to page.
Try to use a similar layout on each page, with similar size photos and button placement. For bonus points, make sure you are using capitalization consistently across all your pages. For example, make sure your navigation items are consistently capitalized like Home, About, Store, Contact Us rather than Home, about, Store, Contact us. The same goes for your Heading Elements and Button Elements.
10. Choose the right background image
We love the full-width backgrounds on many websites. To use them well, you have to think through how your text and logo will appear on top of that background image. For example, if your logo and header text are centered, it’s a good idea to make sure that the focal point of the background photo isn’t also centered because then it will just be blocked by the logo and text.
In the example below, notice how wedding photographer (and Jimdo product manager!) Alina Atzler chose beautiful background images that are offset, so they don’t interfere with her centered logo.
Want a little more leeway when it comes to lining everything up correctly? Choose a landscape or nature photo or background image that’s more abstract. That way you can make sure that no one’s face gets blocked. It’s also a good idea to double-check that your website text stays legible over the photograph you have in the background. Adjusting the font color or opacity of your content area in the Style Editor can help.
If I could sum up the lessons from these professionally-designed sites, I’d do it this way: Don’t use too much stuff. Keep it neat. And what you do use, use consistently from page to page. Sounds simple, but it’s an approach that people spend years mastering, and that you can practice and improve at over time. Any other website design tips you’d share with other Jimdo users?