Assignment 5 | March 16

January 26th, 2009  |  Published in f. Pictograms, Logos, & Icons  |  234 Comments

Assignment 5: Pictograms, Logos, & Icons Assignment (due Saturday 28th)

In this exercise, you will explore the design of pictogram/logo/icon by creating one of the followings:

1.    A new pictogram/logo/icon for I School
2.    A new pictogram/logo/icon for your school (non-I School)
3.    A pictogram/logo/icon for your own project

Be clear what type of sign you are designing (e.g., pictogram, ideographic logo, type as picture, etc.) and describe how your sign stands for the signified. Post your design and description of your design on the web by Saturday 28th. You will present your design at the workshops on March 30th.


  1. ElizabethS says:

    March 27th, 2009 at 10:28 am (#)

    For this assignment, I designed a logo for my personal website. The logo, using my name, conveys my artistic sensibility. For this reason, I tried to evoke Piet Mondrian in my design, as he is one of my favorite artists, and my visual work is greatly influenced by modern art in general. This is for a journalism web site, but I wanted to convey my varied background in art and art history in this logo. The four colors of the logo also represent the different type of media that I work in: audio, video, photography, writing. In this way, the logo represents me and my work.

  2. AnnetteG says:

    March 27th, 2009 at 11:29 am (#)

    I experimented with a bunch of pictographic logos that involved the word ischool and then realized that the i alone conveyed the idea of information. I decided to go with the look of an information kiosk sign, with its connotation of offering expertise to help people. I used the official Cal blue but not the gold, since the blue and white contrast had more the look of a kiosk sign. I used Monaco for the i, and overlayed a custom grid on top of it to make it look computer generated but intentional. (Merely pixellating it just looked like a low-resolution icon used by mistake.) The font for the school name is ITC New Baskerville. I think it has the look of a modern take on a classic typeface. It seemed appropriate because the ischool itself is a modern take on a classic subject. To add dimensionality and a contemporary look, I added a drop shadow on the i sign.

  3. JananiV says:

    March 27th, 2009 at 5:06 pm (#)

    I experimented with a whole bunch of logos for the iSchool. As I played around with various fonts and colors, many styles were similar, yet I feel each one has a unique appeal to it. Almost all styles play with letter reflection. The first two, draw attention especially to the dot in the “i” for which I used a word cloud background. This was to graphically depict “information” and more subtly the work that we do at the iSchool. The first style uses a Eurostile font and the second, Helvetica Neue. The third and fourth styles with only an “i” also play with reflections. The third style uses a Bell Gothic font. The fourth style is a more playful version where the “i” was created as an image using various shapes. Ideally, I would have liked for the reflection to fade away like in the other cases but this was something that proved difficult given my Illustrator skills!

  4. SunnyL says:

    March 27th, 2009 at 5:44 pm (#)

    27’s been a lucky number for me so I’ve often used threeqube as a login id for forever. I thought I’d give some dimension to my login ID and came up with the following two designs. I kept on thinking of different color combinations so I had to stop myself and limit myself to the following two.

    I wanted to interweave elements of my login: the cubic factor, image of a dice, the “q” sounding like a cube all together into one cohesive logo that made sense and was memorable.

  5. SeungwanH says:

    March 28th, 2009 at 8:51 am (#)

    I designed three logos for “Interactive Blocks”, an imaginary project which has sensory blocks as tangible inputs and building block projection in virtual places as an output.

    The first logo is based on 1) actions of “playing”, 2) playgrounds which made by the interactive blocks, and 3) playing “with friends”. I think that the logo has to have a bright and dynamic nuance, so I use cartoon style drawing: relatively strong lines and bright colors. The blocks being carved the project title represent the products can be attractive playgrounds for children.

    In the second logo, I use the pictogram of children who are stacking blocks. The upper part of the blocks transforms to “I”, the first letter of “interactive”. I express the metaphor that built blocks can be transformable to something imaginary through the system. I also add a nuance of “playing with friends”.

    In the third logo, I emphasize one of the blocks as a tangible input and interesting playing relating to the tangible block. I express that the interactive blocks can provide something extraordinary and interesting playing. As the first logo, I use pictogram-like images to describe the actions of children and the hand and block as a metaphor of tangibility.

  6. K. Joyce Tsai says:

    March 28th, 2009 at 12:56 pm (#)

    I ended up designing a logo for my manga posters. I was inspired by the zig-zag line poster I created, particularly when I thickened the line in my pink poster. The line then looked to me like a stock market graph, which seemed appropriate for “The Economics of Manga.”

    I had wanted to use a more buttoned-up serif font for “The Economics of,” but all the ones I played with contrasted too much with the comic-book font of “manga,” so I ended up using Helvetica instead, as it feels neutral but still professional.

    Although I considered using color in the logo, I ended up staying with black and white, as it echoes the black and white color palette of manga.


  7. Hyunwoo Park says:

    March 28th, 2009 at 3:22 pm (#)

    I designed a logo for another personal project called “VirTraveler” which means a virtual traveler.

    My design falls in the “type as picture” category, since I basically employed the alphabets “v i r t r a v e l e r” for the logo.

    To differentiate two parts of the logo, the first part was made bold.

    To make it more interesting, the dot on the “i” was replaced with eyes looking at something. In addition, the shape of a backpack took the place of the “a” to represent the concept of travel. The backpack was chosen because the shape resembled the shape of the letter “a”.

    I also created inverted version of the logo.

    I also wanted to create a pictogram-like artifact simply representing the project. I collected eyes and the letter “v” to create a smiling face. It was inspired by the Amazon’s downward curved logo.

  8. LisaP says:

    March 28th, 2009 at 4:38 pm (#)

    I decided to be very literal with my logo as I feel my topic title is not very self-explanatory without context. I purposeful used black and white to simplify the design, maintain the feeling of movies and once again played with the black/white dichotomy of cult vs. mainstream. This is something I could see on my Web site, a business card or stationary.

    I played with putting the text on the movie screen, but feel that then it is overwhelmed by the image.

  9. LjubinkoM says:

    March 28th, 2009 at 9:44 pm (#)

    I’m working on a redesign of the BART ticket kiosk user interface for another class. I decided the BART logo would be a fun challenge to tackle for this assignment. I came up with several alternatives, but my favorite (for now. I plan to keep working on this) is the typogram below - in various colors. It has a bit of a retro, robocop feeling while still feeling appropriate for a mass transit system.


  10. Hsin-hsienC says:

    March 28th, 2009 at 10:58 pm (#)

    For this assignment, I try to design a logo for my research “Intelligent Environments in Home Care.” To begin with, I utilize only texts to design an ideographic logo. The big “I” in capital is placed in the middle with “intelligent environment” fading off on the left to shape the edge of the letter “I.” To represent the idea of artificial intelligence, I underlay repeated “0101” as the background on the right.

    For the second try, I intend to make a pictographic logo by adding an illustration of interactive elements and a human. The illustration is aligned on the right edge of the letter “I”, interacting with the people to express the idea of “intelligent environment.”

    For the third composition, I combine an illustration with the main body of the letter “I” for better integration of the entire logo. Repeated “0101” is reversed to shape the head and bottom of the letter “I.” Besides, I remove the color of “home care” and make it in capital for emphasis to make a pure black-and-white logo.

  11. mlissner says:

    March 28th, 2009 at 11:11 pm (#)

    For this assignment, I made a logo for a project that I am doing for a different class. I had a real hard time finding the inspiration for what the logo should be, but once I had the idea in mind, creating the logo itself was fairly easy.

    I had a set of emotions I wanted to evoke with this logo. It’s planned to be part of a site that will help people manage digital assets of deceased friends and relatives, so creating a logo that was a neutral as possible was a must. I also wanted to evoke feelings of the cycle of life, and peace, and harmony. The site also has some major security and trust issues, so the logo has to look reassuring, and professional. It has to tell the viewer that they can trust the site.

    Here’s what I came up with:

    I came to the tree idea pretty quickly, but I couldn’t think of a way to make the tree represent more than just life until I came to the thought of leaves falling from the tree. The theory of the logo is that the leaves represent the deceased person, the tree represents society, and the whole thing represents the circle of life and death. I also like that the tree shelters the logo, creating a shady spot from the sun, or a safe spot from the rain. In these respects, it’s somewhat idiographic, but I’m not sure all the concepts quite come through.

  12. TiffanyC says:

    March 28th, 2009 at 11:49 pm (#)

    My high school journalism teacher is retiring at the end of this year after over twenty years of teaching. In honor of him, several alumni have decided to put together a special newspaper and I chose to create a simple nameplate for the newspaper for this assignment. The name of the newspaper is “Brown Babble.” (His name is John Brown)

    I wanted to make something playful and humorous like a funny face out of the two B’s to reflect the nature of my teacher, but it didn’t seem to be appropriate. I chose to go with simple B’s that have hints of playfulness.


  13. DanielleS says:

    March 29th, 2009 at 12:32 am (#)

    I’m working on a logo for my department, The Energy and Resources Group. The main topical themes are energy, the environment (including water), and people. The department wants to be recognized as cutting edge yet dependable and experienced. Besides enhancing the recognition of the department, a main use of the logo will be to attract donors.

    I started out using the sun to represent energy, the earth to represent environment (+ water), and a face profile to represent people. I am using color to invoke the sun and earth. The profile is literal (but I am having trouble trying to make it less cartoonish)…

    From this idea, I noticed that the forms resembled the departmental initials: ERG, but with the profile as a lowercase r. Not sure if it is effective?? perhaps the *r* is too exaggerated??

    Finally matching this up with UC Berkeley — a departmental requirement. I chose Futura b/c I though it matched the simple lines of the image plus it conveys a cutting edge feeling (not sure about the dependability/experience vibe).

    In adding the text, I increased the size of the blue line width to make the image look balanced. I also pulled apart the *letters* of the image to look more individual characters.

  14. StephanieP says:

    March 29th, 2009 at 12:28 pm (#)

    I created a logo (a combination of an icon and typogram) for an upcoming product feature for my company. We’ll be providing downloadable, working copies of a dynamic web site and design, called “Site Snapshots”. This kind of product is often referred to as a “demo site” or a “database dump” (ugh), or other more techie, less friendly words. We came up with this name for it as a phrase that would be still immediately recognizable to those familiar with the technology, but also convey what it actually meant for those without the technical background.

    Taking the “snapshot” a little further, a camera was the first thing that sprung to mind, but this felt like too complex of a symbol for a logo. Also, what we’re trying to represent here is really the output (the photograph) rather than the device which creates it (camera). After doing a little dictionary and stock image site browsing, a polaroid jumped out at me as the perfect symbol.

    I believe this is a symbolic image in this context, when representing a website product (as opposed to a literal photograph, which would be an iconic symbol). I stuck with pure B&W as it was important for it to be simple for use as a very small logo, and would work well in the inverse as well. I used two styles of a condensed Helvetica. Initially it had a single polaroid but that looked a little flat and boring, so I added the second one at an angle, and then needed to add a border on that so it stood out when stacked.

    I think it conveys the concept in a friendly and familiar way which is still understandable to the techies.

  15. CarolC says:

    March 29th, 2009 at 4:03 pm (#)

    I created a logo for another course project, EyeForArt. EyeForArt is a website that teaches aspiring artists how to see with an artistic eye. Novice artists learn fundamental drawing techniques and practice drawing things upside down and observing subjects with more detail. I came upon the idea of paint splatters in the pupil of an eye by musing over what it means to see with an artistic eye. Artists see the world differently, in shapes, contours, colors, and meanings. I wanted a simple way of showing this concept, and paint splatters in an eye fit the bill. The end result falls between classification as an ideographic or pictoral logo, closer to the ideographic side.

    I chose an array of bright colors, but for the complementary words ‘Eye for Art’, I chose the blue peeking out of the pupil of the original eye, for balance, and a paintbrush stroke to convey the movement and free flowing nature of art.
    EyeForArt Logo

  16. SunnyL says:

    March 29th, 2009 at 8:38 pm (#)

    I forgot to specify in my post that I chose to design a logo that falls under the category “type as picture”.

  17. WesleyW says:

    April 1st, 2009 at 7:11 pm (#)

    I’m far too late to make the deadline or the critique with this, but I thought I’d take a stab at the exercise anyway.

    I tried my hand at a new logo for my research lab, the Berkeley Institute of Design (BiD) (which already has a perfectly good logo, but still seemed fun to play with). I was interested in trying to design a logo that said evoked papercraft, something that has always aesthetically felt very “designy” to me.

    My first sketches (1) varied between a paper look and something that looked more like a woodcut or engraving. However, when I started working digitally, I found myself more and more interested by something that recalled a piece of paper with a few folds (2).

    From this form, I began to construct the typogram. I first played with color, pulling in a variation of the bold orange that’s been present in the past two versions of the BiD logo and most of the labs promotional paraphernalia. My first logo made the folder paper orange and cel-shaded, with the logotype cut through the top of the sheet (3).

    I also created two other versions of the logo (4,5) which pulled the type off of the sheet and placed it to the side. This essentially leads to something that could be treated as two separate logos: an (ambiguous) folded-paper ideogram at left, and a simpler version of the existing BiD typogram on the right.

  18. RhyenC says:

    April 27th, 2009 at 10:38 am (#)

    For this assignment, I chose to expand my design for the typography exercise - my initials - to create a logo for personal branding.

    I maintained the Garamond font of the original design for consistency and simplicity. I considered using individual icons for each medium I work in - multimedia, photography, web - but decided that a simple “type as picture” style was cleaner. Instead, to differentiate the three mediums, I pulled three colors from the palette I’m using to develop my online portfolio: