The modern world hinges on the ability to create better user experience through carefully crafted design.

Month: November 2017 Page 1 of 2

Comic Design 2

 

I used to have a Wacom tablet but it broke (include picture here) the engineer in me wanted to take the pen apart…

I rented one from the ATC for a couple of days

Comic Design 1

 

I will be working with Ryan Lapointe

 

Over the years I have watched numerous videos on comic design. I have compiled them here.

 

 

I am fascinated by the lettering of comics which really relates well with our previous typography unit and ties it in with this one.

 

Information Graphics 5

The feedback we received from the class discussion was extremely helpful in guiding our direction for the final draft. We realized that there were a lot of subtle biases that we had incorporated into our design. For example, the iconography for the coding languages, specifically Python, wasn’t as universally understood as we thought and added confusion.

Although not intended, the statistics that we used, specifically the “6 percent of life science majors are majoring in bioinformatics,” gave the impression that the information graphic was trying to convince students to major in bioinformatics rather than just take some more computer science or bioinformatics classes to enhance their knowledge. This is an important distinction, because the idea of switching majors or adding an additional major requires much more effort and thus is more challenging to persuade people to do.

In addition, our target audience includes those who have never taken any computer science courses, or who have just lightly dabbled in it. The majority of people majoring in the life sciences majors, in particular biology, are female. Consequently, we decided to further narrow our target audience to female biology students at WPI. This allows us to craft a more targeted message that will hopefully be better at persuading them to take enhance their computer science knowledge.

Some inherent, albeit extremely subtle design choices, made our information graphic seem catered to a male audience more familiar with computer science, such as the iconography, color scheme, and monetary statistics. Generally, women are less drawn to the prospect of a lucrative career than men.

Based on the feedback, we further refined our target audience to be as specific as possible, narrowed down from biology students at WPI to female biology students at WPI, with our purpose being to convince them to take a computer science or bioinformatics course. We also decided to reduce the emphasis on the bioinformatics major to prevent any confusion with the understood purpose previously mentioned.

Based on the feedback we received from class, we decided to continue with the simple iconography and general style, but modify it to better fit our target audience. We used the principle of relatability by showing images of females in science, however as icons to fit our style. We had some difficulties finding a good icon that would match our initial idea of a female with a ponytail wearing lab goggles (so to be instantly recognizable as both a female and a scientist), potentially holding a beaker or Erlenmeyer flask to be even more identifiable. Some of the icons that we found are included with the first being a quick sketch courtesy of Henry 🙂 .

Our next progression of drafts over the weekend are as follows.

Our final draft (for now at least).

Because of the many changes that we implemented as a result of the feedback session (which I think was extremely useful!), we also changed our artist statement:

The purpose of this information graphc is to persuade biologists at WPI to take computer science (CS) courses by showing them how CS can impact their carreers.

To accomplish this goal, we began by molding our graphic around a DNA strand, immediately telling viewers that our graphic is about biology. By slightly tilting the DNA, we are able to guide the readers eyes as they read from the top left to the bottom right. Symbollically, the DNA has been broken into two strands: solid teal and pixelated yellow. The teal strand represents biology, while the yellow strand represents CS; together, they show how CS and biology are fundamentally intertwined within our graphic. We used the vertical bars between strands to hold statistical information, drawing from a variety of statistics (tragically fabricated due to time and resource constraints) in order to logically persuade our readers into learning more about programming.

Contrasting the DNA, we framed the entire infographic within a monitor (alluding to CS), placing information about beginner CS courses in the empty space surrounding the monitor. We were able to further expand on the DNA with carefully chosen iconography that is representative of the various problems that biologists face, accompanying these icons with subdued text blocks that provide detailed explanations of the icons and their relevance. Throughout the graphic, we attempted to place a larger focus on female viewers, since they comprise a majority of WPI biology majors.

Information Graphics 4

The final design is almost complete! Our group met up on Saturday to complete the information graphic itself and work on the artist statement describing what the graphic means, what it is meant to do, and how it is meant to do that.

EDIT: The final information graphic was originally due on 11/20/2017, however, the entire class has been given an extension to 11/27/2017.

The purpose of this information graphic is to show life science students at WPI how bioinformatics and software impact biology in order to persuade them to take the CS1104 and BCB100X courses. To accomplish this, we made the central focus of the graphic a DNA helix, a choice which served both symbolic and logical purposes. DNA symbolizes biology through its fundamental association with the life sciences. Its structure consists of two intertwined strands connected by base pairs; one strand has a teal color representative of science and biology, while the other has a pixelated, digital motif which evokes the notion of computer science. These connotations, combined with the linked nature of DNA, convey the idea that computer science and biology are fundamentally intertwined. The base pairs connecting the two strands further imply a strong link between the disciplines, while providing statistics to enhance the message. The statistics point to the lack of interest in bioinformatics within the life sciences, and the financial benefits to pursuing it as a career. In addition to this data, each of the three lower icons show concrete examples of problems in biology that computer science can solve, thus providing a logical basis for taking a computer science and bioinformatics course. The entire diagram has been tilted to help guide the eye naturally along the DNA, and icons have been positioned around the molecule to provide peripheral information to the viewer as they read the headline.

 

I have included a gallery of the progression of our drafts:

Information Graphics 3

As we discussed our drafts in class, Professor deWinter suggested that we significantly narrow the scope of our information graphic. As I mentioned in a previous post, the purpose of an information graphic is extremely important. Our original purpose was to persuade non-majors at WPI to pursue computer science, specifically programming, and apply those skills to their specialty. However, our narrowed purpose is to persuade biology majors to learn programming and bioinformatics to apply those skills to biology.

We started out with our computer monitor idea shown below.

Our methods to accomplish the purpose, “the means of our rhetoric” remain unchanged, essentially showing specific examples of how computer science is applicable in biology and bioinformatics.

Immediately, we went to the idea of using a DNA molecule to represent the idea of biology, a common trope, which we continued to elaborate on. However, we realized that the idea of framing our infographic in a computer monitor might add some interest and serve as a tonal element conveying the idea of computer science. Consequently, we thought it would be good to continue incorporating it into our design.

I have included a gallery of our research and inspiration for the DNA molecule and how to best include it as the central focus of our infographic.

As an aside, Professor deWinter mentioned this in class. I was fascinated by this thought because it never occurred to me that I could be so easily pulled in by rhetoric. But this is exactly why we strive to better understand rhetoric, so that, according to Aristotle, we may endeavor to discover in any particular case all of the available means of persuasion. As such, the professor mentioned that there is no such thing as a “general audience.” Instead, a general audience is when you are part of the audience, thus causing a feeling of shared generality, that everyone shares your viewpoint.

Information Graphics 2

After a bit of deliberation, we decided to go with the idea of persuading WPI students who are not computer science majors to learn programming and apply their knowledge to their specific field.

Although I was a bit sad to let go of the idea of automation in white collar jobs and the role of artificial intelligence and machine learning in that trend, I realized that it might be a bit too difficult to effectively research and explain in a single page information graphic. Creating an effective narrative would also be significantly more challenging since, with the exception of Brandon, none of us have any specific job experience in the field outside of school. However, the topic that we did chose had some elements of the automation idea, in that we decided to include applications of computer science on the various majors, and how they might be able to effectively leverage artificial intelligence and machine learning in their fields.

Based on some ideas by Brandon, and after some discussion with Henry, I drafted our ideas on paper. We thought that framing the information graphic in a computer monitor might be a really interesting idea, as if the content was part of the computer itself. We first thought of having a “word cloud” style image, but instead of words, replaced with icons representing the applications of computer science to other fields. However, going off of the idea that the information graphic was part of the computer frame, we also thought of using icons explaining the various applications of computer science to other fields, as if they were computer applications installed on this machine. This idea was slowly abandoned in favor of a more clean and minimalist approach, vaguely resembling the colorful “professional flat cartoon” style that is trendy today,.

I have included a gallery for our inspiration research and infographic ideas:

I found this resource if anyone ever need a pixel map generator, http://pixelmap.amcharts.com/

Information Graphics 1

In today’s visual world, a lot of information is conveyed through information graphics, such as the technical drawings engineers use to show a product idea to various mathematical graphs helping visualize the complex cryptographic functions used to secure the internet. For this next project, we will be designing our own information graphic

Unlike the previous typeface project, we are working in groups of three from the start. Our group consists of Brandon Sanders, a CS and professional writing major, and Henry Stadolnik, a CS and IMGD major and of course myself. I am excited to get to know them better and begin work on an information graphic!

The assignment appears relatively simple and open-ended. As a class, we voted on various topics, such as “majors and professional development at WPI” and  “environmental issues and sustainability.” We decided to go with the topic of “majors and professional development at WPI.” Because we were first asked to brainstorm three ideas for various information graphics. My initial thoughts immediately went to Kurzgesagt, a great YouTube channel dedicated to information graphics, albeit videos whose mission is to “make science look beautiful. Because it is beautiful.”

I love the simplistic visual style of their videos, which contrasts nicely with the complexity of their topics. Their explanations are always clear and easy to understand, yet at the same time entertaining and fun, something  critical in the modern world and its online-first philosophy. We strive to do the same with our own information graphic.

Our readings and class discussions made us realize that good information graphics have a central narrative; that is, they tell a story with the information. Good information graphics have a purpose; they don’t just plop information on the page and expect the reader to understand its significance or what to do with the information, but rather carefully design the graphic so that at the end, the reader is persuaded to do something or change their opinion, often in very subtle ways that are not immediately noticeable or obvious. I think Kurzgesagt does a great job in that regard.

The various general topics I thought about are as follows:

 

reduction of war
genetically modified organisms
automation of jobs, including white collar – professional development at WPI
artificial intelligence
antibiotic resistance
corporate rights
intellectual property

As the class discussed ideas, I realized that automation of jobs fits nicely into the category of professional development, which I could spin specifically for WPI. Hence, I decided to select it as the final topic.

Final Draft – Ice Pick

The font started out with two main characters, both in the sense of as a literary character and as letterform. The “F” and “I” were critical to the design language, with the I primarily intended to be an icicle dangling.

I wanted the font to be a bit more abstract, and so rather than showing icicles directly dangling off of the letters, I made sure to style the letters to resemble the icicles themselves. didn’t want the font to be too literal, and show icicles hanging off the individual letters.

Although I had originally planned on using TypeLight, I decided to go with Calligraphr instead because of its simplicity in creating glyphs from scanned images. Because most of the letterforms were not geometric, they did not lend themselves to simple Bezier curves. Therefore, it was easier to upload a scanned version of the typeface into the tool and modify the letterforms there.

 

Our artist statement is as follows:

Ice Pick is designed as a title typeface for an escape room on the Worcester Polytechnic Institute campus. The escape room is themed around an icy mountain expedition gone wrong when the group gets confronted with a Yeti and has to figure out what to do! The typeface is designed to convey the icy bite of the frigid temperatures and evoke a sense of danger and fear from the sharp, claw-like serifs intended to be reminiscent of the feeling of a Yeti around the corner, and overhangs that elicit the feeling of being trapped in an ice cave. The large, all caps, letterforms provide an emphatic sense of urgency that can be used in banners and logos as well as in title cards and event flyers. Ice Pick was designed to use pathos to invite readers to feel the same emotions that a group of trapper mountaineers would when faced with the frigid temperatures, mountainous terrain, and harsh winds. The letters in Ice Pick have distinctive icicle-like features incorporated into the letterforms, especially evident with the letter “I.” There are harsh angles and sharp, curvy wisps built into the letterforms that exude the feeling of strong, chilly winds biting into your face. The letters also incorporate features of tools commonly used on mountainous terrain such as the letter “E” being the spikes on a climbing boot and the letter “T” resembling the typeface namesake, an ice pick.

Next Steps

I began by sketching various samples based on the ideas that I described previously.

Initially, I thought to use a vector based program such as Adobe Illustrator. After designing various elements of the typeface by sketching on paper, I scanned the sketches and inserted them into a new Illustrator document, hoping to be able to trace over the elements with the Bezier curve pen tool. However, this proved extremely difficult in Illustrator for a number of reasons, primarily being that I was not extremely familiar with the interface and its advanced curve editing functions. Consequently, after spending a couple of hours attempting to create the necessary glyph elements, I decided to abandon Illustrator in favor or TypeLight. I searched for other programs online and discovered FontForge. However, this also seemed rather complex. Reading through the blog posts of other students, I noticed that Ryan recommended using TypeLight for its simplicity in digitizing fonts.

UPDATE: A new partner!

I am now working with Jack Tulloch on a typeface design!

Preparing for the Expedition

I think for any artistic endeavor, it is important to start by defining the goals. For this project in particular, we were to design a typeface for an “escape room” hosted at WPI. As such, I think it should be made to exhibit specific characteristics that enhance the experience of being trapped in a room and finding ways to escape.

The general theme of the escape room is an expedition to Mt. Everest.

To begin, I started by researching various sources of inspiration so that I would have a better idea of what experience or feeling to represent visually through the typeface, and what elements might be stereotypically related to the idea of a Himalayan mountain expedition. We were given a list of keywords that would aid in that:

  • Everest expedition
  • Sherpas
  • Cold
  • Tents
  • Oxygen
  • Yeti

I wanted to start by creating a sort “mood room,” or in this case, a set of images I found online that would provide an inspiration to begin the design process and to make sure that the typeface continues to develop in the direction of the escape room and mountain expedition concept.

To start on ideating the project, I decided it might be finally useful to make some sketches by using my Wacom graphics tablet. Unfortunately when I removed it from storage and began using it, the sensitivity of the clicking mechanism and pressure detection seemed completely broken. Although I attempted to fix it for a number of hours, it was all to no avail. I think I will need to order a replacement pen or get a completely new graphics tablet. Consequently I will need to do everything on paper and later transfer to the computer.

There are two stereotypical ideas for a Yeti that I have found. First, is the scary snow bigfoot, and second is a cuter, more approachable creature that serves as a guardian to the ice caves or mountain. The guardian concept would fit with the sense of a looming letterform, with tall letters that have substantial mass at top makes you feel small in relation and feel like you are in the presence of a large creature such as a Yeti. The sharper characters might fit better with the frigid idea, but I still have not decided which one would make more sense in this application.

The “I” represents an icicle forming, but without cluttering up the rest of the font by installing small icicles on every letter.

I am slightly torn between a thick, punchy, and gothic look and thin, airy, yet frigid look. The problem arises because my idea for a frigid character involves using sharp serifs on the upper edges and a sweeping sharp curve on the descenders. However, my idea for a “looming” letterform needs to be slightly rounded in order to convey that type of feeling of, not “imminent” but almost so.

 

Page 1 of 2

Powered by WordPress & Theme by Anders Norén