HELLO!
I’M ELIZABETH. THIS IS WHAT I DO.
‘13
HORIZONTAL COCKTAILS designed in illustrator
· printed on fourteen pt. cardstock
I had the opportunity to be a web developer/design hybrid intern on the horizontal team at LinkedIn. The wall next to my desk was completely bare the entire summer. For my team’s
parting gift, I designed a series of posters each with a beverage of some sort and a name corresponding to one of my team members. It proved to be a rewarding challenge. I spent a couple
days researching trying to pair drinks with each person. The bubbly designer was champagne and the developer with exploding red hair had to be a flaming martini.
Eugene
‘13
DAVINCI REDESIGN wireframed in illustrator
¡ implemented with dust.js and scss
As an intern at LinkedIn, I worked on redesigning davinci, the tool that houses LinkedIn’s pattern library. davinci is a tool for both web developers and designers. Developers can pull code
snippets directly from the site and designers can find the correct styleguide rules to use for their mocks. Originally, davinci was hard to navigate and did not scale. All the components were
stored on a single page. I was fortunate enough to work on the entire project: sketching, wireframes, and final implementation. This variety allowed me to work with the entire ued team.
OLD TO NEW The screenshot on the left is the old davinci. Originally, Each component was stored in an accordion styled dropdown. Furthermore, the only available navigation is at the overview
section at the top of
the page. The new davinci displays all the categories in dynamic thumbnails. For example, the components in the buttons thumbnail are functional buttons. There is also search functionality.
DETAIL TYPOGRAPHY PAGE
TYPOGRAPHY EXEMPLIFIER
SIDEBAR NAVIGATION
When a thumbnail is clicked on the homepage, the
The typography section also contains a fully func-
Each detail page also has a slideout navigation
user is taken to a detail page. Most detail pages
tional exemplifier. The exemplifier allows a user
drawer with the thumbnails allowing for easy navi-
have an overview section outlining the section’s
to select headlines of different sizes with different
gation from component to component.
contents.
backdrops. After each selection, the code samples are automatically updated.
‘12 ‘13
DESIGN EDUCATION introductory photoshop and illustrator at uc berkeley
At uc berkeley, they offer student-led courses called DeCals. Students usually take these classes to add 1-2 units to their courseload. I have taught the introduction to photoshop and illustrator
LICHTENSTEIN INSPIRED GRAPHIC During week 2, students learn how to use the Illustrator Pen Tool. This is the tutorial for students to practice tracing a photo into a vectorized object. I created guides on the left that aid students in tracing the woman’s figure. Students also have the option to toggle the guides on/off depending on their comfort.
course for the past two semesters. Students with little to no experience are taught basic design principles through the use of Photoshop and Illustrator. I designed the course material from be-
ginning to end. Each week consists of a 45 minute lecture about a tool or design principle followed by an hour long tutorial for students to practice their new knowledge.
Basic Tools
Resizing Shapes
SELECTION TOOLS
To resize a shape, select the Selection Tool (V) in the Toolbox and click on the shape. These are a few ways to affect resizing.
Selection Tool (V): Used for selecting and moving a shape. It can also be used to resize a shape. Direct Selection Tool (A): Selects a single anchor point instead of the whole shape. Used for editing anchor point of a shape. Click once on a point to select and hold shift to select multiple anchor points.
HOLDING SHIFT
HOLDING ALT/OPTION
This will constrain the proportions of the object you are resizing.
This will resize the object from its center.
HOLDING SHIFT + ALT/OPTION This will constrain the proportions of the object as well as resize it from its center.
Rotating Shapes
SHAPE TOOLS These tools are pretty self explanatory. When selected, you can create the shape it specifies. Click-drag to size the shape however you wish. If you want to input specific values for size, height, or width, simply click anywhere on the artboard or hit enter to insert a shape.
To rotate a shape, select the shape using the Selection Tool (V) in the Toolbox. Hover the cursor near the edges of the bounding box (blue box outline around shape) and Click-drag to rotate.
Displays the angle of rotation
Duplication
Note: Any tool with a small triangle in the bottom right corner can expand into multiple options. Click and hold the tool icon to display the other options.
There are a few ways to duplicate objects in Illustrator:
CLICK-ALT/OPT-DRAG Select (V) an object. While holding down the alt/option key, drag the object to the desired location.
Fill & Stroke
PASTE IN FRONT (Cmd/Ctrl-F)
Every path in Illustrator has a fill & stroke. In the star to the below, the fill is blue and the stroke is pink. Note: Clicking this will switch the stroke and fill. The shortcut for this is Shift-X. In this star, the blue would become pink, and the pink will become blue.
FILL
This will paste a duplicate object behind the copied object.
PASTE IN PLACE (Cmd/Ctrl-Shift-V) This will paste a duplicate object in the same location as the old object. This is useful when working on different artboards or documents.
Arranging Objects
STROKE
STARTING STATE
When the fill is over the stroke, as above, changing the color will affect the fill. If you want to change the stroke color, just click the stroke (shortcut: X). The stroke will now be over the fill, so the stroke color will change instead of the fill.
Fill is active
This will paste a duplicate object in front of the copied object.
PASTE IN BACK (Cmd/Ctrl-B)
BRING TO FRONT Ctrl/Cmd-shift-]
All examples below move the star. These options can be found under Object -> Arrange.
BRING FORWARD Ctrl/Cmd-]
SEND TO BACK Ctrl/Cmd-shift-[
SEND BACKWARD Ctrl/Cmd-[
Stroke is active
ILLUSTRATOR BASICS Excerpts from Week 1 of the course. Lesson notes are always available online for students to reference later.
‘13
ENDLESS MOBILE prototyped in illustrator and indesign
A group of Cal students and I worked with endless mobile, a company striving to provide an operating system for the developing world. endless mobile approached us for our take on a financial
· collaborated with a team of six planning app for the developing world. Our first reaction was to take the traditional consulting approach and benchmark. One of our team members was situated in the Flavelas and did some CURRENT BALANCE
$2,390
QUICK VIEW
SAVE PLAN LOAN TUESDAY, MAY 7
PLAN FINANCES
CURRENT BALANCE
$2,390
SAVE PLAN LOAN
EXPENSES
SEE FULL CALENDAR
$ notes
user research allowing us to identify the different personas. In the end, we came up with a few design concepts. Our product had to be reminisiscent of pen/paper and personalized.
Food
35%
Home
55%
Clothing
20%
Add Expense
I EARNED add tags
I SPENT
QUICK VIEW HOME
INCOME Endless
MAY
Add Income
$1000
CONTACT ME
ELIZABETHYLIN@GMAIL.COM
LINKEDIN.COM/IN/ELIZABETHYLIN