If you already have design materials or you\u2019re starting from scratch, here are some tricks to customizing the design of your website.<\/p>\n\n\n\n
Easy ideas to customize your website design:<\/h2>\n\n\n\n- Create a logo with colors that match<\/li>
- Use a pattern or design as a background image.<\/li>
- Use your logo and\/or pattern to create a color theme for your website<\/li>
- Choose icons to add personality and a custom look<\/li>
- Add the same filters on all your photographs<\/li>
- Customize your 404 page and add your logo as a favicon<\/li><\/ol>\n\n\n\n
1. Create your own website logo<\/h2>\n\n\n\n
Logos are important for business brands<\/a>, and more accessible than ever. Even if you\u2019re a solopreneur or you don\u2019t see yourself having a lot of marketing materials, a simple logo can give your website a distinct, polished look.
If you already have a logo, make sure it\u2019s up-to-date and that you have it in the right specifications. For example, if you only have it as a tiny .JPG file, or if it\u2019s starting to look out of date, it\u2019s probably time for an upgrade. Here are our top tips on how to design the perfect logo for your business<\/a>.<\/p>\n\n\n\n![\"An](\"https:\/\/i0.wp.com\/www.jimdo.com/blog\/wp-content\/uploads\/2020\/10\/jimdo-logo-creator-example-1024x469.png?resize=1024%2C469&ssl=1\")
<\/a>With the Jimdo Logo Creator, you can make your own logo in just a few minutes, and adjust it anytime. <\/figcaption><\/figure>\n\n\n\nHere, I used the free Jimdo Logo Creator to create a simple logo using the initials of my sample website. When I\u2019m done, I can download the logo files as .PNGs. The Logo Creator provides me with small and large versions, a favicon, and a solid color version for lots of different use cases. <\/p>\n\n\n\n
Best of all, it comes with a transparent background so I can use it almost anywhere around my website, and on print materials too. <\/p>\n\n\n\n
\n\nDesign a logo that makes your business stand out.<\/h4>\n<\/div>\n\n\n\n\n\nDesign yours now<\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\nWhen you have your logo, it’s just like any other image file on your website. Upload it to your image library and use it in the logo area (next to the top menu), and as a website favicon<\/a>. You can even play around with it as the background of one of your website blocks, like I\u2019ve done here:<\/p>\n\n\n\n![\"An](\"https:\/\/i0.wp.com\/www.jimdo.com/blog\/wp-content\/uploads\/2020\/10\/logo-as-website-background.png?resize=1024%2C545&ssl=1\")
You can use your custom logo just like any other image file, and incorporate it into your website design.<\/figcaption><\/figure>\n\n\n\n2. Choose a pattern or texture for your website background<\/h2>\n\n\n\n
A website background doesn\u2019t have to be a photo or a solid color. By choosing a pattern, painting, or texture, you can give your website a custom look that you carry through your website and business brand. <\/p>\n\n\n\n![\"A](\"https:\/\/i0.wp.com\/www.jimdo.com/blog\/wp-content\/uploads\/2020\/10\/using-website-background-jimdo.jpg?resize=1024%2C545&ssl=1\")
<\/a>There are lots of creative ways to use a background or pattern on a Jimdo website.<\/figcaption><\/figure>\n\n\n\n
For example, here I chose a blue watercolor pattern from the website Lost+Taken<\/a>. I downloaded the free pattern as a .JPG image file<\/a> and then uploaded it to the image library of my Jimdo website. Once it\u2019s in my library, I can use it anywhere that a photo can go, like as the background for one of my blocks.<\/p>\n\n\n\nThere are lots of pattern databases online where you can download a high-resolution website background for free or for just a couple of dollars. Stock photography websites<\/a> have patterns and artwork too. A few tips for finding the right one:<\/p>\n\n\n\n- Make sure it\u2019s a high quality image with good resolution<\/strong>, so that it doesn\u2019t look grainy or pixelated on large screens. If it\u2019s too small, you don\u2019t want to have to stretch it or tile it. (Here\u2019s a more in-depth explainer on background images<\/a>).
<\/li>- Always double-check the right way to credit an image<\/strong>. Some images are free, some are free for personal but not commercial use, and some require that you give the artist credit on your website. Others ask for donations. Do your best to support the artists who make these!<\/li><\/ul>\n\n\n\n
3. Use color codes to match website colors <\/h2>\n\n\n\n
One design trick I love is to use color codes to make your colors consistent. This gives your website a branded, professionally designed look. <\/p>\n\n\n\n
What\u2019s a color code? <\/strong>It\u2019s a unique code (technically a \u201cRGB\u201d or \u201chex value\u201d) that identifies the exact color you\u2019re looking at. A color code usually looks something like RGB (26, 119, 127) or #71D4FC.<\/div>\n\n\n\nOnce you have a color code for your favorite color, you can use it in other places too, like in online photo editors and graphic design programs<\/a>, when you make infographics or social media images, icons, or images with text over them. <\/p>\n\n\n\nFor example, when I created my DP logo above, I made sure that the blue color matched the blue in my watercolor background. Here\u2019s how:
1. I used an online color picker tool<\/strong> (in this case Colorzilla<\/a>). By hovering my cursor over part of the picture, the tool will tell me both the RGB and the hex code of the color I\u2019m seeing.<\/p>\n\n\n\n![\"A](\"https:\/\/i0.wp.com\/www.jimdo.com/blog\/wp-content\/uploads\/2020\/10\/pick-color-from-image.jpg?resize=855%2C398&ssl=1\")
A color picking tool helps match colors by telling you the exact color code you’re seeing.<\/figcaption><\/figure>\n\n\n\n2. Once I have the color code, I can use it in the Logo Creator to make my logo match<\/strong>. Just click on the little pencil icon over the color swatch and enter the hex code you want to match.<\/p>\n\n\n\n![\"A](\"https:\/\/i0.wp.com\/www.jimdo.com/blog\/wp-content\/uploads\/2020\/10\/pick-logo-color.png?resize=1024%2C488&ssl=1\")
Choose a custom color for your logo, and copy-paste the color code to get the perfect match!<\/figcaption><\/figure>\n\n\n\nFor more detail, check out this step-by-step tutorial on color matching and using color pickers<\/a>.<\/p>\n\n\n\n4. Set the color theme on your website<\/h2>\n\n\n\n
Now that I\u2019ve got a background image and a logo that match, I can also set the color theme for my entire website. To do this, I open the Design settings, then upload the blue watercolor image as a starting point. <\/p>\n\n\n\n
From there, the smart system will generate a color palette to go with it. I can turn the color up or down (from muted to colorful) depending on the look I want. In this case, I choose muted because I\u2019d like to keep the color theme simple to make the blue stand out. <\/p>\n\n\n\n![\"A](\"https:\/\/i0.wp.com\/www.jimdo.com/blog\/wp-content\/uploads\/2020\/10\/choosing-color-theme-website.jpg?resize=1024%2C545&ssl=1\")
<\/a>Jimdo can generate a color theme from any image you choose.<\/figcaption><\/figure>\n\n\n\nTo apply this to real life, let\u2019s say you already have a .PDF file of a brochure that someone made for you. You can use an online color matcher (sometimes called an \u201ceyedropper\u201d tool) to tell you the exact color that\u2019s in it, and then use this color code in other places, like in your logo and website.<\/p>\n\n\n\n
Tip:<\/strong> If you use Jimdo Creator, this technique works similarly. You would change the colors using the Style Editor,<\/a> and you have more control of what colors you want to use in different places.<\/div>\n\n\n\n5. <\/strong>Use icons to add graphic personality<\/h2>\n\n\n\nJust like with website backgrounds, there are a lot of websites that provide free or affordable icons for download<\/a>. In many cases, you can use your color code (see above) to customize the color of the icon. You can also make your own icons, either from an online design program or with a free background removal tool<\/a>.<\/p>\n\n\n\n![\"An](\"https:\/\/i0.wp.com\/www.jimdo.com/blog\/wp-content\/uploads\/2020\/10\/using-website-icons.png?resize=1024%2C511&ssl=1\")
Find icons you like, and use them just like images on your website. Here’s an example. <\/figcaption><\/figure>\n\n\n\nIn this example, I found a free icon online (this one is from Flaticon) and used it as a graphic on my website\u2019s 404 page<\/a>. The colors match my website color scheme, and the compass adds some visual interest to a page that could just be a boring error message.<\/p>\n\n\n\nNote:<\/strong> Just like with free website backgrounds, make sure you credit your icons appropriately based on the site’s rules. You can often skip the credit if you purchase the icon for a couple of dollars. Here are some of our favorite resources for icons<\/a>.<\/div>\n\n\n\n6. Use filters to make website photos look more uniform<\/h2>\n\n\n\n
On your Jimdo website, you can upload your own photographs, import them from your social media accounts, or choose from hundreds of free stock images. No matter what you choose, you can make photos from different sources look like they\u2019re all from the same place by applying the same photo filter to each one.<\/p>\n\n\n\n
You can do this in your own favorite photo editing program, or you can use the filters that are built right into Jimdo<\/a>. Here\u2019s an example of how I used three photos from different places, but gave them a similar \u201clook\u201d by applying the same photo filter to each one. <\/p>\n\n\n\n![\"Three](\"https:\/\/i0.wp.com\/www.jimdo.com/blog\/wp-content\/uploads\/2020\/10\/apply-photo-filters.png?resize=1024%2C509&ssl=1\")
<\/a>Applying the same filter to all your pictures gives them custom look.<\/figcaption><\/figure>\n\n\n\nConclusion: Making a custom website design means being consistent<\/h2>\n\n\n\n
One design trick for websites is that the more consistent your style can be, the more put-together and professional everything will look. Use your logo on all of your materials, and use the same colors on your website, signage, social media accounts<\/a>, and more. This not only looks nice, but it\u2019s an indicator of trustworthiness<\/a>. <\/p>\n\n\n\nAs you\u2019ll see from the example here, just a few design moves can leave you with a modern, professional website that matches the materials you have and will look totally unique, without needing to use a professional web designer. <\/p>\n\n\n\n![\"\"](\"https:\/\/i0.wp.com\/www.jimdo.com/blog\/wp-content\/uploads\/2020\/10\/customized-jimdo-website-example-1.jpg?resize=1440%2C1858&ssl=1\")
<\/a>Put it all together, and you have a custom website with its own unique look\u2014yours!<\/figcaption><\/figure>\n\n\n\nLooking for more design tips? Check out our top tips for DIY websites<\/a>. <\/p>\n\n\n\n\n\nBring your business online with Jimdo.<\/h4>\n<\/div>\n\n\n\n\n\n
1. Create your own website logo<\/h2>\n\n\n\n
Logos are important for business brands<\/a>, and more accessible than ever. Even if you\u2019re a solopreneur or you don\u2019t see yourself having a lot of marketing materials, a simple logo can give your website a distinct, polished look. Here, I used the free Jimdo Logo Creator to create a simple logo using the initials of my sample website. When I\u2019m done, I can download the logo files as .PNGs. The Logo Creator provides me with small and large versions, a favicon, and a solid color version for lots of different use cases. <\/p>\n\n\n\n Best of all, it comes with a transparent background so I can use it almost anywhere around my website, and on print materials too. <\/p>\n\n\n\n When you have your logo, it’s just like any other image file on your website. Upload it to your image library and use it in the logo area (next to the top menu), and as a website favicon<\/a>. You can even play around with it as the background of one of your website blocks, like I\u2019ve done here:<\/p>\n\n\n\n A website background doesn\u2019t have to be a photo or a solid color. By choosing a pattern, painting, or texture, you can give your website a custom look that you carry through your website and business brand. <\/p>\n\n\n\n There are lots of pattern databases online where you can download a high-resolution website background for free or for just a couple of dollars. Stock photography websites<\/a> have patterns and artwork too. A few tips for finding the right one:<\/p>\n\n\n\n One design trick I love is to use color codes to make your colors consistent. This gives your website a branded, professionally designed look. <\/p>\n\n\n\n Once you have a color code for your favorite color, you can use it in other places too, like in online photo editors and graphic design programs<\/a>, when you make infographics or social media images, icons, or images with text over them. <\/p>\n\n\n\n For example, when I created my DP logo above, I made sure that the blue color matched the blue in my watercolor background. Here\u2019s how: 2. Once I have the color code, I can use it in the Logo Creator to make my logo match<\/strong>. Just click on the little pencil icon over the color swatch and enter the hex code you want to match.<\/p>\n\n\n\n For more detail, check out this step-by-step tutorial on color matching and using color pickers<\/a>.<\/p>\n\n\n\n Now that I\u2019ve got a background image and a logo that match, I can also set the color theme for my entire website. To do this, I open the Design settings, then upload the blue watercolor image as a starting point. <\/p>\n\n\n\n From there, the smart system will generate a color palette to go with it. I can turn the color up or down (from muted to colorful) depending on the look I want. In this case, I choose muted because I\u2019d like to keep the color theme simple to make the blue stand out. <\/p>\n\n\n\n To apply this to real life, let\u2019s say you already have a .PDF file of a brochure that someone made for you. You can use an online color matcher (sometimes called an \u201ceyedropper\u201d tool) to tell you the exact color that\u2019s in it, and then use this color code in other places, like in your logo and website.<\/p>\n\n\n\n Just like with website backgrounds, there are a lot of websites that provide free or affordable icons for download<\/a>. In many cases, you can use your color code (see above) to customize the color of the icon. You can also make your own icons, either from an online design program or with a free background removal tool<\/a>.<\/p>\n\n\n\n In this example, I found a free icon online (this one is from Flaticon) and used it as a graphic on my website\u2019s 404 page<\/a>. The colors match my website color scheme, and the compass adds some visual interest to a page that could just be a boring error message.<\/p>\n\n\n\n On your Jimdo website, you can upload your own photographs, import them from your social media accounts, or choose from hundreds of free stock images. No matter what you choose, you can make photos from different sources look like they\u2019re all from the same place by applying the same photo filter to each one.<\/p>\n\n\n\n You can do this in your own favorite photo editing program, or you can use the filters that are built right into Jimdo<\/a>. Here\u2019s an example of how I used three photos from different places, but gave them a similar \u201clook\u201d by applying the same photo filter to each one. <\/p>\n\n\n\n One design trick for websites is that the more consistent your style can be, the more put-together and professional everything will look. Use your logo on all of your materials, and use the same colors on your website, signage, social media accounts<\/a>, and more. This not only looks nice, but it\u2019s an indicator of trustworthiness<\/a>. <\/p>\n\n\n\n As you\u2019ll see from the example here, just a few design moves can leave you with a modern, professional website that matches the materials you have and will look totally unique, without needing to use a professional web designer. <\/p>\n\n\n\n Looking for more design tips? Check out our top tips for DIY websites<\/a>. <\/p>\n\n\n\n
If you already have a logo, make sure it\u2019s up-to-date and that you have it in the right specifications. For example, if you only have it as a tiny .JPG file, or if it\u2019s starting to look out of date, it\u2019s probably time for an upgrade. Here are our top tips on how to design the perfect logo for your business<\/a>.<\/p>\n\n\n\n<\/a>Design a logo that makes your business stand out.<\/h4>\n<\/div>\n\n\n\n
2. Choose a pattern or texture for your website background<\/h2>\n\n\n\n
<\/a>
For example, here I chose a blue watercolor pattern from the website Lost+Taken<\/a>. I downloaded the free pattern as a .JPG image file<\/a> and then uploaded it to the image library of my Jimdo website. Once it\u2019s in my library, I can use it anywhere that a photo can go, like as the background for one of my blocks.<\/p>\n\n\n\n
<\/li>3. Use color codes to match website colors <\/h2>\n\n\n\n
1. I used an online color picker tool<\/strong> (in this case Colorzilla<\/a>). By hovering my cursor over part of the picture, the tool will tell me both the RGB and the hex code of the color I\u2019m seeing.<\/p>\n\n\n\n4. Set the color theme on your website<\/h2>\n\n\n\n
<\/a>5. <\/strong>Use icons to add graphic personality<\/h2>\n\n\n\n
6. Use filters to make website photos look more uniform<\/h2>\n\n\n\n
<\/a>Conclusion: Making a custom website design means being consistent<\/h2>\n\n\n\n
<\/a>Bring your business online with Jimdo.<\/h4>\n<\/div>\n\n\n\n