Team:Alma/Graphic Design
A Graphic Design Perspective
iGEM and Graphic Design
Hi, I'm Whitney Miller and I'm the graphic designer for the team. My responsibilities have been to design the team logo, project logo, banner, the infographic on the main page of the wiki, and the poster. This page is an overall description of the ways and knowledge of graphic design, and some descriptions of the work that I have done for our team’s project. I will go more into depth what makes a quality logo and the process that we took creating our project logo.
Anatomy of a Logo
Image: It needs to be a clear and concise image that properly describes what your group is trying to portray. It needs to be able to read from up close and far away. If all of the details of the image cannot be seen from far away, then it needs to be changed so it can be read easily. Do not put a bunch of filters or effects on the image unless they are needed. It needs to stay professional at all times.
Text: It is best to use a sans-serif font (without feet) for the title and serif font (with feet) for any sub-text. Sans-serif fonts give the title a more minimalist feel and they do not take up as much space. Serif font, with their feet, enables sub-text to be read easier creating a literal line of text. Do not use a cursive, thin font that cannot be read from far away. It is best to use bold, clear fonts that can be read from up close as well as from far away.
Color Palette: To figure out the colors your group will be using for your logo, they can be colors that represent to topic of your project or colors from the various color groups like:
- Analogous: three colors that are next to each other on the color wheel
- green, sky blue, blue
- Monochromatic: all of the tones, tints, and shades of a singular color
- turquoise, light blue, carolina blue
- Triad: three colors that are evenly spaced on the color wheel
- orange, green, purple
- Complementary: a pair of colors that are across from each other on the color wheel
- blue and orange
- Compound: choose a color and the two colors adjacent to its complementary color
- orange, blue, purple
- Shades: choose one color and add either white or black to let the color get lighter or darker
- lavender plus white, lavender, lavender plus black
In summary:
Overall, your logo should not have more than two or three colors, not including black or white. If there are more than that, then it starts to get messy and the colors start to contrast against each other. Once your group as figured out your colors, try to keep that color palette throughout everything that is being designed. In the end, it will bring everything together and connect everything under one umbrella.
Logo Examples
These next two logos are examples of what to do and not do in terms of logo design. I will describe the specifics of the text, image, and color palette.
This is an example of a well-designed logo:
- Image: This image is clear, bold, and concise. This can be read not only from up close but far away. There is a little detail in the waves and in the gear, but it can be read easily. It clearly portrays the overall topic of what this group is about.
- Text: This title is a great example of a clear, bold font that is readable from not only close up but far away. They used a San Serif font that gives it a minimalist look. They do overlap their title with their image and normally groups should not do that because it can be hard to read. However, this group used contrasting colors so the title would pop against the background image. It is always recommended when you overlap images and text to uses a dark color on top of a light color.
- Color Palette: This group used a fairly simple color palette, which for this group worked for them. Their colors are very straight forward and they only used one color, not including black and white. Even with their simple color choices, these colors help to connect the logo as a whole. Not every logo has to have a complicated or sophisticated color palette.
This is an example of a poorly designed logo:
- Image: These images that were used for this logo are hard to read. For example, the gear with the rings in the background read as maybe tree rings. The bug should not be bigger than the tree that stands for the “i” in “iGEM.” In a logo, groups should always stick with biological standards. With the bug being this big, it sticks out from the rest of the logo. However, if they shrink down the bug and move it under “iGEM.” Then increase the size of the tree and get rid of the drop shadows on the images. They read fine without this technique. With these changes, it will read a lot better from up close and far away.
- Text: They did use a San Serif font for “iGEM” and “University of Nebraska-Lincoln.” However, groups should not use such a hard filter on top of their text like this one with “GEM.” It makes it very difficult to read from far away and close up. Also, it is highly unrecommended to use a heavily drop shadow on both sets of text. Drop shadows is a unique technique and should be used only when necessary. Groups should not use it as a way for their text to stand out. If they took off the drop shadows and lighten up the filter, then it would read a lot better.
- Color Palette: For the most part, their color palette is pretty good. They stuck with more of the earthy tones of greens and browns, not including black. The colors I would darken the browns they used for the gear. These browns are too bright for the overall logo. They draw the viewers eye directly to that instead of seeing the overall logo. Right now, the gray that they used for “GEM” is too dark in certain sections. However, if they lighten up the filter, they used on that text it would fix that problem.
Our Process
These next images are the steps that it took our group to create and develop our project logo. It took us about 6 weeks to design our final logo. However, it typically takes no less than 2 weeks and no more than 3 weeks to design and create a quality logo. We came up with different topics or themes that defined our project and how it can be best portrayed. Then I, the graphic designer, takes those topics/themes that our group has come up with and design up different variations for the group.
Finally...
Why did we choose this?
- Image: Our images are fairly simple with the circle and the blood cells inside of the circle. The circle is a representation of a capillary. We outlined the blood cells in white so they can be seen from far away. If they were black, then they would have blended in with the gradient of the circle.
- Text: We used a clear and bold sans serif font that can be seen from up close and far away. We did; however, use a technique called letter replacement with the two “A”s in “Attack.” Letter replacement is where a designer replaces a letter with an object that closely represents that letter. For example, we replaced the “A” with an EKG line that ties our project back to the heart. Letter replacement is a great technique to add to your design, but just make sure that it goes with your group’s overall concept and design.
- Color Palette: We chose colors that represent our project. Our colors represent the cardiovascular system. The arteries representing red, veins representing blue, and capillaries representing purple. We also chose to create it into a gradient to capture it like it does in the body.
To wrap things up...
As your team keeps going in the other design projects for this competition, it is always the best to go off from your logo. You should keep the colors, text, and imagery consistent throughout everything else i.e. the banner, wiki, poster, etc. By doing this, it will connect the different aspects of the project together. We hope this can be a resource to teams in the future.