Week 6 - In-Class Bibliography Assigment

This is the bibliography that I created with HTML and CSS that was meant to be done in-class with the sources already provided by Professor Mata. I will post Project 3, in which I recreate this with my own sources and change the CSS soon once I have completed it. Below are screenshots of my HTML, CSS, and how the bibliography looks once loaded into the web browser.

I apologize that the text may be individually difficult to read, because my monitor's resolution is 1440px by 900px, so I had to reduce the size of the entire browser window, which shrunk everything else accordingly.

I decided to use Georgia as my font. It was difficult getting the top and bottom of the container's padding to look equal with the padding on the left and right of the container. At one point I was able to achieve it, but it required me to change the padding and margin in the h1 and h2 elements. I tried to only alternate the size, weight, and lettercase. I might have been allowed to, but unfortunately, because I missed class when we went over this assignment, I was unsure and decided to not change the margins or headings to be on the safe side.

I changed the h1 element to uppercase, keeping the font-weight as normal, and change the size to 45px.

I changed the h2 element to small-caps via font-variant, the font-weight to 600 so it would appear bold, and the font-size to 25px.

Looking back at it, I think I may have been able to change the line-height of the headings, which might have visually balanced the margins and paddings better.

I decided to go with a mint green background, because I thought it was a fairly soft and pleasant color that contrasted the black text well.

Week 6 - Overview

I did not make it to class on Thursday.

During Tuesday's class, Professor Mata showed us how to work with Fontographer a bit more, and how to adjust the kerning between our glyphs, as well as between individual pairs. I will still need to go in and adjust that after I delete the boxes surrounding my letters.

She also introduced us to our next project, which is a poster for South By Southwest. I have no chosen a band out of the ones available yet, but I have listed a few that I have in mind, and I will update later once I have decided.

I am trying to find a band that will fit the typeface that I created, but so far, it does not seem as though any of them match it too well. I may have to just choose a band that I fairly enjoy, and create an entirely new typeface for the band's name.

At the end of class, I talked to Professor Mata about my idea of creating a typeface for the new crystalline material that is capable of absorbing oxygen. I misunderstood the original assignment, but after talking to her, she gave me a few ideas. One of them is to create the word "breathe" or something that symbolizes the crystalline material, and to then animate it in After Effects in a way that it reflects the material. For an example, I could have the word "breathe" diving into water and floating around, as bubbles are released from it to show the oxygen rising. I could also change the color of the word to reflect when it absorbs and releases oxygen, much like a pulsing effect. I could then also have words come in from the bottom or side providing information about the new material.

After Effects is a program that I am still currently learning to become more proficient with, but I think this may be a possible task to complete. I will need to do some sketches and illustrations in Illustrator, as well as maybe add some effects or filters in After Effects to see if I can get a promising composition.

Week 6 - Fontographer

I have moved my illustrator files of my mixed/created typeface over to Fontographer. Thank you Ty for helping me with that.

Week 5 - Overview

Class on Tuesday was cancelled due to a delay with the onset of bad weather conditions.

I also missed class on Thursday. I heard from classmates that we started to work with Fontographer, which I will need to learn and use. I have looked over the new bibliography assignment which I plan to continue this weekend. The second bibliography will be completed hopefully on Wednesday, if not earlier. Amber has added more to our Webydo webpage, particularly on the menu, so thank to you her. The page itself was expanded so that the container fills the entire width of the screen, so some of the items had to be moved around.

Week 5 - Creative Type Proposal

I did some searches for new technology, and one that I found interesting can be found at the following url:

Crystalline Material Absorbs Oxygen

Something that is fascinating about the material, which is primarily cobalt, is that it could potentially replace oxygen tanks. The material is capable of absorbing and storing oxygen from surrounding areas, including underwater. It is released through heating the material or creating a vacuum. Scientists are researching whether or not sunlight could be a potential catalyst to cause the expulsion of the oxygen. This could be a major step in technology, because the material could be manipulated in ways to create masks or attire for people with disabilities or simply those who require a constant oxygen supply in larger doses.

In relation to the experimental concept, I would like to create a geometric, modern, sans-serif typeface that changes color in congruence with how much oxygen is stored within the letters. The crystalline material becomes blue when it stores oxygen, and pink when it releases oxygen. Because of this, people will be able to visually see from the color of the font on the article of clothing or whether the text may be, how much oxygen is stored. One other important aspect would be how to transport the oxygen stored in the characters to the person who needs it. For an example, if a person had the name "John," and he had his name constructed from the crystalline material, then he could supply himself with oxygen without the need of a heavy oxygen tank. The name would be attached to his diving suit. Moreover, because only a few grains are necessary for one breath of air, while he depletes one letter's worth of oxygen, the other can continue to store oxygen. If the letters had a way of being removable, then divers in teams could replace each other's letters in need of oxygen. For an example, "John" and "Natalie" could exchange N's incase one is running low on oxygen. Furthermore, the attachment of this font would be lightweight and more personal to each individual.

It would have to created by first designing the typeface, most likely in Adobe Illustrator. Creating a legible typeface would be most important, but also working through geometrics to utilize the most capacity for oxygen storage while using the least amount of material and surface area of the font or crystalline material. I suppose the typeface could then be created via a 3D printer or cut from the crystalline material itself. One of the most difficult parts would be creating a way to easily remove or attach the letter for easy exchange. Magnets might be a reliable.

It could work in the world by providing oxygen to deepsea divers without the clutter and weight of oxygen tanks. In theory, it would seem to be able to provide a nearly infinite amount of oxygen as it constantly absorbs oxygen from its surrounding area. For people who need oxygen supply more than the average human, this could be beneficial. Beneficiaries could range from athletes, to ill patients, to people with sleep apnea, and the elderly. Oxygen is essential to maintaining life, and it is also important in keeping the human body's processes working properly and regularly. If every person had the availability to extra oxygen supply, then that could potentially mean extra oxygen supply to the brain, and consequently, could lead to a brighter and healthier future.

Week 5 - Font Characters

I decided to revisit my mixed typeface from the beginning of the course and recreate it in a slightly different way. I wanted to keep the idea of making the typefaces appear to be in between a serif and sans-serif. In doing so, it created a slightly Roman appearance. Below are pictures of how it looks and how it looks after I rescaled and moved each character into their own separate boxes.

Week 4 - Overview

On Tuesday, we looked at each other's created experimental typefaces to see which ones worked best and were not only most creative but had good consistency. We then started to work on our next project of taking our created typefaces and scaling them properly to prepare them for Fontographer.

Today, we started class by finding websites that we thought worked well and listed reasons as to why. We then also picked examples of good websites primarily with typography. We went over the examples as a class, critiquing them. Afterwards, we looked at each other's Webydo's websites in order to apply what we had just learned and noticed about good webpages.

Lastly, we started going over our previous Word Connotations assignment.

Week 4 - Lesson 2 Word Connotations

For this assignment, I decided to go with the word "Sorry," because I figured that it could be applied in different contexts and perceived in different ways.

The fonts that I chose are Impact, Georgia, Courier New, and Verdana.

Impact gives off a much more sturdy and strong emotion behind any word, so naturally, the word in this case also appears to have more volume. It appears unwavering, but at the same time, seems to lose some of its sense of sympathy.

Georgia perhaps seems to work best for this word out of all of the other web-safe fonts. Because some serif fonts are considered "older" and more traditional in comparison to contemporary sans-serifs, it gives the word itself more of a classic or cliche feeling. It looks more formal than a san-serif and therefore can seem more sympathetic.

Courier New is a monospace font, and I wanted it to appear more as an automated message, similar to what a person might see on a basic error page or when a system error dialog box appears on older systems. It lacks sympathy most out of all of the pages because of its robotic connotation. I made the size smaller to simulate the typical font-size in a coding program.

Verdana, another font like Georgia that was created for the web, was interesting because it is a sans-serif. In all lowercase letters, it appeared convincing in terms of sympathy and emotion, but still did not seem as convincing as Georgia. Having it in all caps brings out a heightened feeling of emotion, as if a person were shouting it rather than saying it. The line-through was added, because it gives an insincerity to the word. The word itself in all caps already appears slightly insincere, because it appears more out of anger or frustration than of sympathy and understanding.

Above is the code that I used for the html and css.

Of all of the examples that I tried, some that stuck out to me were Lobster, Reenie Beanie, and Comic Sans (not pictured).

Lobster was interesting, because it gave the word a sincere connotation and formality, much more formal than Georgia. It is a decent looking script font, although I do not think it works as well with the word "sorry" as a different script font would.

Reenie Beanie was interesting because it looked more like natural handwriting, and because of there, reflects a sincerity expressive on a more personal basis than many of the geometric fonts. At the same time, it then lacks formality, which depending on the reason for the apology, could have a major impact on how the apology is perceived.

Comic Sans was also interesting, because it was similar to Reenie Beanie with the exception that it is a much uglier font. Because of how unvaried Comic Sans is terms of its stroke width, the words appear more processed. There is an inconsistency between trying to achieve authenticity of natural handwriting and a processed, refined, font. Because of that, it lacks depth of emotion and makes the word "sorry" appear also processed and fake.

Week 3 - Overview

Last week we created different typefaces in experimental ways on Tuesday, and they can be found below. The ones that I created myself outside of class are the two last ones at the bottom, made out of art supplies and bathroom supplies. On Thursday, we critiqued each other's webydo webpages. We were given good feedback that will be implemented as we continue to redesign and fix our pages. I will post pictures of it later after I've added some more content to it.

Week 3 - 6 Letter Word

For this project, my partner was Shane Stoy. Below are pictures and descriptions of our results.

Gum Wrappers:
It was interesting how many letters were made up of only one wrapper which could equate to one stroke of the brush or pen. Parts of the white wrapper almost blends into the background creating implied negative space.

Cookie Crisps Cereal:
This was delicious. The "E" was difficult to create, because maintaining the proper x-height meant not being able to create an eye for it.

Ripped Paper (Positive):
This one is made out of pieces of paper torn from a larger piece, utilizing the resultant positive space as the letterforms. One of my favorite parts of this is the fact that the counters within letters are filled and become part of the positive space while the letters remain decipherable.

Marker:
This is Stoy's bicep with the word "ripped" written in black marker. Writing on skin without considering the contours that could result of flexing creates an interesting overall balance and form to the word.

Clay:
This is our 3D one which is made out of clay. It's worth noting that although the two "P's" look different, they're both evidently "P's."

India Ink:
This is ink dropped into snow. The snow had practically frozen to the point it was as hard as ice, so the ink did not permeate through it very much, resulting in crisper letterforms. The contrast between the black and white helps the letterforms to be even more pronounced.

Receipt Paper:
Those are letters cut out from a receipt. The "E" is actually a "3" that has been rotated 180 degrees counter-clockwise around the z-axis.

Ripped Paper (Negative):
This is the negative space that resulted from tearing out the letters in an earlier example. This, along with the other ripped paper example, puts into perspective the importance of context and how it can affect the visual appeal of letterforms.

Paper Scraps:
These are the scraps of paper from being torn out of the notebook. Something interesting about this is how parts where the scraps stand perpendicular to the table, it creates an effect similar to thinner strokes as opposed to thicker strokes created from the pieces laying flat and parallel to the surface.

Gum:

This is chewed gum. I was given the idea to put in onto my shoe from Professor Mata, which really helps to give the entire piece visual impact and puts it into better context than on paper. The top of the "R" should have been flattened more. 

Bathroom Supplies:

From left to right, the products used were body wash, petroleum jelly, aloe vera gel, face scrub, hair paste, and shaving cream. Some of the products by nature lended themselves to being more easily manipulated. The kerning between the two P's could have been better, but I overestimated the spacing.

Art Supplies:
From left to right, the supplies are a mannequin; paint brush; kneaded eraser; mechanical pencil and erasers; tortillions and highlight caps; and an exact-o knife and stapler. I should have flipped the paintbrush so that the bristles were up top, because it would represent the jot of the I better if it were lowercase.

Week 3 - Mixed Typefaces

For my mixed typefaces, I decided to go with Myriad Pro and Chaparral Pro, because Myriad Pro provides for good readability. I considered Helvetica, but I have used it for too many other projects, so i wanted to try experimenting with something different. Chaparral Pro stood out to me because of its large serifs. I wanted to try to mix in only a couple serifs to create a hybrid of sans-serif and serif. Many of the letters appear unbalanced and there is a lack of consistency and unity throughout the entire set. The lowercase "o" appears bolder than many other eyes, along with the eye in the lowercase "e," because I overlayed those layers and did not remove overlapping areas. It was a fun experiment, but if I were to refine or perfect it, I would vary the stroke widths of the crosshairs, cross-bars, and stems. I would also add more serifs from Chaparral Pro to balance everything.