STA Training: UIUX with Figma

Start: Oct 13th, 2023

To be Completed: N/A

Staff Guidance: De’sha

Project Description: Learn the fundamentals of user experience and use Figma to develop my NEW personal portfolio website and see how this process can make the website easier.

I started to work on this training for “client 2”. I read through the whole KB and found it cool to design a brand new personal portfolio website for myself with all the knowledge I learned. After ideations, I created these wireframe and user flow by listing out all the pages in its big “three-pages structure”. I found it’s cool to combine my personal logo as part of the website so I can create strong designer taste and personality.

 

Here is my Figma file (digital website mockup) for myself to develop it in Figma.

Here is how my website looks like now. I want to refine it by adding fancy animation and rolling effect on it. I might start a new design research on how to make website effect with custom coding and the design approach of it.

Specially, the first animation I want to create a frame-by-frame transition from a statement introducing who I am to the selected design works. I get the inspiration from Apple official website. I really love their aesthetic, color scheme, and web animation that works for their fantastic storytelling. If I’m able to make that tutorial, I might start with the case study of it. Moreover, I want to add in the basic transition/hover effect when people natural scroll the page. Such animation give people a smooth experience and emphasize the clickable section of the page when they want to explore around. I believe that it’s extremely crucial for web designer know how to guide people and imply information via details.

Basic Training: How to Create Flashcards

I created flashcards with basic Photoshop skills as well as learned how to tie iconography, color, text, and layout in a cohesive manner. I used icons, color schemes, Google Translate, and Photoshop layers/grids to create flashcards.

Bird Logo:

Andrew Doane from the Noun Project

Supalerk Laipawat from the Noun Project

Hea Poh Lin from the Noun Project

Whale logo:

Anthony Ledoux from the Noun Project

Wira Wianda from the Noun Project

Amethyst Studio from the Noun Project

Fish logo:

Zaenul Yahya from the Noun Project

Iconpacks from the Noun Project

Viet EDC from the Noun Project

 

Intro Training: Custom/Studio Course Graphics

EAS 1030 MO1 Earth’s Dynamic Environment II

class content: interaction of land, water, air, and life; emphasis on humans and the environment; atmosphere, oceans, weather, storms, etc.

EAS1030 Design Brief: The Professor has a preference for burnt orange

Project: EAS 1030 MO1 Earth’s Dynamic Environment II
Client:  Dr. Ivan A. Sánchez
Staff guidance: De’sha
Description/plans: Class content includes the interaction of land, water, air, and life; emphasis on humans and the environment; atmosphere, oceans, weather, storms, etc. The Professor likes burnt orange but is open to what the Designers think is best.

 

 

STA Routine Wallpaper

Cleaned up the last iteration because some of the edges looked ‘crunchy’.

10/9 Group Meeting – Passion Projects

This week we gave short presentations about passion projects we do outside of work. I liked hearing everyone talk about their projects and the stage of development they were in. I talked about building my portfolio and how/what work will best represent me as an artist. I received helpful insight from Carrie and Adriana about their experience with websites/portfolio building. Talking about it made me feel more excited to start developing my website, as well as making me feel the expectations of people around me to get started so that I can show my progress.

 

 

 

New Course Graphics!

This week, I was assigned to make some course graphics for the Data Science for Health and Discovery class. It’s pretty simple stuff but it still had to go through some iterations. I got there in the end!

Iterations:

Final banners:

UTFC

Finding images for the UTFC textbook is actually going a lot smoother now! I think once I figured out how to communicate with Yasmina and not stress about finding pictures, it’s been a much better process. I’m currently still in the process of finding approved images, but sooner than later I’ll be able to work on the slides.

Logo Animation Training!

This training was a lot of tedious fun! It was solely tedious because it took me I’d say an hour total just to figure out masking properly and I had to put it on hold for a bit to work on other assignments.

I created an eye logo in Illustrator which was a good amount of trial and error. These were the main images I needed. Pretty simple stuff for illustrator.

I made it an eye logo because I like animating eyes a lot.

Next was exporting it into After Effects. I was not prepared for this.

So After Effects uses vectors differently. I’m not sure how it works, but the amount of paths the design had in illustrator changed in After Effects. I also had to keep in mind that while After Effects kept the same amount of layers in the design, it made every component editable so I had to be REALLY careful that I was editing the right thing.

To animate it blinking, I had to manually animated the vector paths. This wasn’t difficult, but I had to keep in mind that the animation wouldn’t look as clean as I wanted it too. That’s why the closed eye part looks very choppy/raggedy.

 

Masking took a while to figure out mainly because I wasn’t entirely sure where I wanted it to be. I needed one to cover up the pupil when the eye closes, so I had to think about what layer would work best for the mask.

Here’s the final animation! I’m pretty happy with how it looks as this is my first time doing logo animation.

Final Animation

Fall ’23 STA Roster Poster

Project: Fall 2023 STA Roster Poster
Client: LAITS
Completion Status: *Final touches*
Staff guidance: De’sha
STA team members: Leilani
Description/plans: Lots (and lots) of variations of how the QR code could be displayed. The triangle banners tie best with the theme so we changed the movement and colors on them to better suit each poster.

 

 

FINALS:

 

THAT’S A WRAP

Thank you to De’sha and Leilani for helping me with the STA Roster Poster! This project felt very ambitious so I had to learn to trust my judgment and decision-making skills. I also became very familiar with the Illustrator workspace during this project, which was a great benefit. I’m very thankful for the opportunity to work on this, and I hope everyone is happy with the results! I learned a lot from this experience but I know I still have much more to learn as a designer.

 

10/1 Group Meeting – Stress Management

This week De’sha talked to us about stress management– identifying the signs, behaviors, and remedies. We talked about how everyone is juggling different kinds and amounts of stress, even if we don’t visibly see it. At the end of the meeting, we made sticky notes with positive affirmations on them to put somewhere where we’ll see them every day.

 

STA Training: Logo Design

Start: Sep 27th, 2023

To be Completed: N/A

Description: This is a three-part training in branding and the first step is the creation of a logo to represent myself.

When I looked back to my portfolio site, I realized that most of my personal work in done in black and off-white with thin like and heavy text. Therefore, I’d like to make a monogram logo in a minimalism style. Here are some sketches with the combination of my initial: J & W. I realized that they can combine with each other by overlaying J and the left part of W.

Version 1 in illustrator

My logo meant to be abstract to showcase the aesthetics of my design work. However, I’m not sure if I want to go with an elegant and thin style or the strong stroke. The strong strike is bad in readability but create interesting negative space for me to input more design inside. That’s how I come up with my new versions.

Version 2 in illustrator

While De’sha pointed out that it’s hard to read J&W with the shape, I realized that I could emphasize my name inside the strokes. It’s especially useful when I put it in the business card or personal website.

Next Step

When I looked at more examples in self-branding, I saw a couple of designers use a branding kit to represent themselves instead of a single logo to deal with different scenario. I think this logo would be a good supplement on this kits rather than itself to represent “the whole me”. For next steps, I would work on another form of logotype following the similar aesthetics of this logotype.