Client Portfolio

Updated: Apr 9

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.

My role was to redesign the website.

Tools used: Adobe XD and Invision







Issue

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


Inspiration



A contact process on the homepage outlining the process
A contact process on the homepage outlining the process

Simple layout which presents the case studies
Simple layout which presents the case studies

Colour scheme which stands out
Colour scheme which stands out

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 To 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

Design


With the competitor and inspiration research, I was able to map out what the portfolio would look like for both UI and the user's experience on the website.

Wireframes

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

Home page:


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.




Low-fidelity Wireframe
Low-fidelity Wireframe

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.


Mid-fidelity Wireframes


Mid-fidelity Wireframe
Mid-fidelity Wireframe

Mid-fidelity Wireframe
Mid-fidelity Wireframe

Mid-fidelity Wireframe
Mid-fidelity Wireframe

Mid-fidelity Wireframe
Mid-fidelity Wireframe

Mid-fidelity Wireframe
Mid-fidelity Wireframe

Colour Scheme


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.


High-fidelity designs


Landing Page



The leading blue is to welcome users and it is noted as the most liked colour (see above). The homepage starts with 3D animation with the coding skills and hero image animating onto the screen when loading. As it's the design template, the copy wasn't filled out, however, the placeholders are there to represent the build of the page. The page includes the skillsets, projects and contact buttons to get users to start projects.


Project Page


Project page to highlight the portfolio of work.


About Page


The about page features the client reviews, bio and skillset.


Contact Page



Ready To Work



High-fidelity prototype: https://xd.adobe.com/view/1ac525db-e314-491f-b56f-e3920730a288-4f96/?fullscreen



18 views0 comments

Recent Posts

See All