Hello and welcome to my third week blog post! I can’t believe I’ve been here almost a month now, it’s gone by so fast! I really like what I’m working on, so it’s easy for me to sort of get sucked into my work. Often I have trouble getting myself to stop for the day and log off, but it’s a skill I’m working on. Sometimes you need to take a break and just, you know…

V I B E 

…anyway! This week, I spent most of my time creating the stinger animations in after effects. It was a pretty straight forward process, although I had some issues with After Effects crashing when I had too many keyframes visible at once. Fortunately, it was an easy fix (restarting the program), and I didn’t even have to turn the computer off and on again!

The first drafts for the Chat Stinger had a version with extra bubbles, and one without:

With bubbles

Without bubbles

 

We ultimately decided on the second one without the additional bubbles. The extra animation cluttered up the screen a bit too much, and with these types of graphics, less is often more. Next, Suloni suggested I create a version where the “…” on the chat bubble comes back and forth. I initially wanted to have it appear and disappear 3x, but 2x ended up fitting much better within the 4 second time frame of these graphics. This is the current version I have made:

For the Insta-poll animation, I was able to adhere pretty close to the animatic I made for it. The first draft looked like this:

In the second draft, I added in a fade-in, and a little pop-in to the three dots on the side of the circle, pretty much the exact same way I did the ellipses on the Chat stinger. I’m not sure if we’re going to keep that in, but I think the effects adds a little pizzazz to the animation without overpowering the text.

Next week I will continue making changes to this, as well as create the animation for the TA Discussion stinger. I’ve already imported that into after effects, and plan to animate the “discussion” bars growing, as well as possible some sort of entrance transition if it does not make it too busy.

Finally, this week I created the caricature of myself for the STA Blog banner! Here is me and my amazing cat Travis.

Here are some actual photos of Travis to brighten your day:

Project: COLA Website Refresher
Client /Prof: N/A (College of Liberal Arts)
Completion Status: Started August 25, 2021
Staff guidance: Michelle Vanhoose, Chris Rankin
STA team members: Ingrid, Adrian
description/plans: Get familiar with Pages and learn how to use it through trainings before ultimately using it for the COLA Website.
To be completed: TBD (long-term)

Last week I mostly worked on the COLA Web Refresher, especially the personal site in Pages. I had originally made 3 sites, one about me, one about a dinosaurs (personal interest), and then an in depth page on the Tyrannosaurus Rex. Unfortunately, there was a bug in Pages that I happened to stumble upon, which was with the undo function, in which all 3 sites were replaced. Due to this, I had to restart all the progress I made, but at least I found a bug! I also met with Jake about the Epic Similes project, which was really interesting to learn about. Below are pictures of the two sites I was able to finish.

 

 

 

Stinger – Animation Refresh Title

I began working on different draft options for the title on the Stinger Refresh project. Since the icons will have the most animation, we want the title to have a small, subtle animation added to it. I decided the choose between two options so far, a typing animation and a fade in animation.

 

I believe they both bring their own style to the animation, but I don’t want to take away from the main animation with too much movement. With that being said, I believe I am drawn more to the second option. Only because it is simpler and doesn’t take away from the main animation and with the other animations that will be created.

 

 

Stinger – Animation Refresh Survey

Last week I mainly focused on the survey animation for the Stinger Refresh project. For this animation, I wanted to create something that mimicked the movement of bars if the students were actually taking a survey.

For the first draft, I did a lot more motion in the bars and the animation was slightly longer.

 

With some editing tips, I drafted a second animation that is shorter in length. I also made the
bars move more consistently.

Hello!

Well, somehow I finished up my second week as an STA. This was my first full 12-hour week, though it went by impressively fast. I’ve become very comfortable using the Mac that is second to last on the right side of the room. I fear that it will not always be the one I use, but I will cherish it for now.

This week I primarily worked with De’sha and Megan on the Animation Stinger refresh assignment, where we are adding animations to the stinger templates with adobe After Effects. I first created animatics on Procreate to quickly sketch out my ideas for the Chat, Instapoll, and TA discussion animations. I made several versions and drafts for both, but these are the ones we decided to stick with:

After I finished this, I began the actual animation for the Chat Stinger.

I first edited the chat Illustrator file and added in two smaller bubbles that I will later animate in After Effects. When doing this, I made each of the three dots a separate object from the large chat bubble, so that I am able to remove them later in AE when I replace them with masks. To create the smaller bubbles, I:

• Copied the large bubble object, resized and rotated it, and moved it to the bottom left. This location is where it will be largest in the animation.
• Used the pen tool to remove the anchor points for the triangle at the end of the chat bubble, which I felt was too off-center for the smaller bubbles.
• Used the pen tool to create a new triangle closer to the center of the bubble.
• Duplicated this first bubble to create the second bubble, which I placed on the top right.

After this, I imported the .ai file into the main After Effects template we are using for all the stingers. I imported this as a composition, and placed it next to the other animation compositions that already exist in the template (right now, the only other one we have done is the Survey stinger). Inside the composition, I created three masked circles to replace the ones with color in the .ai file. This way, the circles will be transparent and fit over any color background that is used in the template.

 

Next, I went back to the main composition, and edited the text on the left side of the screen to say “Chat Time.” We may change this later to be slightly larger.

Next week I will animate this, as well as the other stingers. I may also change the shapes of the bubbles to be more rounded, depending on if it fits the theme.

Have a great Labor Day weekend!

 

Project: COLA Website Refresher
Client /Prof: N/A (College of Liberal Arts)
completion status: started on August 25, 2021
staff guidance: Michelle Vanhoose, Chris Rankin
STA team members: Rahul, Adrian
description/plans: Begin to grow comfortable with Pages and create a practice page, start to transfer content from Cascade beginning with content from the Office of the Dean.
To be completed: TBD (long-term)

So — worked on IDs, Cascade feedback, and really got the ball rolling on the web refresher project! Below are some screenshots from my work on my practice site, which I made entirely about calicos, snowballing from a love for Pirate.

I also continued to part 2 of the Pages training, by drafting and sending an email to Michelle, Chris, and Crystal describing my work, what went well & what didn’t, and any suggestions I have. I’m including it below (also in BC) because why not, let’s let this blog post be a big boy.

 

Hello,

I am writing to let you all know of my current progress on the COLA web refresh project. As of now, I have created a parent page for myself under “Undergraduate Students” (with my name as the title). The home/landing page simply contains a hero image. There are two personal pages contained therein. I chose to construct my pages’ content around my cat roommate, Pirate, and educating the audience about calicos in general. The first subpage includes two images of Pirate in the card component format. Next, I included a FAQ centered around calicos, this time as an accordion component. The last component of this page is a callout, featuring a highly publicized calico-related news event. The second subpage included some more information about calicos, starting with some featured famous calico-loving artists, rendered as image buttons. Next, I included some more calico information, represented as tabs, covering what differentiates calicos from torties and torticos. Lastly, I embedded a short video with some quick facts about calicos. Across all pages, I demarcated different section of information by using the header text formatting. 

Overall, I thought this activity went well. I was able to attain some familiarity with different Pages components and how they work in practice. The preview option (much easier to use than Cascade) was also a great resource to check my page as I went along with my edits. The drag and drop functionality was also pretty useful, as well as being able to view different Pages components as layers. As someone who often works in Photoshop, this was a really great and familiar tool. 

As for things that did not go quite as smoothly, there were a few barriers. First of all, as far as I could see, there was no way to resize pictures within this platform. I ended up cropping some of the image assets I used in Photoshop before so that they would show up proportionally. Let me know if there is an easier way to do this. Moreover, the CMS’ canvas being small was a bit of a challenge, especially working on the large Mac monitor here in the office. 

Lastly, I had a couple of possible improvements or functionalities I’d like to suggest. As I have very limited web development experience or insight into the workload of those on that team, I understand if they’re unrealistic requests, but they are features I wished I had while creating my page. First of all, perhaps some kind of table of contents kind of component could be useful. This component, already present in the HTML of some present COLA Cascade pages, would link certain topics or questions to relevant sections of the page. One last suggestion I have is that maybe there could be a way, in the case of image components, to toggle a basic color overlay from one of the branding colors like the blue/orange/dark/light text box options in the card components. This could maybe create a little bit of cohesiveness across pages, but I also realize this could be too much.

I hope you are all doing well. Let me know if there’s anything I should add or change, or if you need any clarification!

Sincerely,
Ingrid Alberding

https://sta.laits.utexas.edu/blog/2021/08/30/40536-2/