foundational interaction design 


The purpose of this project is to explore the foundational skills of user interface prototyping. I started
this process from typographic signals and went all the way to making my own prototype for the Shall
Make Shall Be project, a CMU funded competition that supports/funds game creators and designers.

project origin:

SHI comes from the Chinese characters 试, which stands for try. This is my first time trying to design
and learning design in any sort of context, which resonates with the theme of this project - trying
different designs for different foundational skills.


My initial understanding of typography only stayed on the conceptual level. While the concepts and
purpose behind each of the signal was quite intutive, the application of each signal requires a lot of
experimentation. After more learning and reading,  the concept of seeing and reading really stuck
with me. I’ve never considered the voice of text and this concept really made me rethink how the
visual aspect of text can convey its emotions and context to its audience.

1 signal iteration:

2 signals iteration:

3 signals iteration:

The restriction of this project was to have three iterations of design with each using 1, 2, and 3
signals. Therefore, I had to choose each signal carefully. I knew that the first signal to use is
the “size” signal, because it is the one that makes the most sense for creating a basic structure
when everything else cannot be changed. I then chose “weight” since it is extremely useful
when it comes to drawing out important information for the audience. I picked “shift” as my last
signal because the information is not complex enough for “line spacing” to play as big of a role
in giving the design more depth and dimension.


1)  I could’ve altered the content more (in a way to make it more concise)
2) I could’ve tried other layouts for the different blocks
3) I don’t think I’ve played with the different signals enough
4) My understanding of signals was still lacking, requires me to look at more examples


Colour is a topic that I was really excited to get into, because one of my hobbies is to take photos as
a form to document time. When I take photos, colour is one of the main factors I consider. However,
I tend to stay within a very specific realm of colour combinations. Therefore, I was extremely excited
to explore the different realms in colour theory. One of the most interesting part of choosing colour
is when Prof.Pangaro mentioned that we shouldn’t trust the hex code as much as we trust our own
eyes. This is because what we percive may be very different from the actual truth, but we need to
consider how humans see instead of the relationship among numbers and digits.



Grid is a topic that I’ve always wanted to learn more about, but never had the chance to. I was extremely
worried about the use of grid, becuase with the experience of the typography signal assignment, I knew
this needed me to iterate many times before getting to a look that remotely satisifies me. This kind of
thought really hindered how I completed and viewed this assignment. Since I knew the iterative process
was important, I did not commit enough to each iteration. This meant that I didn’t learn as much as I could
if I had just kept on pushing even when I knew something was wrong.



information architecture:

I was immediately drawn into the notion of information architecture when I first learned about it. The idea
of organizing information like how architects usually design structures for both its functional and aesthetic
purposes really stuck with me. I first deconstructed the information into three parts and organzied them in
a way that the home page is concise, while the other two pages are detailed with its corresponding content.
One thing I realized that I’ve neglected after crit was the fact that information still tie in with each other on
micro scales and I should dig deeper into the relationship among the components I’ve split up.


final prototype - inital thoughts:

With the experience I’ve gained during the process of using typographic signal, colour, grid, and
information architecture to express the content for the Shall Make Shall Be project, I came in with the
following thoughts to keep in mind for the final prototype:

- To understand how information flow on a micro level

- Commit to every iterative process

- Try to appeal to the audience

- Make the content concise and to the point

- Explore out of my comfort zone

- Make a mood board for the theme

Since my audience will be game makers and game designers, I think a sci-fi / futuristic theme would be
a great fit for my audience. However, I wanted to keep the overall design relatively simple since the
content is the most important thing that needs to be conveyed. Therefore, I chose to focus mainly on
the basic gird and typographic signal while using hints of details from these pictures to draw the attention
of my audience.

final prototype - the iterative process:

I initially made a huge mistake of not keeping past versions of designs. This meant that many of my inital
designs are either lost or can only be found in PDF format in the progress crit. However, I found the progress
crit to be extremely helpful, and made me rethink how I should design the end product for the final version.
Here are my main takeaways:

- The interactive property of webpages can help save space by letting certain less important content expand
only when the audience intends to know (Bill of rights and FAQ)
- The bolding can be distracting and the use of grid should serve as a purpose to guide the reader as well as
organizing the relationships between contents
- White background with some futuristic detail added is not going to cut it in the drawing the attention of the
audience part
- Every iteration should start from scratch so I will not be distracted by what I’ve previously done


final prototype - the result (LINK):

I am quite happy with the outcome of this project. From exploring the meaning behind each concept to using
them on real world applications, I’ve learned a lot along the way. I think the main take away for my first ever
design project is to just try and iterate again and again with great confidence. This is because I think some
of my best work during this process is when I fully committed to my idea without looking back and thinking
about the following iterations.


Thank you for reading,