STA Blog

Week 1 – My First Blog!

By

Working Through Intro Training

 

STA Handbook Powerpoint

This week, I began working on my training tasks, familiarizing myself with the platforms we use, as well as the lab. For my first training project, I worked on creating a powerpoint that helped me better grasp the content within the STA handbook. I chose 5 rules that apply to my experience here as an STA, and formatted them in a powerpoint. This is the final slide set I came up with–

 

 

Following this project, I began working on the remaining projects within the Basic STA Training category. The first being Style A&B Course Graphics.

Style A&B Course Graphics

For this training module, I used Canvas and Powerpoint templates to create Style A and Style B Designs for DES304 – Design Studio I. This was more self-paced and involved my first experience gathering feedback from Basecamp.

 

 

This training module helped set me up for the following task– Custom/Studio Course Graphics, which is what I continued into the next week.

STA Blog Banner and Caricature

In addition to my training modules this week, I had the opportunity to create a blog banner and caricature to better represent my creative style on the team. It was an excellent way to ease into the program and exercise my design skills.

 

Week 2/12- 2/16

By

UTCF Banner 10.2 Montreal

Start: February 12, 2024

To be Completed by: February 29, 2024

Staff Guidance: Leilani, De’sha, & Yazz

Client: UTFC

Description: I was tasked to create a graphic asset for the UTCF project, a banner, using the approved images for this assignment. I had to follow the instructions for the cut-out and pasted them in the illustration file.

First, I had to download the images needed for the banners and cut-out the main subject and later arrange them in the illustration file containing the banners.

   

After receving feedback, I tried out new layouts and refined the banners.

Leading to the latest iterations:

 

The next iterations I created centered around the feedback I received which consisted on:

  • Lighten the shadows to avoid making the images look flat
  • Get more of the clock’s face & details
  • Define the outline if  necessary

 

UTCF Banner 10.4 Montreal

Start: February 12, 2024

To be Completed by: February 29, 2024

Staff Guidance: Leilani, De’sha, & Yazz

Client: UTFC

Description: I was tasked to create a graphic asset for the UTCF project, a banner, using the approved images for this assignment. I had to follow the instructions for the cut-out and pasted them in the illustration file.

I followed the same steps as the previous cutout and created the first iteration.

I received feedback that consisted on:

  • Adding thin lines to fill the image tracing outline where is not visible
  • Remove the bush attached to the middle building and push the building down
  • Switch the order so that the triangle building is in the middle

 

Following the last iterations I created the entire set, but the images for the banners updated and I created a new set of banners with the new images. I also tried out two different layouts.

For the final iterations, we decided to go with the first layout while fixing a couple of things:

  • Moving the middle building down so the trees aren’t as prevalent
  • Enlarging the buildings slightly

 

 

Spring 2024 Week 5

By

STA Roster Poster Spring 2024

Client/Prof: LAITS
Completion Status: Started on Jan 23
Staff Guidance: De’sha

This week I’ve been working on color scheme edits to the poster! We went with this idea:

And I’m starting to update the colors and placeholder vectors, which has me at this stage that I’m still working on:

Week (2/5 – 2/9)

By

2024 Early Voting

Start: February 5, 2024

To be Completed by: February 15, 2024

Staff Guidance: De’sha

Description: With the upcoming election, new voting PSAs are wanted. I was tasked with creating a new illustration for the voting PSAs in accordance with the previous color scheme (red, white, and blue), fonts, and general design.

 

I started out by sketching different ideas in procreate for the illustration that ranged from voting boxes to voting stickers. Afterward I also created a rough voting PSA with the different sketches and decided to go with something simple and less crowded to not draw too much attention away from the information.

After deciding on the graphics, I finished drawing it out in procreate using the same color palette as the previous graphic assets (red, white, an blue). Then, I incorporated them in the photoshop file I created that had the information and layout of the early voting PSA creating the first couple of iterations.

Once I received feedback, I revised the layout and created another illustration with the same idea but with a few refinements. For the new illustration, I made the back of the voting box be shorter and have an overall different perspective, increased the ballot’s and hand’s size. I created another iteration with the new illustration and new layout.

With new iteration, the date and location needed to be standing out and not look as if it was part of the title, moreover, the illustration was close to the text. As such I created a new design by adding a darker background around the date and location to differentiate it from the rest of the title. I also increased the illustration’s size an moved it to the right to create space between it and the text.

 

 

STA BIO

Start: February 7, 2024

To be Completed By: February 7, 2024

Description: With the new semester, we were tasked to created a bio that showcased who we are and our general information. What had to be included were: our name, pronouns, major + year, specialties, hobbies, and 3 goals for the semester.

 

I created mine in illustrator.

Week 2 & 3 & 4

By

Week 1 & 2 & 3 & 4 Recap:

Week 1&2 of my STA Journey:

  • I Became familiar with various tools used in day-to-day work.
  • Created a personalized banner for the blog
  • Started assigned training modules.
  • Completed my Web Accessibility Standards Training
  • Discovered the significance of building accessible websites.
  • Realized the importance of inclusivity and providing alternate formats of information.
  • Learned about Web Accessibility Evaluation Tools, such as Wave, for analyzing websites for compliance with accessibility laws.
  • Utilized Figma to correct errors flagged by wave accessibility tools.

Wave Accessibility tool Logo 

Wave Accessibility Tool 

Errors detected by Wave Evaluation Tool

Errors detected when I analyzed Byjus.com

In Week 3&4 of my STA Journey:

I built my first website using WordPress. The website taught beginners to use WordPress. Let me walk you through the various phases here!

 

Phase 0) Brainstorming

Before building my website, I drew a rough sketch on my notes app. At this point I asked De’sha for feedback regarding my rough plan and learned more about menu icons in the realm of website. As a digital native, I am sure we must have come across the menu bar  (three horizontal lines stacked on top of each other). I learned that the menu bar was called a hamburger and there’s a whole suite of names for the different icons used in WebDesign. I found this information really interesting and wanted to share it with the readers of the blog!

List of Names for Menu Icons in Web-Design

Menu Icons

 

My Brainstorm Process

BrainStorm Process 

Phase 1) Implementation

While no one likes to face problems, I believe that the best way to learn is through consistently failing. Here, I will list all of my mistakes and what I learned from them.

 

  1. Implementation is hard but doable if you persevere. Initially, I had no idea what themes were and I kept switching out themes to build my project. This created a couple issues because I was not able to locally customize certain things as the local customization did’t have precedence over the pre-built theme customization. It was mid-project that I learned from a colleague that Astra is really powerful theme for customization purposes, so I stuck to that. Lesson: Don’t keep changing themes in WordPress
  2. The global customization theme is your BestFriend! Starting off, I was unsure of utilizing global headers and global footers so I would spend a lot of time, individually customizing my global headers and footer for each page. The main problems with this implementation was 1) The headers and footers were not consistent across the pages and 2) A lot of time had to be spent in making these features consistent across pages.  Lesson: Master Global features.
  3. Another issue I had was implementing the menu bars. Before I built my website, I knew that I needed a navigation bar. So naturally, making that part work was very important to me. However, I was just not able to get the hamburger to show up. It was so frustrating. I watched Youtube Tutorials, spent a lot of time tinkering with WordPress only to conclude that perhaps Astra does not support Menu icons.  Lesson: Don’t axe your vision because it does not seem to work at first. 
  4. When in doubt, ask for help. This step is super important. After being frustrated at not being able to implement certain features, I asked for help from my Web-Dev supervisor. So we spent about an hour on a call where he explained how to go about implementing menu bars and sub-menus, thinking about Global features, overwriting of certain features, and increasing responsiveness of the website. Lesson: Try everything before you ask for help. That way you are prepared to learn the most. 

 

Phase 2) Feedback

I asked around for feedback. For me, this is one of the most exciting phases of building anything. I get a sense of what is working and what is not. I am also able to step out of my capacity as a creator of the project and criticize some of my own choices which pushes me to improve what I build.

 

  • Here’s a list some of the feedback I got:
  1. Improve your about me page.
  2. Have a banner for your landing page because it is the first thing people see and it is important to make it as catchy as possible.
  3. Have some sort of color palette.
  4. Keep your fonts consistent.
  5. Explore word hierarchy.
  6. Utilize horizontal scroll.

 

Phase 3) Repeat implementation

  • I incorporated different suggestions to make my website look attractive.
  • I decided to distinguish my website from other websites by turning the highlighted portion green.
  • I also made a menu with sub-menu and rounded the edges of them to make it more inviting for learners.
  • I was not able to explore utilizing horizontal scroll, but I will keep that in mind to implement in future websites.
  • I was able to build a uniform header and footer for my website.
  • I also implemented features that improved the responsiveness of the website.

 

Final Product! 

& drum-roll! I have been talking about my project through the entire blog without showing you my final product. So, here’s my first ever website! Enjoy 🙂

Link to Website

 

Week 2/5 – 2/9

By

Summer Marketing updates:

Digital Display Ads: De’sha and I continued to edit down the amount of text on the digital displays because of the limited time frame and size it will be displayed. We made the URL more of a focus by enlarging it and removing additional text.

 

 

 

 

Spring Postcard: Final!!! We wanted the colorful lines to flow into the graduate’s sleeve, leading from the QR code to the $ 500 course sticker. The sticker was changed to have a burnt orange center with a white outline and text to pop against the green background. The back of the postcard remained the same.