An Overview

After years of making artwork and having it saved in all different places, I decided to make myself a digital art portfolio. Serving also as an example for future clients and freelancers that need me to build websites for them, Jamie Paradis Art is a representation of my artistic vision and aesthetic in an online format to share with others.

Sketches

Based on other art portfolio sites I had seen and been inspired by, I began with some quick sketches of ideas I had for the site layout. The idea here was to get the ideas in my head out on paper and to have a visual map to base my prototypes on.

Wireframes

Based on these basic sketches, I created some low fidelity wireframes in Figma to better see the layout of the site.

Prototype

Based on my wireframes, I created a low-fidelity prototype of the website in black and white through Figma. I included  interactivity / links between frames to map how site functioning would work.

From Prototypes to Implemented Design

I was finally ready to turn my sketches, wireframes, and prototype into an implemented website. I used managed wordpress to implement the designs as closely to my prototype as possible.

User Testing

I performed some basic user testing and took the following notes and insights:

• Users don't often click the "Work" tab in my navigation bar but instead use the dropdown options immediately
• On pages of specific categories of work, users don't click on the specific paintings to enlarge them
• Formatting issue on "Series" page

‍

Design Modifications from Testing Insights

Based on the user testing and notes, I made the following modifications to the website:

• Added a "Check out my work" button on the home page to bring users to the "work" page in case their instinct is to only use the dropdowns
• Added a message that says "click on a painting to enlarge!" to all of the pages where this was not intuitive

‍

Aesthetic Modifications

I also made some aesthetic changes that were issues arising from the original template I used. Primarly, the main carousel on the first page seemed to have an opaque overlay over all of the images that I could not figure out how to remove for awhile. Similarly, the "Work" and "Series" pages were not formatting correctly. To fix these, I used the inspect mode on my site to search in the code for the correct tags and divs to manually adjust these things in Wordpress' CSS editor. This was really exciting for me to figure out because it was an example of how my course on web design directly impacted my ability to edit a website; the "inspect" html code looked completely foreign to me before, but I was able to quickly figure out the issue because of my class and practice as a web designer.

The Final Website

Check out this link for the final website which I add to as I make more work!

jamieparadisart.com

‍

‍