Style Guide

Interactive Elements

In-text Link

Sample Code

<a href="#">This is an in-text link.</a>

Navigation Link

Sample Code

<nav>
     <a href="#">Navigation 1</a>
     <a href="#">Navigation 2</a>
     <a href="#">Navigation 3</a>
</nav>

Text Styling

Four Levels of Headings

Heading 1 (heading)

Heading 2 (sub-heading)

Heading 3 (section)

Heading 4 (sub-section)

Sample Code

<h1>Heading 1 (heading)</h1>
<h2>Heading 2 (sub-heading)</h2>
<h3>Heading 3 (section)</h3>
<h4>Heading 4 (sub-section)</h4>

A Paragraph

I’m a fourth-year student of Simon Fraser University majoring in SIAT, School of Interactive Art and Technology. My major is multidisciplinary that gathers art, design and technology, both in theory and practice. I personally get interested in video editing, magazine typography and website layout design. I believe that graphic design is the foundation of the design field. My graphic design skills are reflected by lines, frames, simple shapes, white space and the interaction of these elements using Illustrator, Photoshop and InDesign. I prefer to edit video with Premiere Pro and After Effects. I can also build simple models using MAYA.

Sample Code

<p>I’m a fourth-year student of Simon Fraser University majoring in SIAT, School of Interactive Art and Technology. My major is multidisciplinary that gathers art, design and technology, both in theory and practice. I personally get interested in video editing, magazine typography and website layout design. I believe that graphic design is the foundation of the design field. My graphic design skills are reflected by lines, frames, simple shapes, white space and the interaction of these elements using Illustrator, Photoshop and InDesign. I prefer to edit video with Premiere Pro and After Effects. I can also build simple models using MAYA.</p>

Combined Elements

Main Navigation

Sample Code

<div class="navbar">
     <a href="#interactive-elements">Interactive Elements</a>
     <a href="#text-style">Text Styling</a>
     <a href="#combined">Combined Elements</a>
     <a href="#projects">Projects</a>
     <a href="#citation">Citations</a>
</div>

Projects

Introduction and Concept

The final project of the course IAT 344 Moving Images is a micro-documentary based on a topic chosen by our group to illustrate our skills of technology, narrative and working with a client. Our group worked with Bill Reid Gallery to make a video for their Indigenous Women topic exhibition, “Water honours us”. The topic of our video centered on the relationship between indigenous women, water and environment. The project required comprehensive skills and the process was complete since we need to start from the beginning to the final video.

Production Process

The process started with figuring out our interviewees then coming up with the interview questions. At first, our interview questions were pretty general because our topic was abstract and we have no idea about our interviewees, such as what topics they are sensitive to, or information about themselves. After the first interview, we gradually became familiar with the interview process and began to know about the group of indigenous women and their communities. Once we got several footage, we started to create rough narrative line and storyboard.

narrative line of film draft storyboard of film

The shooting process also required camera, lighting and audio set up skills so that we could catch shot of multiple scene sizes from different angles and natural-look light. We totally conducted four interviews over three months. The editing was iterative in order to meet the Gallery’s and interviewees’ requirement. With the addition of more interviewees, we need to rearrange the footage in video editing software Premiere Pro to make a more fluent narrative line. Besides organizing the order of footage, we also need to deal with the audio and color of footage.

interview scene1 interview scene2

Challenge and Reflection

Since we have five interviewees in total, the structure of narrative line is a big challenge for our group to figure out. With the increase of footage we got, we need to break the original storyline and came up with a brand new one. However, I think it's a successful project because of the fluent narrative and the sound effect.

Introduction and Concept

The project of the course IAT 102 Graphic Design is a three-spread magazine layout design practice based on a topic chosen by me to illustrate one’s skills of dealing with colors, text and space of layout. The filling text was provided by instructor. It was 6-page pseudo text and the task were to create a comfortable layout that illustrates the text with images. I chose to work with black and white images. The topic of the magazine centered on the art of black and white images. The project required comprehensive skills and the process was complete since I need to start from the beginning to the final magazine layout design.

Design Process

The process was iterative and started with selecting appropriate images to display on the magazine. Start from the sketch, I need to come up with different versions of the magazine template. The following is to select the potential font of title and sub-title.

magazine layout sketch font family proposal

Since the requirement of the magazine is to deal with black and white colors, I don’t need to consider too much about the colors, and the choice of my topic, the black and white images help me to save time on selecting images. After rough sketch of different possible templates, I start to work on the real content and the composition with InDesign. The layout was refined for several times before the final version came out.

Challenge and Reflection

The challenge of this project is that the required filling text contains plenty of words, and I need to put all these pseudo words to the layout with placing the images as well. In addition, we were just told basic rules of creating a layout but lack the knowledge of details, therefore, we need to refer to lots of magazine as reference by ourselves.

Portfolio Components

Fonts

Barlow

Light, Regular, Bold

Colors

Background

Projects title

Headings

Bio Draft

I’m a fourth-year student of Simon Fraser University majoring in SIAT, School of Interactive Art and Technology. My major is multidisciplinary that gathers art, design and technology, both in theory and practice. I personally get interested in video editing, magazine typography and website layout design. I believe that graphic design is the foundation of the design field. My graphic design skills are reflected by lines, frames, simple shapes, white space and the interaction of these elements using Illustrator, Photoshop and InDesign. I prefer to edit video with Premiere Pro and After Effects. I can also build simple models using MAYA.

Citations