Colorful Website Design Project: Before and After - Jerrett Digital

want 15% off your new website template?

Yes, Please!

Colorful Website Design Project: Before and After

I have always been drawn to working on colorful website design projects. The first real website I designed was for a health and wellness blog I started back in 2018 called Your Happiness Quest. At the time, I loved writing about body confidence and how to cultivate more happiness in life. It was a bit all over the place, and while the topic is still important to me, I fell out of love with writing about it.

In late 2021 I discovered that you could sell blogs online. I thought this was a great idea because it meant all my work wouldn’t just fizzle into nothing. I was hoping someone would take it and put a new lease of life into it. I went through and removed myself as much as possible because I wasn’t comfortable with someone taking my identity online and upgraded the design while I was at it. Unfortunately, the buyer just took my articles and put them on their own site, so the brand no longer exists, but its design lives on in this post.

Body confidence colorful website design

Colorful Website Design Project Brief

The website branding was always colorful. I was naturally drawn to these colors as I lack the ability to create a minimalistic design. However, I think this really works for this project because color evokes emotions, and the primary emotion of this brand was all about finding more happiness in life.

Using color in design is vital for communicating a message to the viewer. Different colors innately trigger different emotions in people. This is why it is vital that brands thoughtfully choose the colors they use to represent their core values and messaging.

When designers strategically brand a business, they explore color psychology and consider the audience and brand values. How does the brand want its audience to feel when interacting with them? There is no one-size-fits-all when it comes to choosing colors. Each color is associated with both “positive” and “negative” feelings, so pairing color with images, typography, and iconography are all vital for creating a brand vibe.

Color Psychology Examples

I worked with blue, yellow, orange, and pink in this colorful web design project.

  • Blue is often considered a calming color that builds trust but can also be seen as cold. This lighter blue is less serious than a deep royal blue.
  • Orange is associated with confidence, friendliness, warmth, and energy, all important emotions for this brand. Interestingly, the flip side of orange is immaturity, frivolity, and sluggishness.
  • Yellow is the color of happiness, so it was crucial for this project as it was called “Your Happiness Quest.” It’s also a warm color and is connected with optimism and creativity. Yellow can also be associated with cowardice, fear, and anxiety.
  • Pink is a color of balance, creativity, passion, and transformation. Pink can also be considered outrageous and eccentric, which isn’t necessarily bad, depending on who you’re targeting.

The best way to evaluate how people react to your colors is to ask your audience. Design is very subjective based on a person’s upbringing, beliefs, culture, and personal taste. Remember this when asking friends or family for their thoughts on your branding. The brand isn’t necessarily for them; it’s for your audience, so it works best when it’s targeted to them.

In this case, this blog was focused on young women seeking more optimism and joy in their life. In other words, they’re looking for more color, so I wanted the design to reflect that. I wanted this colorful website design project to be light, fun, and feminine.

Finding Design Inspiration

Finding inspiration can be tricky because you don’t want to copy another person’s work accidentally. I usually look to Pinterest for web design inspiration and wanted to see how people blended color into their designs to make them pop. Again, a big part of this involves tuning into your emotions. How does a certain style or element make you feel? Then look at which part of the design draws you into the emotions you’re targeting.

One of the key things I identified was using textures to create a more fun, vibrant feeling, so I wanted to incorporate those elements and add balance to the composition, somewhat breaking up the colors. I then went to Canva to explore different shapes and elements that may work. At first I played with floral designs as I used floral elements in my logo and site iconography, but they all felt too cluttered.

In the end, I liked the contrast between the simple shapes creating texture and the plain blocks of color. A lot of the photographs used featured flowers, so it was through this method that I tied in the floral elements of the brand design down the page.

Colorful website design project for a body positive blog

Website Builder Used

This website was built on WordPress using the OptimizePress Plugin. If you’ve watched me on social or read some of my other posts, you may have noticed I’m not a big fan of WordPress, and this website was the reason why, lol. Don’t get me wrong, I think OptimizePress is a great builder, especially if you’re focused on marketing with funnels it makes data collection a breeze, and it’s affordable. But it didn’t always work well with Bluehost, so use a different host if you’re doing this. Ultimately I was driven up the wall by the whole experience of hosting and plugins being working fine one minute then updating, causing incompatibilities and crashing the whole site (a significant contributing factor to why I decided to sell it).

When I discovered Showit, it was like a dream come true. Hosting and a top-notch builder in one—what more could a girl designing websites ask for? Showit is where this website is built on.

Health and wellness body confidence blog design

Colorful Website Design Project: Before and After

Check out the TikTok video below to see a comparison of the website before its colorful makeover. I used the same brand colors but added textured backgrounds and bold sections to break up each of the key points and features of the website. I think the result is a unique website design that catches the viewer’s eye and communicates a vibe of fun, playfulness, and joy. What do you think? Let me know in the comments below or over on TikTok :).

Aug 27, 2022

Portfolio

share this post

Leave a Reply

Your email address will not be published.

Sign up to my  monthly newsletter to receive this step-by-step workbook guiding you how to strategically select your brand colors like a pro. 
Plus features a bonus section on tips for choosing fonts!

Download The "How To Choose Your Brand Colors Like a Designer" Workbook for FREE!

    Your message has been sent!

    Thank you for applying to have your website audited, I'll get back to you ASAP. Have a beautiful rest of your day.

    DIY Templates

    These professionally designed Showit Templates with step-by-step video tutorials are fantastic to get your website up and running without needing to learn any fancy code!

    Get started & get beautiful

    Template Customization

    Are you a busy-bee and would rather me customize your Showit template for you rather than do it yourself? This package is perfect for you. I will use your photos and copy to update any Showit template.

    Get up and running FAST

    Custom Website

    You've got a unique offer you're sharing with the world and you want a on-of-a-kind website to show it off and book more clients. You will get exclusive 1:1 branding and strategy sessions.

    Tailor-made for you

    Shop Templates

    How We Can Work Together

    If you’re on a mission to make a positive change with healing services, unique products and mindful business practices, I would love to help you thrive!

    Shop Templates

    Learn More

    Words That Make Me Blush...

    Adrianne captured the essence of who we are and what we are about!

    Adrianne designed and created our website and really captured the essence of who we are and what we are about. We were thrilled with the outcome and would not hesitate to highly recommend her to anyone wanting a professional, well thought out website. Her attention to detail was fantastic and her wording was perfect.

    Lydia & jess

    Apex Accounting

    I feel so lucky to have found Adrianne

    I feel so lucky to have found Adrianne! Her creativity has taken my designs to a whole new level. Adrianne is so professional. She is constantly learning and making sure she's on top of the latest recommendations. I only provide a little guidance and input and Adrianne does what needs to be done. You will love working with Adrianne!

    Juli

    Radiant Shenti

    She has a creative flair and analytical mind—a rare combination

    Adrianne is incredibly well-rounded and great as a support for the detail and strategy. She helped me build some beautiful funnels and run an online global retreat. She has a creative flair and the analytical mind- a rare combination. She can work with you at the high level strategic arm of your business and knows the actions for how to make it happen. I would highly recommend her for funnel building, strategy support, website updating, content writing and design.

    Raphael

    Empowered with Raphael

    Want a Free Website Audit?

    Get free advice and tips on how to make your website homepage more user-friendly from a professional website designer.

    Apply today

    Please fill out the form  and I'll make you a short video with tips on how to up-level your website and make it more user-friendly.

    Get Your Website Audited for FREE!

    Send

    Instagram Handle

    Tiktok Handle

    Website URL

    Your email

    Your name

    Your message has been sent!

    Thank you for applying to have your website audited, I'll get back to you ASAP. Have a beautiful rest of your day.

      Sign-Up to Get 15% Off Our Showit Website Templates!

      Plus as a newsletter subscriber you will get tips and tricks for how to make the most of your website to grow your business sustainably.

      Unsubscribe at any time. Read our full privacy policy here.