Hi, I'm Julie!

I’m a rising senior (c/o ‘23) majoring in Computer Science and minoring in Psychology at Wellesley College. I’m a Product Designer that to creates positive, intuitive, and delightful experiences for people! I’m particularly interested in designing for B2C companies, as I love working on consumer projects that people can use and interact with daily and/or casually.

I found my dream occupation after I took a Human-Computer Interaction class the summer of my sophomore year. I entered that class as a computer science major and walked away as a designer with big ideas, visions, and aspirations.

Image of me

In my free time, you can find me:

My brand

A glimpse into my website and brand

Colors

#C4DDFD

#97CFD0

#F2CDFF

#172741

Components

Website Blueprint

Figma File

Typography

Heading 1 - Roboto Mono / 56px / Uppercase

Heading 1

Heading 2 - Inter Bold / 36px

Heading 2

Heading 3 - Inter Bold / 20px

Heading 3

Body 1 - Inter Regular / 17px

Intuitive and accessible design for all

Body 2 - Inter Regular / 14px

Intuitive and accessible design for all

Subtitle - Roboto Mono / 14px / Uppercase

Designing away

My brain

How I go about bridging design and code

Figma, Goodnotes

1. Ideate & Design

I start with sketches and then move to Figma to bring my vision to life. I'll iterate on designs until I feel like I have a solid MVP for development.

Figma Example

Figma, zeplin

2. Inspect

After designing, I use the Figma “Inspect” tool and extract key attributes like color, size, shadow, etc.

Inspect Tool

visual studio code, atom

3. Code/Iterate Away

While Figma’s inspect tool is great, it isn’t perfect. I visualize the layout of my design, translate everything into code, and add some motion-design-magic ✨

Github

I decided to add a switch to make the website more interactive, fun, and flexible! Dark mode automatically turns on after 6pm.