Ass­i­g­n­m­e­n­t #2

by Sarah Shultz


Creating a logo that fits many different needs and must be morphed into different dimensions calls for many different constraints that in the end helpd me visualize the design that would fit best with the color scheme, the mission of the faculty, and the typography. To incorporate an animation that also never repeats itself is challenging but also essential torwards always keeping a fresh and inticing design. After lots of brainstorming and researching the Design Lab websites, goal, and social media sites, I finally knew my design!


At first I was quite overwhelemd with having to create a logo that also incororates a never-ending and never-repeating animation that added a unique vibe, but that also did not take away from the logo itself. But upon searching through Design Lab website I was immediately inspiried by the DesignLab banner! While I couldn't use the bright blue and green in my design, the straight lines mixed with lines that had circles at the end, I knew right away what I wanted to create. My mind raced back to the scenes in movies or the backs of electronic pieces (such as computer RAMS) that had the small bronze circles and lines on them. While hard to explain, I thought that an endnless animation of switching lines that form 90 degree angles (along with circles) would be a nice balance between a "computing, structural, storng" design and also aesthetically pleasing with flowing movement because it is animated continuously. I also then envisoned the logo itself in the center of the animation, outlined by a shape with an opaque background to highlight the words, and make them still easy to read. Together I thought this design and animation would be enticing to watch but not overpowering in that it would be annoying to the eyes if someone was to study or present this logo to an audience on a large screen.


Surprisngly the process for my design was a lot less strenuous than I was preparing myself for. I broke each part down and created them separately, where the animation, the font choices, and the shape were all created on small scratchpads. I knew that I would be overwhelmed if I had tried to write all of the code in one sketchpad.

The first part I worked on was to decide which font out of the seven types I was provided. I knew that I didn't want any italicized fonts so I eliminated those from the start (just personal preference). I then narrowed it down to writing "design lab" in many different combinations such as DESIGNlab, designlab, designLAB, DesignLab, and so forth. I went with my first choice, DESIGNlab because I felt it was a different way to write the design and wanted the word "design" to really pop. I then narrowed down the font choices to one that was not too thick and not too thin because it would look off balanced if there was a combination of the two, and so finally I decided on Controller Two, the perfect in-between!

Next was deciding on the shape which initially I thought a square or triangle would look nice to encapsulate the logo. But when trying out both shapes I thought that the triangle, with the point pointing any direction was too unbalanced and the square was too boring. And so I decided that a circle was a nice contrast between harsh lines and curved ones for a cohesive design.

The hardest part of my design coding process was not the endless animation, but actually was combining all three seperate parts together. I also completely forgot that I needed to just put backround() in the draw function to clear the frame every time, because if not the circels would just keep adding on to each other and produce a completely opposite design. The combination of all three layers was hard to figure out because often the functions such as stroke() and strokeWeight() would coutnerbalance each other and affect a part of the design because of the order it was placed in. For an example, the lines in the animation would continuously get thicker because I set a random strokeWeight() for the circle outline, but subsequently also affected the background animation. To fix this problem (except on Peep), I just defined stroke and strokeWeight again and put each function within the draw() function in a specific, layered order.

I also added a varying thickness to the circle outline, that endlessly plays to add even more dimension and movement to the logo. This is not viewable in Peep but if you uncomment the strokeWeight() in the funciton shapeAroundLogo(), you can see my final design! Together I think the variance between colors at different sizes throughout the design combined with movement and static images, creates one united design.

I also have added two alternative formats of the "Design Lab" logo just for fun! I didn't know whether or not I had to keep Design Logo on the same line, so I kept a safe design and then added two more designs to provide a balanced design package!


For the future I would love to experiment with varying fonts that are interchangeable and animated, adding even more movement too the overall design. Also different colour schemes would be fun to play around with and I think it would create different moods and feelings. A fresh update, such as incorporating the bright greens and blues found on the Design Lab website, might be a nice touch as well.


Processing.Processing. Available : [Accessed 5 May 2016]. The University of Sydney Design Lab: [Accessed 5 May 2016].

  • Show Sketch
/** @peep sketchcode */
// Setup() function is initialized, size of the square is determined, everything else is called in the draw() function  
void setup () {
      size (500,500);
The draw() function is comprised of three different functions, along with backround() called
to clear the background at the start of every frame. I also slowed the frame rate down to 3.5 instead
of the default 60 frames per second because watching my animatiom that fast would be come very
annoying and irritating to the eyes, very quickly.
There are three seperate functions called because it would be very messy to write all of the code
that is unrelated to each other just in the draw function, thus I broke the functions up! 
The order of the functions also matter because first the background animation is called each
time the frame is played, then the shape around the logo is called, and finally the logo itself.
The functions are in this order to represent the bottom to the top most layer, if they were caleld
in any other order the different parts of my logo would be overlapped and hidden.
  void draw() {
      background(51); // clear the background at the start of every frame 
  } // end of draw() function
The logo() function calls one of the fonts provided from the local data folder "Controller Two". Unfortunately
the fonts are not accessible on peep project, but plug it into processing and the alignment and spacing between
the words are back to normal! I decided on a golden yellow because bright, canary yellow is too bright and jarring
to the eyes to see, especially contrasted aganist a moving background that also has yellow accents. Thus, a golden
yellow was used to write DESIGN in all capps, because I felt this was the most important part of the logo. Also
I added a dropshadow that is animated as well between a dull to full yellow to add dimension to the word "Design".
I then created "lab" in all lowercase and mad it not as flashy because I thought the contrast between the two words
would make it very appealing and easy to read. 
  void logo () {
      PFont font = createFont("../data/Controller_Two.otf", 30);
      fill(255, 195, 13, 255); // golden yellow
      text("DESIGN", 152, 250);
      // white dropshadow 
      fill(255, random(100,255));
      text("DESIGN",153, 251);
      text("lab",280, 250);
  } // end of logo() function
The shapeAroundLogo() function creates the circle surronding the "DESIGNlab" logo. Originally I had a square outlining
the logo but I felt that it was too similar and boring. So I changed it to a circle and thought the contrast between
circle and the overall square/quadrilateral shape (depending on the dimensions) would look more aesthetically pleasing
for a ovreall design brief. 
I created a random stroke of different greys, whites, and blacks to accentuate the circle! Unfortunately on Peep the 
strokeWeight interferes with the background animation, but if you uncomment it on Processing, I have also added a varying 
strokeWeight that really adds dimension and movement to the overall design!! (Definitely uncomment this in Processing, it
changes the design so much :)
  void shapeAroundLogo () {
      ellipse(240, 240, 240, 240);
  } //end of shapeAroundLogo() function
The bgDesign() function is a customization and inspiriation from the Tutorial 6.3 Random Tests notes. It was a perfect base template to
create my background animation. I adjusted the integer form -20 to -10 and +=10 to +=12 to account for more
spacing between the design. Originally it was too congested and I felt that I needed more space between each 
line and circle drawing for more balance. 0.5 in the if-statement was also altered to 0.3 to account for 
the new ellipses that I put in the design.
The ellipse() was added to the ends of random lines in the design
to replicate the header on the Design Lab website. (On the website htere are blue and green lines with a circle
at the end. This was my inspiration for my animation).
Next I added a random fill to the circles that would vary between white and yellow because just black or just white 
or even a mix between just greyscale colours was too plain and not eye-catching. Lastly the most important 
parts of this function that were soo simple but took me so long to get was setting the stroke() back to blac, 
because before the stroke would be random yellows or whites because of the other functions Together this 
was the function that was a lot of trial and error but worth the time for the end result!
  void bgDesign () {
      for (int y = 10; y <= height - 10; y += 12) {
      for (int x = 10; x <= width - 10; x += 12) {
          if (random(1) < 0.3) {
            fill(255,255,random(0,255),random(200,255)); // golden yellow
            line(x-5, y+5, x+5, y-5);
            ellipse(x-5, y+5, 5, 5);
          else {
            line(x-5, y-5, x+5, y+5);
      } // end of inner for loop 
    } // end of outer for loop
  }// end of bgDesign() function


Nobody has said anything yet.