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.

Monitor

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.

Tips:

  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
Chair

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!).

Tips:

  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.

Environment

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!

Resources

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

The Evolution of Keg’s Design

By on July 2nd, 2012

Keg’s first branding concept was a quick decision for me: it should be similar to Barrel’s, but lighter and more playful (like a little sister blog). I would keep the feel clean and minimal. Instead of black, I would use white and pale grays, with a touch of one bright accent color to instill a little playfulness into Keg. The logo would obviously be the same typeface that Barrel uses for their logo: Berthold Akzidenz Grotesk.

What came out of that idea was my first draft:

A very simple Keg layout.

Clean? Check.

Berthold Akzidenz Grotesk logo? Check.

Playful accent color? Check.

But there’s something missing. It fits neatly into my initial concept, but it felt “plain” to me. I know design isn’t about bangs and whistles, but I wasn’t completely happy with the mockup I had on my screen.

So naturally, I decided to go the other completely logical way and try out new designs with a huge, all-up-in-your-face graphic.

At this point, I was stuck. The graphics took up so much space on the screen and I wasn’t really sure where to go next.

Thankfully, Jane gave me some very useful advice: focus on blocking out the structure before stylizing. In twenty minutes, I had an early draft of the design we have now.

This version takes the elements I liked best from all of the earlier concepts, combined into an awesome design.

It has all the elements of my original idea, but has just enough color and details to give Keg its own voice. The small touches of animation with the logo and search makes the design less static. The narrow width allows for an optimal line length (around 62 characters per line) and body text size (16pt), which results in a very comfortable reading experience.

I had a lot of fun designing Keg. I’m happy with how it turned out, and I hope you like it too!

What’s in a name? Or a logo?

By on June 29th, 2012

On our first day in, Peter gave me a book to read called Designing Brand Identity, by Alina Wheeler, and I found the section on brand history fascinating.

Brands are much more than just their logos and names, though nowadays we tend to conflate them in our minds. Logos, especially, are imbued with meanings way beyond their graphic symbolism.

Consider the Nike brand logo. From that one swoosh, we see the entire company.  Our minds immediately think ‘Nike’, recalling ‘Just Do It’, and imagining Michael Jordan taking flight on the basketball court. We perceive the swoosh as indelibly linked to sports, a can-do attitude, running shoes, energy, health, and more. But when it was created, the company wasn’t even called Nike. Nike was simply the name of a line of shoes they were creating.

Blue Ribbon Sports took the name Nike from the Greek goddess of victory. The fact that I never actively made this connection baffles me. Me, someone who studied Greek history and art, who knows for certain that the Nike of Samothrace, one of the iconic sculptures of Greek classical art, is from the 2nd century BCE. The thought must have been at least in the back of my mind. Like, duh. Nike, or victory, applies easily to sports games, competitions, and also the “Just do it” slogan (which didn’t appear until 1988 thanks to Dan Wieden of Wieden+Kennedy). This shows how much precedence the brand Nike has over the term ‘Nike’ in my brain. Isn’t it amazing that brands can operate on that level in your mind? ‘Google’ has entered our vernacular; we also ‘tweet’ and ‘facebook’. Wieden’s claim that brands are verbs has held true..

In 1972, BRS only payed about 30-some bucks for the iconic visual. The swoosh is an abstraction of the goddess’ wings, in essence, a visual derivation of Nike. But over the years, Nike has consolidated their branding to place this visual everywhere. You can’t help thinking about what Nike embodies when you see it. Its history of Greek classicism has become entirely unimportant; Nike refuses to rely on that connection to make their stamp on the world.

Similarly Apple lore tells us that one of the reasons why computers were named Macintosh, might have been for Jobs’ favorite apples: McIntosh, making it a completely random, un-related choice. Google may even have been the result of a fortunate type of the unit ‘googolplex’. But now these brands are household names with specific public perceptions. Google is a synonym for clean search and whimsy on the net. Apple is known for their sleek and well-designed products.

I don’t think these stories dispel myths and beliefs that a name is centrally important in developing a business. Although a clever brand name or a logo can help you, many of the things that make a brand lie outside of it, actually. Still, it could be the case that these examples: Nike, Apple and Google are the exceptions. But more often than not, I find that it is a funny, throwaway, not fully strategized name that becomes the household name. I heard Gilt Groupe founder, Alexandra Wilkis Wilkinson, speak once, and as it turns out, “Gilt Groupe” was also partial happy coincidence.

Some other sources: The Atlantic, Adweek, Stanford, Hubpages 1 and 2.

No Comments

Inspiration Perspiration

By on June 27th, 2012

Being creative can be hard work.

So what do you do when you feel like your ideas are drying up? At Barrel, we have a handy set of websites that we use to stay inspired and visually stimulated. We are always on the lookout for great websites and designs we can learn a thing or two from. Here are some of the sites we use:

dribbble.com

siteinspire.com

patterntap.com

mediaqueri.es

thebestdesigns.com

smashingmagazine.com

When your ideas run out, it’s good to take a break, refresh and then come back to your project with fresh eyes. We have ping pong and snacks for that! Everyone in the office is more than happy to take a quick look and offer feedback – new perspectives can lead to interesting and unique solutions. We are full advocates of collaboration, which is why we use sites like dropmark to gather inspiration and ideas. Personally, I love to carry a notebook in which I can use good ol’ fashioned pen and paper to jot things down. I find that having brainstorm or sketch sessions is also a great way to bounce and form new ideas.

Besides these tactics, we encourage everyone to read, read, and read. In-house books that are recommended include: Design is a Job, How to Write a Sentence, The Lean Startup, Getting Real,and more. You never know when you’ll get an epiphany.

But really, the best thing to do is stay positive. Being creative means being open. No idea is a bad idea – it’s all part of the process!

To finish, here’s a nice Vimeo video on 29 helpful, creative habits.

No Comments

Parallax Design Best Practices

By on June 26th, 2012

Parallax websites are the new cool kids on the web design block. Everybody wants to create one, but few really know what makes a parallax website good.

Parallax websites use a special scrolling technique where the background image moves slower than the foreground image, creating an illusion of depth. Originally used in the multiplane camera technique of traditional animation since the 1940′s, it makes a website feel more interactive and dynamic.

When used correctly, parallax scrolling can be absolutely stunning. However, many people are using the technique blinding; the results, no matter how eye-catching, consequently lack meaning and the foundations of good design.

If you’re thinking about jumping into the parallax trend, make sure you keep these best practices in mind:

1. Have a Reason to Go Parallax

Don’t build a parallax scrolling website just to make it look “cool.” You should have a point to using the technique other than pretty graphics and animations. Know why you’re using parallax scrolling; not all websites will work well with this technique.

Here are some websites with awesome concepts to go with their awesome parallax websites:

Krystalrae

Krystalrae is a Filipino-American Fashion Designer based in New York City. She uses parallax scrolling to showcase her designs in an innovative way. Her model changes outfits as you scroll down, making it easy to go back and forth between your favorites.

The photoshoot must have been intense for this concept.

Eephus League Magazine

The first issue of Eephus League’s Magazine is incredibly well-crafted, not to mention “mind-blowingly” beautiful (I’m pretty sure that’s not an actual word). As you scroll through the website, you feel like you’re flipping through pages of an actual magazine. There’s a refreshing balance between clean, minimal pages and stunning editorial-looking photos and illustrations.

Eephus League Magazine features beautiful typography and full-page photos.

2. Good Storytelling

A parallax website is most effective when it brings the user on an adventure. The nature of parallax scrolling makes a website feel like a video game or movie, so it makes sense to craft a captivating story. Plus, this gives the website the underlying purpose it needs.

Bomb Girls

Bomb Girls is a Canadian television show about five working women in a Canadian munitions factory, building bombs during WWII. Their website brings you on an adventure through the factory, rooming house, and parlour, where you can discover videos, news articles, and behind the scenes contents about life in the 1940′s.

Explore the worlds of each Bomb Girl, set in the 1940's.

Ben the Body Guard

Ben the Body Guard is an app that protects your passwords, photos, contacts and other information on your iPhone or iPod Touch you’d want to keep private. Ben walks you through the “mean streets”, talking to you about security dangers as you watch robbers run across the screen, spot dead man outlines, and get a glimpse at an unsettling torture scene through a ceiling window.

It’s a wonderful way to combine engaging storytelling with meaningful graphics, building trust and a completely memorable brand.

Ben gives you a tour of the most dangerous neighborhood I've ever seen.

Michaelberger Booze

This experience starts off with a full glass of Michaelberger Booze 35% at 12 o’ clock. As time goes on, you drink more and more until things start to get weird and you find yourself in a cozy autumn scene complete with a campfire. When you’re finished with that, you’ll drink Michaelberger 45% and get transported into a breathtaking world in the sky. This is a great example of using good story telling to attach ideas and emotions to products.

I'm looking forward to my campfire after drinking some of this.

3. Clear Navigation Between States

Parallax websites are definitely not conventional, and the lack of familiarity with the user interface can be daunting. Giving users an easy way to jump from one part of the page to another may help alleviate that. It’s best if the navigation is fixed and always visible, even as everything else on the website is moving in all directions.

Whiteboard

When you scroll past a certain point on Whiteboard’s website, a navigation bar appears at the top of the page. Instead of scrolling up and down the whole page trying to find what you’re looking for, you can quickly jump to different parts of the website. This is a good way to combine traditional magazine with the visual punch of parallax scrolling.

Whiteboard is a creative agency with a well-done portfolio.

Unfold

Digital agencies obviously know their stuff about good user interfaces! Unfold’s parallax website features a whole lot of moving abstract shapes that can get somewhat chaotic. Coupled with a looping scroll (when you get to the bottom of the page, the website starts back at the top seamlessly), it’s easy to get lost in this splash page. Luckily, they keep their navigation fixed at the top right corner of the screen.

Also, you should really check out their interactive map.

And this is just a placeholder while they get their REAL website up.

4. Don’t Forget About Communication

Good design focuses on communicating a certain message or idea. Sometimes, designers may get so caught up in creating a vivid parallax experience that the content starts to play a secondary role. Remember that users are on the website to achieve their goals; let the content speak louder than the aesthetics. The best way to do this is to keep animations simple.

Cantilever

The only parallax effect on this website is the content sliding over static background images. It creates a nice effect while not going overboard with flashy animations.

I love the chalkboard style menu!

Jan Ploch

Jan Ploch’s portfolio starts out with over-the-top animations of a training soda bottle, but the effects take a backseat once we get to the content. I’m able to look through his work and read about his process without getting distracted.

I'm not really sure why his website is half in English and half in German though.

Overall, it’s easy to lose sight of the main goal when designing parallax websites. It’s a new toy for designers (and developers), so we tend to get carried away with shoveling on as many effects and graphics as the website can hold. It’s worthwhile to take a step back and ask yourself whether you really need parallax scrolling for a particular project. Keep things simple and easy to navigate.

Don’t make it pretty – make it a good design.

 

4 Comments
back to top