#making assignment

[lizconway-blog1]

Making 5: AR Photo Album

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.

I didn’t end up creating anything with this tool, but I did go through the tutorial and I can already see how this tool is intuitive and no more difficult than your standard Creative Cloud App. 

[lizconway-blog1]

Making 4: Swift UI

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.

This making really had me thinking about how hard it is to actually implement a good User Experience. A designer can come up with all the ideas that they want, but that design has to be passed off to someone who can actually implement that design. 

“Animated button” was an easy thought, but the fact is that animating one button would probably have taken me hours to figure out, even with the tutorial. Passing ideas from design concept to coded implementation is hard within my own brain, and I know what I’m capable of and can give instant responses to myself. I can only imagine how hard it is on a team, where different groups of people are involved. 

[lizconway-blog1]

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:

Overall, this was super fun, and a cool way to get my feet wet with After Effects.

[clareatz]

making 3 - personal branding video

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!

https://www.youtube.com/watch?v=_t1rzpMaxjc

[lizconway-blog1]

Making 2: Megabus Re-design

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.

This is tangentially related to the readings from the last few weeks. As I was choosing fonts and images and colors, I was thinking about the diagram from chapter 2 of DOET. I was thinking about the goal I perceived for Megabus: appealing to a youthful audience, and evaluating that goal in the context of the feedback/feedforward loop. I evaluated my response to their existing design and why I reacted that way. Then, when creating my version of the logo, I made specific choices and planned how this design might achieve a look that would accomplish that goal. 

[alanjonc-blog]

I’ve been researching Smartphone applications for another class and saw this infographic on some recent data. Since I wanted to continue to practice Illustrator I wanted to trace this infographic for my second Making assignment. The first photo is from the piktochart website. The second and third photos mark how far along I got in the tracing process. 

[lizconway-blog1]

Making #1

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.

Overall, I think that I made a good choice by sticking to pencils first, but I was not specific enough when asking for critique. I also think I might benefit from another round of pencil sketching before moving into Illustrator. To get some better feedback, I want to get on a phone call with my uncle so that I can ask better questions and get to the root of his reactions, rather than trying to interpret them.