Category: Real Jobs

Lisbeth Poster Competition for TypeTogether Foundry

During the summer term of 2017, TypeTogether organised a poster competition for the Part 2 students of our department in order to showcase their new typeface. Lisbeth was designed by Louisa Fröhlich, a Typeface Design MA graduate from University of Reading, who started working on the typeface as part of the MA. When describing her typeface in a conversation with TypeTogether, she recalls:

“I always liked the idea of a stroke which has a subtle three-dimensional feel to it and which has the ability to somehow move more freely. Not to create a swashy diva, but rather to put this vividness and energy inside practical and efficient letter proportions.”

After seeing the typeface myself when the competition was first announced, it’s this subtle three dimensional feel of the typeface that inspired me and motivated me to take part in the competition and try experimenting with the letterforms to create a typographical poster using Lisbeth. The brief was simple: To create a 70cm x 44cm portrait poster as a digital output in order to showcase and promote the release of Lisbeth, while only using 3 spot colours. The primary audience of the poster would be graphic designers and the secondary would be other type users.

I was excited at the idea of the competition right away, since the brief gives us a lot of freedom on what we can produce and allows for a lot of experimenting with the typeface. As a first step, I looked into the TypeTogether foundry to research other similar posters that were created to promote and showcase other typefaces, eg. the Bree Typeface poster. The common features of all the posters I had found were their simplicity and focus on the letterforms, making sure that the typeface itself is the main element of the poster, with no other competing graphics on the posters.

Next, I looked into reading about the typeface, through the profile page of Lisbeth on TypeTogether, and the interview between the foundry and the designer when the typeface was being released. The unique features of Lisbeth come from its subtle three-dimensionality, its twisted letterforms, and the fact that it was an italic-only typeface.

When I first started working on the concepts of the poster, I focused on the geometry that can be created when rotating the typeface and creating a pattern out of it. While it was fitting of the brief and did a nice work in promoting the unique selling points of the typeface, I found the results to be bland and unimaginative when compared to other typeface promotional posters, in the sense that it didn’t characterise all those features that Lisbeth was described earlier. So I decided to focus on the three-dimensional feature of the typeface and try to create a graphic out of blown up characters using the display font of the type family.

I could not, nor did I wanted to, change any of the shapes of the letters in order to create a 3D graphic, so I had to find another way of really showcasing its three dimensionality. I started to experiment by using the letterforms as clipping masks in Illustrator, and fill them up with different shapes and lines, without corrupting its design, but due to the complicated and twisted characters, it was very hard to add any other elements within the type. On a second try, I started working with the idea to create a blend of a character from the typeface, in order to truly highlight its twisted shapes.

On the technical side, I had to edit the lines and anchor points of a letter, (in this case ‘M’), find all the parallel sides in the character, and try to create a blend for each part, without changing any of its shape. In order to do so, I connected 8 different parallel lines using the blend feature of Illustrator each time, and then manually had to connect each anchor point of each line, in each blend (there were about 16 inner lines for each blend), since not all the anchor points lined up exactly with each other. There are also no parallel lines on the sharp caps of the typeface, so the blend had to be made from a single anchor point, which ended up requiring a lot of editing after the blend, in order to keep the shape of the cap the same with the original letterform.

It took quite a lot of time till I had managed to create the effect out of 2 letters, “L” & “M”, chosen for no other particular reason, other than “L” was one of the easiest characters to create the effect from when trying it out, and “M” being one of the characters with the most parallel features, which really helped highlight the twisted lines of Lisbeth when blown up using this effect.

After creating the blend of “M”, I started experimenting with the positioning of the character, taking up most of the poster. It was really easy to create an aesthetically good result due to the changing twisting lines that when viewed on a screen, can seem like they are moving when viewed in smaller sizes and higher quality. After deciding on the position of the character, I added a secondary copy of it in a parallel line below it, while also making it bigger, with thinner strokes. This allowed me to create a more subtly shown blend, on top of the main one, that helped bring out the three dimensionality of the typeface.

In order to bring out the lighter lines of pink and white against the blue background, I created a grain effect behind the lines, to increase the contrast between the colours. The pink colour created a feminine character for the typeface, but was also overpowering the dark blue background and being very clear and stout, even though the lines of the blend were only at 2pts. After deciding on the rough position of the blended characters and the colours of the poster, I started adding the main text of the poster. I created a tagline using a quote from the book The Girl with the Dragon Tattoo, as I found the characteristics of Lisbeth very similar to the protagonist of the book.

“Lisbeth. Oh, can I call you Lisbeth? I want you to help me catch a killer of women.”

The main tagline was left aligned and was positioned between the interacting arches between the two “M”, in order to make sure that the text was legible and was not hidden away behind the blended characters. Based on the grid that I created for the poster structure, I aligned the TypeTogether logo along with the various weights and styles of the typeface at the bottom of the poster.

Overall, I am quite happy with the end result, even though when I look at it now, I can see a lot of improvements that could have been made. What I really enjoyed during the competition, was not the end result, but rather the process of creating the poster and experimenting with techniques that I wouldn’t usually get to use. The Lisbeth brief for me personally, was one of the most fun and enjoyable projects I took on during my second year and left me wanting to do more similar work in the future. Although, I do understand that such briefs come rarely, I’m hoping to take more similar work in the future. Not promoting typefaces particularly, but rather design work that allows me to use my own personal style and gives me space to try new things.

While winning the competition was a reward in itself, I was more excited about seeing my work first on the TypeTogether blog, and then days later, shared by Louisa Fröhlich herself on her personal social media account. As I haven’t produced much work outside of university so far, it was rewarding seeing my design living outside of the bubble of the university and in the real world. Only thing I can hope for is more Lisbeth poster competitions in the years after graduating.

Degree Show 2018 RJ00207

Brief

The degree show is an annual display of work by the undergraduate and postgraduate students at the Department of Typography & Graphic Communication. Traditionally the MA and BA programmes would send out separate invites. However, this year the brief was to combine the shows. A print invite would be mailed and an email will also be sent out later to remind invitees of the event. Additionally, the degree show required online presence to generate buzz as well as a point of reference for students’ work – this included a website and social media campaign.

Deliverables

  1. A print invite that is in a format suitable for post and that would give incentive (in terms of content and quality of design) to come to the show
  2. An email invite created and sent via MailChimp based on the print invite
  3. A simple visual identity for the degree show, including a name
  4. A website with information on the event as well as students’ work
  5. Social media campaign/event

Schedule & Team

The degree show dates were: 7th June 2018 (Private view), 11th – 16th June 2018 (Public view).

A team was formed in early October 2017 comprising of four members: Sigrid, Callum, Emmeline and Caroline. An initial deadline for the print invite was set for end of spring term (23rd March). However, this eventually shifted a month later, to 23rd April 2018. Two weeks later the email invite would follow. The website also needed to be completed before the invites were sent out (around mid-May) and the social media campaign would start around April to build a following and awareness.

Designing

In the beginning of the project, everyone put out potential concepts and ideas for the degree show. Because the degree shows combined the MA and BA programmes (with the exception of MA Type Design), we needed a solution that would allow our work to mingle but simultaneously distinguish the MAs from the BAs. Several approaches were considered for example, typographic, abstract graphic and symbolic (using icons). During this time we also looked into past solutions from the department as well as what students from other colleges/universities had done that we enjoyed. Eventually we decided on an information design approach which would allow the flexibility of distinction between programmes, while presenting the graduating class as greater than the sum of its parts. We also wanted to include a personal quality to the invite, somehow reflecting each person’s experience of the degree, and for it to have a dual-quality of formally inviting people yet being an informal piece of information design.

Print

A3 was the format chosen for the degree show invite as we wanted it to be a poster of reasonable size that we could still mail out. Going into C5 envelopes, the degree show invite would be folded twice into A5. This influenced the design as we had to take into account the fold lines (not putting text along the folds and not using a reversed out design due to cracking ink). The print invite went through several iterations and refinement.

The degree show invite is a representation of the graduating class from the MA Information Design, MA Creative Enterprise, MA Book Design and BA Graphic Communication programmes. We created a survey to gather responses on people’s experience and thoughts on the degree, which would then feed into the design of the invite. We did extensive research on data visualisation techniques as well as approached our tutors and lecturers in the department for feedback and advice.

Degree Show draft designs

We also considered using a typeface designed by alumni from the MA Type Design programme in order to further encompass the department’s specialties. However, the incompleteness of the typeface we had access to affected our decisions and we used Googlefont’s Noto Sans for the final design.

Invite front design process showing the changing identity and approach.

The front of the invite was an opportunity for us to explore interesting reveals with the (un)folding. It was also an opportunity for us to put down the names of the graduating class as information in this space was less crucial than the inside page. We included a map to the department indicating parking availability and instructions for getting permits. This was also redrawn to match the style of the invite overall.

Our colour scheme altered as the project progressed as we moved towards the possibility of spot colour printing. This simplified our colour scheme, stripping it down to three colours – lime green, jean blue and black. Suprisingly this helped the design look more cohesive and worked for the better in the long run.

Layout refinements and experimentation
Final invite

MailChimp

The MailChimp invite had a dual function – to get invitees to opt into being emailed again next year due to a recent change in EU laws regarding information and privacy. This was the primary call to action. The secondary call to action was to RSVP to the show. We combined these call to actions as a single button.

The MailChimp invite echoed the printed invited but stripped it down significantly to provide only the essential information.

Website

The website uses the Bootstrap framework and is responsive. In keeping with the concept of the print invites, we created a randomised display of people’s works so that no one persons’ work is prioritised.

To collect people’s work, we created a submission point using php that formed a database of people’s work that gets called and displayed according to their names. This eased the process of getting students to upload their work and ensured that communication was as clear as possible between the team and students.

PHP Submission form with instructions on how to submit work, ensuring clear communication between the team and students.

 

 

Social Media Campaign

Our Instagram account was created to feature students’ work and process images of the degree show. We wanted the social media to reveal more detail about the work behind the degrees that every student completed and is suitable because of the informal nature of the platform. We also used hashtags to increase our visibility and reach.

Instagram posts to increase engagement with the degree show

Lessons

Through this Real Job, we learned the advantages of working together with team members of different strengths. Having someone on the team dedicated to the website and another person leading the print design allowed the team to focus on each deliverable. Frequent feedback sessions with different members of staff each time also allowed us to push the design further as we would get fresh eyes on the material.

However, a lengthy project that has a similar deadline to our dissertations meant that we lost stamina over the course of the project. If we did this project again, we would have avoided delaying the print job by a month and more fully exploited the possibility of printing in spot colours. This would have contributed to a more vibrant print design that people would be more likely to keep.

On the website, we also learnt that no matter how simple you try to make things, people will still upload things wrong and there needs to be leeway for extra time to fix and edit their mistakes.

Overall, this was an enjoyable project with deliverables that many of the graduating class are eager to keep for themselves. Working in a team also taught us to learn to trust each other and give each other feedback. The reception to the invites have generally been positive from both the graduating class as well as members of staff; we look forward to seeing the fruits of our labour at the final degree show.