Typography Project 2

Letterform Construction

Scans

Choices

Final choices

Uppercase – Before

Uppercase – After

Lowercase – before

 Lowercase – after

 

Paragraphs of Type

I chose excerpt #2 because it seemed like an article I would read in a newspaper or a news site. Most news sites and newspapers use Serif fonts for their articles, so I chose the font Bitter.  I added a line height of 1.5 em to show a bit of distinction between lines, as a long article with a lot of words can look overcrowded. I also chose a narrower width, to give it a more news article feel.

The settings I used:

           Column width: 25em;

            Font-family: ‘Bitter’, serif;

            Font-size: 1em;

            Leading: 1.5em;

            Tracking: 0em;

Trying out different column widths:

100em

45 em

 

35 em

25 em

Expressive Type

To find different ways to express words, I wrote down what I saw/visualized when I read the word. I tried my best to show what I visualized without making it look like an illustration. I started with just using the words, black type on a white background, but when I started expressing the word popcorn, I thought of the red background with yellow type – this can help visualize popcorn as this is the stereotypical popcorn picture.

I decided to use a serif font for the word popcorn, because when written in lowercase, the serifs almost look like kernels. I also liked the look of a modern serif typeface, it gave the word a playful look, which can be associated with the word popcorn because of movies, fun, and entertainment.

I used different shades of yellow, to show value. Another reason is that not all the popcorn in a bucket will be the same colour. Some will be bright yellow and some will be light yellow. When I added the red background, it started to look like a logo for popcorn. I also like how the dark red background brings emphasis to the bright yellow text.

Instead of placing the text on a straight line, I piled it all together, rotating a few letters. This gives the illusion of popcorn, like it was put on top of a table.

Final Product

IxD Navigation: Fortune Teller

View project on browser

For this project, I decided to do a fortune teller. When I was looking through the choices for this project, I knew I wanted to do one of the fortune teller choices, but I wanted one that will challenge my design skills. I decided to go with my own rendition of Zoltar, a fortune teller machine, that gives the same responses as a magic 8 ball.

The target audience of this are teenagers and young adults. It is for entertainment purposes, but it can also help those who are having a hard time making a decision.

Below are pictures of Zoltar for inspiration.

I decided to name my fortune teller Morgana, based on a character from the game Avalon.

My final design for Morgana:

CODING

To start my project, I first coded the basic HTML elements. Then I coded the JS functions to tell the fortune.

Whenever I clicked the button, the page quickly refreshed and I did not get a chance to see the result. To fix this, I added the prevent default action.

When I first coded, it kept giving me the same answer.  

So I added the formula (see var fortuneTold) to give 20 responses in random order. The code worked!

While testing, I realized that even if there is nothing in the form, it still gave an answer.

So I added an if/else statement to only give a fortune if there is text in the form.

When I was designing, I noticed there was always a margin around my body. So I used the * selector to make the default padding and margin 0, and the white border disappeared.

I also noticed that the CSS animation played whether or not there was text in the box, so I added the same if/else statement to the animation  toggle function. I also changed the style colour of the text to be red if there is no text in the form.

 

The hardest challenge from this project was the animation of the arms. I needed the arms to rotate on the corner, not the middle of the picture. After research, I found that transform-origin moves the anchor point, and the arms rotated on the origin point I gave it.