For the midterm/logo project, I wanted to redesign a pre-existing logo. I searched through my laptop and phone trying to find a company I already know. I found the company christianaudio. Their site “offers more than 7,500 audiobooks, lectures, interviews and more from over 55 Christian publishers, ministries and organizations. Many ministries provide exclusive or free content on christianaudio.com that is not available anywhere else.” But their logo looks likes this:

The green leaf doesn’t accurately represent their company. If you just saw the green leaf – like on their app – then its easy to think it belongs to a different company.

The green leaf reminds me (and a few of my classmates) of ancestry.com, other genealogy companies, or environmental companies. I can understand a bit of why they might’ve picked the leaf in the first place. Their mission statement includes: “The mission of christianaudio.com is to be one of the most trusted places on the Internet for the refreshment and growth of the soul.” They use the word growth. Leaves have become a well-known symbol for growth and/or new life, and nature is easily paired with refreshment. However, for this company, I had to look up their mission statement to understand the logo. I think a redesign would help potential customers understand faster who the company is when looking at the just the logo.

The current idea I am entertaining is keeping the same green color and using symbols people would associate with audiobooks (whether just “audio” or “books” or the combined word “audiobooks”) and infusing that with a Christian aspect. I’d like to specifically work with christianaudio’s categories of audiobooks as my three variations. The three I want to work with are: Business and Finances; Family and Relationships; and Womens Interest.

I thought back to typewriters and old printing presses for this assignment. I decided I wanted to have each of my letters encased in a rectangle. I also wanted to add some sort of “flourish”. I drew out the first few letters of the alphabet, then drew out what I wanted my letters and word to look like. I also included the vertex point to help me visualize how many I would need and where they would be relative to the others around it.

First, I made a grid with Professor Rune’s Easygrid. I first worked on the A in Module 3. Then, I moved it over to Module 4. I just worked on the basic letter outline – no rectangle or “flourish” yet. With each letter, I made ellipses at all the vertices so I could visualize better.

I then started working on the C.

I finished with the R.

I added the flourish next. I made a line that lerps from the left top side of the letter to the right top side of the letter. Each of these lines ends at the height of the module. Then I added the rectangle that encased everything. As I did with the last project, I made the grid scalable to any size canvas.

CODE:

https://editor.p5js.org/ashleyfriedland/sketches/SJ4Yjo657

I had to recreate my Brockmann Poster code using the EasyGrid js library designed by Professor Rune Madsen. The grid helped me visualize where I wanted everything to go and estimate out the measurements. First, I put the colored background rectangles in with the grid. I couldn’t get the preliminary square I was using for positioning to align with the first (upper left) module.

Through email, Professor Rune said that I need to use the grid.STATE.rows, not the modules option in order to make the rectangles “fit” inside the grid I had made with his library. With the above picture, the code was only grabbing the last mod made, not the first and not all of them. Now I just had to put the blocks “inside” the modules I had created with the grid. I thought this would be simple, but it took me a while to figure out how to correctly code it. I had to actually draw out a sketch to map out measurements. I also referred to the original poster many times.

First, I started with a for loop. I had my original grid layout of the three rows and two columns with a gutter that I used as a base grid. The squares didn’t quite “fit” the modules, but that was in part because I was trying to stay “inside” the module, not directly on top of it. Then I decided to just to the right side of the grid of where I’d be placing the blocks (illustrating the words’ positions on the original Brockmann poster).

I then tried to pick out specific modules to have the blocks attach to. This took me a long time to figure out. I kept getting error messages that the editor couldn’t read a value and others. Finally, I decided to hardcode each block inside the for loop. I just made a new variable six times (for the six blocks) and made the for loop individually grab each mod so I could manipulate its positioning. Then I was able to shrink the blocks down and started to position them against the gutter and edges. Once I got the first block positioned, I was able to copy and paste the code six more times (block 4 has two rectangles while the rest only have one) and just change the numbers for the specific module.

Once I had all my blocks correctly placed, I went through my code and cleaned it up. While doing this, I found that my grid was too hardcoded to the current canvas size, so I worked on making it applicable to any canvas size.

After that, I manipulated the color scheme a bit. I decided to make this slightly more hardcoded as I wanted colors closer to the original poster, but still unique. I gave my starting hue and starting lightness and overall saturation fixed numbers. My change hue and change lightness values were smaller than the previous versions.

Here are the original poster, my final look, and the final in different canvas sizes. I decided to do filled in blocks as opposed to just the outline I chose in the previous version. I like this look better.

CODE:

https://editor.p5js.org/ashleyfriedland/sketches/HkG1oudq7

I started this piece by separating my canvas into thirds – visually and in the code. I made my three separate colored rectangles using a variable where I had cut the height into thirds. This proved making the rest of my code slightly more difficult. I then edited the background colors and rectangles to be in for loops. I made rectangles where the text would be on the original Josef Müller-Brockmann poster. I only used stroke. Placing these took some math and guessing on my part. I had to calculate based on the variables I had made in regard to width and height. I went back and forth between fractions and decimals – whichever made understanding the proportions easier to me. It took me a bit to get the first couple of rectangles, but I slowly got the hang of it. I’m wondering if these rectangles would’ve been easier or harder in a couple of for loops – one for the left side and one for the right. I think the code works relatively well with being applicable to any size canvas. I think there may be a few small discrepancies if the canvas size is too small or too big. There is a slight issue with the color scheme. Sometimes, it works well and gives three distinct colors. Other times, it seems like it picked the same hue, saturation, and lightness. Sometimes these same/similar rectangles are next to each other. Maybe I didn’t make the variation big enough?

https://editor.p5js.org/ashleyfriedland/sketches/ryGvsNI5X

For this project, I wanted to have it from the astronaut’s point of view. Therefore, I have part of his helmet ( a beginShape() with a quadraticVertex() ) fringing the top and bottom of the design. Then I wanted Mars to be seen, as he’s stranded on Mars, so I made the ellipse to be Mars. I didn’t want it to be just a flat ellipse, so I added some “depth” by putting some craters on the planet (random ellipses with edge boundaries). I did a little research into what can be seen from Mars and saw that Earth and a few other objects can be seen from Mars. In my code, then, I put three ellipses a little off center and in a slight curve – which I saw in some of the photos I saw. The background is black because of space, and stars, as there are lots of stars dotting our solar system. The stars are tiny ellipses (with a width and height of 2).

The Mars ellipse, the Earth and others ellipses, and Mars’ craters are all color changing. They each have a color range set. The stars and craters are in a for loop.

I decided that I wanted a code that could output virtually the same image regardless of the canvas size. For this, I made almost all widths and heights related to those variables, adding a multiplication or division to position the certain object. I think the only issue with this is the craters – their sizes are actual numbers.

I crudely drew it out to visually see what I wanted to do:

Sketches in the p5 editor:

https://editor.p5js.org/ashleyfriedland/sketches/SJTLiErK7

For my sketch, I had water be the “wet” thing and a cliff be the “sharp” thing. To do this, I used the bezierVertex() for the water, then put it in a for loop so it would repeat across the screen. I also had to tweak numbers quite a bit to find the style that I wanted. It really helped to visualize where the control anchors were. For the cliff, I just used beginShape() and endShape(CLOSE) and put a few vertices in. I kept the cliff concept clean cut to emphasize its sharpness. I wanted the water to be a bit more dynamic, so I made a for loop inside a for loop to go across and down. The roundness of the top of the waves and motion captured in it reminds me of water rushing over into a waterfall – something that is very wet.

https://editor.p5js.org/full/H1q_1QhOm

Throughout the conversation, it seemed Kroeger was leaning heavily on theory and trying to get Rand to applaud theory. Rand, however, wasn’t taking any of it. He seemed to take Kroeger’s theories and say “Sure, but…”

My question thus follows: Did Paul Rand not study theory? If not, do modern-day designers apply theory to his pieces post-humously or do they derive theory from his pieces?

For my ice cream cone, I knew I wanted to use a for loop and make it look like concentric circles.

I put my for loop in and my ellipse and my triangle. From there, I tried the scale() function but found that it did not work concentrically. I then remembered to just multiply the size of the ellipse and triangle. The ellipse was easy – one variable and then set it equal to itself plus itself times 1.2. The triangle was much harder as there was no “sizing”. I made all points a variable then took the three points (first and third vertices’ x positions and the second vertex’s y position) that needed to “grow” and modified them to give the illusion of concentric triangles. With the triangle, I had to play with the numbers to get it to look just right.