This is Day 1 of the 10 day Build Your Website Challenge. If you missed the challenge overview, you can find it here.
The goal is that, by the end of 10 days, you’ll have your DIY website up and running!
Part 1: Branding your DIY website.
This is your logo, colors, & fonts (type style). You can choose these, or your developer can. Keep in mind that not all colors that look good on a Pinterest board are good options for a website.
Business Name & Tagline.
This is obviously super important!! These will also be key for how Google identifies your website, so make sure you pick something that will make sense to search engines and potential clients and customers. Once you have your WordPress site set up, later on in the challenge, you’ll want to include this information under Appearace > Customize > General Settings > Site Identity.
Think about domain names.
Please, for the love of all humanity, have at least 3 other people read your domain name before you hit ‘send.’ Sometimes something seems obvious to you, but others will have a hard time figuring out what it says. Or worse, come up with a whole other meaning that you don’t want!
Again, domain names are super important for seo, so make sure to pick something that makes sense for your business. And don’t be afraid to go with other endings, not everything has to be ‘.com’ to work!
Logo:
You’ll need an image file with your logo. You can hire someone to do this for you or do it yourself in Canva. Either way, make sure you get a .png file with a transparent (clear) background. If your logo has a white background and you put it on top of a purple background, it’s going to have a white background and the purple won’t show through properly. It’s not worth getting upset over, and definitely don’t let this hold you back, but it looks a little more professional with a transparent background.
Colors:
The internet works on color codes that are called ‘hexcodes.’ Every color has its own 6 digit code, with a hashtag (pound sign, 80s friends!) at the beginning. The hex code for white is #fffffff, and the hexcode for black is #000000, and all the colors are somewhere in between.
My favorite site for coming up with color schemes is Coolors. If you need suggestions, check out this blog post with website color palette inspiration.
PRO TIP: Make sure you check how your colors look with white and black/ dark grey text. Try combining the colors in different ways and see how they look. The goal is to have as many options as possible.
Fonts. Pick your level:
Easy: If you can’t handle this at all, use the same font that’s in your logo as a headline font, pair it with Open Sans for the main body of your site, and check this one off your list. If you need a headline font, try Oswald or Raleway, depending on the vibe you’re going for.
Medium: If you feel like you can handle this one a little, try picking a display font and then just pairing it with Open Sans or Quicksand for the main body.
Hard: If you want extra credit on fonts, search the internet for free fonts, download the one you want and upload it to your website. This is fonts on hard mode, for sure. For everything you ever wanted to know about fonts, read this blog post.
Remember, you can always change the fonts & colors later!! The internet is not made of stone.
PRO TIP: Do you have a site that you love and you want to use the same or similar colors or fonts? But you’re tired of trying to guess what they are? You can actually see the code of the website and scroll through until you see the hexcode or font name. It’s called ‘Google Dev Tools’ and it only works on Chrome, but it makes it possible to see what’s going on on another site. You can open it on Mac by using Command+Option+I (the letter i), or on PCs with Control+Alt+I (again, the letter i).
Part 2: Styling:
What’s the overall feel or ‘vibe’ of your website?
What’s the vibe of your website? Do you want whimsical animations? Is this supposed to feel dark and mysterious? Bright, clear, and no-nonsense? 50% nonsense?
A web developer/ designer can take the same logo, colors, and fonts, and design your site in a million different ways. We need a little direction so we can match what you are envisioning.
Pick sample sites that you love. They don’t have to be in your same line of business. Say what you like about them and be as specific as possible. Try to find sites that have colors and fonts you love.
Look for examples of websites that have the ‘feel’ you want for your website (calm, fun, luxurious, energizing, etc.). See if you can put into words how a site makes you feel and decide if that would work well or not for your business. What kinds of colors do they use? What’s the layout like? Is there animation? How much and what kind?
If you’re running a day care, you probably want something that feels fun and energetic and whimsical, but if you’re running a day spa, you probably want calm and luxurious and quiet. A day spa website with bright colors and tons of animations probably wouldn’t make sense. It’s the same as the way a day care website all in neutrals with lots of plants and water might not (or it might, who knows, maybe you’re running a different kind of day care?!)
Are you using a symbol or motif?
Do you have a motif? I’ve built sites with lots of different style themes: trees, boats, hexagons, ampersands, gradients, speech bubbles, typewriters, you name it. What represents you and your business? Maybe you have something in your name or in your logo that you can use throughout the site to create a sense of cohesion. Or maybe you have a personal symbol that’s important to you. I have a client whose whole site is done with boats and sailing motifs and metaphors, and she’s a whiz at coming up with new ideas that still stick to her branding.
Okay, that’s it for Day 1 of the DIY Website Challenge. If you didn’t get through everything, it’s okay! You can still move on to Day 2, where we’ll talk about structural things, such as what you need your website to do and help you figure out what platform will work best for your site.
