Hello!
My name is Alex Bergin. I'm a web developer and designer living in Los Angeles.
About Me
I love creating anything interactive - from designing installations to developing websites and games. My work over the past few years has been primarily in web development, but I also have a strong foundation in graphic design and experience in motion and print design.
Contact Me
You can best contact me by email at me@alexberg.in.
Experience + Education
I’ve worked in the majority of the Adobe suite but have the most experience with Photoshop, Illustrator, and InDesign. Development-wise, I’m experienced in working with: Sass/SCSS, Javascript/Coffeescript + several frameworks, and HTML + several templating languages.
I’ve completed 4 years towards a BA in Graphic Design at the College for Creative Studies in Detroit, MI.
Soap / Ludomade
Web Developer
June 2013 – March 2017
Los Angeles, CA
Little Things Labs
Design Apprentice
August 2012 – May 2013
Detroit, MI
Compuware
Designer / Intern
May 2012 – August 2012
Detroit, MI
ShannonLoren
Designer / IT
June 2011 – May 2012
Detroit, MI
CSS A-Z
This was a self initiated project with the goal being to deepen my knowledge of how CSS can be used to create images and animation. I chose to use each letter of the alphabet to select a word that I would attempt to illustrate and animate using only CSS.
One animation was created in a few hours each day over the course of a month. I chose to use a simple flat illustrative style because it was the easiest to render with CSS. Initially, I was doing all of my animations by hand but developed a tool to help visualize animation components and output the code required.
The greatest challenge of the project was finding a word for each letter that could be illustrated and animated in the time I set aside for myself in a way that matched the rest of the pieces in the series.
Project Links
Bar Sans
Font + Brand
Bar Sans was originally made for my Eight Mile project, complete with two other regular weights and a signage dingbat weight that could create a different sign using glyphs.
Together, these two typefaces were used to craft the core elements of the branding used on my team's proposal for the Eight Mile Boulevard Association.
Normal Weight
Full uppercase set with numerals and common punctuation are included in the base font.
Why is this useful?
If you have this typeface, it's the only asset you need to create content in the visual style of 8MBA.
Dingbat Usage Key
Each signage piece was assigned to a letter and used casing to determine direction: uppercase for left facing, lower case for right facing.
An animated example of how the dingbat weight uses its characters to generate signage.
More examples of signage created with the dingbats weight can be seen on the 8MBA project page.
"Okay, it's great! So how would I go about getting this font for myself?"
I'm glad you asked!
You can see it in use and download it for yourself on this page.
Mr. Legs
Mr Legs was created for Ludum Dare 33 over the course of a single weekend. The goal of the game is to knock over as many towers as you can without letting your body hit the floor.
How to Play
Using the QW+OP keys, you can control extending and retracting Mr. Legs' legs. If you're on a device with a keyboard, give it a try below.
How it was made
Three.js is used to generate the visuals and cannon.js is used for physics. Everything except for Mr. Legs' head is constructed from primitives in code. The head was created in Sketchup.
Want to participate in the next Ludum Dare? Sign up here!
Challenges Encountered
The hardest part of this project (or any Ludum Dare project) was deciding what features to keep and what to cut. Making sure you come up with a scope you can surely meet is a great restriction and encourages creative solutions you might have never considered.
I really learned a lot about creating in three dimensions with this game. Having to work quickly really forced me to consider how things will work in the broadest sense, so I learned a lot of the basics.
Peanuts
The Peanuts Character Creator was created by a team at Ludomade as an interactive promotional piece for the Peanuts Movie. On this team, I handled developing the interface and pages surrounding the creator as well as assisting with asset export and positioning.
There were a lot of unknowns with this site at the outset. Our studio had never done a character creator of this scale or complexity before. One of the greatest challenges was designing and developing the interface in a way that worked well on small touch devices and large desktop screens.
Peanuts gave us new insights on how this genre of interactive site should work and paved the way for many more character creator projects.
Bandwidth
Monitoring + Plotting
Using a network monitoring program, I tracked my data consumption through my computer over the course of 3 days. Then, this information was plotted in 8 different ways using time, upload, and download rates. While each tile is able to stand on its own, the final piece contains all versions printed onto 11x22" transparency.
563mb
Total Downloaded
13mb
Total Uploaded
As the project went on, new vectors were added that needed to be plotted. Adding time gives some insight to what I may have been doing while collecting this information.
Type scale is very effective at illustrating quantity differences.
Using a high definition video as an example allowed the somewhat abstract amount of data transferred to be more easily comprehended.
Using pictures as a metric also highlight the different quantities in a way easily grasped.
8MBA
This was a sponsored project for the Eight Mile Boulevard Association undertaken at CCS that I worked on with Karen Timmermann Urquiola. The project began with initial research into Eight Mile, types of information systems that related to the boulevard, and several client presentations.
Over the course of a semester, the team I worked with developed a new identity system for 8MBA that included a custom typeface with 7 weights (one of which was a dingbat weight that produced the unique signage) and all of the printed material you see here as well as a brand guidelines book.
Trolls
Trollify Yourself was a character creator made for to promote the Dreamworks film Trolls. After completing the Peanuts character creator, we had a solid project foundation that allowed us to allocate more time to new features.
Colors were handled in two ways - using variable hue and pre made with set hue, saturation, luminance. This allowed extreme flexibility on assets where exact color didn’t need to be precise (shoes, shirts, ect.) and still gave us the option to define set colors where accuracy was needed.
One of the biggest new features and greatest challenge of the project was creating the interactive hair. A lot of effort and testing went into making sure the hair looked and behaved as you would expect the hair of a troll doll would. PIXI.js was selected for how easy it makes working in WebGL and for its filter and sprite system. I selected P2.js for the physics system for its spring behavior.
Physical
Crust
Crust is a short recipe book that contains instructions for preparing desserts and appetizers, the "crusts" of a meal. The book uses transparencies to hold cards that each have a photo the different foods and their respective recipes.
The cover was hand cut and the pages sewn together with red thread. I cooked and photographed all of the food on the cards myself.
Fontabet
The Fontabet book was made in an elective bookmaking class. I cut up old gold spine children's books to make the cover and then used a stenciling technique to pair each letter of the alphabet with a matching typeface.
Quotes on Business & Design
This book was designed near the end of my business practices class as a summary of what we learned about business and design while taking the course.
Vis Com I
Project one of Visual Communication I called for a utilitarian object, devoid of stylization that we would research and document.
The photos were taken to show action, rest, parts, and every angle imaginable. The similarities between the styles of photographs taken and the way we are taught to lay out text in type I were intriguing.
As the crits went by, type was gradually integrated into the square compositions with varying amounts of hierarchy. The final image and type compositions were mounted on foam board and put on display.