-
More than meets the eyeThe team – Melanie Loff-Bird, Allison Press, Lisa WongThe 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 WebsiteGenerating a unique 50 logo from an online surveyUsers 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!
Computer Science Generative Logo
-
- PROJECT FEATURED ON:
- AIGA Member Gallery — 3/13/2016
Project By
Multiple Owners
Discuss This Project: