STA Blog

Feb 10 – 16

By

Project: UT Instapoll

Started on: Jan 27th, 2024

Staff Guidance: Chris Pittman

Description: The aim of this project is to incorporate the PDF integration into UT Instapoll. This features help student to download all of the poll responses as a study guide for a test. The PDF study guide comprises all of the questions, answers and the correct answer choices.

This is the continuation of part 1. In part 2, I implemented the library to generate PDF, customize the PDF, let user download the PDF to their machines, design the PDF and implement it.

  • Implemented the library to generate PDF
  • Design Figma
  • Implement the design

(27-31) Thang Truong

By

Project 1: Polls

Started on: Jan 27th, 2024

Staff Guidance: Chris Pittman

Description: The aim of this project is to incorporate the PDF integration into UT Instapoll. This features help student to download all of the poll responses as a study guide for a test. The PDF study guide comprises all of the questions, answers and the correct answer choices.

Documenting my thought process for this project. There will be two parts:

  1. Creating the route, the controller, the blade template.
  2. Transform the Blade Template into PDF

1. Create the route, the controller and the blade template:

Route: This step establishes the URL end point to let the user access to get the PDF. For this, I chose teacher/course/1/poll_pdf.

Controller: The controller part controls the logic of back-end behind this operation. It will get the polls from the database so that I can access the question, response and the correct answer choices.

Blade Template: The blade template displays the HTML with all of the poll responses and correct responses. The template for the PDF is still in consideration.

HTML Result: The result looks something like this.

2. Part 2 is still in progress

This part, I still need to integrate the library to get PDF integration working.

Project 2: Qualtrics-LTI

Started on: Jan 20th, 2024

Finished on: Jan 27th, 2024

Staff Guidance: Chris Pittman

Description: Adding key and value to facilitate the process of adding these values onto the page.

Woolley Labs Site Redesign

By

Woolley Labs Site Redesign

Project: UT Psychology Labs: Imagination and Cognitio Lab

Client: Woolley Labs

Staff Guidance: Stacy Vlasits

Tools Used: WordPress

Started: Jan 14, 2024

Completed: Jan 16, 2024

The Task

This week I was asked to redesign Dr. Jacqueline D. Woolley’s Lab Website. The outdated structure of it was not built on WordPress and was very hard to navigate and old. With many of the links broken and interested student/participants not able to find what they need this site was definitely due for a redesign.

Old Website:

Starting Out

The ask was pretty simple with some small requirements that did increase the difficulty.

  • Finish the redesign in the span of 2 shifts (6 hours)
  • Incorporate the current header image

The lack of direction and the short amount of time definitely gave me a interesting type of challemge which required me to think in a quick efficient way creatively.

To start this process I very quickly, setting a timer for 10 minutes, reimagined how the key pages could look experimenting with different layouts of the nav and how the content was organized.

Moving to WordPress

After having this rough idea, I went to WordPress to bring my idea to life. This run of using WordPress was very interesting because they actually updated their editor interface. Luckily after a quick tutorial from Stacy I was able to learn the Template to Page structure

Using my own “Imagination & Cognition”

One of the key parts of this site I wanted to come through is taking the colors and themes from the header into the rest of the design. By sampling these colors as my pallete and using rounded croners on most things I was able to keep a clean theme throughout the site

The Final Design + Reflection

View the final site here: https://labs.la.utexas.edu/woolleylab/

Overall this quick sprint of a redesign taught me a lot. In this project I learned:

  1. How to utilize WordPress’s new Editor interface effectively
  2. Designing in a quick timeframe
  3. Learning how think creatively efficiently without much guidance or restriction

December Projects ❆

By

December Projects ❆

Studio Course Graphics

This training walked me through the process of designing and curating my own graphics for a studio setting!

My vision…

⇢ Utilize the Museum that the students get to visit during the class

⇢ Incorporate the art style that is being studied in the class

⇢ Make the graphic monochromic

It took a few iterations to get to this point, but that’s part of the process! Originally I was pretty lost when creating this piece because I felt like every version looked really busy, especially for a backdrop. I then decided to tone it down and make the design a little more simpler!

My Steps ˚⋆｡˚

✧ Make the base layer a dark blue color

✧ Found a high-quality photo of the museum interior and desaturated it

✧ Played around with the blending modes for visual interest

✧ For more depth, I decided to duplicate the museum layer, change the blending mode & opacity, and finally offset the layer from the original

Health and Society 301 Course Graphics

Summer Courses Instagram PFP

Final Version:

Notes

  • Had to Incorporate UT branding and “Summer Online”

  • Debated whether or not UT crest should be included

  • Tested out different color variations for a “summer feel”

Drafts:

Custom/Studio Course Graphics Training

By

Custom/Studio Course Graphics Training

Continuing with course graphics training, I completed a training for designing custom course and studio assets. I chose the course ARTH 3800: Twentieth Century Art to create course graphics for.

I created:

In-studio and video assets

Canvas assets

Powerpoint slides

Stinger animations

Moodboards/Inspiration

Here are some ideas I had at the start for directions I could go for the designs.

In-Studio Assets

Once I got my moodboards approved, I moved on to the studio assets. I tried to take inspiration from both my second and third moodboard (art through the years while implementing the bold, line driven style of modernism). I decided to give it a red overlap just to keep the entire graphic consistent, as there is a lot going on. Still, I was unsure of whether red was an appropriate color and whether or not it was still too busy.

First Drafts

Studio Mockups

After this, I received feedback to:

  • Make sure the professor is the main focus
  • Blur and mute the backdrop a little

Incorporating Feedback

Taking in account the feedback I was given, I applied a gaussian blur to the pictures in my backdrop and lowered the brightness in Photoshop.

Revised Studio Assets

Revised Studio Mockups

Storyboarding

After finalizing my studio graphics, I created a storyboard for the intro animation. I decided to give it the same layout as the wall monitor background and have the panels slide in from the top, bottom, and sides. After this, the background will fade out while the title of the course will fade in.

Canvas Graphics

After finalizing my studio graphics and storyboard, I moved on to creating Canvas graphics. I decided to reimplement the non-blurred version of the graphic because there is no longer a need to have a focus on the professor, and I felt that the clear version was less distracting for the Canvas graphics than it was for the the studio graphics.

Here were the first drafts of my Canvas graphics:

Homepage Banner

Dashboard Graphic

Canvas Buttons

iPad Overlay

Powerpoint Assets

I also made Powerpoint assets. These included a title slide and a content slide. For the title slide, I decided to use the same graphic from my monitor background, and for my content slide, I decided to keep it very simple to allow for easy comprehensibility.

Title Slide

Content Slide

Final Menu + Final Thoughts

Overall, this training was very useful in prepping me for designing custom studio graphics in the future. I was excited to design studio graphics for the first time because I haven’t worked in environment design very much. Overall, I enjoyed seeing what I could do creatively, while still following guidelines and requirements.

November Updates

By

November Updates

November went by so quickly. It has been half of the month. For this past month, I have done more work with Shiny App and Texas Politics project.

Shiny App Project

Advisor: Stacy Vlasits

Description: For this project, I continued to work on implementing features for the application built in Shiny App. The client requested two more features to be added: working with URL input and working with CSV files.

In tackling these two challenges, I isolate the function that handle the data uploads. The answer is that it is in page 2 and then, I looked at how to handle URL input and turn that into a table format. When I looked at the function that handles uploads of the data, I actually find a solution that works for both URL input and CSV input. I just need to dynamically change the extension accordingly to whatever the format of the file uploads. For example, the CSV would have csv extension and TSV would have tsv extension. Moreover, for handling URL string, I just need to extract the base of the string to get the extension.

A function like this solves both problem at the same time:

# Get file extension from either uploaded file or URL
ext <- if(!is.null(input$file1)){
tools::file_ext(input$file1$name)
}else if (!is.null(input$urlInput) && input$urlInput != “”){
# extract extension from URL
tools::file_ext(basename(input$urlInput))
}else{
“csv”
}

Texas Politics

Advisors: Chris Pittman

Description: For this project, I only get the overview of what the project is about. I did not start to look closely into the solutions. From the outset, it seems like the project involves a place for storing all of the updated elements including charts and blogs. Also, the project incorporates a change in the database with a boolean value “updated me” so that the blog, chart will be included into that place. The idea behind is that every year, there would be blogs, charts and other elements that get to be updated. Currently, there is one guy that have all these information but to streamline the process, we can leverage technology to keep track of all these information. It helps to onboard new people quickly to the updated part of the project.