POSTS BY Katie Chin

Illustrator Tips From Andrea

By on July 30th, 2012

I wrote about transitioning from PC to Mac earlier this summer, but I haven’t really talked about another technical challenge I had: getting comfortable with Adobe Illustrator CS5.

It’s not that I haven’t worked with Illustrator before Barrel. I have used it to design vector illustrations and logos, but I normally work in Photoshop for everything else – web layouts, print designs, graphic images. In my first week, I didn’t know my way around Illustrator well enough to really get “in the zone.” I spent more trying to figure out how to achieve an effect (especially those I could have done in Photoshop in 2 seconds flat) than concentrating on the actual design problem at hand.

Luckily, Barrel has an Illustrator genius on board. Say hello to Andrea.

Andrea Horne, Barrel Designer and Illustrator

I must have asked her a million questions since I started my internship. She walked me through her favorite tools and processes, giving me a ton of “I-can’t-believe-I-didn’t-know-that;I-could-have-saved-so-much-time” moments. Since Photoshop is still more popular than Illustrator (for now), I thought I’d share some tips you may not have known about.

Note: I learned a lot from all of the other Barrel designers too! I just asked Andrea the most questions.

1. Shape Builder Tool

Shape Builder is right between Free Transform and Perspective Grid.

Since there’s nothing similar to the Shape Builder Tool in Photoshop and I’m not the type to experiment with different, strange tools (even though I should), I probably wouldn’t have come across the Shape Builder Tool on my own.

This tool is a lifesaver. It helps you combine or punch out areas of multiple selected shapes, allowing you to work in the way you would if you were cutting and pasting paper together.

Combining shapes is really easy:

  1. Select all the shapes you want to combine
  2. With Shape Builder selected, click and drag to combine every shape that the drag line touches.

Quickly combine shapes without touching the Pathfinder toolbox.

Shape Builder also helps you cut parts out of another shape:

  1. Select all the shapes involved.
  2. With Shape Builder selected, press down option and click into the area you want to punch out.

You could achieve the same effects by using the buttons in the Pathfinder panel, but those aren’t as easy and intuitive to use. It’s hard to remember which button does what, and using it seems to be a case of trial and error (for me, at least). The Shape Builder Tool eliminates the guesswork, so I can get on with designing without googling how to use the Pathfinder panel tools.

2. Offset Path

Back in the old days (two months ago), if I wanted to make an outline of a shape, I would do the following:

  1. Copy and paste the shape.
  2. Transform one shape so it’s slightly smaller or bigger.
  3. Make sure the bigger object is below the smaller one.
  4. Use the align panel to center both shapes vertically and horizontally.

Unfortunately, this doesn’t always work perfectly. The edges of the new shape aren’t equal distance from the edges of the original shape.

Some outlines don't turn out to be equal distance from the edge of the original shape.

Andrea introduced me to Offset Path (from the menu, Object > Path > Offset Path). With an object selected, open the Offset Path dialog and adjust the settings to your preference.

This would create an outline 10px away of the object.

Here’s the breakdown:

Offset: The distance between the outline and the original shape. A positive number moves the outline away and outside of the shape; a negative number creates an outline inside of the shape.

Joins: I usually keep it at Miter, which makes the outline identical to your original shape. You can also use Round for rounded corners and Bevel for beveled corners.

Miter Limit: The miter limit specifies how far the points can extrude from angles in the shape. I usually leave this alone.

Also, check Preview to see the results before you press “OK”.

Using Offset Path, I can achieve the effect I wanted in just one step. Here are the results:

All the lines are equal distance from every point on the original shape.

3. Copy, Place, and Duplicate

This process doesn’t fit neatly into one label, but I’ve used it so many times that I can’t imagine how I’ve ever gotten things done without it. It makes use of three keyboard shortcuts, used in this order:

  1. Copy - Cmd + C
  2. Paste in Place - Cmd + F (This pastes a copy right on top of the original object)
  3. Duplicate Transformation - Cmd + D

Duplicate Transformation repeats the last transformation you’ve made to the object, which include moving, resizing, and rotating a shape.

To show you how this process works, I’ll walk you through positioning lines perfectly around a circle like this:

First, draw a circle to use as a guide. Then, using the line tool, make a line with a stroke of 1px. Center it vertically to the circle using the align panel, and position the line so that it’s touching the circle.

If you don't see the Align panel, make sure it's checked under Windows in the menu.

It should look like this:

Select both the line and the circle. With the rotate tool selected, hold down option and click into the very center of the circle (this should be marked with a tiny square when the circle is selected). A rotate dialog box should pop up. Set the angle to 10°, and press “Copy” instead of “OK”.

You should have something that looks like this.

You won’t need the circles anymore, so delete both of them. Here is where the shortcut process comes in. Select the slightly rotated line to on the left. Copy it (Cmd + C), paste it in place (Cmd + F), and duplicate the rotation (Cmd + D). Keep doing this until the shapes go completely around in a circle.

Keep duplicating until you get a circle of lines.

Using this series of shortcut saves time and reduces redundancy (Pressing the three keys is a lot easier than going back into the rotate dialog box every time).

4. Rounded Corners

Rounded corners are easy to make, but they’re not the easiest to transform, even in Photoshop. However, there are two ways to create and scale rounded corners gracefully.

If you’re interested in making a rounded rectangle, you can use the Rounded Rectangle Tool. Select the tool and start dragging on the canvas to make a shape. You can also click anywhere on the canvas to open a dialog box, which allows you to specify the size of your shape and how round you want the corners to be.

Scaling these are a little tricky, however. You’ll notice that transforming the shape using either the Selection Tool (black arrow) or the Free Transform tool will skew the corners, making them look disfigured and ugly.

Nobody likes ugly rounded corners.

To work around this, use the Direct Selection Tool (white arrow) instead. Select all the points of the shape on one side (left/right to make the shape wider, or top/bottom to make the shape longer). Those points should be black instead of white when they are selected.

Holding down shift, drag these points to the desired width. Your shape will transform, but the corners will stay exactly the same.

Alternatively, you could draw a regular rectangle (or any other shape) and use the Round Corner Effect. With your object selected, go to Effects > Stylize > Round Corners to open the dialog box. 

The rounded corner dialog box applies a scalable rounded corner effects.

With the rounded corner effect, you can scale the object using any transform tool (Selection, Direct Selection, Free Transform) without skewing the corners.

You can also change the corner radius any time by double-clicking “Round Corners” in the Appearance Panel (this brings up the same Round Corners dialog box). You can also delete the Round Corners effect from here (drag it to the trash can icon), or apply other effects using the “fx” icon on the bottom of the panel.

Note: If you don’t see the Appearance Panel, make sure there’s a check mark next to it under Windows in the menu.

5. Blend

Jan and I sat through an informal Illustrator tutorial from Andrea, and one of the things that wowed us was Blend. Blend creates steps between selected objects, sort of like a gradient. However, the tool takes into account the shape and stroke size of the selected objects instead of just color.

To open the dialog, go to Object > Blend > Blend Options from the menu. Or double click the blend tool in the toolbox.

There are three spacing options:

Smooth Color: This creates a smooth color gradient between two objects. If the two objects are the same color, it creates just one step in between the two shapes.

Specified Distance: This creates paths between the two objects that are the specified distance apart from each other.

Specified Steps: This makes the specified number of steps between the two objects.

These can be hard to visualize without actual graphics, so here are some examples of how blend works with circles:

Blending with objects of the same color.

Blending both colors and shapes.

Blend can do a lot of other cool effects, and it’s incredibly useful.

With Andrea’s (and everybody else’s) help, I’ve learned a lot about Illustrator, from how to properly align things to working with artboards.

After getting used to Illustrator, I’ve realized that it’s so much faster and more efficient than Photoshop. I’m not completely sold on Macs, but Illustrator has definitely won me over.

More resources:

Blend Tool: A Comprehensive Guide
Creating Shapes with Shape Builder Tool


A Day in the Life of a Barrel Intern

By on July 25th, 2012

I’m not sure if it’s just me, but I love reading about what other people do on a daily basis (like those articles where a person walks you through what they’re doing at specific times of the day). Now that I’m interning at Barrel, I thought I would give you a little insight on what a day in the life of a Barrel intern is like.

A Barrel Monday

My alarm rings and I get out of bed right away. I feel like hitting snooze just prolongs the torture.

I’m out of the door by 9:45am, plugging into my iPod for the 15 minute walk to the office.

Once I get to Barrel, I always have an internal debate over whether I should walk the 6 flights of stairs up to the office or use the elevator. The elevator usually wins that battle.

Everybody’s introducing themselves to the new guy. Welcome to the team, Nelson (and Brandon, who stopped by at the office a little later)!

Looking fly, Nelson.

The first thing I do once I’m on my computer is check my email and calendar. Before I start any work, I need to get up to date on upcoming tasks, meetings, and pictures of unlikely friendships from Aretha’s internal weekly recap emails.

Aretha loves sending us pictures of unlikely friendships.

After I get everything in order, I fire up illustrator and start working on new Sanctuary T homepage, newsletter and blog post banners. Summer is here, and they need new promotions to keep their sales going.

Jan sent the team a cool find: Interactive Chrome Experiment. I spent a little bit of time playing around with it and wondering how doing something like with HTML5 and CSS3 is humanly possible.

I’m starting a draft of this blog post! I try to put at least one post up every week.

Mondays mean team design meetings! Peter checks in on what everybody will be working on for the week. We also have a presentation or activity every week — presenting inspiration, sketch sessions, and planning internal projects.

Today, we looked at inspiration for the Barrel website redesign. Team members were asked to bring 3-5 inspiration websites to generate ideas. I’m doing inspiration for about pages, along with Lee and Andrea. Here are the sites I presented:
I love nGen Works’ illustrations and fun taglines. Their “on the nightstand” tidbits in the full bios are a great way to reveal the personalities of their team members.
The way Arc90′s team photos change on hover is a nice surprise.
Glue Isobar breaks out of a strict grid with some bigger thumbnails on their team page.
Campaign Monitor’s video tour of their office is amazing. It makes their team look very relatable and friendly, which is important for any service-based business.
We Are Paper Tiger’s about page is very simple, but I like how they list things they like to show a little personality.

Lunch time! I forgot to take a picture of my food before I ate it, but we had BBQ chicken, a huge fruit platter, mashed potatoes, cornbread, mac & cheese (I’ve been craving this!), yellow rice, and herb potatoes.

I’m updating Chamber Music Society‘s click through presentation with Lee, fixing some technical color issues with Sanctuary T banners, and tweaking CSS styles on Keg.

Diane and Taylor scoots over to my desk to talk about Brink Magazine‘s individual art page redesign. We’re trying to decide if we should put thumbnails on the page or if it would distract users from the artwork.

None of the website redesign is up yet, but here’s a sneak peak of what Brink will look like:

A beautifully clean new Brink.

After revising Brink designs, we had a quick meeting with Boram in the “baby conf” to plan Barrel’s barbecue on Friday.

We call our smaller conference room the "baby conf."

Aretha checks in with me on Connecticut Policy Institute edits, and I get to work on them to prepare for a one-on-one review in an hour.

I’m doing some last edits on this blog post, washing the dishes I used for the day, and wrapping up my work.

I pack up my stuff and head to the gym! Most days I’ll stay a bit later, but I’ll leave at 6 if I’m going to work out.


Five Useful Bookmarklets and Plugins

By on July 18th, 2012

I’m always looking for inspiration, checking my development work, and taking screenshots for projects I’m working on in Chrome/Safari. To streamline my workflow and learn more about my craft, I use a certain set on bookmarklets, plugins and add-ons. Here are five very useful plugins for web designers and developers:

1. Firebug

Firebug is a plugin that lets developers inspect the DOM and associated styles.

Most developers probably already know about Firebug. This incredibly useful plugin lets developers inspect HTML elements and their corresponding CSS styles to debug code, or to find out how other websites have achieved a certain effect. Firebug also allows users to modify both the HTML and CSS in real time to see how changes will affect the web page.

Firebug CSS metrics at work.

Aside from that, hovering over an element in Firebug shows CSS metrics: the padding, margins, width and height of elements come up as colored blocks. This is a great way to find out why there’s weird spacing or why elements aren’t lining up correctly when coding out a webpage.

Firebug also includes other features aside from viewing and editing code:

This extension is mostly for Firefox users; Chrome already has a built in debugging function.

2. ColorZilla

ColorZilla lets you pick colors from any webpage.

An obsession with colors come with the territory of being a designer. ColorZilla allows designers to pick out colors directly from the webpage and copy the hexadecimal color code to use in their own projects or to make a color palette. This plugin is also helpful for developers who need to copy color codes from one part of a website, in order to use it on another element.

ColorZilla is more robust in Firefox than in Chrome, however. In Firefox, the color picker is easier and quicker to use – there are less clicks required in order to pick a color.

Firefox's ColorZilla add-on has a lot more packaged in than Chrome's plugin.

In Chrome, users would have to open the ColorZilla widget, click “Pick color from webpage,” choose a color, open the widget up again, choose the last color picked, and finally copy the code. In FireFox,users just click the ColorZilla icon, pick a color, and the color code is automatically copied to the clipboard. Firefox’s ColorZilla add-on also gives us access to RGB values, X/Y coordinates, position in the DOM, CMYK values, gradient generators, and copy/paste CSS codes.

3. MeasureIt!

Get the height and width using MeasureIt!

MeasureIt is a ruler extension used to measure elements in your browser; it’s available for Chrome, Firefox and Safari. Meant for web designers and developers, this tool measures areas of a page by its width and height in pixels.

Measure also serves as a straightedge to see whether elements of a page line up exactly. You won’t need to hold a book up to the screen anymore, Taylor!

4. Aviary Screen Capture

Capture a screenshot of an entire page.

Aviary is awesome. They’ve created a whole set of great tools for creatives, from music editors to vector editors to image markup, including a screenshot plugin. Their screen capture plugin is a complete lifesaver for anybody who needs to take screenshots of webpages.

What makes Aviary different from just taking a screen capture using your system’s native screenshot tools is that Aviary allows you to take an image of a whole webpage. Instead of just capturing everything above the fold, Aviary captures the page from header to footer. Of course, there’s also an option to capture just a portion of a screen, which is useful for PC users (since that feature is available for Macs already).

After taking the screenshot, Aviary allows users to annotate and make edits to the image before they save it. Users can crop the screenshots, include text, and add shapes, lines and arrows. There’s a more advanced editor/image effects, but simply saving the image and bringing it into Adobe CS programs might be more beneficial.

5. StumbleUpon

StumbleUpon Toolbar

StumbleUpon is a browser extension that brings its users to new and interesting websites, depending on their interests. While StumbleUpon is known more as a procrastination tool than something useful (rage comics all day!), the StumbleUpon add-on allows users to stumble on pages in a certain interest only.

By turning off all other interests and only focusing on web design (or graphic design/web development/internet tools), users can discover lots of great articles, tools, and inspirational websites. StumbleUpon is actually how I found out about all the other browser extensions in this blog post!

These are the browser extensions I use on a daily basis. If I missed a good one, let me know in the comments!


Keg Interviews: Team Barrel

By on July 9th, 2012

Today, I’m presenting a group interview of Barrel team members. The ten participating will answer questions on their career path, reveal a bit about themselves and Barrel, and give advice to upcoming web designers, developers and project managers.

So who’s in this?

Kevin Kneifel – Developer
Marianne Do – Developer
Patrick Kunka – Developer (Website)
Wesley Turner-Harris – Developer
Angel Ng – Designer (Twitter)
Jan Cantor – Designer (Dribbble · Twitter)
Jane Song – Designer (Twitter)
Matthew Ortega – Designer (Portfolio · Twitter)
Yvonne Weng – Designer (Portfolio · Twitter)
Betty Chan – Project Manager

Let’s get started!

How did you get into your field? What was your path to get to where you are now?

Kevin Kneifel - Developer

Kevin Kneifel (Developer)
I started building websites in college for the various bands I was in, and to help promote shows for the school radio station. I was a Communications / Journalism major but took internships in music industry–one of which involved a lot of graphic art and web design.

When I graduated, I went into music industry as a booking agent’s assistant, but didn’t like the kind of environment that comes with that job, so I quit after a couple months.

In order to make money, I began to focus more on graphic art and web development, using some of the skills I had from my college days. Eventually I learned PHP and JavaScript, to bolster my existing knowledge of HTML and CSS, and joined forces with an illustrator I was friends with from Pittsburgh to start a small boutique web design and development studio.

I spent the next three years doing web and print, including a stint in TV graphics at MTV. I joined Barrel in October 2010 as a contract web-developer and have been full-time since January 2011.

Angel Ng (Designer)
I was never artsy growing up, nor do I really consider myself artsy now. I went to business school with the intent of graduating with a Finance / Accounting major, but I came out with a Marketing / Communications major instead.

After my Bachelors, I decided to go back to school to study Graphic Design. That was my first formal training in anything design / art related. I suppose it’s been a slow but steady move from business to marketing to design. What’s funny is that, in the end, they all work pretty well together.

Betty Chan (Project Manager)
It’s kind of tricky to say. I’ve deviated quite a bit from where I was headed, but at the end of the day, the pull of design kept me coming back. I gave project management a try when Peter asked me to join Barrel and have been glad I’m here since!

Wesley Turner-Harris - Developer

Wesley Turner-Harris (Developer)
In middle school, we used very old computers called IBM PS/2. They only had DOS installed and we used them daily. Since those days, I’ve always tinkered with computers. I assembled my first computer in ’98. I built my first website my freshman year of college for the University of Louisville’s Theater Arts Department where I was studying theater with the hopes of becoming an actor.

Upon pausing my schooling about half-way through, I moved to NYC to pursue performing arts. After a few years on tours and a couple of off-off-broadway shows later, I found myself looking for something more substantial. Throughout those few years of acting, I supported myself with freelance graphic design work such as postcards, business cards, websites, posters, etc. I decided to go back to school to study graphic design at the City College of NY.

While at college, a senior self-directed project led me to develop a custom PHP software solution for lending equipment from our IT lending library. It was then that I realized how much I love problem-solving and writing code. After completing my bachelors degree in electronic design, I began working as a real estate agent to pay back costs of schooling and debt.

I realized I hated that industry and continued to freelance developing websites and other graphic design services, which ultimately led me to finding work with Barrel.

Jan Cantor (Designer)
When I was in high school, I took extra classes like animation and photoshop. That got me hooked-up. At the same time, I was fascinated with Myspace’s and Friendster’s “cool” feature to customize your own profile. Then I slowly dabbled with HTML/CSS even further when I tried to create my own website on using cool gifs and uber bright font colors.

What’s the biggest challenge you’ve faced in your career so far?

Matthew Ortega - Designer

Matthew Ortega (Designer)
I definitely feel that the biggest challenge so far has been to enter into the field in general, especially during these times. Also, to keep up with changing technology.

Kevin Kneifel (Developer)
Building my portfolio. Also making a mark in a sea of other qualified web developers.

Wesley Turner-Harris (Developer)
The most challenging is yet to come.

Patrick Kunka (Developer)
Probably trying to balance my time between being a professional musician and a web developer. So far having a full-time job has actually been very liberating, as I feel more free to pick and choose the projects I want to do in the music world, and I no longer have to do all the stressful freelance web work!

Yvonne Weng (Designer)
A lot of it was just plain figuring out what I want to do. I couldn’t figure out if I wanted to go more into print, web, motion…who knows? (I am happy that I wound up in web though.)

Marianne Do (Developer)
My biggest career challenge is trying to play catch-up with the other developers (I’ve got so, so much to learn). That, and not getting overly frustrated by client requests.

What advice would you give to somebody who’s starting out in your field?

Betty Chan (Project Manager)
Go grab coffee with whoever you can as often as you can and join social sites like Skillshare and Meetup. It’s intimidating like hell at first but it’s the best way to get past all the BS and get some real insight into what different positions do.

Matthew Ortega (Designer)
For web design, don’t try to learn everything. Of course it’s always good to know a bit of both design and development worlds. But web design, at least in this moment, definitely requires a team.

Wesley Turner-Harris (Developer)
Do what you love until you don’t love it anymore.

Kevin Kneifel (Developer)
Be articulate. Your personality is as important as your work—but do great work too.

Jane Song (Designer)
Look at a lot of stuff and make a lot of stuff (even if it’s crappy).

Jan Cantor - Designer

Jan Cantor (Designer)
There are two quotes that inspired when I was starting out (they still inspire me).

“It does not matter how slow you go, so long as you do not stop.”

“It’s normal to take while, you’ve just gotta fight your way through.”
-Ira Glass

They basically mean the same thing: Never give up no matter how long and hard it takes.

Yvonne Weng (Designer)
Stay positive. Keep doing what you love, whether or not it directly relates to your day job. A good attitude and personality is just as important as good skills. There is so much in this world that you don’t know, and it’s okay.

What’s one thing you wish you had known early in your career? 

Patrick Kunka (Developer)
I try not to think about that sort of thing! I’m pretty happy with the path I’ve taken and I don’t regret any of the choices I’ve made.

Kevin Kneifel (Developer)
That Illustrator is infinitely faster and better for designing websites than Photoshop.

Marianne Do - Developer

Marianne Do (Developer)
overflow: hidden;

What are some of the best ways to learn or get better in your field? What are some good resources?

Marianne Do (Developer)
Good resources are other people’s brains.

Angel Ng (Designer)
Google it.

In all seriousness. It’s something that one of my mentors used to say to me all the time and it’s the fastest way to learn something or find an answer. And of course, if you can’t figure it out on your own, then ask someone for help.

Wesley Turner-Harris (Developer)
Practice makes perfect. There are many tech blogs and tutorial sites out there. Whether you’re freelancing or studying, it’s always good to stay on top of the latest technologies and methodologies / practices.

Patrick Kunka - Developer

Patrick Kunka (Developer)
Googling things and “repurposing” other people’s code! Also, always check out the various web design awards sites to see what people are doing, and where the benchmark is.

Jan Cantor (Designer)

Browse through some magazines.

Kevin Kneifel (Developer)
Read. Read read read. When you’re done with that, read some more. Then take a break, drink some orange juice, and when you’ve got your head clear, get back to reading.

I always like to keep my eye on A List Apart, and Wikipedia can be a great resource for getting a general understanding about many topics. When I was first really investing myself into coding, Tizag was a HUGE resource in explaining things in real word terms.

Jane Song (Designer)
The obvious ones are sites like Dribbble or The Best Designs. Lately, though, I love reading interviews on The Great Discontent. I definitely get inspired by reading about people making awesome things, and it sort of lights a fire under my ass to keep moving and keep creating.

Matt Ortega (Designer)
The web is the best resource for learning. Taking classes in the very beginning may help, but in the end it is all about educating yourself. Read articles, watch videos, do tutorials. Smashing Magazine, PSD Tuts, Vector Tuts, and are some great resources.

How would somebody know they’re in the right field or if they should pursue something else?

Jan Cantor (Designer)
You must love whatever you’re doing whether you’re a designer, a developer, a project manager, etc. If you don’t love it, then you’re doing it for the wrong reason.

For me, the reason I’m a designer is because I enjoy the pleasure of making websites. And seeing other people like my work makes me a happy camper. I can’t picture myself doing something else.

Jane Song - Designer

Jane Song (Designer)
I’ve heard that if you wake up every morning eager to get out of bed and go to work, then you’re in the right field. I don’t think that’s the best gauge, though, because I hate getting up in the morning no matter what. I don’t know. If you get the feeling like you’re in the wrong field, then maybe you are. But that’s not like the be-all and end-all in life. If there is anything at all you are working on that you’re excited about – inside or outside of the office – you’re probably doing something right.

Yvonne Weng (Designer)
Does what you’re working on excite you? Challenge you in a positive way? Can you see yourself doing this for 5 years? 10 years? The rest of your life?

Matthew Ortega (Designer)
If you find it a struggle to keep up and are generally unenthusiastic about your work, then it is probably a mismatch.

Kevin Kneifel (Developer)
I’ve gone through this very issue, and I still waffle from time to time. If you find something you’re particularly adept at, I suggest giving it some time—don’t quit if it gets hard. However, be true to yourself and what makes you feel like you’re becoming the best person you can be.

For example, I worked at MTV doing graphics for a live television show and the pace and turn-around was so intense that I became a very angry and irritable person. I once threw some post-its at an intern, and that was a pretty good sign to get OUT of live TV.

What was your first week like?

Wesley Turner-Harris 
It was hot; I sat in a high, uncomfortable stool, but I had great food, smiling faces, and challenging work.

Betty Chan - Project Manager

Betty Chan
It was engrossing. I remember feeling like I had to pick up on things very quickly and not let the feeling of not knowing stop me from doing what I had to. It helped a lot that I had Aretha guiding me the whole week.

Jane Song
I started out as an intern over two years ago. We were all crammed into this one-room office where we never saw the light of day. I worked on a few spot illustrations and simple layouts, which would have been fun had I not been so caught up with trying to appear skillful and knowledgeable. Luckily, everyone saw right through that act and went out of their way to help me out.

Matthew Ortega
It was great getting to know everyone in the office. We got off to a fast start on a tight deadline branding and web project. But it was a lot of fun.

Marianne Do
On my first day of work (at the office on 27th), I learned that we had to wash our dishes in the bathroom sink. I was like, “Okay…” and Andrea replied, “Welcome to Barrel!”

It was Kevin’s birthday on my second day of work. We had a delicious cake—I want to say it was lemon.

My first week was good.

What do you like the most about working at Barrel?

Patrick Kunka
The people, and free food and my amazing chair. Seriously, this is the best chair I’ve ever sat on.

Wesley Turner-Harris
I like the community, family-esque aspects, and fostering of talent at Barrel.

Marianne Do
Ping-pong, friends, beer, wine, snacks.

Betty Chan
The people. Seriously. I’d wake up for these guys.

Yvonne Weng
The people, the atmosphere, the friendly culture. The supply of free food is awesome too.

How is working at Barrel different from what you were used to before?

Kevin Kneifel
I’ve never had bosses that cared this much about the personal welfare of their employees. I feel like I can be completely candid about how I feel and what’s going on with me, and that’s great. I care a lot about transparency.

Betty Chan
Everyone’s very collaborative. It’s pretty common to see designers and developers keep to themselves but that’s rarely the case here. I’m sure our lunch ritual and small numbers help keep things intimate.

Yvonne Weng - Designer

Yvonne Weng
The open area, how everyone’s desks are all right up next to each other in one big room. Everywhere else I’ve been at, people were all very separated in cubicles, offices, etc.

Marianne Do
I’ve never gotten along with so many people so well.

Jan Cantor
The first company I worked with was kinda similar to Barrel, only smaller. The second one is a lot smaller, more like a startup company with 5 people (including myself).

I think Barrel is the place I want to be at. More people. The atmosphere is much more inviting. Team Barrel is much more fun and chill.

What is one thing nobody at Barrel knows about you?

Matthew Ortega
My favorite actor was Arnold Schwarzenegger.

Wesley Turner-Harris
I’ve developed a metaphysical theory with a working title of “We’re all just people.”

Betty Chan
Haha, um, that’s hard. Somebody always knows something. I have a nickname all my friends call me that only a few know at the office.

Would you give up Internet access to have the ability to fly?

Marianne Do
Yes. Without a doubt.

Matthew Ortega
It depends how fast. But most likely yes.

Jan Cantor
Fly? No I won’t. Maybe teleportation or time traveling. Flying is too slow.

Betty Chan
No brainer. Yes. Actually, I’d give it up even faster for teleportation.

Yvonne Weng
Never. I’m afraid of heights anyway.

Angel Ng - Designer

Angel Ng
No way! Only because I believe that, eventually, we will be able to fly.

What’s one thing that really creeps you out?

Betty Chan
I have a seasonal pet peeve: dried sweat on MTA train seats. Just knowing it’s there when I sit down…ewwwww!

Jane Song
When children sing in darkened rooms.

Kevin Kneifel
The sound Styrofoam makes when it scrapes against other Styrofoam. I hate that.

Yvonne Weng

Angel Ng
Porcelain dolls. Or dolls that look human and when you tilt them they blink. When you think about it, you’ve got to agree with me that they’re super creepy!

Wesley Turner-Harris
Insects, although interesting creatures and very fascinating when not on you, always give me the willies, especially when I think of their many parts that undulate and crawl and prick and sting and bite and lay eggs.

No Comments

Office Ergonomics for a Healthy Barrel

By on July 5th, 2012

Working at Barrel usually means sitting in the same position for many hours straight. While we get up occasionally for restroom breaks, lunch time, or walking to and from the conference room, most of our day is spent on our butts.

It sounds like it’s not a big deal, but poor ergonomic practices can lead to injuries: carpel tunnel syndrome, neck strain, lower back pain, leg pain and death.

Okay, maybe not death, but I wanted that dramatic punch.

What is “Ergonomics”?

Ergonomics is the study of the kind of work you do and the environment you work in. It strives to make the workplace as comfortable as possible, minimizing stress on the body and preventing work-related injuries.

Ergonomics applies to both those workplaces where daily activities include manual labor, and workplaces where people sit at a desk all day. Since Barrel falls into the second category, this post will only focus on that kind of workplace.

To study the ergonomics of your workplace, look at things like:

  1. How you sit
  2. Your workstation setup
  3. How long you stay in one position
  4. The light, air flow, and temperature of your work area

Now that you have a basic understanding of what office ergonomics is, let’s look at how you can put it into practice.

Set Up Your Workstation

Credits to CAP Workplace Ergonomics Reference Guide

Ideally, your workstation should look like this. I’ll break it down by different parts of a typical office workstation.


You should have a viewing angle of 35-40 degrees.

When you’re sitting straight, your eyes should be aligned to the top of your monitor without having to bend your neck. You should be 16-24″ away from the monitor (roughly arms length), with a viewing angle of 35-40° from the top of the monitor to the bottom.

Make sure your monitor is directly in front of you, so you don’t have to twist your neck to look at the screen. Staying in an awkward position like this for six hours can cause major neck strains.


  1. Tilt the top of the monitor back 10-20°
  2. The monitor should be at right angles with windows and positioned away from direct lighting to reduce glare
  3. Consider using a glare filter

Throughout the day, many of us end up scooting to the front of our chairs and slouching over to look at the screen. Instead, sit with your back against the chair and shoulders touching the backrest to support your lower back, shoulders, and neck. If your chair doesn’t fit your body shape, use a rolled towel or lumbar pad for support.

Your legs should be bent 90 degrees, with your thighs parallel with the floor. Your feet flat on the floor or on foot rests (Zack uses business card boxes as his foot rests!).


  1. There should be 2-3 inches between the back of your knees and the edge of your seat
  2. Adjust the height and width of armrests so you can drop/relax your shoulders while typing
  3. Your knees should be at about the same level as your hips
Keyboard and Mouse

The best placement of the keyboard and mouse is 1-2 inches above your legs. This usually requires a keyboard tray. Forearms should be parallel to the floor to allow the shoulders to relax.

To avoid stress on wrists, they should be in a neutral, straight position (not flexed or twisted). Remember not to rest your wrists on the table while you type or use the mouse; keep them in the air or use a wrist rest.

When you’re not using the mouse, don’t rest your hands on it. Instead, rest your hands on your lap.


It’s kind of common sense, but your office should be set up with comfortable temperature and lighting, good air quality, and proper air circulation. Cover your windows to reduce glare and minimize eye strain.

Take Breaks

Zack shooting the mini basketball into the mini hoop.

Most office-related injuries happen from staying in the same position for too long. Our body is able to handle 20 minutes of the same position at a time; staying in one position for any longer than that causes discomfort and builds up stress.

To prevent eye strain, blink constantly and try to expose your eyes to natural light. Every 20 minutes, refocus your eyes away from the computer screen to a window or an object at least 25 feet away.

Also, give your body a break by taking walks around the block or standing up every 20-45 minutes. Adjust your posture from time to time, play ping pong/mini basketball and do some stretching exercises! Here are some stretches you can do during the workday:

Shoulder Shrug
  1. Bring your shoulders up to your ears for 3 seconds
  2. Slowly rotate it back and down
  3. Repeat 20 times
Foot Rotation
  1. Slowly rotate each foot in circles while sitting 3 times in one direction
  2. Repeat 3 times in the opposite direction
Diagonal Neck Stretch

Photo from ORS

  1. Look down at a slight angle for 15 seconds as if looking at your pocket
  2. Repeat 3 times on each side
Eye Palming

Give your eyes a break

  1. Rest elbows at the edge of your desk
  2. Cup your hands gently over your closed eyes, letting your weight fall into your hands
  3. Inhale slowly through nose and hold for 4 seconds
  4. Continue deep breathing for 1 minute

Final Tips

The best way to prevent negative consequences from sitting all day long is to simply alternate positions. Exercise both in and out of the workplace. Try to change up your tasks; if you’ve been designing for a while, take a client call or get up to water the office plants. And don’t slouch!


Here are some great resources for learning about office ergonomics:

CAP Workplace Ergonomics Reference Guide
Office of Research Services
Spine Health
WebMD Office Ergonomics

No Comments
back to top