Construct Designs

Website, Branding
September 2nd, 2021

The Problem

When I first started working as a freelancer, I needed a professional-looking website which gave potential clients an idea of the kind of work I have done and of the value I could offer them. It needed to feature the projects my company had built for previous clients, provide a well-rounded picture of my company and do it all in a stylish way indicative of the kinds of sites I could create. It was important to me to convey that a website like mine could be theirs if they hired me.

The Solution

By the end of this project I had designed a company logo and brand, created mockups for an eye-catching, professional website and built it into a single page, React-based website. As part of highlighting my skills, I made sure to make all the site assets myself. Speed and efficiency may be the key in client work, but skill and dedication is just as important in a portfolio.

The Skills Used

  • Adobe Xd
  • Adobe Illustrator
  • Adobe Photoshop
  • React
  • React Transition Group
  • SASS

The Lessons Learned

Iron out the design first: It is much easier to change a design in Adobe Xd than it is to rewrite the code on a website. I started building the website too early in the design process for this project and realized later that that early design wasn't going to work. This required me to scrap a lot of the code I had and start over.

Everything must have a reason: In the screenshots of the older mockups below, there is an image of a ocean in the hero section of the website. Initially I had no reason for this except that it fit the color scheme. Given the nature of my business, this hero image offered no concrete benefits or worse, could be confusing.

Screenshots

Early Adobe Xd mockups

Adobe Xd mockups of the homepage

The services and projects sections during development