FabrizioVanMarciano.com was a domain name that I purchased back in 2017. I actually had no idea what I was going to use it for, there wasn't anything in particular that I wanted to do with the domain, so for the last few years, I used it to host a one-page profile website with some information about myself, my professional background, and some contact info.
Before I talk about the redesign of this website, let me go over the history of my web design services very quickly.
I started offering web design and creative services over my main website/blog at Magnet4Blogging at the start of 2014.
Now, Magnet4Blogging was never meant to be a digital services website. So by using the site to offer my web design services, I was forced to evolve Magnet4Blogging from an info-based blog, obviously all about blogging and online business, etc, into a freelance web designer's website.
I had to build in new sales pages, inquiry pages, a new custom homepage, terms of service page, and began blogging about web design, creative design, WordPress, conversion rate optimization, and marketing, and so on.
Did this work?
Yes, this worked for a little while, but it kind of steered me away from my original intention or mission to grow Magnet4Blogging into a successful blogging based business.
My main monetization strategy for Magnet4Blogging was based around an affiliate marketing model, not an online services model.
I mean, it was great to have been able to use my blog essentially as a launchpad for my web services, for sure, it got me some great clients. But, it soon became clear to me that I needed to offer those services on a stand-alone
In December of 2018, I finally made the decision to move my web design and creative services permanently to a brand new site, and FabrizioVanMarciano.com looked like the perfect candidate for the job, however, the website was in need of a complete overhaul. And so it began.
Planning and strategizing
Since this site (FabrizioVanMarciano.com) originally only had a single landing page, the redesign project was essentially going to be a completely new build from the ground up, with new multiple pages, a blog, a dedicated contact page/form, four separate inquiry forms for each info-packed service information page, and so on.
Here's a snapshot of what fabriziovanmarciano.com, the one-page website, actually looked like before the redesign kicked off.
Not bad looking by any means, however, I didn't like it and needed a design that was more familiar.
So, after some further debating with myself whether I was doing the right thing or not, it wasn't until the end of January 2019 that I sat down to begin planning and strategizing how I was going to go about redesigning FabrizioVanMarciano.com and make it the new home for my freelance web design services.
In the short vlog below, I share some reasons "why" I've decided to migrate my web design services to a new stand-alone site, my plan of action, methodology, and more.
It was time to get excited. I knew that this was going to be nit-picky project/venture, and so I wanted to make sure that I did everything that I could in accordance to my Growth-Driven Design strategy, at least more or less.
I spent most of February 2019 creating my plan of action. I also created several visual website sitemaps to work with. Laying out exactly which pages were going to be included in the design. I created these simple visual sitemaps using Affinity Designer.
I also began researching into freelance websites, looking for ideas and inspiration, design styles, page layouts, typefaces, branding, logos and icons, colors, and all the rest of it.
It was a lot of fun, that much I will say.
No User-data Or Analytics?
Usually, when I'm redesigning a website, I like to have access to user-data and metrics, if possible. This is important because data can be used to design a launchpad website that is specifically crafted for improved user-experience and takes conversion goals into consideration too.
At this stage, I didn't have much in the way of user-data to work with. FabrizioVanMarciano.com was a one-page website, so even if I did have data to work with, I doubt it would have been much use to me.
Stealing The Branding Style Of Magnet4Blogging
OK, so about half-way through planning and strategizing, and being indecisive over colors, layout's and styles, I happened to be having a conversation with one of my friend's and previous client's. I explained my plans for migrating my website design services, and she pointed something out that I hadn't taken into consideration before now.
Branding style and familiarity!
Let me explain.
For the last 4 years or so, many of the clients I've served have returned for repeat service/business from me, which is great. So, when folks look for the web designer over at Magnet4Blogging, a couple of things tend to stick in their minds. The most important of which is the visual branding or style of my website.
Large heavy header fonts, modern typeface, clean white layout and the use of just three primary colors/shades, dark grey, light grey, with accents of reds.
Now, I could have quite easily come up with a completely fresh design style, with new branding colors, shapes, visuals, etc. for FabrizioVanMarciano.com, but how would some of my loyal customers perceive this new look? And, more importantly, would they recognize that it was me, Fabrizio Van Marciano, the web designer from Magnet4Blogging?
My logical answer was, no, they wouldn't.
So, I decided that I was going to create a new design for FabrizioVanMarciano.com, however, the branding style, colors, and part of the layout I would steal from Magnet4Blogging, for brand familiarity, if that makes sense.
Creating Wireframes And Sketching Logos
One of my favorite things to do as a web/graphic designer, especially if I'm working on rebranding a website as well as designing it, is to actually get creative with wireframe templates and sketching out concept logo ideas.
I definitely think that this part comes from my passion as an artist, since art, painting, and drawing have always been a huge part of my online entrepreneurial journey.
Please do check out my short vlog episode below where I share some behind the scenes stuff, creating wireframes, sketching logo ideas, and doing design research.
Design And Development
So, we're now at the beginning of March 2019, and whilst working on several other client design project deadlines, I managed to book in a few hours each day to work on the redesign and development of FabrizioVanMarciano.com
For this particular site, I used the following design and development tools -
- WordPress (Obviously).
- SiteGround Web Hosting.
- Oxygen Website Builder (Plugin that replaces the theme).
- Affinity Designer (Professional graphic design application).
- Affinity Photo (Professional photo editing application).
The main plugins I'm using on this site are -
- Insert Headers And Footer (For adding custom scripts).
- Thrive Leads (Building my email list).
- WPForms (Premium version, for creating custom inquiry forms).
- Social Warfare (Free version for now, however, I will change to another plugin later on in the year).
- Yoast SEO (Free version).
No WordPress theme Used?
Now, with most of my previous website design projects I've always included a custom theme. I work primarily with Genesis child themes (Genesis Theme Framework) or Thrive Themes, but on this occasion, I decided to use a tool called Oxygen Builder.
I've been using this tool on several other personal and client projects since December of 2018 and I absolutely love it!
Unlike some DIY themes, or visual page builders out there, Oxygen Builder is a full-blown website developer environment for WordPress that replaces the theme, and because it combines the use of 'code' with 'visual design', it's one of the most complete, must-use website building tools out there for any freelance designer.
While I faced some new challenges with designing FabrizioVanMarciano.com using this tool, it was a lot of fun, and the more I used it the more I fell in love with it. Especially the flexibility.
I designed and developed all 21 pages of this site using Oxygen Builder, including global master elements such as a custom menu, header, footer, and sidebar.
Finalizing The Redesign, And Launching The "Launchpad" Website
OK, so finally on the 8th of April, after a total of 37 hours of design and development, the all-new FabrizioVanMarciano.com website was ready to be launched as a launchpad website.
Now, since I use a strategy called Growth-Driven Design, the launchpad website isn't the final product, even though it's a Live site for the world to see and use, it's still a massive work in progress.
You might be wondering -
"Well, Fabrizio! Why are you launching a website that's still work in progress?"
There are many wonders to Growth-Driven Design, and you can learn "why" I do this here. But, I'll also outline some reasons below -
- There's no such thing as a perfect website when it comes to launching it. Rather than strive for personal perfection, let others see it and use it and tell you what they really think.
- The website can begin collecting valuable user-data and feedback.
- With user-data and feedback, I can make improvements for continued growth.
In the short video vlog below, I share more behind the scenes stuff of me actually doing some work, finalizing the design and getting ready for launch 🙂
Redesigning FabrizioVanMarciano.com has been a whole lot of fun. It's pushed me a little bit further with regards to my abilities as a developer, and I've learned some new skills and methods along the way.
Moreover, by using a tool like Oxygen Builder, it's made me realize something important, and that is the gap between visual design and front-end development (coding) is diminishing fast.
I honestly think that more web designers should become web developers and vice versa. I enjoy design and I enjoy front-end development. Both skills prove to be very challenging a the best of times, and if a great designer has some knowledge and experience in marketing and conversion rate optimization, then even better, right?
So, the new site has been live for a few days now and already I've received some great praises, productive criticism, suggestions for changes, and general feedback.
It has also already begun collecting valuable data, but, of course, it's way too early to start analyzing anything.
The next part of this project now is testing, tweaking, and building in new features accordingly.
Please share your feedback, thoughts, and comments.
OK, so that is it, I hope you enjoyed reading through this personal project of mine. If you have a great idea or a suggestion for me to improve this website and user-experience in any way, I welcome you to get in touch with me using my contact page here. Simply select website feedback in the drop-down menu.
Thank you for reading and enjoy the new site.