Advanced Figma Design Research

Start: Oct 20th, 2023

To be Completed: N/A

Staff Guidance: De’sha

Project Description: I would create a new Figma tutorial based on Figma’s new feature and dive deep into how Figma can help designer/Web Dev to create digital prototype. In this tutorial, I would touch upon advanced Interaction flow inside Figma and  variables for designers, dev mode for the collaboration with designers and web developers, and other small features such as Design Theme, Auto Layout and etc.

Dev Mode

Dev Mode is a way to interact with Figma files, specifically designed with developers in mind. This mode is a way to reduce the friction in design handoff and allow for better communication and design implementation. You can toggle Dev mode on the right hand side of the top navigation or use the shortcut Shift + D

• The separate dev top is more easily find the information you yo start building
• This mode allows to connect your own toolkits
• See what’s changed since they were last in the file and what’s ready for to be built

• Easily add structure to the infinite canvas to streamline the design handoff
• Keep design and code in sync without additional redlines or annotation

I find official document that introduce dev mode in the official website of Figma but there are repetitive steps repetitive and unclear description. I filter out some steps that we won’t use and create this tutorial to boost the collaboration between developers and designers.

Variables

1. Colors — use for fills & strokes
2. String — apply for text layers
3. Number — use for spacing, size, text layers & corner radius
4. Boolean — true/false values for layer visibility of variant instances

For this tutorial I didn’t reply on the official document of the feature but create some of my own example in Figma.

MEZ Map

Start: Noc 9th, 2023

To be Completed: N/A

Staff Guidance: De’sha

Client: Mike/LAITS

Project Description:  Map created for the MEZ building, which the overall design should match the previously created Burdine map.

I finished the first draft of the campus map, indicating the MEZ hall on the campus by highligthing with bright orange. I also drew the floor plan for the first floor inside the MEZ hall.

After Thanksgiving break, I added on the label for room tour and parking slot for the visitors. Meanwhile, I integrated two assets into my spread so that all visitors could refer to this map to find our studio,

However, De’sha and I soon realized that the indication of office/studio is not that noticeable when the room is color-coded similarity. We noticed the wayfinding panel on the fourth floor and get inspired to only color code the destination.

We also found that it’ll be helpful to emphasize all entrance by added the 1st floor map/entrance on a 2rd floor map. The stairs could be identified as one possible entrance and therefore color-coded as grey.

Final Iteration

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.

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.

TXDST Website Photo Editing

Start: Sep 29th, 2023

To be Completed: Nov 9th, 2023

Client: Rachel

Staff Guidance: De’sha

Project Description: graphic design/editing help for images that will be used in the Brazoria County section of the website

I edited most of them by adding the yellow blurred highlight on the top of intended pieces.

However, there are one pieces I found difficulty of dealing it.

2. Trace the letter by myself (I have traced the first line for comparison)

I’m still waiting for the feedback of these two versions and hopefully our client would love one of them.

New Update

The client do like the tracing option so I trace the letter one by one with the Wacom tablet. It’s a little bit time-consuming overall but now I know more about the type structure!

Update on Nov.6th

I received more photo editing request from our client Signe. I was able to edit 20 more photos on adjusting and highlighting certain parts of the photos (census records and maps) to help readers of the website locate on important information easier.