The objective of this project was to make a webpage design in photoshop for the wireframe that we created in interaction design 1.

The first step I took when designing this webpage was breaking down the layout of the wireframe created in Interaction design 1.

Screen Shot 2016-10-30 at 6.07.14 PM.pngScreen Shot 2016-10-30 at 6.07.33 PM.png

From the wireframe above I constructed a layout in photoshop (seen below)



The next step in my design process was to choose a colour pallet for the webpage.

When trying to come up with a colour scheme, I thought about what would best represent the company the website was for. In this case, the website is for a luxury electric car company. I decided that a gold/yellow accent colour would suit the company, as yellow often represents electricity and gold royalty.

With the accent colour in mind, I used adobe Kuler, set to monochromatic, to find a colour pallet.

The pallet on the left was the first pallet I made but I found there was not enough variation in the shade of the colours. After changing some of the colour values, I was able to create the pallet on the right which I used to colour the webpage.

In order to figure out the colour placement on the layout, I took some inspiration from the website “dbrand” which uses a similar colour set .


I then started using the colour pallet to fill different sections of the layout.

Once the colours for the layout were finished, I began working on the banner for the website.


Using the same banner from a previous project, I made some alterations so that it matched the websites colour scheme.

After the banner was created, I then had to find more images for the webpage.

The pictures above made the final cut and were slightly altered to fit the aesthetic of the webpage.

Along with the pictures, I also added some text to the navigation bar, the page content, and the footer.

I also chose to add some navigation buttons to the page to finish the design.


Above you can see with the final webpage. The leaf was modified by filling its white sections with #cfc39f and the three car pictures in a row were edited by adding an overlay of the colour #ffcb2f with an opacity of 10%.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s