Protected: Logo Designs Round 1

This post is password protected. To view it please enter your password below:

Password:

A Case Study in Publicity: The Digital Media Gallery

Amid the vibrant shops and bustling restaurants on the Charlottesville Downtown Mall is a lonely storefront that is empty for most of the year.  However, from from Oct. 29 to Nov. 7,  the space was filled to the brim with art.  Projections covered the walls and even sections of the floor as the lonely room was transformed into a Digital Media Gallery as part of the Virginia Film Festival.

As part of my Academic Community Engagement (ACE)  project with the Bridge PAI and my internship with the Virginia Film Festival, I helped coordinate the gallery to be a meeting of student and professional film.  Jordan Taylor and Sarah Lawson, who run the Bridge’s Film Series, curated a selection of pieces by professional filmmakers that screened alongside the work of local cinematography students.  The result was an astounding display of diverse themes, subjects, and visual effects.

The gallery was introduced last year when a last minute idea was brought to life.  Because of time constraints, there was little in the way of publicity.  This year, we prepared far enough in advance to promote the gallery as a highlight of the Film Festival. The amazing gallery manager Yasminca Wilson oversaw the installation, marketing, and preparations for the opening receptions.  After initial planning, I was in charge of marketing materials and the creation of a gallery program.  In designing these materials, I had several goals:

1. Maintain brand association with the Virginia Film Festival while still highlighting the unique identity of the event.
2. Attract members of the Charlottesville community that may have already become desensitized to the VFF publicity materials.
3. Portray the off-beat and experimental vibe of the artwork being showcased.  The projection pieces selected for the gallery were in no way mainstream, and the last thing I wanted was a poster that looked corporate or conservative.
4. Create an appealing and eye-catching design that still prominently featured the plethora of required content, including an introduction, gallery hours, location, sponsors, curators, and the Film Festival logo.

I decided to use stills from the projections being featured in the gallery as inspiration.  Eventually I decided to incorporate them into the design.  I retained the official festival font of Gotham for text, but left behind the distinct blue/purple color palette of the majority of publicity materials, pulling teal from one of the stills instead.

I adjusted the poster art for various ads in local weekly The HooK as well as an email invitation that was distributed to Festival supporters and sponsors.

An important addition to the gallery this year was a program.  This allowed patrons have a guide through the space, read the artists’ statements, and learn more about the work.  It provided a platform to recognize the sponsors of the gallery.  For example, we were able to thank local business the AV company for providing the equipment and expertise necessary for the installation.

What was especially important to me was the opportunity to share more information about the Bridge in a half-page spread on the back of the program.   The Digital Media Gallery was the result of two community organizations  coming together to work toward their common mission of uniting people with art.  The Virginia Film Festival saw record attendance of over 23,750 people this year, which provided an amazing opportunity for people to learn about the Bridge PAI and the work they are doing in Charlottesville.

The storefront at 1st and Main is back to its old empty self.  During the 5 days it was open, the Digital Media Gallery had over 1200 patrons.   Maybe that’s enough excitement for the year…

Design Marathon: Win-Win Social Impact

Picture this: In just one day, a not-for-profit gets a new logo, fresh publicity materials, or architectural design by a professional for FREE.  It’s probably hard to envision -  free design work is most often provided by budding designers developing skills.  The work usually has a much slower turnaround because the volunteer designer has to juggle other commitments.  So how is this scenario possible?

What if a professional designer pledged to spend one day working closely with a community not-for-profit to accomplish a specific goal?  The designer would be giving back to the community in an efficient and fulfilling way.  He or she would have the opportunity to network with local organizations and community members.  Of course, there’s that extra perk that it feels great to help others.  It’s a win-win. A phenomenal idea.  But most impressively, it happened.

The Charlottesville Community Design Center pictured it and then brought it to life.  On Oct. 1, I participated in the 3rd annual Charlottesville Design Marathon. 10 community not-for-profits were matched with local design teams. I was paired with seasoned graphic designer Jim Gibson of Gibson Designs and we worked to create a poster and directory for VOCAL Virginia, an organization that advocates for mental health patients and ex-patients.

Several client review meetings meant we got lots of real-time feedback on our design. Photo by Andy Franck

Working alongside a seasoned professional was  an amazing way to learn.  Aside from learning some new InDesign tricks, I was able to see how a professional approaches the design process from start to finish.  Jim didn’t rush right into the design.  Instead, he asked the client questions to flesh out exactly what the organization was trying to accomplish with the materials they had requested.  In doing, VOCAL was pushed to clarify their mission in a way they never had before.  I saw how much influence a designer can have on an entire organization, and how important it is to make sure the client isn’t waiting for a design to provide magical direction for the future.

I think the fact that the event was branded as a marathon was one of the main reasons for its success.   The organizers dressed up in running gear, provided sweatbands for the designers to wear, and kept Eye of the Tiger playing on a loop through most of the day.  It was fun.  They also worked hard to make it feel like a big deal, equivalent to the accomplishment of completing an actual marathon.  The event ended with a champagne toast and reception.  Designers presented their work to the crowd, and we had the opportunity to feel recognized and important.  This was especially nice because design work usually takes place behind the scenes.

Business cards! These designers were more prepared than I.

I think this mutually beneficial model would be successful in other communities, and I’m eager to start spreading the word about this great concept for creating sustainable social impact.

Building a Portfolio Website: 5 steps I wish someone had told me

Today a good friend of mine asked if I could suggest some helpful articles regarding portfolio website design.  As I was collecting links to a few of my favorite posts on the topic, I realized that I had additional suggestions to share that I really wish someone had mentioned to me when I was designing my portfolio last year. Read on to find steps for putting together your first portfolio website.

Step 1: Look at examples

Seeing the creativity and innovation of others is incredibly inspiring. Browse existing portfolio sites to get the creative juices flowing. 

Check out this collection put together by Steven Snell.  Lee Munroe’s article 10 Steps to the Perfect Portfolio Website gives great ideas and examples as well.  It was one of the articles that I used as a reference when planning my portfolio.

Don’t just look at the images.  Follow the links to your favorites, and explore the navigation and site layout.  Look at the source code.  Jot down aspects you really like.  You can even contact the creator and ask questions.  I can’t vouch for everyone, but I know that if someone contacted me with kind words about my site asking how I accomplished a certain feature, I would fall over myself responding.

One thing about looking at examples from these lists:  They are inspiring, but can also be daunting.  I remember feeling very overwhelmed looking at the sophisticated portfolios that are featured.  When I switched gears and started looking at the websites of friends and acquaintances, the whole process began to seem more manageable.

Step 2: Design before you code

In general, it’s a good idea to figure out the colors, theme, layout, etc before you start coding CSS.  Having a design you are excited about will  help streamline the process by setting a goal of what you want the final product to look like.  Make drastic changes to color and layout just to see what happens.  The design process should be fun, and you shouldn’t stop until you have something you love.  Get opinions.  Think about usability.  You will definitely make some tweaks and changes as you code, but start in your favorite design software first so you have the freedom to be creative without worrying (yet) how to make CSS do what you want.

Step 3:  Use tutorials with a purpose

Inevitably, there will be a design element that you do not know how to incorporate into your web page.  You can spend an hour reading a general tutorial and not gain anything from the experience.  It is far easier to learn something new when you have a specific feature you are trying to implement.  Be it a rollover link, contact form, whatever:  Find a targeted tutorial and learn more about languages (CSS, Javascript, PHP) in a practical way.  Not only does this provide more motivation, but it gives you a chance to apply knowledge immediately, increasing understanding and retention. This will probably mean updating things in the future as you learn more, but it’s worth it.

You do have to start somewhere, and that somewhere should be CSS Positioning.  Understanding the tools you need to format your page is vital.  Here are the basics.  And find a great explanation for layering with CSS here.

Trust me on this:  There is a tutorial out there for pretty much everything.  Some are hard to find, and some are better than others.  Well-crafted searches are key, and remember to keep looking if the one you find is hard to understand.  Ask for suggestions!

Step 4: Don’t be afraid to backtrack

Getting  your page to display the way you want it is a series of mini-victories as you add design elements.  I wish someone had told me that there are times when it’s better to forfeit work rather than waste hours getting frustrated and pouring over your code looking for where something went wrong.  Save a copy, go back to when it was working, and try again.

Step 5:  Test frequently

• As often as you can, publish your page to the web.  It will display differently in your browser than it does in the client.
• Click and drag to change the size of the window:  The content of your page will move around and display differently.
• Change your computer’s display settings:  Your page will look different depending on the resolution of your monitor.
• Try a different browser:  Your page will display differently depending on whether you’re viewing it in Firefox, IE, Safari, etc.
• Change computers (the one I always forget) because your page will look different depending on your operating system.

This is one of the most frustrating parts of web design. There is nothing worse than finishing a page only to find that there are major problems with the way it is displaying on another system.  Test often so that if you notice a big incongruity, you can address it right away.

Q: What width should I use for my fixed-width portfolio design so that it will be optimized for the most computers?

A: Take the most commonly used resolution (currently 1024px) and subtract the scroll bar (30px).  From there, the more you subtract (to a point)  increases the percent of viewers you are optimizing for.  Of course, remember your target:  Certain demographics (like web professionals) are likely to have higher resolutions.  More detailed info can be found here.

Other helpful resources:

12 Tips for Creating a Great Portfolio Site

7 Tips for Improving Graphic Design Portfolios

Creating a Successful Online Portfolio

My Last Portfolio Sucked, Yours Might Too

6 Tips for Professional Presentation of Identity/Logo Design

Recently, I participated in a logo design competition sponsored by DESIGN 21.  Designers were challenged to create a logo for the UNESCO DREAM Center, a project with the goal of providing underprivileged children, especially in post-conflict regions, the opportunities and tools to express themselves creatively through the arts.

Bringing the Arts into Focus

My entry, “Bringing the Arts into Focus” was one of over 1500 entries from designers around the world.  Submissions represented all parts of the logo design spectrum: simple to intricate, serious to playful, large, small, good, bad, and everything in between.  However, this article is not about logo design. (For principles of effective logo design, check out this short article by Jacob Cass.)

Before this competition, I had never given much thought to how I presented a logo or identity design to a client after it was completed.  Looking through hundreds of submissions during the voting period, I realized that presenting an identity design is much more than providing a color and greyscale version of your logo.

The best designs in the competition stood out for more than just their conceptual strength or creativity – they had an effective presentation.  Below are the aspects I believe contributed to this professional feel, with examples selected from this competition and several others sponsored by Design 21.

1. Negative Space
Many entries uploaded an image that left empty space around the logo at the center.  This minimalist design concept  helps draw attention to the logo and is visually appealing.

DreamLogoType by Giorgio Uboldi

DREAM ...by edoardo perri

Illuminated Expression by Deja Engel

2. Horizontal and Vertical Solutions

Clients want a design that is versatile.  Showing how your logo can be easily altered to fit into spaces of various shapes and sizes makes your design stand out as well-crafted.  Your logo might be very versatile, but if you don’t present it that way clients may not notice.

Winner of the UN Documentary Film Festival logo competition: Stories from the Field by Abi Huynh

International Festival of Cultural Diversity by KarlaPamanes

A silver lining by musterseiten

3. Vignetting
Officially a lens effect, vignetting darkens (or lightens) from the corners of an image to draw attention to the center. This dramatic effect can be easily applied with Adobe Photoshop using the Lens Correction filter. A vignette can be very visually appealing, but it is also a common effect that can easily be overdone.

expressions by Harpreet Padam

Winning Design - Cultural Diversity by yael alkalay

DREAM of a Better World by Carlos Santana, Jr.

4. Bold presentation
Using a bright backdrop for a logo design draws the eye and helps it stand out from others.  It is also a way to bring a splash of color to a black and white design.  The use of other effects such as faint drop shadows or glow can be visually appealing, but it is important to also include a a plain and simple version without these effects, or the logo could be considered too busy or complicated.  ‘Helping Hand’ below is a great example of an effective shadow.  It is not pronounced enough to easily identify it as a drop shadow, but it gives a slight depth that is very appealing and looks professional.

Helping Hand by art&choke

FACE by kresimir grancaric

PANGEA by Francesco Donati

5. Print Layout Example
A large number of entries featured an example of how the logo could be incorporated into an appealing print layout. Although certainly not required, and maybe overkill for some projects, it shows dedication and allows clients to see the many ways your identity design could be utilized.

A DREAM grows..... by Tina Engineer

Dreaming is imagining by matias cageao

Most Popular: Here we meet by Diego Pinilla Amaya

6.  Product examples
Similarly, many designers provided examples of how their logo could be used on various products. It can be helpful for a client to see that a design is versatile and can be adapted for use in many different ways. T-shirts and stationary are common examples – but it is possible to go too far (example 3)

House drawing by Anna Guigard

Dreaming Star by Upstate

Art Everywhere by michaelv

If you really want to go above and beyond, you can animate your logo, as quite a few entries did.

Have other tips for making a design proposal stand out?  Share them here.