Step #1: The Challenge

As I have worked in the creative industry for 7 years, redesigning a gallery website seemed fitting. Due to many cuts in the arts over the past decade, it has been no suprise that this has taken a hit in the promotion and marketing of independant and public art spaces. Since the arts are underrepresented, I wanted to focus on transforming an organisations website into a site that excourages support and patronage to keep these types of artistic organisations alive. The challenge is to transform the existing design into a clean professional site, to promote user experience and encourage user interaction. Let the idea stage commence!

Riverside Art Center Homepage
light bulb

Step #2: The idea

Colour Palette

Researching colour combination ideas for the new design by creating mood boards on Pinterest. I've narrowed the colour search down to shades of blue, to compliment the location of the gallery, (next to the river). Since it is a gallery page, it is going to be very visual, with different colour variations of artwork and exhibition images. At this stage, I have to be careful not to make the design colours louder than the content (Article Ref: Color Guidelines for the Web by Kezz Bracey).

color palette

Layout

Looking into layout ideas of existing gallery sites. Searching specifically for grid systems, well organised content and clear navigation. The UX design is important in the layout. No one will want to stay on the website, (no matter how great the design is), if the content isn't easily accessible (Article ref: 16 Web & Graphic Design Trends To Watch In 2016 by Ernesto Olivares).

Step #3: Wireframes

Starting the layout designs on paper, I then moved into Sketch to put these designs to the test! I designed four page layouts: home, info, gallery and listings. I selected the designs with the smoothest navigation, where all content can be easily accessed."The principle of good gestalt says that we prefer things that are simple, clean, and ordered". (Article ref: 8 Visual Design Tips for UX Designers by Kevin Rhodes).

wireframe
wireframe
wireframe
wireframe

Step #4: The Design

Continuing the design in Sketch, I added my content. I found that the original logo design didn't work on a small scale. The text was illegable and the colour scheme didn't compliment the new design. Using Adobe Illustrator, I created a new logo design/gallery brand, that was simple yet bold to match the redesign.

final website design
logo design

Step #5: The Final Design

The final responsive design was then uploaded to Invision, where I created an interactive prototype for you to experience the redesigned site! When interacting with the mobile version of the site, you can browse through the new sample layout pages. **Please note, unfortunately, this prototype cannot be viewed on your mobile. Please use a larger device (laptop, ipad) for the full experience!

Click here to use the prototype
logo design