D3 LA04 Positive and Negative Form

Summary

Part A of this activity explored the nature of negative space by visually interpreting three subjects. I selected Jaws, Ghost and Smoke, drew 4 thumbnails for each, then explained why the final choice was made. Part B involved sourcing examples of white space across a range of media and describing how this influenced the design.

Introduction

Positive and negative space are powerful and engaging design principles. They are vital tools in a designer's toolbox instrumental in the success of the design. White space is extravagance, less content and more space. High class publications are clear and uncluttered, modern trends shifting newspapers. Negative space can alter the focal point of a design and introduce suggestive meaning. It can have a huge impact on the composition and how the work is received.

• Positive space is the absence of artwork providing no further meaning. It focuses the viewer's attention at the expense of content and is a valuable tool that can make a design prominent.
• Negative space is the area surrounding a shape bound by the framal reference and characterised by the absence of artwork. It offers a further level of artistic meaning and intrigue to a design.
• Rubin's figure–ground distinction highlights feature recognition is overridden by a higher level brain function called shaping. This occurs when the lines between background and image are blurred.
• An afterimage is a result of the environment. It is positive when the eyes are closed, the same colour, and for less than a second. Negative when over stimulated, for much longer, and opponent colours.

Part A : Positive versus Negative Space

Instructions

Choose 3 subjects from the supplied list and develop a range of thumbnails on the template. Select the most effective and briefly discuss why they were chosen. Only the surrounding negative space should be drawn, and cropping and tension points should be considered.

Process

1. Selected 3 subjects from supplied list.
2. Searched Google Images for samples of subjects.
3. Drew 4 thumbnails for each subject in visual diary.
4. Scanned diary and redrew images.
5. Selected best 2 thumbnails for template.
6. Chose best thumbnail for larger box.

Results

Thumbnails	Template

Discussion

Jaws	The first image focussed on the fin, the next two the shark, and the final the jaws. The two shark bodies were more specific to the separation of space and the forth was ambivalent. They made use of framal reference and cropping, the first attempting to create force in the water. I selected the larger image which combined the impact of the jaws with the descriptive body, using proportion to add upwards tension to the scene.
Ghost	The first image used cropping to create presence with less depth between image and frame. The second negative space effectively but the style over rid the subject. The third a figured sheet added lower tension and grounding. The forth a coffin focused attention on an expanding ghost, relying too heavily on white space. I selected the first image due to the large eyes using negative space to reinforce the illusion of depth.
Smoke	The first image focussed on plumes of smoke from a pipe, the next three on a series, using a camp fire, a cigarette and a chimney. The camp fire and cigarette were chosen due to the emphasis of scene and movement, the pipe containing less of the subject and the chimney cropping too prominent. I selected the camp fire because it clearly represented the subject using proportion, illusion of space and upwards force.

Part B : Whitespace

Instructions

Find examples where whitespace has been used effectively in:

• Print-publishing (magazines/ newspapers)
• Street advertising (billboards/ shop-frontage)
• Websites
• Your choice

Process

1. Searched Google Images for examples on each form of media.
2. Chose the most unique for each category.
3. Considered a prominent own choice and selected packaging.
4. Defined the affect white space had on each design.

Results / Discussion

Print-Publishing

This layout appears uncluttered due to the abundance of white space surrounding an ordered flow of elements. The contrasts of text angle draw the viewer's attention and a minimal amount of information is delivered clearly.

Street Advertising

This advertisement uses white space to focus the message. The prominent robot bleeds of the frame adding depth, drawing the viewer to the body of text. This is centred in white space, clear, distinct and readable.

Websites

This layout uses blue white space drawing attention towards the title and purpose. The horizontal image adds meaning flowing across options above and below. Layered clouds create depth and encase animated navigation.

Packaging

This design includes negative components to deliver a product with impact. The upper white space increases the title readability, and negative space reinforces the title and model. The back is spaced to avoid tension points.

Conclusion

The ASM defines space as the distance between shapes where a shape is the external outline of a form. Applied to design it is understood in terms of positive and negative space, the classical yin and yang integrating the two in harmony. This activity reinforced the previous design principles and explored new techniques to apply in logo and layout design. The thumbnails in part A were critically examined for focal points, meaning, dynamics, framal reference, cropping and tension points. With correct placement it was shown to introduce dramatic visual effect to the final composition.

The images in part B provided an insight into the usage of white space in modern design. These images were selected due to their uniqueness and then the principles involved were examined. The packaging example was more effective as a container, the white sides emphasising the positive space. I learnt a process that structures design so fewer thumbnails quickly approach, and more effectively resemble a subject. Successfully distinguishing the subject is vital and fundamental to applying the principles of positive and negative space.

A link to this activity is available here

...Top

References

Positive Space Wiki White Space White Space Negative Space Wiki Negative Space Understanding Negative Space Negative Space Logo Design Image Recognition Wiki Rubin Vase Wiki After Image

Logos 30 Clever Logos with Hidden Meanings 55 Creative Logo Designs with Negative Space Print Publishing White Space in Magazine Design Street Advertising White Space in Street Billboards Websites Culture Code

D3 LA03 Black Squares

Summary

This activity demonstrated the power of positioning visual elements using black squares. Basic arrangements were used to convey the meanings of words to assist in an understanding of depth, space and dimension in layout design. The squares were used as a design technique representing elements such as images, text or letterforms to emphasise the power of special relationship. Two dimensional design principles included:

• Framal reference - relationship to frame;
• Touching - shapes touching;
• Overlapping - shape overlapping;
• Cropping - shape bleeding of frame;
• Illusion of Space - creation of depth;
• Contrast of shapes - size, direction, space and position;
• Dynamics and stability - creation of movement / at rest / ready to move;
• Positive and negative space - white shapes created from the black shapes;

Part A

Instructions

Using the supplied template, draw up to four black squares to express the meaning of six words in the thumbnail boxes provided. Select the most effective design and copy this image into the larger square.

• Order
• Increase
• Bold
• Congested
• Tension
• Playful

Process

1. Researched black square theory.
2. Searched Google Images for keywords.
3. Drew thumbnails in Visual Diary.
4. Selected 4 thumbnails for each word on template.
5. Selected final thumbnail for each word.
6. Drew thumbnails on template.
7. Documented results.

Results

Thumbnails

Template

Discussion

Order	This accentuated framal reference, wasn't too bold, and was effective in conveying the meaning. It used cropping and to a lesser extent dynamics of movement
Increase	This used positive and negative space with four squares. Its bold appearance overlapped with the bold series, but for diversity and the formation of stability this was chosen.
Bold	This embraced the meaning of bold. Other thumbnails looked better small, but this large version emphasised contrast of position and the illusion of depth.
Congested	I liked the third thumbnail, but chose this to its effectiveness. It used framal reference, cropping, dynamics of movement and contracts of size to achieve a good result.
Tension	This featured framal reference through proportion, touching at the point of tension, stability in the surrounding structure, and conveyed the meaning effectively.
Playful	Chosen over the fourth thumbnail although the first most accurate. This used dynamics of stability, overlapping, cropping, framal reference though proportion and depth .

Part B

Instructions

Find magazine advertisements or business cards that demonstrate each of the six word categories in part A.

Process

1. Searched Google Images for keywords.
2. Selected business card / logo images.
3. Selected magazine layout images.
4. Chose best image for each category.
5. Documented results.

Results / Discussion

Order
	I initially chose a pattern of 2D photo frames and two business cards with pixelated images. This image demonstrated proportions, the book size large enough as singular and many to form the perspective, and used framal reference, cropping and the illusion of space.
Increase
	I initially chose two business cards, one with growing figure, and one with spiralling flower. This image was relevant, with contrasts of size and position overlapping to form a growing arrangement surrounded by text. Dynamics of stability were achieved with a butterfly at the top.
Bold
	I initially chose a face with spray painted text and two layouts using positive and negative space. This image was technology related featuring the illusion of space using touching and overlapping shapes. The perspective added dynamics of movement to suggest loud bold words.
Congested
	I initially chose an overlapping social media advertisement and a cross word formation of bold text. This image was relevant to my background and used negative space to surround dynamic movement of a car to an obstruction. Text and images were overlapped to create the layout.
Tension
	I initially chose an explosion made of squares and a layout featuring a woman pulled apart into cubes. This image was relevant to my interests and used overlapping to create an illusion of space and depth. The title text used positive and negative space and the hand added tension.
Playful
	I initially chose two layouts, both featuring an array of titled text and images. This image was relevant to my interests and used framal reference to set perspective proportions. Overlapping images and text along shapes added dynamics and the title used positive space.

Conclusion

Part A of this activity involved using black squares to convey the meaning of words. After reading relevant material and sourcing examples of keywords I drew 48 thumbnails, 8 for each category. I experimented with two dimensional design principles attempting to create diversity. I chose 4 images to transfer to the template and then the best from each category. Spatial relationship is an important factor in layout or logo design and this exercise has given me insight into the possibilities. The principles of design add depth and dimension and black boxes can form an impressive layout. Part B involved sourcing an image from a magazine or business card to represent each of the categories. I selected the best examples of layouts and business cards / logos for each category and listed the design principles used. I found this activity interesting demonstrating methods to achieve power in positioning visual elements. This will assist inDesign tasks with techniques to apply to text and image boxes.

A link to this assignment is available here.

...Top

References

Images Black Squares Black Squares - Order Black Squares - Increase Black Squares - Bold Black Squares - Congested Black Squares - Tension Black Squares - Playful Magazine Layouts Layout Layout - Order Layout - Increase Layout - Bold Layout - Congested Layout - Tension Layout - Playful

Business Cards Design Design - Order Design - Increase Design - Bold Design - Congested Design - Tension Design - Playful Design Principles Black Square Problem Black Square Principles Black Square Design Black Square Resources

D3 LA02 Filing System

An Introduction to InDesign CC

In this lesson we were introduced to the Graphic Pre-Press file structure used in industry and given a grounding in the Adobe InDesign platform. Our task was to create an invitation using the supplied asset files and submit the zipped archive for assessment.

Activity 1

File structure is very important in the Graphic Pre-Press Industry. Designers need to be efficient in the disposal of files to a commercial printer as time is money in a competitive market. InDesign and the Adobe Library require all linked asset files to be present in this directory structure. Although fixable, this may cause a delay in a job being printed. This file management structure will be used throughout the duration of this course.

Activity 2

- Create an invite using InDesign with the supplied Photoshop and Illustrator files
- Arrange these files in folders as per instructions
- As an extension, create a decorative border for the invite

Preparation

- Logo top left / top center, and under / above top text
- A blue (to highlight toy) and matching (orange / yellow) colour scheme.
- "Ultimate Party Planners", rather than “PartiesRus are the”, preferred latter.
- "Hurry this special", with line break, preferred formation with no line break.
- Text wrapped around message text / joined to phone number.
- Fonts : Top 10 body fonts + Others
  MJ AlGhifari / Adelle (slab) / Balloon Drop Shadow / Children's Block fonts.
  Title : Peralta
  Body : FreightText Pro BOLD (typekit)
- With and without side decorations, border and border effects.
- Progressively compared images looking for readability and contrast.

Results

Conclusion

This task enabled a firm grounding in the basics of Adobe InDesign. I learnt the importance of colour swatches, how similar the layer system is to Photoshop, how to relink library assets, and how to apply effects to objects of type object, fill, stroke, graphic and text. I also learnt the inport and outport of text boxes, enabling multiple txt boxes to virtually join together. The effect layers work like Photoshop adjustment layers, and I was able to make several arrangements of the design before selecting a final colour scheme and font arrangement. The fill and outline palates were fairly simple allowing a limited selection of border styles. I researched other methods of importing library graphics and using them as a border but keept the final design simple. Operating in RGB mode is required for Adobe Acrobat Reader, the colours can be very different between RGB and CMYK transparency blending modes.

I created one design with a blue background, and another with a matching colour scheme to the supplied assets toy and logo. I experimented with layering effects to accentuate the text. I added the main theme colours as colour swatches but not the blending effects. If done correctly, updating the swatch affects all items on the document. I used many blending colours, all need a predefined swatch, or set manually. This results in exiting the blending mode, updating / creating the appropriate colour swatch, then re-entering the blending mode, to make minor changes. The effect system itself seemed difficult, minor changes resulting in large impacts on the colour scheme. I found the platform to be useful and simple, although after watching Terry Whites videos on interactive content, it can quickly become very complex, embedding flash video, slideshows, animation and button states.

...Top

References

Adobe InDesign Tutorials
What is InDesign ?
How to Get Started With Adobe InDesign
Tutorial : Adding and Editing Text
Tutorial : Moving Objects
Tutorial : Using the Links Panel
Top 10 Body Fonts

D3 LA01 Typographic Portraits

Introduction

In this activity I described a range of personality types in designated areas on an A4 template. I chose an appropriate lettering style then carefully and creatively rendered my name in the given area. Elements I considered included the style, weight, size, letter-spacing and case of the characters, and I gave special attention to the size and placement of my name in the given area.

What did I learn from this activity ?

- Using a visual diary and thumbnail process to explore ideas.
- Using fonts to express personality.
- Using style to express emotion, eg loud large letters, fast slanting backwards, stylish female.
- Using metaphors in design elements.
- Using contrast in design elements, black / white for emphasise, eg panadol tablet 1/2 black / 1/2 white.

Preparation

I setup a light table using dvds, a sheet of glass, and my tablet for a light source. The name plates went through a process of brainstorming mock-ups. The teachers example added spikes, waves, stripes to each letter rather than excessive props. This could be used to make letters melt, on fire or electrocuted. I went from the definition of personality type, to listing items that apply to that type and replacing each letter. As requested the final design needed to be well balanced and this played an important factor in initial choice.

Results

Discussion

Chameleon	A mock-up of the animal was difficult to read. A chameleon hides their personality / colour / identity, so i used a magnifying glass with inner font half and figure waving.
Hiccups	Mock-ups of a mouth, hand and glass of water were resolved by a bubble formation. For readability the font was created out of bubbles rather than placing them inside.
Truck driver	A sketch of a truck grill would result in letters across a number plate. I rebuilt the body from my letters. Probably not as a fitting as a logo / name plate in terms of readability.
Chief	I replaced letters with appropriate chief items, hat, sausage, knife, frypan, oven, rolling pin and saucepan. This worked well and resulted in a clear formation of symbols.
Headache	Mock-ups of a long panadol tablet with contrasting white / black letters. I decided to add spikes to the font, a clamp on the first letter and a spike into a head on the last.
Footballer	A mock-up of goal posts and a football letter was replaced with a surrounding football and inner emblem. The centre font emphasised A grade, and under the laces AFL league.
Gender illusionist	This design needed to include a stylish font and feminine items. I choose to brand a stick of lipstick and the resulting design included a title and set of lips for appeal.
Rockstar	A tradesman with 3D letters, roof and dividers was replaced with a large star shaped centre A surrounded by letters with microphones, conveying the impact of a loud rockstar.

Conclusion

This activity was successful in introducing the visual diary and thumbnail process for the development of images in quick succession. I enjoyed creating the above portraits, gradually became competent in complex shapes. I chose to use pencil in favour of ink, however I have previously used a drawing board with ink and razor blade. I setup a temporary light table, and in the copying process I found I lost some of the character formation / emotion. I managed this by continuous error checking and the final result was very close, if not better, than the original sketches. As the course progresses, this lesson will be an invaluable experience for the creation of logo designs.

The ACM states designers should be critical in their creativity when exploring ideas. Thumbnails do not need to be complex, they explore background and foreground elements, and with positive and negative space are instrumental in the success of the final design. Senior designers view the ability to choose between thumbnails a valuable asset. The expression of ideas are a designers intellectual property and signing and dating thumbnails with a copyright sign establishes ownership. Copyright is free and automatically protects the expression in the artwork not the idea or concept.

...Top

References

The science behind fonts
Evoking emotion through typography
8 ways to evoke positive emotions in visual design

Introduction

I created this blog to showcase my progression through Certificate III Graphic Pre-Press.  I have a keen interest in website and flash animation, and would hope to extend my skills on the Adobe Platform.  I receive small jobs from business cards to websites mainly using photoshop, javascript and flash.  All these revolve around presentation and anything that improves my design ability is essential in a competitive marketplace.  I have a website, that seems to always be under construction but I will eventually organize it to showcase my work / hobbies using modern techniques.

Website	Portfolio	Crazy Chris Video
Flash Site	Bazaar Arts Ceramics	Lorem Ipsum

As a screen printer for a short time I gained some industry experience at the printing stage.  Initially I volunteered with a local firm and worked along side their Pre-Press operator.  Their computer system was linked to a chemical processing lab, then plates were used on a large offset printer.  I then gained employment involving a screen printing machine often linked to a UV drier.  Screens were detailed with a photographic process used and washed at rates of 250 sheets per colour per hour and logged on a board. After a few months I was able to operate the machine without supervision and got ahead of the board on one day.

Jobs included Rip Curl and Billabong stickers, VideoEzy magnets, corflute election signs, VIP Macdonalds stickers, beer labels were a 9 colour process each sheet dried if not UV cured and re-registered, corflute beer pub signs, T-Shirts, and smaller machines items such as business stationary.  I worked around specialists in cutting and processing but did not mix my own ink.  Set numbers of runoffs were allowed for colour approval, material costs defined this number and often resulted in 5 prints for approval.  Screens wear, bolts loosen, inks dry in, change consistency over time, don't cure due to belt speed or mixture, and paper jams can result in fires.  It was run, grab can, jump, throw on ink, sprint back and continue printing while listening to your assistant for the first sign of error.

Other graphic design experience included working for Eastman Heffernan Walch and Button, drafting in my school holidays the Old Woolstore extensions, government elevator systems and other smaller projects.  Then Ian Johnson Interior Designers, where I drew sketches of high level bathrooms, Salamanca Arts Center hand rails, Moonah signage, and lots of small house extensions.  Following this I spent a few years part time with Chris Potter Civil Engineer manually drafting Old Beach, Brighton, and Lowestoft subdivisions, as well as difficult street developments. I created Pascal software for new council regulations and had a system for soil classification, one design per 15 minutes at $250.00 in 1991.  I worked for Honeywells during uni and modelled the Launceston hospital cooling interface, more recently ShutterRUS setup a Hobart branch, where I estimated, modelled and built powder coated glass enclosed balustrades, Grandvewe Cheeses of Cygnet featuring on The Great Outdoors below.

Recently I completed a Cert IV and Diploma in websites and a Cert IV in Programming.  I found the java course interesting making a Skype application, battleships game, and simulations of a teaching environment, pet store, and farm. This led to a number of flash utility classes and an attempt at a slot machine using a new approach. I made a website for a local dancer Crazy Chris Video resulting in 100 pages of JavaScript, and developed a utils method that emulates the anim functions of jquery using Penners equations, an eventCache and a few browser based functions.  During the website course I learnt project management and used gannt software, creating an ecommerce site from first principles. On Blogger the script gives the page a menu, a mouse trailer, tool tips and drop down navigation.  I have a projects page containing various samples of image presentation using 3D techniques, the image to the left created from a set of scaled masks.

I enjoy watching sci-fi, or anything sci-fi related, and have previously submitted flash work at Newgrounds. I love to play first person shooters and have followed games like Call of Duty, Far Cry, Mass Effect, Star Wars, and Crysis, each successive release, a new sandbox of artwork. I enjoy making music on Soundcloud and often spend far too much time on fruity loops. I also have a YouTube account when it’s time to attempt lip syncing again. I have previously attended a few tai chi courses, specifically in I Chi Gung, and view it as a calming practice. I tend not to use social media, but have a twitter account Twitter account where i follow musicians, actors and celebrities.

I've had this poster up for years, the artwork is amazing.
The Rodney Matthers website features a gallery of science fiction art.

http://www.rodneymatthews.com/posters.htm

...Top