STA Blog

Week 5: graph-ics

By

Hello!

Most of this past week has been dedicated to beginning the AFR 303 Project.

I worked with Abriella and Sheryl to create graphics for the slides for the lecture on 9/29. We had a deadline Monday 9/27, which will be consistent for our lectures in the future. The first graphic I created was for a slide documenting the rates of poverty in Texas by race. The initial slide we got was a bit hard to read, but fortunately not too confusing.

The primary issue here is visual spacing and lack of illustration. Without a graph, the statistics sit in a more abstract zone that may be harder for students to comprehend. Additionally, the slide is very left aligned and there’s a lot of negative space on the right that can be worked with.

I used Maddy and Abriella’s stunning style guide to guide me through the process of making my first graphic. As I was getting used to the process, I struggled a bit to figure out how to align a large bar graph on a 16:9 slide. I went through some trial and error…

This version worked to omit vertical negative space but had the same problem as the slide above – too much space on the right.

This version was an improvement, but the two segments were cramped and there was a ton of space on both the left and right sides that could be utilized. I kept moving things around until finally I determined that side-by-side seems to work the best. (I also decided to add a little Texas next to the people statistics because (a) it helps the graph signify that this is in Texas and (b) it is cute.)

This way both graphs get enough space, and since the graph is pretty short horizontally, the negative space is less than if they were stacked vertically.

On the final slide, Maddy added a separate small, lighter box around the Poverty Rates graph which really helped segment the two graphs. Seeing this has inspired me to use that technique in my next set of graphs!

For the second slide, I created a graphic for the terms “De Jure” and “De Facto.” The initial version I had was a bit too busy, and Abriella assisted me with creating a version that is a bit easier on the eyes.

Maddy added this into the slide and made it look great!

I definitely agree with the decision to make the not equal sign much smaller. The De facto slide graphic was also used on another slide:

I will get my assignment for next week either at the end of today (?) or (more likely) tomorrow. This has been very fun to do so far, and I am excited to create more now that I am more familiar with the style guide and formatting.

Wrapping up the Animation Stinger refresh…

After over a month of work, it seems the Animated Stinger refresh project is coming to a close. Ideally, it should be completely finished by the end of next week. I’ve set a personal goal to try and get it done by Thursday the 30th, although time is an infinite, false vacuum and there may be some mistakes to be fixed. But generally. I’d like it to be done. Soon. Here is a sneak peak of the TA stinger animation:

look at her go!

Finally, the Blog Banner.

The gods of Art and Fortune have blessed me (for once), and my blog banner was chosen for the website.

As you can see, I was delirious from sleep deprivation while creating this, and ended up creating UT in an alternate dimension, My initial idea was to have everyone on a moon crater, but I ended up playing around with making the bottom area water, and this sort of happened. As a result, everyone is walking on water in the final rendition…

Everyone’s caricatures are so well-made and cute that it made it extremely entertaining to place them into the banner. I wanted to put everyone closer to the middle, but alas there was not enough space. If you are on the ends, please do not fear, because that’s where the anime protagonists always sit in class. Anyway… please let Marianne know that I apologize for thinking she was grapes and not raspberries. And thank you all for voting for mine!

Now I must stare at my own art all year. Will this bother me? Probably, but maybe it will be a test of strength.

Week 5

By

Project: PSY MUNA LAB
Client /Prof: Professor Alexandra Clark
completion status: started last week and expected to be done by Nov 8
staff guidance: Estella
STA team members: Angie
description/plans: Create a lab website for Prof. Clark on Grav/Gantry using the Duarte lab templates

This was my first time using Gantry/Grav so this past week was mostly me getting used to the application.

I met with Estella to install Grav/Gantry and set up my workspace. I got myself accustomed to the directories and where to put my code/images. I also spent most of my Monday playing around in Grav trying to familiarize myself with the CMS before starting the project.

I met with Estella again to get started working on the actual lab. I went through the box folder and started copying the information onto the site.

This is the homepage so far. (More graphics will be added later)

This is another page with the research team.

This is the Gantry layout page where I’ve been adding the particles of information. Grav is pretty similar to WordPress except there’s a lot less particles/blocks to work with so custom code is needed more. I’ve been fine for now using Estella’s code she provided on the template.

 

(May the) Fourth Week (Be with you)

By

,

As you can see, I have figured out how to add fun sparkly text to my blog. This is purely for fun, although I imagine the skills will come in handy in the future!

I dedicated most of this week to working on the TA Graphic Stinger Design. It’s been a bit tricky to figure it out, although I have had some wonderful feedback from Maddy, De’sha, and Suloni!

Before I get more into that, here are the final versions of the Chat and Insta-Poll stingers.

 

 

These have been finalized, and should be accessible within the finalized After Effects file – so they’re basically ready to go!

We went through a few stages with the TA Stinger and still haven’t finalized it quite yet (I will post an update on this before Tuesday if we make more progress.) The initial animation I had drafted had looked like this, but the graphic honestly looks a bit too much like the Chat stinger and doesn’t have a lot going for it.

 

 

I drafted up a few separate ideas for the new TA stinger, trying to keep up with how the actual Tower Canvas discussion looks:

The goal here is to mimic the idea of a conversation between a TA and a student without it seeming too much like the TA is more valuable than the student. The initial design seemed to imply that, so we wanted to avoid this in the new design. After several iterations of exchanging ideas, we landed with two separate ones. One that looks more like a traditional chat exchange, and one that looks more like the Canvas Tower page.

On Monday, I am planning to try and combine these two ideas together to create another draft. I will update with this if possible!

I also spent a portion of this week on creating my banner for the banner competition, although that is secret redacted information. I may share it later on, though, after the competition is over. It was a lot of fun designing and painting my banner! It can sometimes be difficult to add typography to a more painterly-style image, so I had to experiment with a few different styles to find something I liked.

Testing – Embedding Canvasser

By

Hello blôg, Suloni’s asked me to try to upload Canvassers to my blog. Estella told me to use this code, which worked for my flat html site for the Dell Medical School project:

<embed type=”text/html” src=”https://laits.utexas.edu/canvasser/canvasser_content/medical-bill-leftside/medical-bill-leftside.html” width=”960″ height=”1082″>
Let’s see if it works here 😮

CSMS Data Structures and Algorithms

By

Data Structures and Algorithms

Logo Design:

Since the course is about introductory data structures and algorithms. I thought it would be convenient to use actual coding references as the logo. Here are a few draft ideas, but we decided that the stack was the strongest.

To make it a more dynamic logo, we added additional stacks. This is the final logo.

 

Animatic:

I also got the opportunity to create the animatic for the animation for this logo. For the stack algorithm, the boxes are added and removed from the top of the stack. Here are the animatics I created.

 

Anxiety and Stress Site & OCIL & Grav Documentation

By

Anxiety and Stress Site & OCIL & Other Things

The Anxiety and Stress Clinic mockups

This is a project I have been assigned to complete through this summer that I am very excited to be working on. We are working to develop a new website for Dr. Jasper Smits that seeks to combine two existing sites for the Anxiety and Stress Clinic and Research Lab into one cohesive site. I have met with Maddy a few times to discuss the team’s goals and needs, and these were the main goals I identified:

  1. automation – making processes like finding information on the clinic/clinicians, scheduling sessions, and booking appointments through the client portal more self-enabled
  2. combining two websites – the lab and the clinic access, similar to that of psychwire.com, making it very easy to navigate between the two different offerings through a common entry page
  3. theme – creating a theme/visual identity that suits the clinic’s prominent and growing reputation as a trustworthy research lab and clinic for anxiety and stress. Ensure that the aesthetic decisions are executable by web-developers through use of grids, alignment, and knowledge of WordPress functionality
  4. clarity and consistency – increased clarity on things like the mission statement, photography, service offerings, team bio

—

With these goals in mind, I spent some time browsing through wordpress themes available to us to see if any themes would work well with the clinic’s needs. The cool thing about this project is that it involves a coordinated effort with web developers such as Lauren and Ruben, and in the process I have learned quite a bit about what web development and design for web development. For example, things such as body content, appearance, fonts, and styles are likely more customizable with CSS, but elements such as navigation headers and footers are less. Understanding these concepts and keeping the team’s goals in mind helped streamline the search for themes and ultimately started mocking up a few pages based on the Essence and Slush themes.

—

I then spent some time mocking up a few of the key pages in Figma. Figma is a digital prototyping tool that I’ve spent some time working on as an STA. So far, I have learned more about using grids and text styles to ease the process. I realized that the challenge for me here was that I did not have much experience with web development, so I did not quite understand what could and could not be changed from a WordPress theme; therefore, I was somewhat rigid with my application of the theme. Here are the initial mockups:

—

Here are the later mockups that I worked on after discussing with Maddy a technique for blocking out content on pages and planning web design. I had been developing the mockups using a technique that Maddy said Abriella told her about in which you initially design in grayscale to ensure high contrast design for accessibility. We also met with Lauren earlier to discuss Lauren developing a “sandbox” for us to try out using themes in wordpress, which was very cool. For now, we are taking a break on these mockups because Ruben and Lauren are discussing whether or not we will use WordPress or Grav/Gantry 5 to develop this new website. I will talk about Grav later.

—

The OCILL Project

I am spending about half of my time also assisting with the OCILL project that I think Miguel is spearheading but almost everyone else is also helping with. We are transferring content from Dr. Okur’s original website for Turkish language courses. This page holds semester assignments and exercises, and the professor would like this content to be moved over to Canvas since the site will be going out of date. There is this spreadsheet of many many weeks of pages and exercises that are primarily two kinds of activities: audio grids and fill-in-the-blanks (FIBs). We self assign these pages, and we are aiming to finish before the summer ends. Audio grids involve downloading files and creating a grid for vocabulary purposes. Fill in the blanks require Quiz functionality in Canvas, and we are still working through some problems with understanding how to create lines for plain text information. This picture below is an example of an audio grid page:

—

There are a few main challenges so far. One challenge is that it is kind of a tedious process organizing and downloading the content that needs to be transferred. There are many audio files and html files to keep track of. Additionally, we often run into challenges with Canvas limitations, document titling confusion, and general functionality confusion that took a little bit of collaborative troubleshooting since Miguel and Dr. Okur were on vacation. Luckily, this has worked so far. Also, Miguel developed a great workflow document that made it easier for us to join in on the project quickly. Poonum and Angie have made comprehensive documentation of our challenges and questions, too.

Grav Documentation

As mentioned, we have been talking with Ruben and Lauren about the possibility of using Grav to develop websites. Grav is a simple CMS with no database. This is potentially applicable to the Stress and Anxiety Lab as well as the LatinX Pop Lab that Ingrid is working on, but it is also just an initiative that would be relevant to future STAs as the Gantry 5 element of Grav allows for simpler and more intuitive website creation for STAs with less coding experience. The Gantry 5 element allows for block editing that can be supplemented with custom CSS. De’Sha, Maddy, and I had a meeting with Ruben to set up Grav, which requires some connection to MAMP that the downloading of Git and Docker. To be honest, I am still confused about how everything works, but we are working through it. De’Sha and I will be working on documentation for this Grav setup and exploration process for future STAs. Also I am still running into some challenges that I will be working through that might involve Norton.

Fun Times Tuesday

And as a fun tidbit, here is some info on Fun Times Tuesdays! Since all the STAs are online during our Tuesday meetings, we decided to use our meeting time this week for team bonding, which has been so fun in lieu of in-person interaction. Here are some screen caps from things we’ve done and also from the time we pranked Valerie after came back from her vacation to “Paris.” We have done team pixel art, played Club Penguin, presented on our unpopular opinions, and done a virtual website “pub crawl.” I feel closer to my fellow STAs and I truly love these days!

Super long blog post, I am sorry. I need to make more frequent posts!