POSTS IN June 2012

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.

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

Cosiety: A Review

By on June 26th, 2012

Barrel’s no stranger to start-ups and web-apps. This morning we got to hear a pitch from Cosiety, a new website designed to help cut down the cost of buying textbooks as well as facilitate note sharing. It is being developed by CUNY Baruch students and is currently targeting the CUNY school system. Since we are all students, we thought we’d share some of our opinions.

Their Concept: 

Cosiety gives us a brief on what problems their concept solves.

Students are spending too much money on textbooks every semester; over half their academic expenses outside of tuition is spent on books.

Enter Cosiety. Cosiety promises to be a solution: providing convenient and affordable options for students within each campus to exchange and buy used textbooks from each other.

We think their premise is entirely valid. We’ve all emptied our pockets over textbooks before, spending more money at the campus bookstore rather than searching for cheaper ones online, or among friends. But, each campus often has their own solution for this. Discount bookstores, platforms such as Columbia’s Dormslist and Books on Campus are some of the many alternatives. Cosiety promises to differentiate from these with the addition of notes buying and courseboard forums.

While these are great ideas, they lack accountability. There’s no guarantee that you’re going to get good notes or good answers on the forums without achieving a critical mass of students on the site. For example at Cornell, many classes use Piazza as a discussion platform, where TAs and professors can both validate student answers as well as answer questions themselves. Cosiety founders want to exclude administration because they feel professors would frown upon the sharing of notes. They acknowledge that they’re going to have their fair share of backlash from the academic community most likely with claims of cheating, plagiarism, and possibly even intellectual copyright violations of professors’ lectures because of the intent to sell.

One step in the right direction is Cosiety’s refund policy, for notes that are simply not up to standard. They are also instituting a ratings system, where buyers can rate notes that they have purchased. However, a possible problem that might arise is the buying and subsequent sharing of documents without further purchasing. Furthermore, a ratings system requires a large body of users in order to generate useful information.

Their Business Model:

Cosiety had a few graphs centered around projected sales, but it was hard to follow.

Cosiety’s revenue projection is very optimistic, and capitalizes solely on the notes buying portion of the application. The math was… interesting, and pretty difficult to follow. They estimate 20,000 people — 4% CUNY market share — to be downloading 12 sets of notes each (we may be blatantly making this stuff up from memory). At an average of $1/set, that is $240,000 per semester.  But their total sales prediction amounts to a whopping $600,000. We might have gotten lost in the numbers, but that figure is surprisingly high.

They are also expecting to profit from both ad revenue and partnerships with companies such as Amazon and Apple. This is not likely to happen until they are firmly established, which will probably not be in the near future.

Cosiety didn’t seem to have a strong marketing campaign, relying mostly on word of mouth and hard sells. We think that this strategy will be relatively effective in a student population, because we tend to trust and explore information from peers and users. Word of mouth is a powerful tool amongst our generation, but we question whether the word will spread fast enough or whether they will generate enough early adopters to start a useful community on Cosiety.

Their Design:

But the primary reason that Cosiety stepped into Barrel office this morning was to get UI, UX, and design feedback from us. There were two primary layouts in their presentation: it was pretty unanimous that we liked the second, however it is the first that is being launched. We thought the organization in the second was easier to understand; the first lacked a clear hierarchical structure. There was also a distracting, long, neon green sidebar navigation.

User experience could in Cosiety could be enhanced by social media integration, but currently the site exists outside of Facebook and Twitter. A profile with ratings from past transactions would also help users buy notes and make products more trustworthy. Great experience leads to further use!

To Conclude: 

As students that have been exposed to many similar applications, we have some reservations about Cosiety’s structure and business model. Especially since many of these systems are university-endorsed and not for-profit, we foresee many barriers for Cosiety to become a universally accepted platform. Nevertheless we wish them all the best, and think that campuses without any similar websites will adopt the app readily.

2 Comments

Searching the Keg

By on June 25th, 2012

Building this blog is my first experience with WordPress . To give you background, I have experience with both PHP and other object oriented languages, which helped with understanding the code and the way it works. So, instead of using a template I built our theme “keg” from scratch. While using a template would probably have been much easier, through developing our blog I have gained a much better understanding of the way WordPress works and how useful its vast library of functions are.

Patrick sent me a really helpful link to Chris Spooner’s tutorial, which  is basically a manual that you can more or less copy and tweak to meet your own needs (for example we included a tag filtering subject in our blog). You simply place the WordPress function in a div that you can customize the styling of with CSS. What I didn’t realize until this was how many functions WordPress has and how well documented they are. The WordPress Codex is a life-saver. Pretty much if you want to do something, they have a function for it. You want to list the tags, use list_tags(), you want the template url, use template_url(), etc. Taking our site from the generic 2011 theme to this:

We also included some javascript, allowing the smooth scrolling back-to-the top and the our logo hover to extend down. Most recently, we added a search capabilities to our blog.

While Spooner’s tutorial is amazing, it did leave me with some confusion surrounding search.php, more or less because it is the only thing he did not specifically spell out word for word.  Like everything else WordPress has a function that builds a search form for you (get_search_form()). To customize it is practically as easy as calling it. In your theme folder simply create a php file called searchform.php and build the form with what ever traits you wish your search function to have. For example here’s our code:

Key things to remember are setting the method as “get” and the action as the homepage url. WordPress will automatically look for your search.php page to display the results on. After this get_search_form() calls the form you have created rather than the default form. Katie designed a simple yet classic speech bubble form like this:

for our blog so our php file only consists of a few lines of code.

Also key to our search form was that it remain hidden unless you click the search icon, a magnifying glass, so the top of our page transforms from this:

to

In order to do this jqModal offers a great plug-in. You simply insert into your html the div that contains the element you want to appear and give the div the class jqmWindow:

Then you upload the jqModal code for into your scripts folder and attach it in the header. In your main javascript file you then call $(‘the div you want to appear’).jqm(). You can customize your modal with CSS, giving it an overlay or customizing the form. You can also add triggers to open the modal or to close it by giving them class=”jqmClose” which we cave to both the search icon and the body so that if you click outside the search form it disappears.

It is also important to add CSS styling for the jqmWindow and the overlay (if you’re using it):

Finally, we move onto displaying the results. Both WordPress and Spooner cover this. More or less your search.php should be very similar to your index, calling header.php, footer.php, sidebar.php etc. The main difference is that you want to display the results. To do this you are going to want to use WP_Query. WordPress extensively describes how to first form the query:

This will search throughout your blog and the results will be stored in the variable $search. You can then customize the way the results are printed out varying what you echo in between the while loop:

while ( $search->have_posts() ) : $search->the_post();

endwhile;

We decided that our post should contain links to the titles as well as brief excerpts of the posts:

Then all that’s left is to style away!

No Comments
back to top