WORKING WITH COLOUR - Abstract cities
- Christine Griever
- May 3, 2023
- 18 min read
Create a series of 10 abstract designs in which you balance blocks of subordinate, dominant and accent colours. These designs are going to be used as covers for guidebooks to the following cities:
Madrid Malmo Managua Manchester Manhattan Marrakech Marseilles Melbourne Montreal Mumbai
The books are going to be A5 landscape (210mm x148mm) size. You can use as many colours as you like and need to include the name of the city – where you place this and its colour are also important decisions to make. You may want to find out more about each city to help you develop your colour palette and also the size, shape and positioning of the colour blocks. Explore your DTP packages further by creating the artwork in the different software packages you have to experiment with the possibilities and ease of use. You can also do this exercise on paper using coloured blocks that you can cut and move about. Make notes in your learning log as you research and create your designs.
Analysis
Using the 10 cities as a basis, create 10 designs. Using blocks of colours, the design should be abstract with subordinate, dominant, and accent colors. As long as I use the A5 landscape format, I am free to use as many colours as I want in the guidebooks. Each guidebook has to feature a cover with the city's name, a colour palette, and colour blocks sized and shaped appropriately.
Keywords
Abstract
Blocks of colour
A5
Colour palette
Name of city
Subordinate, dominant and accent colours
Abstract
My first step before starting on the designs is to make sure I understand what abstract actually means.
"Abstract art is art that does not attempt to represent an accurate depiction of a visual reality but instead use shapes, colours, forms and gestural marks to achieve its effect" Tate, 2022
The word abstract refers to the separation of things from one another.
A simplified or schematized object, figure, or landscape can be used as the basis for this type of art style.
It is also applied to art that uses forms, such as geometric shapes or sweeping brush strokes without referencing an external visual reality, it is also considered abstract art. Artists of this ‘pure’ abstraction have preferentially used the terms concrete art or non-objective art; however, abstraction is generally used across the board and the distinction is not always clear.
There is often a sense that abstract art stands for virtues such as order, purity, simplicity and spirituality, and that this gives it a moral dimension.
Abstract art has been a central stream of modern art since the early 1900s. (Tate, 2022)
An example of abstract art from Piet Mondrian
Fig. 1 New York City 1 (1941)
Recently there has been debate regarding the display of the artwork, see article link,
A design that I am trying to design for doesn't have to be squares or straight lines, I can experiment with various shapes, curves, and opacity.
Click on the image below for more examples of famous abstract art.
Subordinate, dominant and accent colours
This is a productive method of choosing colours that depends on the use of subordinate, dominant and accent colours. This method provides a contrast and structure with nearly infinite options.
A logical way of beginning the process is to choose a dominant colour that compliments the design or message, followed by one or more subordinate colours that compliments the dominant colour. The accent colour can be added but used sparingly to provide visual detail. This combination will provide colour harmony to the design. (Sherin, 2012)
Fig.11 Colour Combinations (2007)
Culture of Colour
Due to the diversity of countries represented in this brief, this is such a unique exercise. In order to gain a deeper understanding of how colour is perceived in cultures, I decided to examine the significance of colour in cultures. My research focused on the symbolic interpretation of colours.
Colours can be perceived differently depending on their context. Certain colours are also associated with symbolic and ritualistic meanings. There are certain colours associated with holidays such as orange and brown for Halloween and red and green for Christmas, and there are colours associated with causes such as pink for Breast Cancer Awareness.
"Colour symbolism is often a cultural agreement, and opinions about the associations are varied and sometimes conflicting". (Adams, 2017)
Different countries have different customs when it comes to colour. The designer must also take into account alternative cultures, including religion, class, gender, and age groups, as well as the cultural perspective on colour that varies between cultures. In order to avoid offending the client and avoiding ill intention, designers must thoroughly research how these colours are used.
(Opara and Cantwell, 2013)
In order to illustrate how different countries, cultures, and religions perceive colours, I created a colour wheel diagram. I thought about the colours associated with mourning and death as one example. Western cultures associate black with mourning and funerals. Some South Africans use red for mourning, Latin Americans and Thais use purple for mourning, Iranians use blue for mourning, Egyptians use yellow for mourning and East Asians use white for mourning and death. From this experience, I learned that coming from a western culture where black would be appropriate for a funeral, it would be totally inappropriate in an Eastern Asian culture where white is the colour of mourning and death.
I have outlined my research below in a diagram.
Fig. 12 The Cultural Significance of Colour (2022)
Madrid
When I think of Madrid, the first thing that comes to mind is Spain's flag and the colours red and yellow.
"Designers can take cues from these colour palettes to create affinity, as well as discord, with their designs. Nationalism is often strongly associated with flag colors and is therefore a key factor in inherent color meaning for many people". (Adams, 2017)
Fig. 13 Flat Square Spain Flag (2022)
Every one of the ten cities was represented by a moodboard. A sense of the national colours is conveyed by including the flags of all the countries on the boards. Skylines were included because I thought this might inspire an abstract element. My colour palette is created using photos and images of the cities, food and architecture to see if there is a common colour that appears repeatedly. I also examine the types of typefaces used on advertisements, in Google searches and on Pinterest to see if there are any preferences for sans serif, serif, script, or decorative typefaces. My designs also include illustrations from Pinterest.
The moodboard for Madrid can be found by clicking on the image below
My moodboard for Madrid was inspired by images and photographs of food and architecture that featured warm colours like reds and oranges. My colour palette had to be built around this. Due to its use of red and orange colours along with some cool colours, I chose this image for my colour palette.
Fig. 14 Bright Spanish Tiles Fabric (2022)
Using Adobe colour wheel online, I played around with the cursors to find a balance between the colours in this image. As I moved the colours around, this palette emerged.
I began to organise this palette into the blocks of colour for subordinate (red) dominant (orange) and accent (green-blue)
For the abstract element of the design and also for the cool colours that complement my colour palette, I was inspired by the Arganzuela Footbridge in Madrid. The design was created using Adobe Illustrator. To create the curved triangles, I traced over the metal structure using the curvature tool.
Fig. 15 The Arganzuela Footbridge in Madrid, Spain (2022)
The serif typeface was popular when I researched typefaces. Below are some serif typefaces I used to find the right feel for my Madrid theme. Since serif fonts are overused, I wanted to go for a fun, quirky typeface that represented Madrid as fun and quirky. The exaggerated stroke widths of the Barrio typeface make it quite effective.
This cover is the result of combining all of these design elements.
Fig. 16 Abstract Cities Madrid (2022)
Subordinate colours are embellished with darker shades of red from my colour palette. To draw attention to the dominant colour and the curves of the design, I traced the footbridge pattern using the curvature tool in Adobe Illustrator. The 3D effect was achieved by using a drop shadow. I used cool accent colors to highlight and give some detail to the footbridge's design and shape. In order to achieve the shape of the footbridge, I used the type on a path tool to curve the text.
Mockup
Fig. 17 Abstract Cities Madrid Mock-up (2022)
Malmö
Having never heard of Malmö before, researching this was a very interesting experience for me.
Using the same method as Madrid, I created a moodboard made up of photos, illustrations, landmarks, food, and typefaces.
In spite of Sweden's iconic blue and yellow colour palette, I wanted to research if it would change for Malmö's mood.
Fig. 18 Flat Square Sweden Flag (2022)
Click on the image below for the moodboard for Malmö
A moodboard for Malmö that I built was inspired by patterns and abstract ideas derived from photographs of the Turning Torso that included lots of cool, pastel colours like sky blue, cyan, and a touch of dark navy blue.
Fig. 19 Scandinavian seamless pattern Swedish folk art (2022)
I uploaded this image to Adobe colour wheel online to play around with the cursors to find a balance of the colours. After moving the colours around I settled on this colour palette.
I began to organise this palette into the blocks of colour for subordinate (light blue) dominant (orange) and accent (Navy blue)
Since the Turning Torso in Malmö is so unusual, I was inspired to create an abstract element of the design based on it. As the colour palette was being designed, I decided to break up the Torso into patterns and incorporate them.
Fig. 20 City Series- Malmo (s.d)
I created two versions for this design, one with a white background and one with a light blue background. I used Adobe Illustrator for the design. I used the curvature tool to trace over the turning Torso structure to produce the curved lines to arrange the composition to allow for the typeface to go in-between the deconstructed Turning Torso. I also used the pen tool and curvature tool to trace the patterns, deconstruct them and play around with the scale.
Fig. 21 Abstract Cities Malmo- White background (2022)
I think I prefer the white background as it gives a cleaner look, however, to keep in line with the brief, I decided to use only the colours on the colour wheel. As white is a neutral colour I felt it was taking over the subordinate colour of the light blue and cyan.
Fig. 22 Abstract Cities Malmo- Sky blue background (2022)
While researching the typefaces I noticed that san serif typeface was popular. It was simple, clean and bold. I used a range of san serif typefaces below to find the right feel to go with my Malmö theme. I liked the sans serif typefaces and decided to keep to that look because it was clean and more modern. I experimented with a few sans serif typefaces, until I came across Century Gothic, it was clean-looking without looking too bold but also because the letter "a " was different and also the capital "M" to the rest of the typefaces. The "M" had a slant while all the others were straight.
Mockup
Fig. 23 Abstract Cities Malmo - White background Mock-up (2022)
Fig. 24 Abstract Cities Malmo - Sky blue background Mock-up (2022)
Managua
Managua is another city that I was not familiar with. Researching the city led me to discover it's in Nicaragua, a colourful central American country.
Fig. 25 Flat Square Nicaragua Flag (2022)
Click on the image below for the moodboard for Managua
While researching Managua I was very interested in designing something around their "Trees of life". The curly tree patterns felt like a good starting point for the design.
Fig. 26 The trees of life (2013)
I developed a colour palette from the colourful fabrics and the tree of life photos.
Fig. 27 Colorful fabrics: an essential element of traditional Nicaraguan clothing (2011)
Using this image I used Adobe colour wheel to play around with the colour combination I wanted.
While I was using this colour palette in the development of my design, the green colour was looking to dull and I needed to lift the vibrancy, so added more tint in Adobe Illustrator to the original green to come up with this colour palette.
Fig. 28 Abstract Cities Managua (2022)
This design took some time as the colours that I originally choose didn't contrast very well and the overall look was dull. Managua is colourful and vibrant so I had to add more tint to colours to lift the design. I took the abstract elements from the tree of life and enlarged it to cover most of the page. The tree trunks were used as a background shape and used horizontally to place the city's name. The colour of the text was orange, but again the white colour lifted the whole design.
The typefaces were harder to find than the previous cities. My research seemed to find decorative typefaces and script. I experimented with sans serif, serifs, script and decorative typefaces. I decided that the serif typeface didn't work with the curly trees I had created. The Gigi typeface although was "curly" it looked too much with the abstract trees. I eventually settled on Eras fonts but experimented again with weights. Finally the Eras medium font was the best because the "a" seemed to work well with the design of the trees.
Mock-up
Fig. 29 Abstract Cities Managua Mock-up (2022)
Manchester
Although I lived in the UK, Manchester was not on my list of cities to visit. I thought living in London at the time was fine, everything I needed was there. However, while researching and scratching beneath the surface, Manchester had more going for the city than I thought (although the weather is still grey) researching brought some surprising treasures.
The architecture interested me in this city.
While researching, I looked more at the skyline to gather some inspiration to make the design more abstract.
Fig. 30 Flat Square UK Flag (2022)
Click on the image below for the moodboard for Manchester
I decided to take the image of the skyline below and trace using the curvature tool in Adobe Illustrator then rearrange it along with the text.
Fig. 31 Manchester cityscape illustration (2022)
Fig. 32 Manchester (2017)
I choose this image to base my colour palette on, as my immediate thought when thinking of Manchester was muted colours. I uploaded the image to Adobe colour wheel to produce a colour palette.
My colour palette based on subordinate, dominant and accent colours.
For the Manchester design I used the very muted subordinate colour for the background and used the greens as the dominant colours. I wanted to use the red accent colour for the text. I traced the skyline in Adobe Illustrator and grouped the images in sections so I could move them around. I broke up the Manchester text by placing the three sections vertically and horizontally to give a different aesthetic.
Fig. 33 Manchester (2022)
While looking at the typefaces for Manchester, I came across many different looks. Mainly script typefaces were used for a sophisticated look and a mixture of serifs and sans serif typefaces. I decided that I would experiment with two typefaces for this design, Century Regular for the rearranged text and Best Time for the main text. I used the stroke on both typefaces to emphasize the text as without it the letters got lost, since everything had a stoke in the design already. I also experimented with different scales for the letters to see how this would work and placed them vertically and horizontally.
My final choice was Century regular and best time typefaces for the design.
Mock-up
Fig. 34 Abstract Cities Manchester- Mock-up (2022)
Manhattan
Bold, in your face and bright contrast colours is my vision of Manhattan.
Fig. 35 Flat Square USA Flag (2022)
Click on the image below for the moodboard for Manhattan
Fig. 36 Times square night 2013 New York city Manhattan (2013)
I choose this image because this encompasses the vibe and life of Manhattan, lots of people, lots of bright colours and buildings, tall and dramatic. All good elements for a design.
Like with all my other covers I uploaded this image to Adobe Color Wheel. I'm aware that I could sample colours and make a colour palette in the Adobe programs, but with Adobe colour Wheel I can see all the colour wheels like complimentary, analogous or monochromatic, play around with them and also see what's trending to create a theme.
With this colour palette, I was apprehensive about using a dark colour. I had this same problem with Malmo earlier with the white background. I decided that this time I would take the risk and go for it!
At first glace I though this was a bad idea, but I persevered with the palette and decided to see how it would look in a design.
Fig. 37 Abstract Cities Manhattan (2022)
I used Adobe Illustrator to trace over elements of the photograph (Fig.36) using the pen and curvature tool. I then added in lines with a different stroke width profile to give the lines a feeling of perspective looking at the blue buildings. Instead of having square windows I changed the direction by grouping the squares together and rotating them to look like diamonds.
Fig. 38 The most fun time of the year (2022)
I first came across this advert (Fig. 38) while doing research for my visual diary. I remembered it and liked it because the empty spaces in the letters had blocks of colour in them. I thought that this idea was a good fit to give my design the accent colours, so now I could put the colours in the text.
The typefaces I researched for Manhattan all were script based and I still wanted to go with this look, I experimented with the script typefaces above, but they weren't quite right. The Fredly typeface was right for the filled accent colours but not quite right for the more edgy look for Manhattan.
I eventually went with the White Angelica typeface. In Adobe Illustrator I converted the text into an outline and increased the stroke. Once I had done that I extended the letter "M" , "T" and "N" to give it a more dramatic look. Then filled in the letters with the red accent colour.
Mock-up
Fig. 39 Abstract Cities Manhattan- Mock-up (2022)
Marrakech
Just like for Madrid, my immediate thought of Marrakech was warm colours like red, orange and yellow.
Fig. 40 Flat Square Morocco Flag (2022)
Click on the image below for the moodboard for Marrakech
Fig. 41 Spices on a Moroccan Market, Marrakesh, Morocco (2022)
I was drawn to this photograph (Fig. 41) because of the shapes of the spices and the colours. However, I was also inspired by this photograph (Fig. 42) because of the cobalt blue colour, and I somehow wanted to incorporate this into my design, as it's contemporary and used in a well known landmark (Jardin Majorel) in Marrakesh.
Fig. 42 Exotic Garden with cacti and colorful blue-yellow villa with an unusual geometry of construction. Jardin Majorel in Marrakech Morocco (2022)
I used the photograph in Fig. 41 to create my colour palette.
I then created my subordinate, dominant and accent colours.
The typeface I wanted to use had to be Arabic-looking to go with the overall theme of Marrakesh.
I liked the Arabic Ramadhan typeface because I felt that it was the right style, that would work with the design I had in mind.
Fig. 43 Abstract Cities - Marrakesh (2022)
While designing this cover I experimented with the triangles because of the photograph in Fig. 41. However, when using a solid colour it looked very harsh, I wanted a softer look to represent the spices and used the gradient tool in Adobe Illustrator to create the effect. I also used this same effect on the circle border by arranging the shapes either backwards or forwards by overlapping them. I used the width tool to expand the line under Marrakesh. Overall I was happy with the gradient and opacity settings I used.
Mock-up
Fig. 44 Abstract Cities Marrakesh- Mock-up (2022)
Marseilles
My first thought of Marseilles is sitting by the sea, French wine and good food. Warm pastel sea colours of yellow and blue.
Fig. 45 Flat Square France Flag (2022)
Click on the image below for the moodboard for Marseilles
Fig. 46 Marseille, France 2022: Best places to visit (2022)
The photograph in Fig. 46 summed up the summery laid-back feeling, with boats bobbing up and down in the water. It gave me ideas of a pastel palette.
Even though I was going for the pastel look, I do like the bright red, and think this might work well as an accent colour.
The typeface research was a mixture of script and delicate sans serif typefaces. I experimented with some below.
This typeface (Schoolkid Light) was too script and doesn't quite match the theme.
I decided that the script/handwritten typefaces matched the pastel palette, and choose the freestyle Script because of the rounded look.
For the design for Marseilles, I used Adobe Illustrator to trace elements of the buildings.
Fig. 47. Abstract Cities Marseilles (2022)
The awnings from the cafes had the red accent colour, so I decided to use them as an underline for the Marseilles text, which I also used as an accent colour. In previous covers I used a stroke weight around the shapes, in this design I decided not to use a stroke as I wanted to keep the pastel colour effect, as the accent colour is already quite bold.
Mock-up
Fig. 48 Abstract Cities Marseilles Mock-up (2022)
Melbourne
Vibrant, summer, food and sea.
Fig. 49 ) Flat Square Australia (2022)
Click on the image below for the moodboard for Melbourne
Fig. 50 MELBOURNE TRAVEL GUIDE with budget itinerary, The Poor Traveler Itinerary Blog (2019)
The design for Melbourne was so difficult because when I put together the colour palette based on the image (Fig.50) I just could not get the colours and composition to work. The colours vibrated and looked too harsh.
I abandoned this design (Fig. 50) and tried again with another photo.
Fig. 51 Melbourne tram terminus upgrade complete, Rail Express (2020)
I choose this photo because it was green and felt that green was a good colour palette to use. I also like the geometric patterns on the tram and thought that extracting a theme from this image would work quite well. I also had ideas of using the stars from the flag to somehow fit in with the patterns.
The typeface for Melbourne had a combination of script and serif typefaces. I decided to look at decorative typefaces because the design is funky and needs a quirky typeface to go with the theme.
The Kangaroo typeface worked well, I liked the shadow effect which is transparent so the green hues can show through in the design.
With the range of green colours, I was thinking that changing the opacity of the shapes and overlapping them would create a good composition.
Fig. 52 Abstract Cities Melbourne (2022)
Mock-up
Fig. 53 Abstract Cities Melbourne-Mock-up (2022)
Montreal
Montreal's first impressions are cold, Autumn and winter colours. A cool Palette with touches of reds and oranges.
Fig. 54 Flat Square Canada (2022)
Click on the image below for the moodboard for Montreal
Fig. 55 Old Montreal (2022)
I choose this photograph for inspiration for my design as it is quintessentially Canadian and one of the first image's that comes to my mind when I think of Montreal. I like the cool blues and the oranges and reds from the leaves. I think that this will make a good colour palette.
I wanted to get in hues of blue and orange.
I added the white, because I want the text to stand out more on the design.
With this design I used circular shapes for the trees and overlapped them with varying opacities, I replicated the buildings in the background using the darker hue of blue but with rounded edges to compliment the circular look with the trees. I wanted to use a vertical composition for the text because I wanted to do something different from the rest of the designs.
Fig. 56 Abstract Cities Montreal (2022)
My research into the typefaces for Montreal was interesting, they all seem to have either script or decorative typefaces. My design is quite minimalistic and I wanted a typeface that was cleaner and decided to go with sans serif typefaces instead.
I decided on Neue Montreal because it is clean, bold and works well with the white and blue.
Mock-up
Fig. 57 Abstract Cities Montreal, Mock-up (2022)
Mumbai
Lots of people, lots of colour and food. I think of colourful clothing, hot weather and a busy, fast-paced environment.
Fig. 58 Flat Square India (2022)
Click on the image below for the moodboard for Mumbai
For the typeface I already decided that an Indian typeface was the only one that would give the design the Indian feel and go with the theme. There is a shortage of free to use typefaces that concentrate on the Indian theme.
I collected a few photographs for inspiration for this design. I deliberately choose brightly coloured images. I wanted to have green and orange in the colour palette because orange and green are synonymous with India to me.
Fig. 59 Mad for it in India’s ‘maximum city’: Culture, chicness and comfy beds in magical Mumbai (2022)
When I first looked at this colour palette, I thought it was bright, colourful and included the green and orange. However, when I tried to put this into a design, I just couldn't get the colours to work! I worked out that the colours were too contrasting and I needed to make a more subtle version. Without a photo this time I created the following colour palette.
Still with green and orange, I muted the yellow and removed the pink.
I changed course and decided to create a pattern with these colours based on the design for the Indian Premier League cricket team, Mumbai Indians.
Fig. 60 Mumbai Indians Logo (2022)
Fig. 61 Abstract Cities Mumbai (2022)
I used the distort and transform and the twist effect. I exaggerated the twisted angle and kept going. I then added a drop shadow and added the text on top.
My subordinate colours were the green and blue, the dominant colours the yellows and oranges and my accent colour was the red.
Mock-up
Fig. 62 Abstract Cities Mumbai, Mock-up (2022)
Critique
I showed the final guidebook mock-ups of all 10 abstract cites to various groups of people. I asked them to identify for each guidebook the subordinate, dominant and accent colours. They were all easily identified. The favourites were Manhattan and Mumbai because they seemed to capture the essence of those cities and the least favourite was Melbourne because it was too muted.
Reflection
My capabilities were really stretched by this project. My research took some time since I wasn't entirely sure what abstract meant. There is no requirement for abstract to be realistic, for example a simplified version of a building could be abstract.
The next challenge was to incorporate subordinate, dominant, and accent colours into my design. The concept makes sense, but I found it more challenging than I expected to put together a colour palette. The process might have been easier if my colour palette had been simplified to three colours. My palette included five colours because I wanted to add some depth to my designs by using monochrome hues. The second challenge I faced was choosing the proportions for each block of colour. Even if a color is dominant, it may not be proportionately used.
Despite this being a brief about the city, I wanted to gain a little background knowledge about what colour means to various cultures. It was important to me that I develop the habit of looking at culture and colour before choosing a colour palette.
It was necessary for me to watch more Adobe Illustrator tutorials in order to create the designs. Through Skillshare, I watched videos and followed tutorials. By doing so, I was able to gain a greater sense of confidence when using Adobe Illustrator.
For this project, Adobe Illustrator was the best programme because I was creating abstract images. I did try Adobe Photoshop, but it wasn't giving me the results I wanted. Adobe Illustrator was the best programme to use for this project.
Overall this project took a long time to complete, but I did learn the importance of using colours and how putting them into abstract blocks can make you think about the composition when you add typography, colours and shapes.
References
Comments