26.10.2021 - 23.11.2021 (Week 10 - Week 14)
Chung Yi Ki / 0345014 /
BDCM
Design Principles
Project 3
Main menu
Sub-Menu (Tasks)
Lecture
Week 8 / Visual analysis
Visual literacy
Visual literacy means to criticize, analyze and evaluate visual mediums
academically.
Visual analysis
Visual analysis is an important part in visual literacy. It is the method of
understanding a design in terms of visual elements and design principles.
Its purpose is is to recognize and understand certain choices a designer
make in their work and also to better comprehend how the properties of
design are used to communicate ideas, content or meaning in a visual
format.
By practicing visual analysis, we will be able to sharpen our critical
judgement skills and learn how to seek out answers from analyzing rather
than taking in information passively.
The three phases in visual analysis
Phase 1: Observation
Closely looking and identifying the visual elements used in the design.
Then proceed to describe them carefully and accurately. It is important to
not assume what you know about the design during this phase.
Phase 2: Analysis
Making statements about the design work based on the observations done
in phase 1. Think about how the visual elements are used to complete the
design and the effect they have on the viewer. Note down how the design
principles are applied in the design.
Phase 3: Interpretation
Combining information from phase 1 and 2 with facts about the design
and historical context of it. Think about what is the meaning and
purpose of the design work.
Tasks
Instructions
Final project
For our final project, we are tasked to write a 500 word visual analysis on a
design work of our choice. The visual analysis have to follow the three phases
discussed in the lecture. After that, we then need to produce a design work of
our own which is inspired/influenced by, or as a reaction to the artwork that
we studied on. The design should be in either A4 or A3 size and a 150 to 200 word rationale should also be written about the
design that we produced.
Part 1: Visual analysis
When I was thinking what design work should I analyze on for my final project,
I suddenly thought of neon designs and that's when I came across the Crypto
Cats poster in Fig 1.1. I think neon posters/illustrations are always fun and
mesmerizing to look at, and Crypto Cats is exactly that. I've never done
anything related to neon style before so I think this would be a good
opportunity for me to study and try my hands out in creating it.
Read the final visual analysis in the PDF file below:
Part 2: Design
Visual research
I want to depict that cryptocurrency is like a chess game. It's a highly
strategic game where you manipulate your opponents in order to win, similar
to cryptocurrency trading. While cryptocurrency trading is manipulated by
the influential and wealthy, anyone can challenge the masterminds if they
think they have a good enough strategy. And so, I went to look at some
images on chess pieces and their rankings.
|
|
Fig 1.1 Standard chess pieces Source: https://www.smithsonianmag.com/arts-culture/how-the-chess-set-got-its-look-and-feel-14299092/ |
|
|
Fig 1.2 Low poly wireframe chess pieces Source: https://www.creativefabrica.com/product/low-poly-wireframe-chess-pieces/ |
As seen in Fig 1.1, chess pieces has delicate details and I noticed that the height of each piece is different and follows a descending arrangement. But I wanted to use a cyberpunk neon theme for my design so a delicate structure won't be the best way to go. I wanted to keep the structure of the pieces simple and that's when I came across Fig 1.2 which illustrates the chess pieces in a simple polygonal form. So, I decided to go with that direction for my design.
|
|
Fig 1.3 Chess pieces icons Source: https://www.chess.com/terms/chess-pieces |
I also wanted to find a way to combine different cryptocurrencies logo
with different chess pieces. I then thought of using the iconic
characteristics of each chess pieces to indicate which piece it is.
Based on Fig 1.1 and 1.3, the cross symbol would clearly represent the
king; the crown spikes represent the queen; the rook's cap/structure
of the rook represents itself; bishop with its head piece; knight with
its curvy shape and pawn with its short height.
|
|
|
Fig 1.4 Value of chess pieces Source: https://www.quora.com/How-many-points-is-each-chess-piece-worth |
I then thought of using the chess pieces to represent the ranking of
different cryptocurrencies. Since there's 6 different pieces in chess,
I decided to focus on the top 6 cryptocurrencies ranking. According to
Forbes, the top 6 cryptocurrencies ranking in November 2021 is Bitcoin,
Ethereum, Binance Coin, Tether, Cardano and Solana. Fig 1.4 shows the
ranking of each piece by value, the king being the first and the pawn
being the 6th.
 |
| Fig 1.5 Logo of the top 6 cryptocurrencies (Source from Google) |
And of course, I went to search for the logo of the aforementioned top
6 cryptocurrencies.
Idea exploration
Sketches
|
| Fig 2.1 Rough sketch of idea |
In this sketch, the chess pieces represents the top 6 cryptocurrencies
(from right to left) and the disembodied hand gestures give a menacing
feel that makes the viewer feels like that they're likely to lose the
game. A laser grid will be used at the bottom to act as the
chessboard.
|
| Fig 2.2 Sketch of crypto chess pieces |
I then sketched out the crypto chess pieces again to have a clearer idea
on how they would look like and also to guide me on simplifying it later
on.
|
| Fig 2.3 Reference picture for hand gesture |
I also took a picture of my hand for me to trace in the sketch in Fig 2.1 and also in Adobe Illustrator later on when I'm digitizing the sketch.
Digitization of sketch
|
| Fig 3.1 See-through hands without colour fill |
|
|
Fig 3.2 See-through hands with colour fill |
|
| Fig 3.3 Opaque version of hands |
I then proceeded to digitize the sketch using Adobe Illustrator as it would be easier to create a neon effect and symmetrical graphics. I used cyan and magenta to bring out the cyberpunk feel and kept the colours limited and most of the things in outline to bring out the digital neon feeling. I changed the arrangement of the chess pieces to look like as if the viewer is currently playing chess with the disembodied hands because I thought the arrangement in Fig 2.1 is too stiff. I then tried out two different version of a semi-transparent hand look and also an opaque look to see which might work better.
|
|
Fig 3.4 Moves of each chess pieces Source: https://elzr.com/blag/chess-pieces/ |
After receiving feedback from Dr. Charles, I went to check on how each chess
pieces move as I'm planning on rearranging the chess pieces in my design
based on how they move.
|
| Fig 3.4 Rearranged chess pieces and change of sizes |
After that, I made some changes on my design by first changing the
perspective of the chess board and chess pieces and included two of the
viewer's chess pieces which are coloured in yellow. All 6 chess pieces are
still shown on the laser grid chess board, but now they're arranged in a way
where the viewer's king has nowhere to escape. The viewer is in a loosing
game even when they have a knight left. The hand is resized to be smaller
and more faded at the bottom but sharper at the top to create a feeling that
the hands are emerging from the background. I also added some sense of depth
by blurring the opponent's king which is further away and the queen which is
slightly further from the viewer's king.
Details of the arrangement of the chess pieces:
- The rook can directly capture the viewer's king by moving forward in a straight line.
- The pawn can directly capture the viewer's king by moving 1 square forward diagonally.
- The viewer's knight currently defended its king from the opponent's bishop, though the bishop can reach the king after capturing the knight by moving 1 square forward diagonally. And if the knight was to move away, then the king is exposed to the bishop.
- The queen acts as a "backup" for when the king moves 1 square forward, in which the queen is able to capture it by moving forward diagonally.
|
| Fig 3.5 Repositioning of words and hands tryouts |
|
| Fig 3.6 Different sizes and stoke weight tryouts |
After receiving feedback from Dr. Charles, I went to try out different
positioning and sizes for the words and the clasping hands to see if it'll
end up with a better outcome. In Fig 3.5, I reversed the original position
of the hands and words and try out different sizes for the words. Although
it works on their own, when paired up with the whole composition I feel
like the positioning kind of creates an unnatural reading hierarchy. This
then leads me to the tryouts in Fig 3.6, where I kept the original
positions but test out different sizes and stroke weight of the hands. The
tests for tryout #3 seems to have potential so I decided to keep working
on it.
|
| Fig 3.7 Resized and repositioned hands |
I tried to keep the bright and dominant effect the hands had in Fig 3.3 but keep the bottom-faded effect it had in Fig 3.4. And after doing some comparison, the size of the hands in Fig 3.4 does seem a bit too small since the laser grid is suppose to be the chess board after all. So, I resized it to be a bit bigger so it'll look nearer, and positioned it higher so the bright edge of the hands won't cause a distraction by being too near to the edge of the cross on the yellow king.
Feedback
Week 11
Proceed with phase 3 and add explanation on the purpose of the design,
maybe look into cryptocurrency to understand more. Other than that,
the final outcome of our design for part 2 of this project has to be a
response to the design we analyzed in part 1. It doesn't have to look
like the design we analyzed but we have to understand the concept of
our subject of analysis and apply that in our design.
Week 12
The visual analysis is good. The design for part 2 could have a bit of sense
of perspective to it so the outcome would look more dynamic. Try putting the
chess pieces in perspective on the laser grid.
Week 13
Include some of the "viewer's" chess pieces in the framing too, arrange all
the chess pieces in a way that the opponent (the hands in the design) has the
viewer's king locked. Change the perspective to a lower angle perspective
where the viewer's chess pieces are nearer to the foreground and the
opponent's chess pieces are further away. Make sure all the chess pieces
follow the correct perspective too. How the hands look like in Fig 3.2 is
better but make it smaller and more faded, balance the hierarchy where the
headline shines first then comes the hand and finally the chess pieces.
Week 14
Though the hands in Fig 3.3 has a strong dominance to it, both versions are
good but Fig 3.4 does look better with the addition of perspective and depth
of field. Maybe try out in repositioning the word below the hand and resize
the hand to be bigger, or keep the position and just resize the hand and see
how it'll look.
Final outcome
Final part 1 visual analysis write-up
Read the final part 1 outcome of visual analysis here
Final part 2 visual analysis design (A4 size)
 |
| Fig 4.1 Final visual analysis part 2 outcome - JPEG |
Fig 4.2 Final visual analysis part 2 outcome - PDF
This design is inspired by “Crypto Cats” by Daniel Haier and the concept is
based on the research done on it. It uses the concept of chess as a way to
represent what is it like in the cryptocurrency trading market. In chess,
players have to be strategic in manipulating their opponents. The same goes
for cryptocurrency trading. Anyone rich or influential enough can control
the high and lows of cryptocurrency to their will by manipulating other
people in falling to their schemes. The use of neon style in this design is
to create the feeling of a futuristic and digital environment as well as to
relate to the lawless nature of cyberpunk to the ungoverned operation of
cryptocurrency trading.
The logos of different cryptocurrency are paired up with their respective
chess pieces according to the current cryptocurrency ranking and the value
of chess pieces. Hence, the position ranking of the “crypto chess” pieces is
as below (from the most powerful to the weakest):
- King (Bitcoin)
- Queen (Ethereum)
- Rook (Binance)
- Bishop (Tether)
- Knight (Cardano)
- Pawn (Solana)
The laser grid acts as a chess board, the blue chess pieces represent the
opponent’s pieces while the yellow ones are the viewer’s pieces, and the
position shows that the viewer is loosing.
Click here to read in detail about the positioning of the chess pieces in
the design.
Perspective is used to create more visual interest in the design and the
proportion of the elements are sized accordingly. The blue king and queen,
which are further away from the yellow king are blurred to create a sense of
depth. The bottom part of the hands being fainter gives a feeling that
they're emerging from the background. Since magenta has a more striking hue,
it’s used for the title and the hands to create emphasis, the hierarchy is
then followed by the chess pieces on the chess board. Yellow is used to pair
up with cyan since they're equally bright and contrast with each other.
Magenta also contrasts with them both so it's also used for the laser grid
chess board in the design.
Reflection
This project was really interesting for me as we learn how to analyze a
particular design in a deeper context, touching not only the visual
composition but also its core representation. I’ve written short
descriptions for my visual researches in the past projects so phase 1 and
2 didn’t really come as something new for me, but when I’m doing phase 3,
that’s what really fascinated me. Cyberpunk is a style that I always like,
though I never got the chance to dwell deeper into its history, and I
never thought about researching on cryptocurrency before. But to my
surprise, it’s actually an interesting subject and knowing just how risky
and easily manipulated the system is, it makes me think a lot about the
strategically chaotic nature of the whole operation of cryptocurrency
trading.
Other than that, looking deeper into the cyberpunk art style and knowing
the context as well as the characteristics that made it to be iconic for
decades allowed me to look at it in a new perspective and also understand
more about its reason of emergence. This doesn’t only helped me understand
how to create a cyberpunk visual know the justification for it. All in
all, this was an enjoyable project to do and I had fun researching my
subject and going through the concepts that I can incorporate in my
design.
Comments
Post a Comment