Tuesday, March 24, 2015

Project 5: A is for Alignment, Part 1

Above is a picture of the HTML and CSS files for the portion of the assignment in which we had to create our own composition.

This is the first design that I had. The strong vertical line seems evident, but I still think the design itself lacked depth and originality.

This is my second design that I decided to go with, and the HTML and CSS above matches for this one. I decided to make the A yellow, because the color black in combination with the size of it made it visually too demanding. I wanted to further emphasize the vertical line by doing what was done in the tutorial, which is aligning the words "A is for Alignment" on the opposite side of the line from where the body copy would be.

South By Southwest Poster

During the last pre-critique, some of the major areas that I needed to fix were the hierarchy and background. It looked as though the illustration of Danny Harley was more important than the band name and it actually became the focal point. "SXSW Austin, TX 2014" was also very dark and difficult to read. The mountains in the background did not make very much sense in relation to Danny Harley or South by Southwest. Above is how it looked during the last pre-critique.

I actually forgot or might have misheard some of the feedback given during the last critique. I was told to change the background and to look on the SXSW website at some of the new technology and bio-mechanical or bio-molecular objects. I might be wrong, however, and am either remembering wrong or misheard entirely. Still, I knew I had to look at current events going on at SXSW for inspiration. I noticed under the "music" portion of the logo, the colors were green and black with circular shapes. I was not sure if the circles would go with the typeface or triangles. I tried creating a single triangular shaped background, as seen above. I even tried keeping the lines dividing them, similar to how the "interactive" portion of the logo looks on the website. The problem with that was how much it distracted from the band name and body copy at the bottom. I wanted to triangles to tie in Danny Harley's illustration more. Overall, the colors here still need worked on, along with hierarchy. It feels a bit empty towards the middle-left. The overall purple color scheme did not seem right, as it lacked depth. It made the blue on his shirt stand out a bit too much on its own.


For this one, I blurred the background and layered multiple ones on top of each other, as well as changed up the colors in Illustrator. I think this is a step up from the previous design I had. At this point, I tried a multitude of other things, from taking Danny Harley's illustration and stripping it down to just it's frame again, overlapping those, and changing the colors entirely. Overall, none of them worked, and I did not take any screenshots of them unfortunately, but they all appeared cluttered, messy, and did not seem to express his music style at all. Here, the color scheme seems to be working better. The blurred background adds a nice depth of field effect, while bringing forth and illustration and body copy, making them more legible.

After many trial and errors of different designs, I eventually decided to try shrinking down the illustration of Danny Harley. I realized that one reason why he was constantly competing in visual hierarchy was because of not only his size, but also because of the highlight on his forehead. By making him smaller and changing the blend modes and opacities, I was able to make him blend more into the background. Enlarging the text made it more visible and demand more attention. Here, I also applied the "color dodge" blend modes to all of the text. The colors are used fairly often in his video "Given the Chance," and I wanted them to appear as lights shining onto him and the background. I asked Professor Mata what she thought of it, and she said that it did indeed seem a bit busy with the lights shining onto his face. So suggested that I try removing him, and it actually made the text much more readable, which is what set me up for how I laid out the next design.

Again, after quite a few trial and errors of moving things around, I decided to go back to one of my previous layouts. By aligning the text on the top-half to the right, and then aligning it to the left, it moves the eye across the page as it moves down. I think one of the reasons why it seems to work now, is because I got rid of the triangular shapes in the background and made it flat. I then took Danny Harley's illustration, and by making it large enough to take up the entire background, it beings to stand out much less and becomes less distracting as it sits behind all of the text. I changed the green to a blue color, because the blue seems to express his music style much better with all of the calming and slow sounds. The red helps to express his more upbeat or quicker songs. I get somewhat a dance feel from the song, which is evident in some of his songs. At the same time, I get an electronic feeling, which is also similar to his music style. It is a shame that I missed critique today, because it would have been interesting to see how people might have felt about the poster, and if they would indeed receive the same feeling as I intended.

Overall, I am still not entirely happy with the design, and I think there could be areas of improvement. However, I do think it is better than the original poster that I designed, especially in expressing what South by Southwest is all about. It was risky using the "color dodge" blend mode, and then placing the picture of Danny Harley behind the text, because it actually was different than if I would have placed Danny Harley in front of the text. Placing him behind the text and in combination with the blend mode, somehow made the text harder to read, but it also allowed more of the background to show through in the individual characters' strokes and fills. It adds interesting variations in value, which is one of the main reasons why I went with it.


Tuesday, March 17, 2015

Project #4: A Short Bibliography, Part 2



Above are screenshots pertaining to the first portion of the project in which we had to link a script font. I chose Georgia for the body text here, because it contained variance and contrast in its structure through the strokes of the letterforms. That paralleled and complemented the script font better than Verdana, whose structure is more uniform.



Above are screenshots showing the second portion in which we had to choose our own font to link to the HTML and CSS. I chose to use Verdana for the body text here, because it complemented the Impact Label font better. Its structure is more uniform than Georgia, so it matches better. There also are not many serifs in Impact Label, so again, they work well together, while creating a slight contrast.

Project #3: A Short Bibliography, Part 1


I used Easybib for all of my sources, but I think they are correct for the most part. I also kept everything about the same as for the one that was supposed to be down in-class. That post can be found further down around Week 6. I changed the background color of this one to make it more recognizable that this is the one with the updated different sources. It is late, so I do not expect to get any credit for it, but it was helpful still to do the exercise and become more familiar with HTML and CSS, again.

Week 8 - Revised Experimental Type Proposal

For my experimental type project, I would like to create a short animation in Adobe After Effects displaying in a fun and creative manner how the crystalline cobalt salt works in absorbing oxygen from surrounding areas. The end of the video could display short and quick facts about the newly created crystalline material, along with potential benefits.
I plan to create it by using O’s create the frame of a word, possibly the word “breathe.” I could display it in pink, the original color of the crystalline material before it has absorbed oxygen. From reading on how the mechanism works, oxygen atoms basically attach themselves to the cobalt base of the substance, replacing the nitrogen ones that were previously there. I could depict this by having blue oxygen atoms in the shape of O’s gravitate toward the word “breathe,” replacing all of the pink O’s. As they overlap the pink O’s, I could have them turn into a dark purplish color, representative of how the crystalline material looks when it is saturated with oxygen. I plan to have the word “breathe” dive into the water, and through the use of illustrators and sound effects, I think I can make it fairly believable that the word represents something, perhaps a fish. It could just swim around, both releasing and absorbing oxygen. While that occurs, I could have small air bubbles, again in the shape of O’s being released and floating towards the surface. Some of the O’s could enlarge and display information inside their counters about the crystalline material.
The materials that will be necessary for me to complete this will be a computer with internet access, and the programs Adobe Illustrator, Adobe After Effects, and possibly Adobe Photoshop. I will need the internet access to do research and find sound effects that will fit my video.
I do not think that the video should cost anything to produce, because all of the programs will be accessible through the Millersville University design lab. If necessary, I might need to find objects and drop them into water to visually see how the water looks, sounds, and reacts. If that is the case, then I might need to spend money for those materials, although I do not imagine I will need to do that as long as I keep the animation fairly simple.

Monday, March 16, 2015

Week 8 - SXSW Poster Update

Above is basically my final design for the poster, though some things may change, depending on if the final project is due tomorrow, or if it will be an in-progress critique, given we did not have last class due to weather. I wanted to go with the low-poly design, because triangles are considered to be associated with the "hipster" and indie genres. More importantly, the triangle plays into the idea of 3 sides, and how Danny Harley is responsible for 3 aspects of his music being the producer, singer, and songwriter. For that reason, I tried to repeat the number 3 in various designs throughout the composition. They also help to reiterate the typeface that I created for the band's name at the top with all of the angles and triangles found within the letters. I also decided to go with the blueish and purple tones and hues, because they help to reinforce the calm and almost psychedelic, euphoric sound representative in his music. The first typeface that I created is found at the bottom, where it says "SXSW Austin, TX 2014." I placed that at the bottom left so that it would not distract too much from the band name, and also because Danny Harley's eyes direct the viewer to the text, to keep the viewer moving around the entire composition. The second typeface is found in the band name.

This is the first draft that I created of the poster, when I was still working on the typeface for the band name and planning out where I wanted to position all of the body text. I figured that the typeface I had for the body text at the bottom did not go with the band name, so I had to create that separately. I ended up changing the A, G, S, and I a little bit.

This is another in-progress pic. Here, I had started to mess with the color of the background, along with the band name's typeface. I wanted a typeface that would look modern, and also reiterate the idea of triangles, almost resembling the constellations in stars to once again reinforce the psychedelic ambient sound.

 This is the first part of the process of creating the low-poly illustration, in which I used to the pen tool and went around creating triangles. The tutorial that I watched and followed in order to do this is posted below. I also used a picture of Danny Harley as a template for the design, which is posted further down below. It is evident that some of the vertices here do not line up perfectly, because they are not all triangles, and some shapes consist of only 2 sides instead of 3.

Here, I went through and used the pen tool to trace the inside of the "triangles" that I originally created, in order to end up with an illustration made up entirely of complete triangles.

Here, I went through and then selected areas where all of the vertices met, and aligned them at their centers vertically and horizontally. The bottom right shows how it looked before, and the top left shows how it looked after.

At this point, I had continued to mess with the colors of the typeface and background. I also used the eyedropper tool and began filling in the triangles that I had previously created. I thought it looked interesting having the contrast between the framework of the low-poly design versus having it actually filled in.

Again, I changed the colors, trying to find a color scheme that would be both exciting while maintaining the calm and tranquil feeling of his music. I also tried changing the corners and end caps of the typeface to see if it would look better pointed rather than rounded, because all of the triangles have sharp corners. I changed the color of the border to an off-white, almost lavender color to compliment the blueish/purplish color scheme, and added in my first typeface for the body text at the bottom left. At this point, I had completed the low-poly design of his face and body. I think the colors here are starting to work together more than in the previous versions, especially with the darker cooler background.

Here, I decided to add in what could be interpreted as mountains or trees far off in the distance. The composition seemed to need more values and also more interest. The body text at the bottom was rearranged and realigned, so that it would match the alignment of the band name better, rather than having it previously appear to create the form of a square or rectangle. This was going to be my final design, but I still felt that it lacked enough to tie in the low-poly design of Danny Harley.

Here are many of the cluttered guide lines that I used in order to create the band's typeface, and also for realigning certain other elements on the page, such as margins and where I wanted Danny Harley to be. Not all of the guidelines are necessary anymore, but I thought it was interesting to see how many of the guidelines ended up matching up with certain features on the composition. For an example, two guidelines outline the width of his earring, the width of his eyebrow on his left eye, his eyes, his pupils, the bottom of his nose, etc. Some of it was unintentional while others were intentional, and it's just very interesting to see how much everything relates to each other once done.

Above is the image that I used, after I had edited it in Photoshop to change the levels, curves, and color balance. I wanted it to appear sightly more purplish and blueish while also bring the shadows forward more, because I figured I would be able to accentuate those colors once I moved it into Illustrator.

This is the original image of Danny Harley.




Above are some sketches that I created in order to further develop the typeface that I wanted for the band name. It was difficult deciding between if I wanted the name to be in all uppercase, lowercase, or a mix of the two. I went with all uppercase, because it was easier to design following the geometric design. The "G" that I created here ended up being changed once I started putting it all into Illustrator. My overall composition idea also changed. I wanted to depict perhaps a person reaching upwards towards the sky, maybe for a balloon or kite to play in with the band name, but I felt that it might be a bit cliche.

Above is the tutorial that I watched on how to create the low-poly design. Although it was done in Photoshop, I added and manipulated the same principles in Illustrator, and it seems to have worked out fine. On the plus side, it is now vector based, so it can be scaled larger.


Monday, March 2, 2015

Week 7 - South By Southwest Band & Sketches

For the South-by-Southwest Poster project, I am choosing to design one for the band The Kite String Tangle.

The Kite String Tangle consists of one member, and his name is Danny Harley. From Brisbane, a city located in Queensland, Australia, he single-handedly creates all of his music, taking the roles of singer, songwriter, and producer. TKST has gained fame by performing at events such as South-by-Southwest in 2014 and the Coachella Festival. "Given the Chance" from his latest album "Arcadia" has gained popularity over recent months. He has accumulated over 1 million plays on Soundcloud, and took the #19 spot on Triple J's Hottest 100 list in 2013.

I first discovered his music from the following URL after doing a Google Search for "South By Southwest 2014 best":

http://www.people.com/people/article/0,,20794792,00.html

He reminds me a bit of a cross by Bastille's vocals and Kygo's rhythm. By far, I would also say I enjoy his music much more than the other band's and artist's that I have listened to.

8 Words That Describe TKST and their style:
Indie
Electronic
Reverb
Ambient
Modern
Tranquil
Progressive
Deep

Below are a few videos of his that I enjoyed and found to be both inspirational and informative in describing his music style:







I do not think the font that I have already created works well with the style of the band. My 20 sketches for my next font are shown below.



Of all of my sketches, I think some of the most successful ones are from the second page, particularly numbers 14 through 17. They are geometric and seem more modern, while reflecting the indie style of The Kite String Tangle.

It was difficult creating the letter K in a creative way without having it appear like other letters such as R or B. I also think it may have been better to choose a different letter than I, perhaps T, because it was fairly difficult to alter the I in a way that it would still be recognizable as one.

Below are sketches that I did in between before I decided on some final designs for the critique.






Resources:
https://www.triplejunearthed.com/artist/kite-string-tangle
http://www.people.com/people/article/0,,20794792,00.html