My Work

The wireframing phrase was the best opportunity to talk with Jeannie about her vision for her website. Her main goal was to display her artwork without any funny business -- meaning, she didn't want anything to take away from her artwork at all, and didn't want the images to be distorted in any way. Based on this, it made the most sense to create a masonry grid for the artwork, and simply display the title of the artwork underneath. That way, the various dimensions of the artwork would be showcased and carefully placed on the page, while still flowing nicely.

At the time, her artwork was being professionally photographed, so I didn't have any specific pieces to work with to provide some clarity on dimensions. So, I ended up creating the wireframes with the idea that each piece of work would display at various sizes, and made sure that was explained during that process. The idea was to create a few page examples of the artwork at different resolutions without getting too in the weeds. It was agreed upon that each artwork section would generally have the same layout, but the dimensions of the pieces themselves would shift slightly once getting the final assets.

At this time, it became apparent that there were many different pieces of artwork, and it seemed that each piece had a theme. The categories of work were born, and were used as the navigation options.

Desktop, mobile, and tablet wireframes were created to show Jeannie how different resolutions may affect the page.

The visual design phase was a very collaborative process with Jeannie. She was very hesitant to show her artwork online originally, so I kept her as involved as possible throughout the entire process and we ultimately ended up having quite a lot of fun working together. She wanted the website to reflect her personality, but more importantly her artwork in the best way possible, and didn't want any UI design features to take away from any piece. Based on that, I felt a sidebar navigation would work nicely because it would not be a distraction if you were looking at a group of the artwork or a particular piece on its own. A basic white background was used to not take away from the pieces themselves, however I did play around with different colored backgrounds to show her some examples at her request.

We ended up categorizing her artwork into different pages and I had the idea of assigning a complimentary color to each category to add a little bit of personality and fun, considering the background color of the site is white. The colors were based on what supported the category as a whole as well as individually. As noted above, a masonry grid was created and a specific order was given to each to make the page flow nicely and eliminate any large gaps at the bottom of the page. The home page cycles through three different images per user session -- two are paintings, and one is a photograph she took while in California.

For the logo, Jeannie wanted something simple, so I suggested her signature in the way that she'd sign her paintings. She wanted the logo to be larger than usual for a more dramatic effect. A unique color (purple) was also assigned to the logo.

Based on Jeannie's signature, I found a nice font that looked similar and was still readable, and decided to use that for all of the H1's. Jeannie loved this idea and really felt like it made the website come together. It's amazing how attention to those types of details makes a massive difference on a website.

The website was created using Webflow as an efficient way to build the site. A CMS collection was set up for Jeannie so that she could manage and update her content easily in the future, and also so that the artwork pages that share the same page structure could be easily managed and updated if needed.