http://www.triangleparkcreative.com/tips/design/principles
http://tersiiska.com/design/principles/
http://www.1stwebdesigner.com/design/20-reasons-your-design-sucks-1/
http://lenoxweb.net/Custom-Web-Design/balance-web-design.html
Research Source 1.
Looked at this tutorial by Dr Chee Ming Wong on ImagineFX
Research Source 2.
I purchased this instructional video series called "Vehicle Design from Start to Finish' by Matt Kohr in order to learn more. The following are some notes and my own thoughts on the processes.
Phase 1 - Thumbnails
These thumbnails are for a final rendered image. That is, the final goal is a rendered image and the analysis of the thumbnails takes into account the perspective and camera angle of the thumbnail for this final image. I guess this saves time by setting up a general image composition early on. My thoughts: what if a design that comes out in the thumbnail has been drawn from a lacklustre camera angle? This can be rectified in the 3D stage later on, but in this stage could it impact our judgement?
- Begins with thumbnails. Uses a premade grid setup.
- Can do this with pen and paper or digitally - or any other method.
- Almost like automatic drawing - working quickly with a thick brush, letting accidents occur and contribute.
- Wait for interesting shapes to reveal themselves then goes in that direction.
- Don't always have an idea what it will end up looking like - it's brainstorming.
- Forcing yourself to go through a specific process - coming up with new ideas never had before.
- If you can design a process to walk through you can reproduce your creativity.
- So you know how to create an interesting result.
- Thumbnails the most important part of the drawing.
- Sometimes skips this step and goes on to the final drawing - but often this doesn't work out.
- The above point illustrates that sometimes a designer doesn't go through the design process rigidly.
- This stage is about getting a nice black and white compositional read:
- What am I looking at?
- Is it interesting?
- Is it balanced?
- This is where the ideas of 2D design come in to play.
- Thumbnail - visual shorthand unique to each artist. Everybody's will look different, and their process for creating them will be different.
- Matt's thumbnail process: uses 100% opacity and hard-edged brush and eraser tools. Forces you to be decisive, make quick decisions whilst drawing.
- Using google image search to find the regularly used angles for photography of the subject.
- We see him copying and pasting some elements to reuse and rework them in other thumbnails.
- Great to end up with a large variety of thumbs. He does 9 here, but not unusual to get 20-30. If it's really important, you might get 100! A variety of options, and you know that what you take forward is the best of a variety of options. To find your PERSONAL BEST.
PERSONAL BEST, that is, YOU DON'T HAVE TO CREATE A PERFECT OR IDEALISED RESULT. Many skill levels in any industry - your work doesn't have to be as good as Syd Mead's in order for you to be doing work.
- A balance between time and quality - the more you do, the better your final result will be. But you can't spend all your time doing thumbnails.
Phase 2 - Coloured Roughs
- Take the most promising thumbnails and do some colour roughs
- Not sure what colours he wants to start with - picks from reference images
- Locking pixels and using masks to help keep the decisiveness of thumbnailing going. I think to get rid of any laborious retouching. We can make quick and confident strokes without worrying about going out of the lines.
- We have them all on the same canvas so that we can see them all relative to one another, look at them all at once. Take it in.
- Sometimes Art Director will help to pick, but if on own then it can be harder to pick.
- Looking for parts that are successful. We might only think about the colours of one design to work well, and the shapes of another to work well.
- In this case we might then pull the two thumbnails and make a new set of thumbs that combine these aspects to different degrees.
- Now would be the time when he would try mixing and matching - making thumbnail iterations based off of the coloured roughs.
Research Source 3.
Notes:
Character designs and visual metaphor
- Using visual metahpor to display ideas - sharp spikes signify danger, bad, etc. Roots in evolution.
- Natural world - sharp shapes, spiked animals, sharp teeth, etc.
- Poses for characters can be used too - heroic Hercules pose vs hunched over bad guy pose.
- Some cultural differences - specific animals signify different things, so explicitly using a lizard (for instance) and it's spikes could read differently depending on where you are.
- ICONS - iconic shapes that imbue real world natural objects (and designs) with meaning.
- Cultural background of shapes can teach us about their use - Satan and his many spikes - horns, pitchfork, spiked tail, spiky bat wing
- Darth Vader essentially a big pointy triangle
- Horns used on old medieval helmets, motorcycle helmets - to create fear, film design. Sometimes functional but often to signify bad guys.
- Spikes very useful because they protrude from the primary shape and silhouette. If they show from seperate angles then all the better.
Boat designs and implied function and character
- Smooth flowing forms, forwards-pointing say 'speed'
- Building-like, stable and steady looking boats say 'party, platform for parties' etc
- Here we have form vs function - a balance. The form was most likely pushed beyond pure functional use and into being signifiers of purpose. Not to say that form is always aesthetic - obvious functional usage of aerodynamics, etc.
Robot Design
- Gets given a verbal description of a robot that they need. Communications droid that does x tasks from a game-play standpoint.
- So have to think about what the design needs to say - what's his major emphasis? Back this up with visuals.
- Matt likes to start with adjectives
- Smart
- Inquisitive
- High tech
- Communications
- So now - a blank canvas, then a series of choices.
- Come up with something as clear and obvious as possible.
Reference gathering and usage
- Gathers reference to get visual wheels moving.
- ICONS. This isn't a dangerous character - he just collects information.
- So references are smooth, streamlined, big eyes to imply intelligence and information gathering,
- Matt - best designs come from a wide variety of reference
- Reference - smart animals, dolphins, modern cute robots to add sense of realism joints connections. Helicopter, submarine, fish, communications relays. All aspects he wants to infuse into the character.
- IF TIME ALLOWS - draw your reference sheet or at least some of it. Warmup, internalise your reference material. Try to get all the details and little shapes as well as the overall forms
- Selection of refs can really be based on whether or not the proportions and icons of the references say what you want to say with the design.
Design
- Begin with a sheet of possible silhouettes. Just like thumbnails.
- Picks out aspects of references and works those in. Some choices seem to be taking aspects of those references only loosely related to the original character goal smart, inquisitive, high tech, communications - for instance taking the long slender frog legs and creating a rather athletic looking robot. Could be a way of generating ideas that can then be thought about more in depth later on - after all the aim is to generate ideas not completely finalise a design.
- Reference seem to be used and selected in quite an abstract way - of course the droid itself is quite abstract and not really based too heavily on any real-world design. He's selected images that have large eyes, streamlined or smooth forms, etc, to fit the criteria for what traits and forms display the intended message of the design.
- Given a more rigid design brief (creating a droid with some pre-set attributes (angular forms, etc) we'd have to be more selective in our use and integration of attributes.
- Uses the visual language of the references to inform the shapes he's drawing
- Interpreting a reference through the lens of design.
Proportion and Scale
- Proportion much more important than scale
- Proportion - the relative size of a thing in relation to other things
- As a signifier - an Owl looks cute because of its large head - similar to the proportion of a baby's head in comparison to the rest of its body. Eyes large compared to size of head
- EG1: Pokemon designs are great - oft very cute. Lots of good proportional relationships - head and eyes - to make cute. Very small screen on which to show pokemon therefore the designs are very simple yet effective. Efficient
- EG2: Alligator illustration proportions - head smaller relative to body to emphasise size of body and shoulders. Legs smaller to emphasise body too - torso bulk. Toughness emphasised. Still looks like an alligator but with a more refined character via proportion.
- EG3: Caricature - proportions of recognisable features changed to emphasise key features.
Principles of Design
- Contrast: Video game levels and visual design - using contrast (colour, value, etc) to draw the player's eye and lead them to where you want them to go.
- Contrast: Web design of CtrlPaint website. Very grey site with colourful icons for videos - draws the eye. Contrast of saturation to pull the eye to the most important elements (the products) first.
- All of these principles of design work in pretty much every creative product - character design, environment design, prop design, etc
- The goal of design is to achieve unity - we want to balance the principles of design within our design - blending the principles in a pleasing way.
- EMPHASIS A character that reads well has strong emphasis on relevant attributes and this gives clarity of read
- Sonic = emphasis on particular attributes. Emphasis created through scale, contrast, etc
- Emphasis as an information hierarchy. Especially in instances where we might only see something for a short period or where we have to react quickly to a new design (encountering a new character in a video game for instance) we have to be able to read the character quickly and discern it's function and whether it's friendly.
- Emphasise the important parts so that it reads quickly. Remove or diminish the parts that aren't as important towards this goal.
- REPETITION used to create coherency between characters - to show they are in the same group. Repeated shapes, repeated colours, etc. RHYTHM comes in to play with how these elements are repeated on a character-by-character basis. Different rhythms and different PROPORTIONS in the repetition can create uniqueness within this group of characters.
- When Matt talks about UNITY in this video, he talks about it in terms of BALANCE. in terms of appropriate negative space with busy and non-busy areas. With dark colours and light colours balancing one another. Saturated colours surrounded by less saturated colours.
- Every point has to have a counterpoint - and in the balance you have a pleasing character.
Iterations
- A good way to ensure you get a good design 99% of the time is to build it up out of a lot of small changes in stages - iterations.
- Silhouette gives us the initial read and on a shape level tells us a lot about the character
- 2 favorites from the silhouettes. Both cloned across a document a few times.
- Detailed in one of two ways - value pattern and line.
- Value pattern: graphic shapes, just working with shapes. The dark and light can be reimagined later as panel/no panel or dark paint/light paint. At the moment it's just about a pleasing composition.
- If character works in value pattern it will work with detail later on.
- Line: take silhouettes and draw interior lines. Just getting linear shapes.
- Both ways - getting more and more specific from the original shape.
- Took one from this series and took it further - did some variations with line, played with overall proportions a little too - so messed a little with the silhouette in proportion.
- Colour - did a lot of different colour palletes. Picked one to take further and think about material.
- Material - gloss, semi-gloss, matte, muddy, scratched, etc. What does it say about the character?
- Work in a modular way - a dirt overlay on a separate layer to copy and paste on different versions, etc.
- Can always rethink previous steps and go back and follow a different branch.
Final word
- Talked about a lot of rules over this series - you don't need to remember all the rules all the time!
- Most important thing to remember - design language as a visual hierarchy
- That is, the immediate read gives the overall character and most important info, then as we move down the hierarchy we see smaller details that flesh it out - supporting information and adds some context.
- Second most important thing to remember - your design isn't going to stand on it's own at the end. Will be part of a larger picture or larger story.
- Eg: Transformers video game - everything is shiny and spikey and shooty. Everything is equally loud and exciting, and now it's confusing level design - no emphasis to lead us around.
- Eg2: TF2 has very simple and well designed levels. Background elements aren't overly exciting - emphasis is placed on the things we need to pay attention to, while other things are allowed to fade into less-exciting.
Description
Reference
Silhouette
Line or Value
Colour
Materials/Surfaces
Research Source 4: Matt Kohr's Principles of Design Series
This is mostly stuff I already know, but I feel a refresher could be very useful!
Listed principles:
Listed principles:
- Balance
- Emphasis
- Scale and Proportion
- Movement
- Rhythm and Repetition
- Unity
- Every image is the product of both Technique (mark making, edge control, texture, style, lines, realism) and Composition (subject matter, arrangement, camera angle)
- Objects have visual weight and we want to create a composition that is balanced around the center.
- Uses a seesaw to explain balance
- Two equally sized objects placed equal distances from the center of the seesaw are balanced.
- A large object near the center and a small object further away is also balanced. Basic physics.
- Consider our composition like that seesaw.
- One object right in the center - balanced. Moved to once side - unbalanced. Adding another object on the other side can re-balance.
- Objects have visual weight.
- We can achieve harmony or unity in our image by having a balanced composition.
- Balance is not Symmetry - often an interesting composition is one that is balanced asymmetrically heavy objects and less heavy objects balancing one another
- The effect of value on visual weight.
- He talks about value of an object and how that changes the visual weight of that object.
- Things that increase visual weight of an element - contrast (colour, value, texture, pattern), scale, actual perceived physical weight, density of a pattern, improve on this list
- Putting emphasis on certain objects or areas to draw the eye
- Contrast used to do this
- Value contrast, Colour contrast
- Use of brushwork - quality of edges (softness, hardness) to create an almost DOF effect. Reduces contrast between edges in blurred regions
- Detail in focal point to draw eye to focal point
- Differing sizes of similar objects to create depth and, via proportion, show scale of objects around the scene
- Proportion within an object - size of head vs body. Small head and large shoulders/body = tough guy. Emphasis on body and shoulders.
- Overlap to clarify depth and therefore scale
- Use of lines to direct the eye around a composition
- Goal is always to point the viewer towards the focal point
- At the thumbnail stage of the image shown (1) he already had this flow in mind - all the rest was just polish.
- Eye directed down by the claws and arms, then back in and up along the body and towards the head
- The next image (2) was more complicated (more elements). Eyes tend to gravitate towards faces, so there's only one in this image. Lines of the wings lead us towards the head. Bird in top right is flying towards the big bird's head.
- Used proportion and scale to show depth - identical birds get smaller as further away.
- Sweeping motion of the flock of smaller birds leads the eye towards focal point too.
- In the third (3) image the gaze of the diver on the left could lead us straight out of the image. Matt explains how he illuminated part of the tail of the monster to sweep around and lead us down to where the neck (also illuminated) leads us back up to the focal point - the teeth.
- Image (4) shows a composition that has no movement in it - a still city image.
- My interpretation was that the vertical spikes lead the eye upwards, and then the curved arch led us back down and around to other elements - a guided tour.
- Matt's interpretation is that it's a clockwise spiral motion, which I can understand. He says this spiral motion is pleasing to the viewer. He describes it as a shift from foreground to background as we go 'deeper and deeper into the canvas'
- We would start at what I'd call the dominant focus (the large foreground spike), then up and to the left (eye travelling from lower contrast towards higher contrast) then back down the right side of the arch, then back up and into other elements. The eye is definitely held within the composition.
- The eye isn't lead to the dominant tonal or colour contrast here, but rather the tallest building. Therefore perhaps this is how it's established as the dominant element - through the way the eye is lead and it's dominance in height and diegetic scale.
- Also important to note is the extreme contrast at the top of the dome - do we exclude framing devices from our consideration of value-contrast dominance? Or perhaps this extreme contrast helps to draw the eye in towards the tallest building.
- Characters: in this example (5) Matt wants the viewer's eye to be lead to the face (it's where the acting is most heavily shown here). Therefore - forms in the background sweep towards the head, the top of the instrument points inwards towards the face. Shape of clothing and lines in the lute itself point towards face.
- Allowed composition to dictate some of the character design - design of the lute.
- Repetition of iconic shapes and forms within individual objects and throughout similar objects in the scene to create coherency
- Similar to music terms
- Repetition - repeated elements in an illustration are pleasing to the viewer
- Comfortable to see many similar looking rocks.
- Visual shorthand - brain fills in the gap of lesser-detailed similar shaped objects.
- Eg: large detailed rock in foreground, less detailed rocks in background, character pops out due to foreground detail, background still seems detailed because brain fills in the gaps.
- Repetition can be done with simply shape instead of objects. Repeating a spiked form on several objects around a scene for instance. Continuity through repetition. Things fit together - characters and environments.
- Same shapes within the same object or character to create a pleasing and coherent design.
- Rhythm is a type of repetition - more broken up and less rigidly ordered. Can alter size, shape, placement, overlapping, etc
- Rhythm good for less-ordered scenes - natural scenes etc.
Video 7: Unity
Images:
- Unity in a compositional sense is a 'nice mixture of the principles of design' - a good balance of all the principles.
- Matt shows several thumbnails that he wants to take further. He wants to find the one with the most 'unity'.
- Using the principles of design to critically assess which images are working the best and where problem areas are.
- Matt says that this image (6) is unbalanced, and that the left side and right side aren't quite balancing visually. I can see that the left side has a lot more dark bulk to it. I see that the shadow cast by the bridge sort of falls away and weakens the sense of strength that the bridge has - leads the eye down the wall instead of through the door. I also see now that the large blank part of the wall has little weight in comparison to the bulky bridge, meaning the right side feels heavier.
- Matt selects the final image in his set (7), explaining that in terms of unity it is the best - it has overlap, emphasis, motion, shape repetition, etc.
- Is checking for unity a way of ensuring that we are clearly communicating the message of the image?
- One image he shows has good emphasis through centering the subject, but not a lot of motion, which he says makes for a composition lacking in activity. He says that's ok if you intend it - so we can discard some elements if they work. For instance, if we want to create a front-on view of a castle, really solid and without a lot of motion towards it, we could do a very bulky comp with not many movement lines.
- Not an exact science
- Use artist's eye to make judgement calls and find the best mixture of the various principles of design
- Don't want any individual principle to stand out above another - they should combine into a pleasant mixture.
Final comments: I still don't fully understand the idea of compositional balance, how to judge it and when or if it's supposed to not be used. Look into this more later on.
Images:
1
 |
| 2 |
 |
| 3 |
 |
| 4 |
 |
| 5 |
 |
| 6 |
Notes on this research entry:
Somewhat confused as to the points that Matt makes about 'unity'. In this Princples of Design series, he explains that unity
No comments:
Post a Comment