visual_language

All posts in this category.

Visual Language – City Branding

The first time I visited Andorra, a small sovereign situated between France and Spain, I was shocked by the fact such a small and unknown place exists, being what you might call ‘under the grid’. Andorra during winter time, is home to some of the best snow in the area, but with that being said, it is nothing like other over-priced, over-rated, tea drinking in the evening spots for snow lovers, rather it’s all about riding hard, and partying hard, and so this is how my love story with Andorra La Vella starts.

1688714_10153871020490531_628079916_n
Snowboard trip to Andorra during 2012
  • Step 1 – Analysis:

Andorra La Vella is home to 22,000 residents and is the highest capital city in Europe rising at 3,356 ft. During the summer time, it enjoys very warm weather for a short period which changes to very cold winters and what makes Andorra especially worthwhile, it’s unbelievable snow and wide mountain ridges, which are nothing short but paradise for ski and snowboarding.

That being said, in terms of design, branding, and visual language, Andorra hasn’t really used its strengths to build itself a ‘brand’ , which might be one reason for why it’s remained relatively unknown.

25

To illustrate the aforementioned point Andorra La Vella’s current logo

comuandorra

  • Conceptualisation:

After some research and identification, here are some of the problems and ideas the new logo (and visual language) needs to emphasize:

  1. Use Andorra La Vella’s breathtaking mountain view which is also its biggest selling point, snow. With that being said, also try to speak the visual language patterns found in other snow wear, skiing resorts and snow related design.
  2. Refresh it’s current identity to a younger, more modern and bolder design.
  3. Being that Andorra is a sovereign that has several cities and regions, devise a design that could be modular to serve other areas in Andorra.
  • Execuation:

As I started examining related snow related design, I decided the design for Andorra must feature it’s breathtaking Pyrenees mountain ridge. I used vector drawing technique to outline a mountain ridge stencil.

screen-shot-2016-10-22-at-23-56-44

For the typography, I wanted to include a heavy, geometric Sans-Serif font for the first part of the name (i.e Andorra), and have the second part of the name in a different font. The main reason for this is both a design decision, but also a modularity concern, as Andorra is the name of the sovereign, but every city has a different add-on name, the logo could be used as an arc design language for every city. Fonts used are Simona Sans-Serif and HucklebuckJF for the script.

screen-shot-2016-10-23-at-0-04-42
Example shows Andorra La Vella, and Pas De La Casa as two examples using the same modular design

The outcome logo

screen-shot-2016-10-23-at-0-09-29

After some thought, and research into other snow related design I found that emblem design is quite common, and decided it would make sense to have this logo in a badge (emblem) format as well for merchandise and specific uses and so went on to made this badge derivative of the logo

screen-shot-2016-10-23-at-0-11-50

To emphasize how the design could be used for more tactile applications I made a t-shirt (which are a very common city branding commodity), which features the city’s redesigned logo on the back.

screen-shot-2016-10-23-at-0-12-56

Visual Language – Business Cards

For this week’s assignment we had to come up with a visual language for ourselves and produce a business card design. This blog post is meant to describe the process of conceptualizing through execution, and lessons I learned along the way.

  • Conceptualising:

I started by examining design patterns I liked before, and stuff I created for myself before coming to ITP, but this time looking at everything critically with some tools acquired in this course. The following example, is a logo I designed for myself about a year ago:

penrose

This logo was inspired by penrose triangle,  a part of the impossible geometry group of shapes, conceived first by swedish designer Oscar Reutersvärd.

  • References and influences:

Before I actually started designing I took sometime, looking for inspiration, designs and studios that create designs I can relate to, so I can analyse the elements of design I would like to incorporate in my visual language

A list of influences:

http://www.stockholmdesignlab.se/

http://bunchdesign.com/

http://the-studio.se/

Here are some elements I discovered about myself while analysing reference designs:

  1. I like BOLD typography
  2. I prefer Sans Serif fonts, if the readability allows so
  3. In terms of colors I lean more to slightly under-starturated colors (very generally, case specific)
  4. I love minimalism, brutalism and a couple of other ism’s.
  5. I really like nordic designers in general
  • Designing:

After some time I started designing, I realised I want to tackle what I felt most uncomfortable with, before this course, TYPOGRAPHY.

carddesign
final card with grid

I actually started by font choice, in which I decided to use ‘Mr Eaves XL Mod OT’ . I tested some combinations of Serifs with Sans-Serifs but ended up going with the Sans Serif option altogether

screen-shot-2016-10-16-at-20-06-44
attempt at combining Serif and Sans Serif fonts
screen-shot-2016-10-16-at-19-50-25
the font I eventually chose

I then started to mix color combinations for the front & back, as I knew I want some sort of the contrast between them, but preferred a light contact information, and so ended up with a palette that looks like

color
‘why so serious’ color palette

I have a love-hate relation with ‘place holders’, but in this design process I used the well known (and arguably infamous) ‘Lorem Ipsum’ , text to decide about fonts. At some point after many try outs I actually had a ‘eureka’ moment and I figured a business card is somewhat of a place holder for me, it is ‘What I think I am’, ‘What I want to be’ and when the design is bad, ‘What I am totally not’. Following this point I decided to use the ‘Lorem Ipsum’ text in the backside of the card in a dark color combination with the background to create some sort of subtlety with the very ‘bold’ font choice and the amount of text.

backside
I would love to have had these characters extruded in print

For the front side, I chose to minimise the data to the very bare minimum and using slight color and size variations to create hierarchy

frontside

  • Printing (A.K.A why I hate Staples):

After completing the design, I was referred to Staples as a print house. I did they’re online graphic submission which was way to easy for such a delicate process, but given my very limited knowledge, looked pretty reasonable.

I ended up picking the cards only to find out the colors were misinterpreted in the print process, and I actually got an invisible back side, and print artifacts (smudges and stains to name a few).

20161016_202736

  • Lessons I learned:
    • Good designs take time, carful conception all the way to execution
    • Design never ends in design, you always have to prefect the medium too, if it’s cards, make sure they’re perfectly printed, USE THE MEDIUM.
    • I acctualy learned Illustrator (if that counts as a lesson)
    • Never force an idea, you might dislike your rushed execution while the idea might be very good
    • Always print a sample to see everything is good and sharp
    • Never go to Staples unless your shopping for Sharpies

 

Visual Language – Color

This week’s assignment is divided into two sections, test and a project demonstrating self expression with color.

Test Results:

screen-shot-2016-10-03-at-0-45-31
After taking the test I was rated 4 (in which 0 is the highest).

Self expression with color:

This week I chose to focus on a really private thing that has been happening in my life, as this has many implications in terms of color. Two month ago, I moved to NYC, and had to part with my partner (girlfriend), in which we decided we will do our best to maintain our relationship as a long distance one. After some adjusting, we started messaging each other ‘selfie’ images of our lives, as we go about during the day (our human version of emoji one can say), and before I realised this happened on multiple instances each day. While thinking about what kind of self documentation I can use for this week’s assignment I suddenly realised it was in front me all along, my very own documentary.

5 Tones of Emotion

header

I decided to pack together all of these images (plus the ones that will come as time passes) into a website (i.e ‘5 Tones of Emotion’), that analyses these self documentation peices of emotion, and come up with a 5 tone palette that represents the overall average most common tones found in the entire library.

screen-shot-2016-10-02-at-17-28-06

In creating the website I suddenly realised as most of the images contain a rather ‘warm’ palette of colors, it has a very calming effect when viewed as a library, and to the bottom of this point this whole project was a homage to my relationship with Katia, and a way for me to deal with absence through abstraction of data.

screen-shot-2016-10-02-at-0-49-07

I am not sure if this project is worth investigating further, but I would like to make the color analysing engine better, in ways it could possibly assume more based on parameters like color temperature, facial recognition and perhaps even opening the engine to users to analyse their own gallery of images.

The link to the website

 

Visual Language – Typography & Expression

For this week’s class the assignment was to express yourself through different type faces and uses of typography. I started by rounding all the typefaces I have already used and liked and began researching the different features and characteristics, discussed in class, that each of them has, in order to better understand why do I ‘Like a Font’.

  • My name in 3 Serif’s and 3 Sans-Serif’s:

I started with the Sans-Serif’s as I have had more experience choosing Sans-Serif fonts. I decided to use the following three fonts as each of them has different variations

screen-shot-2016-09-25-at-14-20-57

Modern Sans

modern-sans

Some of the features I liked about Modern Sans is it’s very geometric capital ‘O’ and ‘F’, I especially like the fact the lowercase ‘s’ is slightly angled on it’s axis.

Simona

simona

Some of the feature I liked about Simona are it’s Serif ‘like’ lowercase ‘l’, rather low crossbar seen in the lowercase ‘e’ and the contrast between these rather unique features to it’s overall geometric approach.

* Disclosure: this font was designed by a good friend, Ben Nathan, and I especially like it since it also has a hebrew set to it. Link to his website.

Avenir Next

avenir-next

Avenir, Cliché right? some of the features I like about Avenir Next are it’s geometric uppercase ‘O’ and ‘F’, it’s ascenders found in the lowercase ‘l’ and ‘h’ which span very high (actually rises above the cap-height) and the circular dot used in the lowercase ‘i’.

Big Calson

calson

Some of the features I like about Big Calson are it’s unique capital stress angles (e.g uppercase ‘F’), it’s high crossbar seen in the lowercase ‘e’ and especially the very subtle brackets connecting the bilateral serifs with the stems (e.g lowercase ‘r’, ‘l’ ‘i’).

Palatino Linotype

palatino

Features I like about Palatino Linotype are it’s round and subtle finial found in the lowercase ‘e’, it’s overall round Serif edges specially visible in the lowercase ascenders (e.g ‘l’, ‘h’), and the beak at the tip of the lowercase ‘r’ which adds a really nice yet subtle feature.

Bentham

bentham

Bentham has a very noticeable beak compared to Palatino especially in the lowercase ‘r’, I do like the contrast between the very pointy Serif’s on the bottom of the letters and the more curved one noticeable in the ascenders (e.g lowercase ‘l’).

Expressive Words:

Unisex

unisex

Tessellation

tess

Compression

compression

 

Visual Language – Principles of Visual Communication

For the first week’s assignment I chose to focus on one of my all time favorite mobile games ‘Monument Valley’.

giphy

The game’s captivating 2D-3D M.C Escher inspired impossible geometries, very subtle color palettes and challenging levels make it a very engaging game and one thats very beautiful to look at too. With that being said, let’s dive right to it.

  • The Cover:

monument-valley-game-house-cards-how-play-get-new-levels-free-beginners-guide

At it’s core the banner showcases some of the game’s most important features including it’s color palettes, the main character, typography and a hint about the game’s use of 2D-3D isometric* design through the character who is standing on a ramp. At first sight it might seem detached from the mountain’s perspective but makes a lot more sense after playing the game and familiarizing with it’s visual language.

* Isometric projection is a method for visually representing three-dimensional objects in two dimensions in technical and engineering drawings. It is an axonometric projection in which the three coordinate axes appear equally foreshortened and the angle between any two of them is 120 degrees. – Wikipedia

  • The Grid:

grid

The banner’s grid is based on three four main elements:

  1. Text – The game’s name portrayed in a very big font size that consumes about 2 1/5’s of the grid vertically and fills a substantial amount (70-90%) horizontally.
  2. Mountains – The mountains start with the word ‘Valley’ summing to about 4 1/5’s of the grid vertically and full width horizontally. They form a very centric approach with their symmetric alignment causing the eye to focus on the smallest piece in the banner.
  3. Character & Ramp The character on the ramp rises to about 2 1/5’s of the grid vertically from the bottom and placed exactly in the middle horizontally.
  4. Sky – The twilight skies are in essence the text’s background, therefore they consume the upper 2 1/5’s of the grid vertically and stretch at full width horizontally.
  • The Typography:

After examining the typography used in the banner with ‘WhatTheFont’ I found two font types that resemble the font used in the banner:

  1. XXII Sinoz DSP Thin

    screen-shot-2016-09-17-at-12-52-39

  2. P22 Underground Pro Demi

screen-shot-2016-09-17-at-12-52-54

With that being said it seems the character width on the banner is a bit more stretched and some character have these triangle add ons on each side (e.g ‘M’, ‘N’ and ‘U’).

  • The Colors:

The banner (and in the same respect the game) uses a pastel, organic and very subtle color scheme and palettes. This alongside the game’s use of isometric and flat 2D-3D monuments offer a very unique visual experience that blurs the line between 2D and 3D, yet still feel very natural.

screen-shot-2016-09-17-at-12-58-17
Analysis of the banner’s color scheme
  • The Use of Space:

The banner uses a very symmetric and centralized focal point. Moreover the use of the character’s color (essentially a B&W silhouette), pushes viewers to focus on the center rather than on the edges of the image. In contrast, the use of gradients throughout the back elements (i.e mountains and the sky), helps smooth the transitions between them and also makes the importance hierarchy in the banner more visible – Text & Character in the front, Mountains & Skies in the back. By highlighting the placement you get a really good sense of the composition.

space