Designing and developing a freelance website to convert new to digital customers
Role: Designer, Developer
Project Description: Wanting to start a freelance company and working under the royal we I wanted to create a professional site to attract businessess. This needed to be clear, concise, and a little showy.SiteGithub
Creating a site that speaks to clients while educating and coaching at the same time is a difficult feat. I wanted the site to be easily accesible to anyone looking to fix a problem or looking into my company. I didn't want to use jargon or confusing terms.
I would be tasked with all facets of this project, copywriting, design, and developing. I wanted to stress speed in the website, a quick start up and download of the components. The design I wanted to be simple but with a bit of flare, to be eye-catching and rememberable. The copywriting would be another matter but I'd do my best.
I poured over Dribbble and went through as many portfolio sites as I could, each being exceptionally different. Not finding a style that I thought I wanted my site to go in, I took different pieces of design techniques and incorporated them into my ideas.
This was something that I thought about a lot. There was a rise in single page sites and I wasn't sure if that was a direction to go into. For potential clients I wasn't sure if that'd be easier to navigate or if they'd prefer the standard back and forth of different pages.
I've always used 3 colors as my scheme, they have significance to me. This time around I wanted to do a nice gradient for the homepage hero, something that would grab attention. Not too flashy though, subtle enough to straddle the line.
The most important thing I wanted to gain from looking at all these sites was an idea of how to present my content. I looked to local or non-high profile people to see how they displayed and talked about their work. They were name building and I wanted to follow their lead more then well known names.
I jumped into sketch and started to put together some layouts and start working with the proper wording. I wanted to make the homepage intial screen simple and impactful. Going with the idea of gradients I wanted the hero to be a bright color with simple white text.
I went to the extreme at first and worked my way back to a more clean design. The waves at the bottom were more distracting than they actually added anything to the site. The wording was too much, you want people to hit the page and want to read more and not be hit by a wall of words, in most cases.
I'd developed the prior designs into a prototype site, and was not satisfied with the layout and the wording. Back at square one, I wanted something different from some of the sites I'd seen. I kept with my font choice of primarily sans-serif font with an bold serif font. I also went to left align instead of center aligning.
After personally working through some other branded related decisions, I was also moving with my improved identity. Associating as a company I changed from using my name, Victoria Pugh, to VP—Designs. This also warranted a change in how some pages would be laid out and how I'd be referring to myself.
Worked on cultivating a good brand tone and trying to keep stripping back until there was a good balance. I wanted to balance the flash, minimalism, and color.
Looking through a lot of Steve Schoger's tweets on gradients and more and used that to create a much cleaner and more consistent colored site. My gradients now felt vibrant and balanced. I liked the usage of the icons in the hero and in the list below.
The final site, is very close to the previous design. As much as I liked the icons, I think the site looks perfectly fine without them. I added slight patterns behind the gradients on the hero, these are tied to the different colors. It's a part of the branding that I've created for the company and works very well on the web. There are SVGs that are inlined so there is no extra weight or strain to the site. They are also quite easy to manipulate if I want to change them further on down the road.
The blog page was a late addition because I had not decided to write a consistent blog until late in the development phase. It was easy but it's a very manual process at the moment and making that easier would be great.