design project 2: VCD promotional interface design

for this assignment, we had to create an interactive interface that can be used as a promotional material for the VCD Program at MSU. We were required to use certain text in our design:

Experiment. Fail. Learn. Repeat.

BFA in Visual Communication Design

Montclair State University

New Jersey

we used code we learned throughout the semester for this project

float; mousePressed();

PImage = img; boolean button

img=loadImage; PFont=myFont;

image(); myFont=loadFont;

if, else string s=("text");

cursor();

for this design, I wanted to create an interface that reflected my own personal style. I wanted it to be fun and whimsical while still being informative and readable. I used the idea of a TV screen and remote that would present a graphic on the screen depending on which button of the remote was pressed. I wanted to design my own graphics for each word we were required to use, while presenting a couple sentences to go along with the corresponding word.

I started by experimenting with a number of possible designs I wanted to use for my design. In my sketches, I showed examples of my ideas along with notes to explain the idea I was trying to convey.

I decided to use my idea with the TV and remote as it not only interested me the most, but it also seemed like something I could accomplish with the skills I have.

While I tried searching online for a graphic of a TV I could use, I couldn't find one that would work for my project. I also chose the TV design because I have a TV I could possibly use for this project.

I then took photos of my TV and remote. I cut them out and edited them in photoshop to use for my design.

original photographs:

edits in photoshop:

I then found an imagine online I could use for a background. I started to place and code these elements into my interface.

After this, I started to design the graphics I wanted to go into the screen of the TV. I also wanted there to be an image to appear when the code first ran, so I found an image of TV static to be placed there.

I also wanted a custom cursor for this interface as I felt it fit with the overall aesthetic. I found an image online and added it to the code.

I then started working on a typographic design element for each word. I created four graphics that would correspond with each button when pressed.

A challenge I faced with this project was figuring out how to go about placing the text. At first, I coded the text into the interface. This posed some issues as my text was looking too close together. I fixed this by placing the text right on the image it was sitting on. This overall looked better and was less difficult than coding it.

The original text I used was only in uppercase, so I used a different font with lowercase letters. This change made it more legible and helped with spacing.

before: after:

After the changes made and elements added, I was finished with the interface.

my code:

my project: