Website design

Client Website Portfolio

I was asked to revamp the professional portfolio for an independent web developer. The client outlined what they needed for their website, inspiration and how they want the website to feel.

Details

Date: Jan/Feb 2021

–They wanted a page that focused on their skill set, stood out and help build communication with potential clients.

Tools Used

Research

As these were all developer websites, I was able to analyze these websites for research on what made a successful developer website. The websites selected for the inspiration all had similar features in style, clear menu layouts and CTA’s to help visitors to the site find what they need. Although the client wanted his portfolio to be different, it still needed to have a similar framework.

Must-Have

At an absolute minimum, a web developer portfolio must have these core components.

Personal details/bio
Specialised skills
Detailed information on skillset
Showcase projects and case studies
Context of projects
Contact process

Source Skill Crush and Learn To Code

Nice to Have

Customer review
Developer animation
Social media links

Wireframing

I began wireframing the website to map the user journey to enhance the experience.

I mapped out the page focusing on the name, tagline and CTA on the homepage with the following section showing what’s on offer. Which follows on the bottom end of the page is two selected clients, the process and a CTA to contact to enquire.

The website would have a page just focused on projects which would focus on the client, the type of project and a CTA to click on to the post. The bio page would be focused on what the developer brings. A bio to intro Joel (the developer), a list of skills they specialise in and what previous clients have said about their work and services.

Home page (cont)

Homepage

Mid-fidelity

High-Fidelity Designs

Through this process, I reevaluated the designs with the client to make sure they matched everything they wanted. As the goal was to make the website stand out through colour, I used Coolors to create a colour palette but make sure that all the colour matches would be a good contrast. I sent a range of different colours to the client to see what they liked. Before doing this, I researched the role of colour and what each colour connotes. Source Toptal

Blue – Blue is most often associated with loyalty and trust. Brighter blues can be affiliated with communication, while duller and darker blues can be associated with sadness and depression. Blue is the most universally liked colour in the world, which may explain why so many companies opt for blue shades for their branding.

Purple – Purple is another hue with varied meanings. It’s long been associated with royalty and wealth (since purple dye was rare in many ancient civilizations, it was reserved for royalty). But it’s also associated with mystery and spirituality. Purple can also evoke creativity.

Green – Green has varied associations. On one hand, it provokes feelings of wealth and tradition (particularly darker hues), while on the other it’s strongly associated with environmentalism and nature. Lime greens are often associated with renewal and growth.

Orange – Orange is a very creative color that’s also associated with adventure and youth. It’s very energetic, too. Because of orange’s strong ties to 70s style, it can also evoke a retro feeling.

The other option was red, however, it was the best for colour contrast with white or black for the text and was replaced with purple.