STA Blog

Athena Zeng

Athena Zeng

Last Things and Farewell

By

Last Things

Hello, as I wrap up my time as an STA, here is what I was working on. I finished some Photo IDs in the past week and made edits to the Brand training I mentioned last time. Sorry about the briefness, I am running out of time!

and Farewell

Dear Design STAs and Staff:

Goodbyes make me extremely emotional, and I think it’s best that we just let the goodbye run its emotional course at maximum. Thank you all so much for letting me be a part of this wonderful team. Despite only being here for one year, I feel as if I have learned so much. During my time as an STA, I gained so much knowledge in the Adobe Suite, web development, teamwork (all virtual too), and communication, to name a few. Though there is still a long ways to go, the opportunity to develop these skills and work on design projects with a team like this was something I could have only dreamed of.

To Suloni, Valerie, and Maddy, you were the best supervisors. Thank you so much for being supportive, accommodating, super intelligent, and kind. Your mentorship and feedback on every project was much appreciated, and it felt great to be respected and given agency. It was awesome to be guided by each of your individual perspectives on design and life!

To the STAs, I am so honored to have worked on projects with you and learned about your relationships to art and design. We shared some good laughs ha ha ha and each one of you all are so talented, creative, and empathetic. I wish you all good luck in the future, and I hope you all have a wonderful school year!

There are so many things in the world that are just like you don’t know what you don’t know, and I feel as if being an STA has opened my mind to some of those things like in art, occupations, and general knowledge. And I feel like it has made me a better person which is cool and groovy. I am incredibly thankful for my time appointed as an STA, and most importantly I am so thankful for my time with each of you all! I hope I can visit again one day, and please please stay in touch!

Thank you thank you thank you so so much,

Athena Zeng

This Past Week

By

This Past Week

This past week, I worked mostly on edits related to the Knowledge Base. I created a training for the Inspect Tool. This training is a very brief explanation of how the Inspect tool can be useful for temporary HTML/CSS edits. Here is an image from the training.

I also have been working on some changes for the Branding training from a while back, based on Abriella’s feedback. Earlier last week, I also helped out with some title cards from a training Poonum started, but she has left now 🙁 sad and I’m not really sure if I have all the files for it. I also worked on a photo ID, updating my Box folder,  and some Youtube tutorials in downtime/to switch things up. Only two days left of being an STA :0.

Here are some of the notes I took on a few of the tutorials I watched:

 

 

Top 5 Adobe Illustrator Tools You Should Know – Design Tutorial

Shapebuilder Tool

  • Scan a photo into illustrator and lock it, work on another layer
  • Shapebuilder is a replacement for pathfinder, it is in the toolset
  • Drag to join
    • Hold down the altkey to delete
    • Use a line segment tool
  • Shift M
  • Then fill with flat colors using the eyedropper tool

Pen Tool

  • Make curves
  • Turn off fill
  • One click makes a straight line, another click makes it a curve
  • Click escape to get out
  • Remember the shape builder tool can be used to get ruid of lines if you hold alt
  • Width tool
    • Alter lines after you make the line really thin first, then you can adjust fulcrum points to make different sections larger using the width tool
    • Use expand experience to turn from a stroke to a fill
  • Ellipse tool
    • Scissors tool
    • Create lines to segment where you want to start deletting
    • Then use shape builder tool to delete
    • You can change the but capp using a different tool
  • Freeform Gradient
    • Fill tool selected
    • Then click gradient on the right toolbar with colr selectecd as needed
    • Using freeform gradient tool, you can easily adjust where the light is coming from and what color you want them to be
    • You can also use gradient lines using fill > gradient > freeform gradient
    • You can change the line to follow a curve
  • Global Edit
    • Quick actions > Start global edit

Master the Pen Tool in 30 Minutes | Photoshop In-Depth Tutorial

  • Everything in Pen tool is a vector
  • Use P 
  • Vectors do not pixelate but rasters do 
  • What is a path
    • click
  • How to make a curve
    • Click and drag
    • Move the handle to determine the degree of the curve
      • Longer handle = greater intensity of degree
      • Also influences the next curve
    • Have two handles so not sharp
  • Delete the handle by holding alt and moving it or deleting it or brin
    • Alt does convert point tool, corners to curves and curves to corners
  • Holding alt key breaks the angle, then with control you can move it
  • Freeform pen tool
    • Adds points, convert point tool is alt
  • Using pen makes it show up in paths
    • How to fill?
      • Go to layers panel and click on solid color in gradient half circle effects to create a shape
      • A shape is just a path with fill

How to Improve UI/UX Design Skills | 5 Quick Tips

  1. Plan hierarchy of project 
  • Plan hierarchy and flow through mockups on paper, figma, miro
  1. Accessible navigation
    1. Simple, easy to use navigation
    2. Back or close icons on screens, accessibility is important
  2. Clear dialogue
    1. Advise on good practices, just good reading text visually and in terms of dialogue
  3. User feedback
    1. Loading on a button
    2. Hover cues
    3. Gives user idea of things happening
  4. User testing
    1. Don’t worry about optimal test group right away
    2. Do initial testing, then make a decision

 

What is the difference between UX, UI, product, visual, graphic, interaction design?

  • Product design
    • Designer owns the product from beginning to end
    • Refers to apps and software
    • Responsible for UI, UX
    • Animation, prototyping, coding, research, visual, and interaction design
    • Know when to develop hi fi mockups, animate and prototype
    • Know how to communicate ideas
    • Setting up wordpress, not too much code, but a little HTML is useful
    • Own everything from concepts to hi fi prototypes
    • UI
      • What you see
    • UX
      • User flow and experience 

 

User flow tutorial | How I use them in design projects 

  1. What is a user flow?
    1. A series of actions a user takes to achieve their goal
    2. Ask three questions
      1. 1. Who is the user
      2. What is their goal
      3. What are the steps the user needs to take to achieve that goal?
  2. Why do designers use user flows? Why are they valuable?
    1. A method to communicate designs from the perspective of the user
    2. The biggest WTF in design right now | by Alexander Handley
    3. User flow is the new wireframe. An illustrated guide on the different… | by Alexander Handley  
  3. What do user flows look like? How do I create them?
    1. The bigger the product, the more time  spent
    2. Can be a combo of 
      1. 1. Task flows
      2. Wireflows (lofi)
      3. Screen flows (hifi)
  • user 
    • The instacart employee
  • Mapping out the task flow
    • How would the user access the feature? Where does the feature live?
      • In earnings page
    • Call to action
      • Shopper must know how much is eligible for payment
    • Transfer the available amount to 
  • Competitive analysis
    • Look at venmo, cash, uber, lyft and looking at instant payment feature
  • Now map out the wireflow along the task flow
  • Then use overflow or figma to create a higher fidelity  

PSY Prof. Duarte Memory and Aging Lab: Banner Illustration Design

By

PSY Prof. Duarte Memory and Aging Lab: Banner Illustration Design

This past week, I worked on the banner illustration design for Professor Duarte’s new website. I mentioned a little bit about it in the last post. After picking a color scheme I thought would go well with the website, I began the process of making each of the silhouettes. At first, I tried using the pen tool on illustrator to create vectors, as Maddy mentioned this would be easier for changing colors. However, each one took me a long time, so I switched to photoshop and used the lasso tool. Since I was using Photoshop, it was helpful to have many layers and organized naming conventions to keep everything in check. I wanted to go for a paper cutout type effect, so I used a combination of effects like inner shadow, bevel and emboss, and pattern overlay. Since it was a lot of adjustments, what helped me speed up things was making use of the “layer styles” option. Once you have something looking the way you want it to, you click create new layer style, which can then be easily applied to the other layers. It took a bit of adjusting to get it to look right, but hopefully it does now. Below, you will find the iterations. On the left is the original design, and on the right is the design with a color overlay to help us get a better idea of what the colors would look like on the actual website.

 

This is a screenshot Maddy took of her testing the website with the banner, and it looks pretty nice I think! I think the colors worked out, so hopefully Professor Duarte likes it.

I’m looking for apartments next week, so I am moving my hours, but hopefully I can make it to the last fun times tuesday! I really like everyone on the STA team, and truthfully I am already emotional because the end is near :000. Anyway, on a personal level, I watched a video about how to read more (since this has been a long time goal of mine), and I think I am going to try out a speedreading technique. I find it really hard to enjoy books with all the other media around me, so I am thinking about not using my phone for a week once I go home. I tried this out last summer, and it was actually mind blowing how not having access to media made me crave literally any kind of mental stimulation and improved my focus dramatically. I did miss talking to my friends though. Have a safe and fun weekend!

Orientation Check-up, STA Welcome Back Poster, and Duarte Banner

By

Orientation Check-up, STA Welcome Back Poster, and Duarte Banner

Last week, I stopped working on the Grav/Gantry development, and worked on other tasks like Photo IDs, Orientation Check-ups, and a Return to Office poster for the STAs. New STAs will be coming around August 18, so I checked and proofread the KB and Basecamp links for correctness. I also wrote a bit of advice based on my experiences. I then started working on a poster for the Return to Office celebration, and today I have wrapped it up, I think. This party is in celebration of the official return back to office, which is very exciting, though I have graduated and will not be there haha. I took inspiration from the art for the Madeline series by Ludwig Bemelmans. Each of the characters represents a different STA department, and I think it turned out cute. I used a lot of the skills learned from the winter break project on the wellness video, so I was happy to have more practice with that. I mentioned in my advice how a lot of the skills you pick up in projects are used again down the line, so this was a testament to that. I also began work on a banner for Professor Duarte’s new website. This banner is supposed to represent diverse people, thoughts, and brain activity in a clean and professional manner. I am still in the planning phases, but I will pick up the pace next week. I can’t believe it’s already August! Soon, my time here will be at its end and I will no longer have any active ties to UT. Sad 🙁

 

PSY 120R Course Graphics and Grav Documentation

By

PSY 120R Course Graphics and Grav Documentation

Hello. This week, I worked on PSY 12oR course graphics and continued with Grav documentation.

PSY 120R is a course taught by Professor James P. Curley on R Programming for Behavioral Sciences. I was given some examples of a related course graphic design from earlier, and I was told to make a design that looked similar but not the same. R is a language used for statistical analysis, so I took inspiration from some of the R interface and the output, then created the first design (in teal) below.

After communicating with Poonum, she suggested I reduce the busy-ness of the design and make it more monochrome like the earlier course. She also suggested I take a more literal approach like the scatterplot below. With these edits in mind, I made the final design as follows and added grid lines later.


Regarding Grav, earlier in the week I continued to face issues with the sandbox Ruben gave me to work in. I would make a few edits, then the sandbox would become overwhelmed and produce error pages. After speaking to Ruben, I think I might have been doing something the sandbox could not handle in the menu editor. Now, I feel like I can probably continue with no issues, and I will focus on process documentation and creating the “Small Banner Design” that was mocked up on Figma.

Also, we wrapped up the preliminary round of OCILL Turkish II edits, so that’s exciting! Poonum and Angie really created an organized method of question-asking and process documentation. I remember the beginning of this project and being nervous about completing the OCILL edits before the end of summer, but I think it’s looking like we will finish it by the end of July or by early August.

Also also, I met up with Abriella yesterday and it was the first time I had ever intentionally seen another STA. We sat in Barton Creek and talked about work. Nice. It was very nice meeting her, and it’s weird to think my time as an STA has occurred entirely through a pandemic.

Grav Setup Part Two

By

Grav Setup Part Two

This past week was more consolidated because I spent the beginning of the week on vacation, but when I came back I started working on recreating some Figma pages Maddy had mocked up using Gantry 5 on Grav. Gantry 5 is the block editor that I mentioned in last week’s post. It allows for easier website creation for those who do not have as much experience with web development / coding (me). De’She and I were both working on this task, but I have continued to have issues getting Grav to work through both the local host and a sandbox that Ruben had set up. However, there was a brief window of time where I was able to start building the website. I was pretty confused by basic changes, but we had a long working meeting with Ruben and Maddy where we asked our questions. The main thing that helped me was working through some of the custom CSS tasks and developing a workflow for the custom CSS. This workflow would look something like identifying the visual element needed –> inspecting the element on the non-admin view –> looking at the Figma for dimensions/details –> testing changes in that inspect window –> adding the changes using the custom CSS tool in the Page Settings part of Gantry 5. Unfortunately, the challenges are still continuing as I cannot see the non-admin view anymore for some reason. Hopefully, it will be okay, but if not, I may need to not work on this project anymore.