Computer Science Generative Logo

  • More than meets the eye
    The team Melanie Loff-Bird, Allison Press, Lisa Wong
     
     
    The power of computer science lies beyond the flat pixels of a computer screen. It's a field that has continued to evolve at a swift pace over the past 50 years. Our logo captures this spirit of moving forward, and the endless potential of the field.
  • About the logo

    Our "50" logo references the flat pixels of a computer screen, while also symbolizing the depth
    and unseen power of the field. It pushes out of space and moves forward. The use of contrasting 
    gradients creates an optical illusion in which the 50 appears to move in several directions-
    referencing a love for puzzles and problem-solving in State's computer science students.
  •  
    NC State Branding
    Three color variations reflect the university's three official school colors.
  • Collateral Examples – Invitations
    A commonly-used collateral for the department will be invitations to use at fundraising and alumni events.
  • Collateral Examples – T-Shirts
    What a hip and fresh shirt for the Computer Science student to don on a quick walk to class!
  •  
    A Generative Mark

    A 50th year anniversary is not only a celebration of the Computer Science 
    Department's achievements, but also the achievements of its students. In addition to our
    mark's static form, we also created a website where students, alumni, and faculty can create
    their own personal, "50" logo that's based on their experience as a Comp. Sci. student.
  • Website pages
    Examples of the online quiz that is completed by a user to generate their own, unique "50" mark. 
  • The Website
    Generating a unique 50 logo from an online survey
     
    Users answer a short quiz on a website that asks them questions about their experience in
    the Computer Science department at NC State: their working habits, the coding languages
    they learned, and the students organizations they were a part of. These questions correspond
    to different blocks that make up the "50," and move according to the user's answer. 
  • Step 1 – Starting the quiz
    The 50 begins as a flat mark. Once a student answers a question, the corresponding
    block on the 50 moves backwards or forwards, depending on their answer. In this case,
    being "more of a night owl" makes the first block move backwards. 
     
  • Step 2 – Continue the quiz
    Users continue to answer short questions relating to their experience in the
    Computer Science program, and watch each block on the 50 reflect their answer.
  • Step 3 – Ranking language skills
    The quiz also asks users to rank their expertise on several key computer science languages.
  • Step 4 – Make it your own!
    The final step asks users to upload a photo of themselves.
  • Step 5 – Where the magic happens
    The website samples colors from your uploaded photo, and uses them in your final, personal logo.
  • How it works
    The structure behind the scenes


    We developed the generative "50" logo on an isometric grid, so that as the 50's
    blocks respond to user input, they move by one block along the grid. This establishes
    a consistent system and allows us to easily assign value to questions and answers.

    The video below explains our system:
  •  
     
  • Our Process
    Experimenting with generative forms


    Below is a compilation of our ideas that led to our final logo.
  • Working with custom-made patterns
    Using the Pattern Type app
  • Visualizing coding languages
    By assigning each language its own symbol in a pattern
  • Working on an isometric grid
    To add depth and substance
  • The Team
    A trio of designer and developer friendship
     
    With our own, generated logo:
  • Thank you!