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.
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.
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!
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.
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.
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.
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.
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.
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.
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.
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.
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:
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.
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
Using the Pattern Type app
Visualizing coding languages
By assigning each language its own symbol in a pattern
By assigning each language its own symbol in a pattern
Working on an isometric grid
To add depth and substance
To add depth and substance
The Team
A trio of designer and developer friendship
A trio of designer and developer friendship
With our own, generated logo:
Thank you!
