Part 1: Design Updates

OCILL

Even though there isn’t much to show graphically, the content transfer project from OCILL to Canvas for Intensive Turkish 1 and 2 is well underway and making great progress. As of today, we have transferred content fully from the first course and most of the exercises have been approved by the client.

Some takeaways I’ve learned from this project as I hand it off to Poonum and Angie:

• Client communication: as long as there aren’t any misunderstandings, projects are bound to run smoothly. Our communications with the client professor have thankfully been clear and constant.
• Team communication and coordination: a fundamental aspect to working with a team, even if working remotely, is making sure everyone is on the same page
• Written documentation and file structure convention: a really helpful way to keep the project organized

GRC 401C: The Natural Environment Course Graphics

After some feedback from the client, I created a semi-final set of graphics using a specific background image and text box color:

 

Cascade Web Dev Services Revamp

Even though I wasn’t able to work on this as much as I would’ve liked given that OCILL took more of my time, I really enjoyed going back to Cascade and thinking about how the Web Development Services site for COLA could be redesigned to be more helpful, intuitive and straightforward.

To start, I created a set of four buttons that would act as links to an appropriate help email address. The idea was to design these as simple and straightforward as possible, while still looking consistent with the COLA website style. Consequently, I created minimal monochromatic buttons using UT’s grey and white and Roboto Condensed, the same font used in the COLA websites. Below are examples of how these look:

Moreover, I’ve also been looking into the design of the banner for this site. I’ve been using images like the ones below to get ideas as to how can Web Development Services be expressed visually:

As of right now, I have been looking into a similar design that also uses UT’s grey and white (to match the buttons) and Roboto Condensed. So far, I’ve only done two design iterations but I am sure another STA can do much more with these to fully convey what Web Development Services entails in LAITS. Here are my designs:

Finally, the below image is a mockup of how the website could look with the items I’ve designed so far:

Part 2: Farewell Letter

Dear Design STA Team,

As my STA appointment comes to an end, I would like to express how grateful and satisfied I am to have worked with such an incredible group of designers, developers, and most importantly, people. Through my experience with LAITS, I am confident to say that I have gained an invaluable set of skills (both soft and hard) that I know I will use and keep improving for the rest of my professional life. Working as an STA was the best thing that could’ve happened to me as someone who is always looking to try new things and work in engaging projects from their inception through completion. It is especially satisfying to see stuff I’ve been involved in around campus, go LAITS!

To Suloni, Valerie, and Maddy, thank you so much for being such a helpful, inclusive, and supporting group of supervisors. It is very refreshing to work for people who see you eye to eye and are very easy to talk to about anything ranging from the dumbest questions about logging into Cascade all the way to cool facts about boba drinks.

To the rest of the STAs, I consider myself lucky to have worked along with such an awesome group of people from such different backgrounds and ways of thinking. You all have taught me things about design and life that I would’ve never thought I would learn in a part-time student job. I am sure that you will all be very successful in your career paths and I can’t wait to see what you end up doing later on.

I hope to visit you all in person soon and keep in touch through social media or on campus.

Thank you again for everything,

Miguel Yapur

LatinX Pop Lab logo

Last week, I was assigned the logo of a professor’s lecture series that covers, analyses, and discusses the Latinx’s cultural impact on the US. The professor specifically called for an alternative graphic that didn’t include the face on the middle of the logo (acting as the O in POP):

Here are some initial versions, which would be edited due to the O being too far apart from either P:

Here is a more finalized version, which has a wider O and a more accurate off-black color chosen in the original Ai file:

Course Graphics for GRC 401C

A professor in the Department of Geography & the Environment requested course graphics with the following notes about the color palette and style guide to be used:

The color palette matches what I could use to differentiate among the subsystems: Atmosphere (yellow), Hydrosphere (light blue or blue), Lithosphere (tan), Biosphere (green).

This class is all about the earth, a Geosystem, comprising the four subsystems above. So the earth from space (the Big Blue Marble), clouds, weather systems, tornadoes, hurricanes, volcanoes, mountains, rivers, coastal features, sand dunes, rock formations, lakes, pretty landscapes of any kind (from deserts to tropical forests to glaciers), pollution, climate change, plants, animals, etc.”

The professor requested the following course graphics:

• Studio Graphics:
  • Digital Wall Monitor, Custom Design
• PPT Slides:
  • Lecture Segment Title Slide
  • iPad Overlay (faded or color)
• Canvas Graphics
  • Dashboard graphic
  • Homepage banner
  • All standard Style B buttons

I initially created four different versions using images from Unsplash that would fit the professor’s request:

Studio backdrop:

iPad Overlay:

Dashboard GFX

Homepage Banner:

Style B Buttons:

After some feedback from Poonum, we could agree that the image used as the background for the third version is the most fitting but needs a couple of adjustments for it to not look too glary. Below are three images showing the original, first edited, and corrected versions of the image:

Fun Tuesday Activity

This is the first-ever STA Fun Tuesday activity, making pixel art out of formatted cells in Google Sheets. Go team Mona Lisa

OCILL

While I don’t have much to show other than notes and communication, the OCILL transfer project is under way as we prepare to transfer lecture content for a professor’s OCILL website to Canvas! I’ll have more updates on this on my next post.

STA Clio and Canvasser Hub

The STA Hub is meant to be a place that hosts all of the STA’s Clio and Canvasser activities. So far, I’ve included a banner, intro paragraph for description, and a paragraph from each STA that outlines what they learned by working with these tools to create an interactive instructional experience. The below screenshot is how it’s looking so far:

Poonum’s PSD Texture Training

This basic training is meant to teach STAs how to apply texture layers and masks to images. Here are some of the images I made from this training while giving it a test run for feedback:

COLA Public Affairs Last Scene

Based on feedback from the video team, we were asked to create assets for a scene at the end of the video that would imitate an airport banner that would change flaps and reveal some text along the lines of “COLA – NOW BOARDING”. The following pics are a storyboard that helped me guide myself in creating the animation:

The scene needed an extended background that would seamlessly move from the laptop up to the banner. Below are the original and extended backgrounds:

Here is a preview of the last scene:

 

Quantum Computing Animation

Instead of making the preview animation in PSD format, I imported the graphic assets into AfterEffects so I could add more fluidity and complexity to it. Below are both animations for reference:

CLIO Hub Title Cards

I’ve been putting together title cards for the CLIO Hub, a place where we’ll be compiling all of STA Clio websites and their respective Canvasser activities. Here’s how the cards are looking so far:

Photo IDs:

Quantum Computing Graphics

Another CS course graphic for Aidan’s animation team. I had to to some research to grasp a good idea of the concepts covered in this class in order to graphically translate them:

Here is what I have so far in regards to the actual graphics:

COM 302 Graphics

This week, I took over Angie’s project in creating two icons for a Skill Lab and a Debriefing section for COM 302 lecture slides. From what Abriella asked me, I researched some icons in the Noun Project to help me get started on something that could graphically represent these two concepts. Below are some icons I considered:

Once the client approved of the 1st and 4th icons, I created the assets for the lectures in the same style guide that Angie had been following:

Video Manager Icons

During the beta testing of the Video Manager, Poonum and Ruben asked for the creation of new icons for the video manager. Here are the original ones:

The request called for new icons for the following actions:

• Play
• Pause
• Split clip
• Zoom in
• Zoom out
• Delete/Trash
• Render

In following a proportion similar to the one that Apple uses for their iOS icons, I created new icons that aim to be graphically intuitive and simple to understand. Here are how they look on their own and in a mockup screen:

STA Presentation!

I had a really fun time watching others STAs present the projects they worked on throughout the last semester. Here are the slides that I presented for mine, which covered the design of the ISPRII Logo:

CS Graphics

After multiple iterations and feedback from Aidan, it looks like we’re in the final stages of the graphics for Design Principles & Causal Inference and Data Exploration and Visualization. Here are two candidate animations for each course that I’m waiting for Aidan to approve: