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.
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:
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 grey. 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).
They might use a third, complementary font for navigation menus, but they usually keep this very simple and easy to read. Read this post for more information on perfect font pairings.
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 grey are a good place to start). We recommend starting a design contest with 99designs to get an orginal 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!
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.
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).
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.
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.
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.
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. Check out this post for more proofreading tips that will polish up your site.
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?
Content Editor at Jimdo
Maggie joined the team to craft the voice of Jimdo for all products and marketing channels. In her previous work, she edited for organizations covering the environment, cities, and sustainable business. When she's not adding serial commas, you can find her camping with her husband, cooking, and reading New Scientist.