Independent Project

Independent Project

WIRED Magazine : Rebrand

WIRED Magazine : Rebrand

WIRED Magazine : Rebrand

Complete

Complete

Role/Contract

Role/Contract

Role/Contract

Designer & Developer

Designer & Developer

Designer & Developer

Advisor

Advisor

Advisor

Talia Cotton

Talia Cotton

Talia Cotton

Timeline

Timeline

Timeline

October 2023

October 2023

October 2023

Tools

Tools

Tools

HTML, CSS, JavaScript

HTML, CSS, JavaScript

HTML, CSS, JavaScript

Context

WIRED stands as one of the most influential voices in technology journalism, exploring how innovation intersects with science, culture, and society. While the magazine has successfully expanded its digital reach and maintained its position as an essential resource for understanding our rapidly changing technological landscape, its visual brand identity has remained largely static, failing to reflect the dynamic evolution it covers so thoroughly.

The aim of this project was to bring in a dimension of user input based interactivity, to further be in alignment to the evolution of the magazine’s vision.

Using code to manipulate and redesign a logo using a live data set.

Finding someone’s IP address is surprisingly quick and easy, whether through email headers, web interactions, or basic tracking methods. Once obtained, an IP address can be used maliciously to track a user’s location, launch cyberattacks, or even exploit vulnerabilities in their network.

WIRED magazine has a subsection dedicated to addressing updates and news about cyber security and digital privacy. Leveraging this, I wanted to redesign the logo to emphasize their efforts in this area and bring in some user-interaction to further push the notion of the dangers of cyber-security breaches and how we may be personally responsible for it.

This WIRED rebrand, visually demonstrates how effortlessly digital privacy can be breached. By accessing the IP address of the user to generate dynamic logos, the logo becomes a live demonstration of how easy it is to breach digital privacy, using visitors' own network data to generate unique, ever-changing visual identities.

Development

Development

Development

There are atleast 4,294,967,296 possibilities

An IP address in (Standard) IPv4 format consists of 4 integer values separated by periods. Each integer value, called an octet, can range from 0 to 255, which gives 256 possible values for each octet (since 0 is included).

Therefore, Total possible variations for generative logos =


256 × 256 × 256 × 256 = 256⁴ = 4,294,967,296 variations

Location: Germany

Location: France

Location: India

Location: Kenya

Location: Singapore

Location: Tokyo

Problem

Problem

Problem

Variation without parameters is chaos; variation with parameters is a system.

Any system designed to generate multiple variations becomes more powerful, controllable, and meaningful when those variations are driven by defined parameters rather than randomness.

In order to transform this randomness into purposeful iteration, I introduced a few parameters that will automatically apply to the IP Address collected.

Having large values as parameters (anything over the integer 80) would make the logo illegible (or quite simply, wonky)

Having large values as parameters (anything over the integer 80) would make the logo illegible (or quite simply, wonky)

Since this is a live API, the server would have to first attain the IP first and then produce results. hence the speed of the dynamic motion needs to be controlled.

Since this is a live API, the server would have to first attain the IP first and then produce results. hence the speed of the dynamic motion needs to be controlled.

Solution

  1. If any of the integer values is greater than 80, then it is divided by 1000 so that they now produce a parameter within the range of 0 and 80.

  1. Using Node.js to attain a string (IP address) on buffer.

2 — Playing with parameters that control the dynamic logo.

3 — Logo variation on the WIRED magazine web interface (darkmode, static)

3 — Logo variation on the WIRED magazine web interface (darkmode, static)

4.1 — WIRED (rebranded): mobile (darkmode)

4.2 — WIRED (rebranded): mobile (lightmode)

4.2 — WIRED (rebranded): mobile (lightmode)

4.2 — WIRED (rebranded): mobile (lightmode)