Digital Tools 2 Project 3 – Future Interface Video

Synopsis

This is a video for project 3 which showcases the iriscope, the interface and technology made to change our visual view and add an interface overlay and seamless control over the navigation which is hands free and integrated with the user.

Process Work

Using a canon eos 77d dslr to record, we ended up with 102 shots that were mostly discarded. The rough cut was over 3 minutes so I had to edit and speed up some parts to shorten the video.

rough cut
working in after effects
final cut

integrating after effects with premiere pro was easy as you can link them simultaneously and work between the two, although convenient — this heavily affected computer performance and many times I had to wait due to freezing.

Having passed experience with after effects the program, I wanted to try some techniques regarding animation and vfx. Integrating pieces of the UI made in illustrator, it was a matter of animating the small components to convey and make the interface more dynamic.

Due to time constraints and other things getting in the way, I would have liked to showcase more interfaces and features that utilize cool vfx techniques like a better scanning effect and text animations to make the final video more in depth and flashy.

Resources

Sound FX used:

Song: https://www.bensound.com/royalty-free-music/track/perception

https://freesound.org/people/klankschap/sounds/28081/

https://freesound.org/people/caileykehoe/sounds/444154/

Credits:

Jc Calimlim – Director, Cameraman, Editor, Animator

Felipe De La Fuente – Actor, Cameraman

Bradley Hill – Cameraman

Assignment 2 – Storyboard & Production Plan – iriscope

Production plan

The storyboard follows a casual day, utilizing first person shots we can display the interface in action and as a demonstration for what it would be like to have an interface built into our eyes.

Crew Member:
Jc Calimlim – Director, Animator, Editor, Cameraman, Actor

Bradley Hill – Cameraman, Actor

Felipe De La Fuente – Actor

Graphical treatment:

Example of camera shots I would like to attempt
Interface seamlessly integrated
Motion graphics and upbeat music
More motion graphic examples

Here are just some examples and styles I want to attempt in after effects such as the eyes and animated elements for the interface to add a dynamic feel to the demonstration.

Mock-ups

Starting with the brand identity, i changed the name from the previous “ICVs” to “iriscope”.

These are some mock-ups of the interface in demonstration and some data. I plan to animate the interface using after effects and trying out different layouts for the data to be shown better.

Typography Project One: Letter form Construction, Classification and Use

Beginning the project off, we were tasked with doing a calligraphy exercise. This was challenging as I’ve never done calligraphy before and was clueless on how to maneuver a calligraphy pen properly.

After doing the initial writing, we had to trace the best letter forms in adobe illustrator. Using parts of other letters, I was able to construct other letters easily while maintaining some similarities between all the letters.

This was not difficult but was time consuming trying my best to configure each character and clean them up.

After the initial tracing, I aligned them up to create the word ‘Hamburgefonstiv’ labeled the type anatomy for the website.

For the expressive type I explored a couple of ideas before settling on the final one. I liked the thick stroke weight provided by Akzidenz Grotesk and used the word crowded and reduced the kerning by -75 pts to squish the letters and emulate crowdedness with the black border.

Other parts of the project required no iterating and followed the material provided in class and applied based on what I know.

It was interesting learning more about type. I did not know there was a lot to letter forms such as the anatomy and terms for something we’ve been learning our entire lives and look at each and everyday. It was good to learn the differences between readability and what makes a good paragraph as well as learning how to express type through the variety of properties such as stroke, color, size and the typeface.

Future User Interface Project: Assignment 1

As we grow, we begin to take our health for granted. With the access to vaccines and shots, we have been able to minimize the impact of deadly diseases that would have been severe in the past. While we’re encouraged to get our vaccines and shots, with the combination of personal hygiene and getting our sufficient nutrients through a well balanced diet, we can ensure we our at our healthiest, boosting our performance, productivity and well being.

In the distant future, technology has advanced and we’re now able to see and track our vitals in real time via a chip installed on the back of our necks. The ICV (I See Vitals) Interface will allow the user to track and maintain their health accurately and accordingly to their body type and personal preferences via a first person display through their eyesight.

The Data

The data monitored and displayed will be sourced from the user itself. The ICV will be able to monitor vitals such as heart rate, blood pressure, stress levels, sleep, diet and much more. The ICV is able to see what the human eye cannot and is able to see germs and viruses in contaminated areas such as the subway or public washrooms. Being able to see germs encourages us to not only avoid certain places but to also promote personal hygiene and the cleanliness of our environment. With the use of the data displayed to us, this can change the behavior of the user to be more inclined to their health and to better understand their bodies. We can optimize this data to suit our needs, whether we want to diet or to exercise, the parameters can be adjusted accordingly.

Below are examples provided, inspirations from movies and video games show the tracking of important user data that helps the user know what to optimize.

Film Locations

The images used for the locations are subject to change.

The story will begin in my room and will utilize a mix of first person and other shots to convey the story.

Other parts of a household will be used to convey the story.

Areas of public transit will be used such as the TTC and GO Transit.

I will consider filming parts of Sheridan College such as the hallways and perhaps the cafeteria and classrooms as well.

The Story

The story synopsis will begin with the subject beginning their day at home, from the moment they wake up, they check their vitals to see where they are at the start of their day and how they will adjust and optimize according to what they have to do today. Are they working out today? Dieting? is it going to be a highly stressing day? These parameters will be considered by the user. The story will continue to follow the subjects’ day to day life from going to the washroom to do some personal hygiene and prepare their day. Continuing their morning routine, the subject has breakfast, as the subject eats, we will see the nutrients provided and tracked in real time and monitored until satisfied. The subject will then make their way to their daily commute, walking to the public transit and getting on the train. The user will be able to see germs and other contaminated public areas and act accordingly. The subject’s destination is school, as the user thinks about what they may have to do today, they get a bit overwhelmed. The ICV can track stress levels and alert the user of any warnings towards their health or well being, this helps the user stay calm through personal calming techniques such as breathing in and out or meditation, ect. (Subject to change). Throughout the subjects school day, we get to see the interface displayed throughout different scenarios such as hunger, sleep, heart rate, stress and more. With the recent outbreak of the coronavirus, the user is able to see viruses and other contaminates in the air or public spaces and the user can try their best to avoid possible transmission. After school, the subject wants to exercise, before exercising the ICV will display the current vitals such as their nutrients and caloric intake. When working out we can see the calories and fat burn in real time as well as how much energy we are exerting and if it is safe or not. Afterwards, the subject is alerted of hunger and is recommended a meal that would provide the nutrients needed to bring levels back to satisfaction. At the end of the day, the subject can make sure their vitals are good before bed and falls asleep.

Sources

Images:

https://www.ttc.ca/TTC_Accessibility/Easier_access_on_the_TTC/Riding_the_bus.jsp

https://www.thestar.com/news/gta/transportation/2014/01/23/go_train_makeover_will_offer_a_plusher_greener_commute.html

https://explore.sheridancollege.ca/trafalgar

project 04: logos

this will be my process work for project 4: logos.

the logo i designed in design fundamentals 1 was for a brand called “Summit” which is a winter apparel/recreation store which would sell products such as winter clothing, winter gear and products for winter recreation such as snowboards, skis, mountaineering and other winter related activities.

the logo features a large format and a smaller text format. using the large format i followed this video: https://youtu.be/MNwwDB-fA5A

i made an embroidered version of the logo.

with an embroidered version of the logo, i applied the logo onto a beanie.

from the original photo, i quick selected and masked the beanie. i then removed the original logo and applied my own using the liquefy tool and transform distortion to apply the logo. i then created a gradient background and used some adjustment layers to blend the composition.

for the second application, i chose packaging of a shoe/boot box. using the pen tool i selected and masked the box from the original. using the text logo i created a vanishing point on the top of the box and applied the logo. i then used adjustment layers and blending some blending layers to match the shadows and blend the composition.

for the animated logo, having done animation through photoshop in the past, i made use of the sun in the logo to create a day and night cycle.

this made the logo dynamic and the concept tied in with the brand.

this project brought my logo created in design fundamentals and brought it more to life and seeing the applications and thinking about the brand application within context was fun to think about.

project 03: collage

this will be my process work for project 3.

since this project required the use of photographs we have taken, I really had to decide and consider what objects and items I wanted to use for the project. i took into consideration the background, subject, and the items regarding how easy would it be to mask and color correct, as well as working cohesively in a advertising sense.

the brand i chose was one everyone should be familiar with, nike. using a brand like nike allowed many different types of objects and aesthetics to work with such as sports, lifestyle and fashion. i decided on a moody, futuristic/tech aesthetic while having all white shoes as the focus which also provided the freedom to change the colors to what i desired.

when out taking photos, i had already decided on the key components that would make my composition. the first photos taken were the backgrounds/backdrops

these 3 were the ones i took into consideration the most. the first picture would be the backdrop chosen for my collage due to the sky being a nice negative space to work with the subject.

we then went and began taking photos for the subject and object.

having the object and subject behind a solid color that contrasted well made it easier to mask and select.

after gathering the images i needed, i began working on the collage in photoshop.

here is a rundown on my process, starting with getting the composition together with the photos cut up. i then started playing around with the adjustment layers. the second image was my first draft and after some critique from my friends, i began working on fixing up the shoes and abandoned this floating and glowing effect i was going for and decided to put it out on the palms, as well as color correcting the subject and background for a colder feel. the final draft fixes the lighting on the subject and saturating the colors on the shoes.

although the design and purpose don’t really make sense since i wanted to go for an ad that featured shoes for fall/winter, this project allowed me to work on my color correcting and compositing different images and making it look seamless (or at least tried to).

overall i am happy with the final result and it was a fun project to do.

project 02: mockup

For project 2, we were required to make a mockup for our interface 1 project where we would design and code a 5+ page website.

Starting with the style tile, I went ahead and looked at examples of style tiles as i’ve never made one before. With the help of this video https://www.youtube.com/watch?v=3xWViyhRGd4 I had a general idea of what to include and what to show in my style tile which would help me later on.

I wanted to choose readable colors that contrast white and black decently if they were required to. Using a contrast analyzer most of these colors scored AAA or higher and were very readable in white which was used in the final design. Five colors were chosen for the five categories on my website.

The font Poppins from Google Fonts was chosen due to it’s poppy and welcoming features that I felt complimented the design I was going for. I particularly like the font in bold.

UI elements and graphic styles were inspired from flat illustration type web designs. I was interested in this style due to it’s simple but effective artwork which I have never attempted to make before and would serve as a challenge later on.

Other graphic patterns and styles were considered but would not end up on the original design.

flat illustration graphics I was inspired by

here were my attempts at flat illustration and vectoring in adobe illustrator. I am by no means artistic but I did like how the person with the gradient flowing turned out.

here is my final style tile that was used in consideration for my mockup.

using youtube videos such as this one https://www.youtube.com/watch?v=OKhG0CoyULQ I got a general idea for how I wanted to style my mockup which would be the home page for my interface project.

since i was unhappy with the wireframes i submitted for interface 1, i redesigned the wireframes in photoshop, which i would then recreate in html and css for interface with the new design styles in mind. This would be a lot more work but I wanted to use this mockup project as a basis for how I was going to design my project for interface since i was unsatisfied with my initial designs before this project.

these are my new wireframes that I will be using for my mockup

old wireframes can be seen here: http://ixd1107.firebird.sheridanc.on.ca/projectoneinterface/index.html

the general design is consistent and mobile friendly.

using the style tile as reference and the wireframes, I plugged in the content and used icons with the links and credit provided here:

https://thenounproject.com/search/?q=finance&i=998017

https://thenounproject.com/search/?q=diet&i=2574317

https://thenounproject.com/search/?q=fitness&i=1884255

https://thenounproject.com/search/?q=mental%20health&i=2686181

these icons will not be used for my final interface design and are only served as mockup.

Overall, the final design turned out alright and is clear, consistent and readable with all the information you need for a home page. The navigation is clean and linear to help users flow through the content when needed with a back to top and hamburger menu to navigate.

project 1: postcard process

this will be my process work for digital tools 1 project 1.

i went to shoot pictures with some buddies on a sunday evening at the scarborough bluffs for my project since i assumed no one would be there due to the weather. when i got there i was surprised at how many people were there. no where near as much as in the summer but i guess people wanted to go there before fall was gonna set in so i didn’t mind, just a little more work in photoshop.

a photo i managed to get without people in the frame

what i found really interesting was that even on a rough overcast day like it was that day, there were still a couple of people that had gone there alone, or with another person, and they would just be staring at the waters, listening to the waves. it was probably really calming for them. a place people went to clear their minds or to talk with someone they cared about. i wanted to get that feeling for my postcard.

people staring off into the ocean

as me and my friends took pictures we went to head back, that’s when i noticed this seagull by itself that didn’t fly away when i got near it. it was interesting because i noticed all the other seagulls i saw at the beach, they were all in large packs so seeing this one secluded and on it’s own captured that feeling of going out of your way to disconnect and to reflect or clear your head. even tho seagulls don’t think, i think.

i decided to choose this photo for my postcard. i first cropped and framed the image to give it white borders. i used the spot healing brush to clean up the stuff and the ground, smoothing the sand more, removing some people and garbage cans. i went and used exposure, saturation and color balance to give the image a more washed and lightened mood and looked for a suitable font that fit the classic greeting message from someone that had sent you a postcard letter in the mail.

this was my final product. i feel it captures the feeling of visiting a place, maybe when you want to be alone and a place to clear your mind and disconnect from any noise that may have been bothering you lately. overall this was a fun project to complete and going out and listening to the waves was pretty calming and relaxing, regardless of the weather.