Ass­e­s­s­m­e­n­t 2 Logo for Des­i­g­n­l­a­b

by Jingyi Tang

Design Brief

Design a logo with never changing and never repeating animations for DesignLab, with the limited color black yellow and white, to be interesting and attract the tension. I consider using the pattern, typography, and coloring contrast of new icon to show the concept and feels of “designing”.

Inspirations and Research

For things related to design lab, I first think of light and technology, as yellow can be showed as neon signs, lasers, and nature light in the universe. And I started a trail. Imaging people in front of the screen holds a laser gun, the rays scanning from bottom to top, seems to aim at the design lab text but never align because the laser gun is too heavy to hold, and need to rise up again. I found out it will be fun for turning it to a shooting game with mousePress, when the yellow rays reach the design lab texts, click the mouse and breaks the tags. However it is not the goal to design the icon and text and break it with a game. (I will keep the idea in mind and maybe I can finish the game later).

  • Show Sketch
/** @peep sketchcode */
// reference for code: http://www.openprocessing.org/sketch/165202
//* @pjs font=/uploads/16080/controllerone.otf; */
 
float y = 400.0;         //vertical variable
float radius = 15.0;     //radius
float v = 5;             //velocity
float a = 0.98;          //acceleration
float g = -0.99;         //gravity. In this case absolute value of g need to be different from a.
 
void setup() {           //set up the canvas
  size(400, 400);
  smooth();
  noStroke();
  ellipseMode(RADIUS);
}
 
void draw() {
  // The texts for Design Lab
  // Central text line "Design Lab"
  PFont font = createFont("/uploads/16080/controllerone.otf", 52); //Font for Design
  textFont(font);
  fill(255,255,255); 
  text("DesignLab", 30, height/2); 
 
  // First pair of texts above and below the central line
  PFont font = createFont("/uploads/16080/controllerone.otf", 44); //Font for Design
  textFont(font);
  fill(255,255,255,30); 
  text("DesignLab", 55, height/2-45);  //above center
  PFont font = createFont("/uploads/16080/controllerone.otf", 44); //Font for Design
  textFont(font);
  fill(255,255,255,50); 
  text("DesignLab", 55, height/2+45);  //below center
 
  // Second pair of texts at the outer
  PFont font = createFont("/uploads/16080/controllerone.otf", 36); //Font for Design
  textFont(font);
  fill(255,255,255,80); 
  text("DesignLab", 80, height/2-85);  //on the top
  PFont font = createFont("/uploads/16080/controllerone.otf", 36); //Font for Design
  textFont(font);
  fill(255,255,255,160); 
  text("DesignLab", 80, height/2+85);   //at bottom
 
  //The yellow lasier ray
  fill(0, random(40,100));
  rect(0, 0, width, height);
 
  //The ray starts from left to right horizontally
  //Central ray
  for(int i=0; i<380; i+=20){
    fill(255,255,0,random(0,80));
    ellipse((20 +i),y,radius+v*2,radius+v*2);
  }  
 
  //First pair of rays above and below the central line
   for(int i=20; i<360; i+=20){
    fill(255,255,0,random(0,160));
    ellipse((20 +i),y-40,radius+v,radius+v);
 
    fill(255,255,0,random(0,160));
    ellipse((20 +i),y+40,radius+v,radius+v);
  }
 
  //Second pair of rays at the outer
  for(int i=40; i<340; i+=20){
    fill(255,255,0,random(i));
    ellipse((20 +i),y-80,radius+v,radius+v);
 
    fill(255,255,0,random(i));
    ellipse((20 +i),y+80,radius+v,radius+v);
  }
 
  //Vertical movement of the rays
    v += a+ g;
    y -= v;
    radius += g + a;
  if (y < 0) {
    y = 390;}
 
  // Changes the radius everytime bounce outside
  if(y>400){
   v=5;
   radius=15;
 
 }
}

Sketch of design process As I am a design student, I reflect on the design process. Design is how to make it works – by Steve Jobs. The massive thoughts in the beginning, and a way to manage it to solve problems, with both passion and anxiety in the process, this is I want to show to the audiences.

Final logo and Alternative sizes

  • Show Sketch
/** @peep sketchcode */
///* @pjs font=/uploads/16080/controllerone.otf; */
 
//Setting variables
float x = 0;           
float a = 0;            //angle
float radius = 60.0;
float speed = 0.01;      
 
//Setting void background and canvas size
void setup(){
  size(400,400);
  background (0);
  noStroke();
  smooth();
}
 
void draw(){
 
  //the Yellow Ball paint
  //Sine curve
  float yx = map(sin(a)*sin(a*random(0,0.2)), -1, 1, 0, width);
  float yy = map(sin(a*2+3)*sin(a*2.5), -1,1,0, height);
  float r = map(sin(a*2.0)*sin(a*3.5), -1,1,5,50);
 
  fill(255, 255, 0, random(160));
  ellipse(yx,yy,r,r);
 
  //the Black Brush paint
  //Cosine curve
  float bx = map(cos(a)*cos(a*0.5), -1, 1, 0, width);
  float by = map(cos(a*1.5+2.5)*cos(a*2.2), -1,1,0, height);
 
  fill(0,0,0);
  ellipse(bx,by,r+20,r+20);
  a = a + speed;
 
  //the White Rectangular paint
  //Circular movement
  fill(0, 0, 0, 2);
  rect(0, 0, width, height);
  fill(255,255,255);
  float wx = width/2+ random(1,3)*(cos(a) * radius);
  float wy = height/2 + random(1,3)*(sin(a) * radius);
  rect (wx, wy, random(5,30), random(5,30));
 
  //Creating the text
  //Black DesignLab in the center. 
  //Same color with background and shows up when the yellow and white brushes draw on
  PFont font = createFont("/uploads/16080/controllerone.otf", 52); //Font for Design
  textFont(font);
  fill(0,0,0); 
  text("DesignLab", 30, height/2); 
 
  //White text for Design
  //The word is hidden with white brush paint.
  PFont font = createFont("/uploads/16080/controllerone.otf", 32); //Font for Design
  textFont(font);
  fill(255,255,255,50); 
  text("Design", 160, height/2-50); 
 
  //Yellow text for Lab. 
  //The word is hidden with yellow brush paint.
  fill(255,255,0,50); 
  text("Lab", 180, height/2+50); 
}

In my words, designing is arranging the chaos of minds to one or a few solutions for one specific or related question. There are many random and messy ideas and insight flow in the head – the yellow bubbles, and lots of the idea bubbles break with a few survive, and generate new bubbles. Solving question appears to be a functional and logical work – the white rectangles run in the orbit. And there is always a black string to ties all thoughts and functions, which reminds you the goal, constrains of problem, and the fundamental law of the universe.

References

"Accell1" by AEA http://www.openprocessing.org/sketch/165202 "Sine function curves" by Magda Rzepka http://www.openprocessing.org/sketch/313039

Comments

Nobody has said anything yet.