#making assignment

I’m not going to lie, this one was really fun to make. 

I have been running low on ideas for these makings, and so I decided to create something more driven by tools and technology this time, rather than content. At a career fair a few weeks ago, I was asked, “what do you mean by new technology? Which technologies are going to drive the future?” 

I thought it was a great question, and I was initially thrown by it - it’s not the type of question that I usually get asked at job fairs, but I quickly realized that I have an answer already. I think that if companies (especially communication companies) aren’t already investing majorly in AR, then they are going to be behind in the next few years. 

But this conversation made me realize that I haven’t been investing in AR, and I know almost nothing about it. So, this week I am dipping my toe into those Augmented waters. 

I found a tool called Zappar and signed up for a 30-day free trial. I explored their online tool and a downloadable one. Essentially, they have developed a simplified version of AR creation software and that’s what I used to create this week’s making. 

It’s pretty straightforward, and reminds me a bit of XD - a set number of objects and some basic animations that can be turned into pretty cool mock-ups. Here’s a screen recording of what I made:

Basically, this AR experience is 2 different ‘scenes’ with a button to take you through them. It was pretty fun to build. 

I also took some time to explore their downloadable software ZapWorks Studio. It’s a much more advanced tool for developing AR content.

For my Midterm Project in  Rich Media, we had to make an app which plays music. Since I am a big fan of Christmas in November, I made mine from a Christmas playlist. Once I had the project functional, I decided to take it one step forward by trying to apply some of the principles that we’ve been talking about in this class. 

When I turned in the project to Emuel, it looked like this:

As you can see, the app is completely functional, but it is hard to understand what the user is supposed to do. How do they play the music? As we talked about in Don’t Make Me Think, it’s essential that things are designed so that their purpose is obvious. Clickable things should be clearly clickable, and you can’t ask someone to think about what they are seeing. 

So what did I do? I knew not to add words, so I added buttons!

iOS 13 has a library of symbols which made this super easy. I didn’t have to design them, only pick the ones that suited my needs. So, I added this play button to my music player

Still, I knew that I could make this work better, so I played around a little bit and finished with 3 working buttons that clearly communicate their jobs. 

Here’s what they look like on an iPhone 11 screen. 

So now, I thought: I want to animate these buttons, especially the play and pause so that the user can tell if a sone is playing or paused. Then I looked at the tutorial for how to animate a button and saw that it was way beyond the scope of this assignment.

Making #3: Motion

For my making project this week, I decided to try some animation. This is my first time using After Effects, so bear with me. I’m actually super pleased with how it came out. I don’t have a ton of working documents for this since I was mostly messing around with After Effect’s different options until i found something that I liked. 

Basically, I ended up having the three buttons stacked on top of each other like this:

As the animation progresses, the topmost layers become invisible until only the bottom one is visible. Originally, I had it so that each button would be invisible and they would fade into one another, but that didn’t work because the button would ‘disappear’ during the transition. 

I also played around with the timings of the different fades until I found one that felt natural - I was thinking about the readings from this week and how adding a delay to these animations can help make processes less abstract and more familiar.

I also originally didn’t have the mouse included in this animation, but without it the animation lacked context- things seemed to be happening for no reason, and I felt it was necessary to add a visual guide. 

One struggle I ran into during this process is just how enormous one of these .aep files are. I couldn’t upload this file anywhere except Vimeo, and even then it took up all of the free storage I was allotted. Additionally, I hadn’t realized that After Effects uses links to Illustrator files, rather than embedding those files, so you can imagine my horror when I opened my project to this screen after moving it:

For my third making assignment, I decided to elaborate on my making 2 assignment with my logo. For my blog/portfolio, I’ve used the video I’ve made for my Italy trip as the background and decided I wanted to use a short “intro” video instead. I made the video and it’s up working as the background vid on my website: you can check it out here - claricezehri.com 

I’m happy with how it turned out, especially the last few seconds ft my logo!! I used Photoshop & iMovie and played around with it to make it seem like the stars were moving. Let me know what you think!

Freshman year, I didn’t have a car on campus. So, in order to get home I had to take the Megabus - a competitor to Greyhound with fares that start from $1. Of course, I never had one of these elusive $1 trips, but I was heading farther than most riders. Their busses are pretty iconic, and you’ve probably seen them on the road

I still get their emails, even though I don’t ride the bus any longer, and I’ve noticed recently that Megabus has been trying to increase their brand value. They have a bit of a reputation for their busses being dirty, unreliable, and cheap in every sense of the word. It holds true that you get what you pay for. 

I’ve noticed that they’ve been trying to appeal to a younger audience lately, but that rosy-cheeked cab drier on the side of their bus doesn’t quite appeal to the audience they’re seeking. 

I went ahead and started in on a new logo for the company, something a little more simplistic and familiar to that younger audiences.

The upper pictures are their old logos, and the lower are the ones that I made. I used Avenir Next, and a more muted version of their blue and yellow. I also took away the weird looking guy and kept only his bowtie.

I got the following text from my Uncle recently, asking if I could help him with a project for his company. He wanted help to create a way for his employees to remember their core values. Here are some of the screenshots for our initial conversation

So, after some brainstorming about the 6 values, I came up with a series of sketches. I chose to make paper sketches before I sent him anything made on the computer because of the readings from Principles of Product Design. I wanted to to send him something where I could get his real opinion and some more specific direction before jumping into some digital platforms.

So, after sending these pictures to him, he sent me back his favorite of the sketches circled. 

While this isn’t the most helpful feedback, I was able to get some key information from it. My uncle wanted something driven by images rather than text, and those images should be easily related to the concept that the word represented. 

I took these circles and tried to expand on them and offer some variations of the chosen sketches. 

This is about as far as I got before realizing I’d spent over 2 hours on this making assignment and I was out of time. Looks like I bit off more than I could chew for this one. I am excited, however, to mention that I did learn a new skill - filling that heart with text - and I think it’s super useful.