Back

Artwork Sharing Platform Design

banner-garageDesign.png

Type:

Website Design

Skills:

User Interface Design, Web Design, Figma

Context:

School Project, Individual

Time:

2022

Figma Prototype Link

final (2).png

The Final Result

Background

This is a project from a user interface/user experience design course. Working individually, I am asked to design the layout of the homepage and user profile page for a fictional business. The project emphasises creating easy to use UI elements and clear hierarchies between different levels of UI elements.

I decided to design an artwork sharing platform that emphasises collaboration and interaction between content creators.

styleGuide.png

Style guide

Process

I started by searching for existing artwork sharing platforms such as Artstation and Pixiv. While searching for those platforms, I noticed that those platforms don't provide much infrastructure for content creators to communicate with each other. They either don't have the feature at all or hide the feature under several layers of elements. As the result, I decided to use encouraging communication and collaboration between content creators as the key focus of my fictional artwork sharing platform.

ref_pixiv.png

ref_artstation.png

Landing page of Artstation and Pixiv. Notice that group communication methods are nowhere to be found

Such a finding encourages me to focus on providing better group communication and collaboration experiences for my fictional site. I started with making multiple rough greyscale drafts of the website layout, and then choose one set layout to refine from rough drafts.

draft_initial.png

Some initial drafts

draft_refined.png

Refined drafts

To make communication tools more accessible compared to existing platforms, I decided to put user's discussion groups and ongoing projects right on the homepage and user profile page. It aims to make those features more visible and therefore encourages users to use them more often. After deciding the final draft, I created the style guide and used it as a reference to create the final product.

Reflection

This project lifted my web design skill compared to previous web design projects that I had before, and I believe it is because I made more variation and brainstorming efforts compared to previous web design projects. After this project, I feel more encouraged to be more patient and do more variations before landing on the final design.