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
They wanted a page that focused on their skill set, stood out and help build communication with potential clients.
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.
Detailed information on skillset
Showcase projects and case studies
Context of projects
Nice To Have
Social media links
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.
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.
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.
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 to highlight the portfolio of work.
The about page features the client reviews, bio and skillset.
Ready To Work
High-fidelity prototype: https://xd.adobe.com/view/1ac525db-e314-491f-b56f-e3920730a288-4f96/?fullscreen