I used to watch those makeover shows where you see major transformations..be it..a house...a person...all things you can imagine. What makde those show interesting to me is the process behind those projects. What takes place and involves to go from "blah" to "wow". With that said, I want to invite you inside my design brain (process) and learn a few design tips.
Let's take a look at Hilliary's website. Hilliary is a Pediatric Sleep Consultant of www.Tranquil-Beginnings.com in Dallas, Texas.
I had built my own Wix website when I started my business to save money. It worked, but wasn't amazing to say the least.
After rewriting the copy for my website, I wanted to have a revamp and redesign by a professional.
BEFORE
Hilliary's goal is to find a web designer to help transform her website which she built by herself to:
1. Improve an overall aesthetics. Add more whitespace (white background) on all pages.
2. Incorporate marketing tools to boost conversion rates which includes:
+ Email marketing
+ Automation/Email sequence
+ Greeting video
+ Opt-in/sale funnel page
3. Better appearance on mobile
Before I show you my process, here's the final result.
AFTER
The "after" version is much lighter. Below are the key factors that transformed her site:
1. Colors
2. Photo choices
3. Text and photo placements
Colors
Her logo is made up of 3 main colors so I pulled those colors from her logo to use them as accent colors
As you can see, two out of 3 colors are fairly dark. In order to achieve the look she wants to achieve (more white space), I chose to use them as accent colors throughout her website instead of using them in big areas.
Out of these 3 colors, I picked "blue-gray" as a primary color as this color gives the most calming effect which goes perfectly with the baby/child sleep theme.
In addition to that, I created 3 more "lighter" colors within the same family colors to lighten up without going all white in all areas. I did that to give her page some colors to highlight certain areas/make her message/content stand out.
BEFORE AFTER
Photo choices
Photos play a BIG part in your overall design/website. Using stock photos isn't everyone's cup of tea but I am not against that idea if you don't have professional photos. There are many stock photo websites that look very decent, they don't look like stock photos and for commercial use. These are some of my top favorites:
These are tips to select photos to use on your website, be it your own or stock photos:
1) Don't rush through this process. Photo selection isn't an easy task and take time. Experiment with your selections. See how they fit/feel next to your content.
2) Review your copywriting and content. Look for photos that best represent or align with your content. If your content talks about happiness, select photos that represent your content.
3) Look for neutral colors or photos that have your brand colors.
4) If you want to go for a clean look, stick with photos that have lighter/clutter-free background.
Text and Photo Placements
i
Where and how you position your texts and photos can either make your page easy to navigate or look off putting to readers. Hilliary's new copywriting is content heavy and they are critical to have in order to share the value to her prospects These are techniques I used to transform Hilliary's website.
1) Break up into smaller paragraphs instead of using one big block of text. Too much texts can look overwheming and easy to get lost. Try to break up some will give your readers a break and not lose sight of your content. This is especially helpful when they read on mobile view.
2) Bold, underline or use different text size to highlilght specific areas where you want to draw attention/stand out.
3) Use photos to tell the story when possible or incorporate texts into photo to create an eye-catching graphics. This one can be tricky and takes a lot of experimentations and design experience.
If you'd like to see a full project makeover, head over to https://www.tranquil-beginnings.com/. Hilliary helps sleepless parents and babies/children get good night sleep. Please check her out if you or someone needs help.
I hope you enjoy my first website makeover edition and you learn some tips to help improve yours. If you need help with your DIY project, I'll be happy to help either do it for you or consult and provide guidance to help you bring your dream project to life.
Let's bring your design project to life and bring your business to the next level.
Kommentare