• About
  • RESUME
Anna Atiagina

Anna Atiagina, UX/UI Designer in Seattle, WA

  • About
  • RESUME

 

Screen+Shot+2020-01-25+at+2.55.18+PM.jpg

Hystory of Synths

Illustrated interactive website that tells the history of synthesizers from the early 20th century until the 21st century.

historyofsynths.com (currently desktop only)

It started as a school project with my classmate Scott Sanders but we kept working on it long after we finished the class. Scott was always a synth nerd and he made me one for the duration of our collaboration when we attended synths events and jammed together on the synths that he collected. As a result, I was inspired to create a series of illustrations (based on photos and synths that I saw in the real life) that became a center of our website. It tells the history of synthesizers from the early 20th century until the 21st century.

Process

The website had a long history of changes. Initially, we even invented a character who was actually told the story and named him Bob (after Bob Moog). This tiny robot had a friend (a dog) and even changed outfits while traveling to different eras.

Different eras, different outfits.

Bobchanges.gif

Even though I was really attached to Bob, the feedback showed that this character added some confusion and distracted from the history of synthesizers that was our focused. Eventually, Bob was taken from the website. I still have some illustrations of him for history (and because I like him).

Early version of the website: Fairlight CMI visited by Bob.

Early version of the website: Fairlight CMI visited by Bob.

Newer redesign of the synth card: more white space, different typefaces.

Newer redesign of the synth card: more white space, different typefaces.

I’ve added a few CSS animations to my SVG illustrations of synths but most of these animations tended to load the processor too much and were not very user-friendly because of that. I did a lot of research but it seemed that in 2017-2018 there was no easy way to achieve what I wanted to achieve without causing too many additional problems while doing that. I took the majority of fun affects off, and left only some small details like changing the lights in the Roland image below:

historyofsynths.com

Here is some of the details from the final version of the website that is currently live. It also has a few interesting links to the sources in the footer, so definitely worth visiting ;) Currently (2020) this website needs additional work since it doesn’t work properly on mobile devices but it still works as intended on desktop/laptop computers.

Scrolling from the top of the webpage.

Powered by Squarespace.