"The Coin"
by Siqi Song

This website introduces a short stop motion film by the director and filmmaker Siqi Song.
View Website

Project Task

The task was to create an artist's biography website that includes four sections with a consistent design with varying information and presentation.

Process

Although I took a lot of inspiration from the filmmaker's website, I wanted this website to relate more to her film titled "The Coin." I decided to create a circular window on the landing page which features the title and a still from the film to have a greater impact while relating simple shapes to the story.

I decided to divide the four sections into the story(synopsis), process(behind the scenes), sketch(storyboarding), and about the director. I decided to design my icons to create a consistent look while adding unique touches for this project.

This wireframe sketch includes a responsive design for mobile and desktop. Overall, the structure is a simple one column for mobile and two columns for desktop.
This is a project wireframe that was composed in Adobe Illustrator.

I used Sublime Text to code the website. I would create a linked CSS stylesheet to organize my code. Often I would look back on my notes to remember the specific code. My coding process consists of a constant back and forth with my code, my notes, and the browser for when I decide to use codes that I have yet to learn.

I like to organize my code with spaces and indentations. I would often use the class attribute to style my code as a group.
I always take notes in my classes and I would later highlight my notes for further organization and reviewing.

Details

I designed the website to be clean and simple while utilizing personal design elements and complementary shapes to give this project its unique quality.

Throughout the website, I have used simple color schemes and recurring shapes of thin lines and curved edges.

The design first started with the circular window of the landing page and later created icons. The circle shape is also used for the background of the icons and the curve extends to the edges of the bordered paragraphs. The line quality of the icons is also mirrored in the border of the circular window as well as the border for the paragraph.

Results

The website successfully captures the calm yet a dynamic feeling of the stop motion film. The director's characters have such strong qualities that the minimal design of the website lets her stills speak from themselves.

Overall, this project went smoothly from wireframing to coding. The wireframes help significantly when creating a unique yet organized design where I was able to freely create shapes and make visual relationships throughout the elements. It was such a fun experience to have my mock-up turn into a website that I could share and interact with.

View Website