(Originally posted April, 2019 on MorganReeceHQ.com)
The massive post I’ve been drafting for several days still isn’t done. So far I’ve got a rough draft in Markdown that should make it easy to turn into a free eBook. But I’m struggling to get the anchor links working properly when Scrivener compiles it into HTML.
What to do when my band width is gone? Play with Over and website design!
I chose this theme because it fit my vision for the structure of this site (and for making an e-commerce site later). The thing is, the default colors are not at all what I want. What’s a girl to do? Get Googling!
Changing the Header Color
Google led me to this post about how to change the header color which was very helpful. Better yet, Smart Income Pro theme comes with a CSS editor built in.
I copied and pasted the sample code into my CSS editor, then changed the background color to white. Yay! So much brighter.
Next, I analyzed about six or ten favorite websites to get a feel for colors that fit my desired vibe. (Later I stumbled across this post which recommends a similar strategy.) At first, I thought I’d like pink to match the jacket I’m wearing in my favicon photo. But after looking at some pink sites, I realized that’s not me.
Psychology of Color
Pink is fun and I wear it a lot. It’s just that I wanted something a little more serious, without being stuffy. Neil Patel’s article on color reinforced what I learned in a branding class a few years ago. For a site to be gender-inclusive, it looks like I should go with blue or green.
Happily for me, playing with colors is a great distraction from other website difficulties. After taking screenshots of several sites (plus downloading maybe a dozen free pics from Unsplash), I was ready to start making color palettes.
Too Many Colors!
Now here’s where things got messy. The first palette I created came from a lovely fashion website with like a bazillion colors. Once I created a “rough draft” for a pattern, I realized I had no idea how to program all those hues into my site. Okay, let’s start over.
I made a new palette, based on the blog of said fashion site. It only had about half as many colors, and they were all varying shades of the same basic hue. To help me figure out where to put the colors, I noted each shade’s hex code and a little reminder of where it had been used.
Uh oh. I still have way too many colors. My theme only allows THREE. And I don’t know how to narrow this list down!
How God Teaches Me
“The secret things belong to the Lord.” Friends, it is wonderful when God teaches you something you never knew before. As I was pondering my “too many colors” issue, He reminded me of what I’d read about web colors (without understanding) earlier.
The article was about RGBA colors. As a novice graphic designer, I’d heard of hex, RGB, and Pantone. What’s RGBA?
RGBA is a color code used in CSS style sheets. It’s how web designers get a beautifully-synced-look to things like the button hover, and why most themes only give users three color choices (it’s harder for you and me to pick an ugly color combination).
The “RGB” part is the base color (equivalent to whatever hex color code is selected by the DIY site designer). The “A” code puts an additional layer (white or black, at a defined opacity) on stuff like hover buttons and selected links. Well, anyway, I think that’s how that works.
My Ah-ha! Moment
As I thought about the RGBA article, I remembered I’d seen some RGBA codes in the style sheet for my theme. (That was before I discovered the built-in CSS editor. See? God knew I needed to see that!)
“Hey!” I thought, “This means I only need to pick three colors after all! But which three? And where do I use them?
Google to the rescue (again!). It took quite a few tries, but I finally got to this lovely article, “How to Choose a Good Color Scheme For Your Website.” It has great pics taken from a Wix template.
By comparing the sample website with my chosen pattern, I figured out my 3 colors were:
- Mint, for the dominant color;
- Teal, secondary, for links;
- Melon, accent for buttons and headline text
- Pale mint, for the blog background
I also made a new graphic for the home page.
All in all, a productive day. Still to do:
- Change the footer color
- Finish the Home page
- Finish editing and publish the massive Evidence Checklist post
- Finish the theme setup tutorial
- Draft an email auto responder (so I can find out how to serve my readers better)
Biggest Wins Today
I made progress on the design, and I *think* I will be able to finish the massive blog post once my head cold clears. I’m new to Markdown and HTML anchor text, and trying to understand both at the same time makes my brain hurt.
Biggest Takeaways From Today
Top e-commerce sites bear little resemblance to most T-shirt brands I’ve seen. It’s fun and informative to compare sites for ideas on structure and style.
One striking difference between fashion blogs and author blogs: the author blogs mostly had just one or at most two colors (besides white), while the fashion blogs had several colors in complementary hues.
I finally “bit the bullet” and installed the free Jetpack plugin in my website, and activated Markdown capability. This plugin has a “bloated” reputation (I’m glad we don’t talk about each other that way!)… but it’s the only free option I’ve found that is compatible and tested with the current version of WordPress. (I avoid outdated plugins for the sake of my site’s security.) I’ll play with it later.
Hope you’ve enjoyed this little glimpse into DIY website design. Now ask yourself, “If a homeschool Mom with no artistic training and a bad cold can figure out how to design a website palette, what can I do?!” Now go do it!