Objective

The goal of this project was to redesign an artist’s portfolio website. It was built years ago using a limited version of Website Builder. The old website lacked responsiveness and just needed a refresh. My goal was to declutter and add a modern design.

Result

I redesigned the website with a more clean and modern design that allows the viewer to focus on the content. I also moved the website to Wordpress for the expanded design options and the ability to easily update the content from the dashboard.

Website Critique

I began this redesign by reviewing the old website. I took notes on what I liked and what could be improved. Here are a few key observations: The layout doesn’t translate well to mobile. The header has a bad habit of scrolling outside of the allotted page width. Too many options in the menu. Fonts and colors could have a more modern look.

Gathering the Info

Next step was to discuss options and goals for the website. I wrote up a quick questionnaire to learn more about the objectives. The purpose of the website was to allow people to view Manny’s artwork, learn where to find available art, find info about the artist, follow him on Instagram, and contact him. After meeting and reviewing the answers I began to research websites in the art world.

Planning

After doing the research I started to develop a plan. I put together a simple sitemap to guide design decisions. I also collected the content to be used in the new website.

Sketching & Wireframes

I sketched up a few different design ideas and converted them into wireframes. I presented the different designs and we discussed potential options. We decided to move forward with the third option.

Style

I had the basic layout of the website and the content and so I began to put together some branding materials. My goal was to make the website more modern looking with layout, color, and fonts.

Color

Many of the paintings are colorful and or have dark backgrounds so I wanted to use a white background to let the paintings stand out. The main photo on the home page is very colorful so I decided to pull some color inspiration from there.

Typography

I wanted to use a quintessential modern font. I played around with many different font styles but eventually landed on Open Sans and Nunito. These two fonts look nice together, they’re easy to read and don’t pull attention away from the art.

Mockups

My overall goal for the design was to make the content stand out and meet the objectives discussed earlier. I went through a few different iterations of mockups until I was happy with the design.

Development

The old website was built with a limited version of Website Builder. I initially tried to build my design with Website builder but I realized that the software was too limited.

I built the website using Html, CSS, and Javascript to see what was possible. It was perfect except for one small detail, the owner would not be able to make updates himself. After a lot of research I decided the best course of action was to use Wordpress. Wordpress has many more options than Website Builder but still makes it easy for non-developers to make changes.

I went back and forth trying to decide whether I should build a custom theme or use an existing theme and plugins. I chose the latter because it’s a simple website and I could complete the project sooner.

Conclusion

I learned a lot from this project. Wordpress is a nice way to build a website for someone who wants to make their own updates. Image compression is a must for large galleries. I learned about transferring hosting, connecting email to the new host, and tracking what each plugin does. (Thanks Plugin Notes Plus!)

Next time I take on a similar project, I will save some time and go straight to Wordpress. It’s really easy for admin to make changes and updates. I love front end development but this was a practical way to achieve our goal.