Rhythm is a dancer

Posted on 15 July, 2009 by Vernon

Audio clip: Adobe Flash Player (version 9 or above) is required to play this audio clip. Download the latest version here. You also need to have JavaScript enabled in your browser.

rhythm
A visual tempo or beat. The principle of design that refers to a regular repetition of elements of art to produce the look and feel of movement. It is often achieved through the careful placement of repeated components which invite the viewer’s eye to jump rapidly or glide smoothly from one to the next.

In any artwork, it is possible to distinguish between rhythm of color, line, and form. In the continuity of the three comes the whole rhythm of that work.

Rhythm unites the visual culture with music, but in visual culture, rhythm is more evident in the applied arts than in the fine arts. In the former, it is often the foremost means of aesthetic expression.

via ArtLex on Rhythm.

Rhythm exercise

On an A4 sized page, create a rhythm with great variation. Use vertical, horizontal, and diagonal lines, dots, squares, and type.

Although creating an A4 page, I used Fireworks to create these rhythms. It seems easier than Photoshop at handling, positioning and aligning a larger number of objects. For text, I’ve attempted both an Eastern flow with the Chinese words for “my love”, and relied on the trusty Lorem Ipsum generator for Western copy.

Posted in Art | Tagged , | 1 Comment

Lighting

Posted on 12 July, 2009 by Vernon

Draw 3-D objects, like cubes, pyramids, or spheres using your Photoshop or Illustrator tools. Think about where your light would be coming from, and shade in the opposite sides with varying intensities of texture to create the illusion of three-dimensional space.

Posted in Art | Tagged , | 1 Comment

Textures

Posted on 12 July, 2009 by Vernon

The tactile quality of a surface or the representation of such a surface quality, is it’s texture. While tactile textures are real textures (which you can feel), they can be imitated as illusionary visual textures on computer screens, giving the impression of real life textures.

Graphic designers need to be aware of all the textures available to them. Paper has tactile texture. Inks and varnishes can create tactile textures. Visual textures, including indirect marks like rubbings and blottings, and direct marks like the ones in the following exercise, should become part of any designer’s vocabulary.

A rubbing effect can be made by following this Photoshop tutorial (http://www.escrappers.com/rubbings.html).

Posted in Art | Tagged , | 1 Comment

Contrasting designs

Posted on 11 July, 2009 by Vernon

Find two online example of graphic design solutions that use low contrast and two examples that use high contrast. Thinking about the word contrast, in noun form, I like these 3: a striking exhibition of unlikeness; opposition or juxtaposition of different forms, lines, or colors in a work of art to intensify each element’s properties and produce a more dynamic expressiveness; Photography. the relative difference between light and dark areas of a print or negative; these definitions can apply here.

Low contrast designs

  1. Low Contrast design 1 - http://www.electrolux.com.br/bluetouch/ http://www.electrolux.com.br/bluetouch/ Full-screen video coupled with easy-to-understand demos explain the most important features of a new line of products with blue touch-panel technology.
  2. Low Contrast design 2 - Mount Washington Resort Realty http://www.livemountwashingtonresort.com/ With a poised combination of beautiful vistas and concise content, this site provides prospective homeowners with enough information to prompt a phone call to the resort’s sales office.

High contrast designs

  1. High Contrast design 1 - http://www.patagonia.com/web/us/tinshed http://www.patagonia.com/web/us/tinshed This new e-zine for outdoor clothing manufacturer, Patagonia, is loaded with audio, video and written-word dispatches from around the world.
  2. High Contrast design 2 - NIKEiD http://nikeid.nike.com From sportswear and Nike Pro apparel to Nike 6.0 and Nike, consumers can customize nearly every kind of Nike product on this redesign of NIKEiD—the most comprehensive since the site was launched in 1999.

Choosing a low or high contrast design will depend on both the subject matter, and the intended audience. Looking for inspirational examples, try commarts.com/webpicks first as this collection gives thumbnail previews. Also check webbyawards.com/webbys/current.php and americandesignawards.com/winners-annual.html for other winning examples.

Posted in Art | Tagged , , | Leave a comment

Colour, colour on the wall

Posted on 29 June, 2009 by Vernon
Use colour schemes on the Digital Colour Wheel.

Research these questions from the 3 websites listed below, posting your answers next to each question.

Color Theory, a brief tutorial (Ford 2004)

http://colortheory.liquisoft.com/

Colours on the Web (Johansson 2002)

http://www.colorsontheweb.com/

http://www.colorsontheweb.com/colorterms.asp

http://www.colorsontheweb.com/colortheory.asp

Paint Quality Institute

http://www.paintquality.com/paint-professionals/paint-design/color-trends.html

http://www.paintquality.com/homeowners/paint-design/paint-color/wheel.html
  • What colour model does your computer use? RGB
  • Where can you see more colours, in print or on screen? Unfortunately, CMYK cannot reproduce the same amount of colors as RGB can, which is why yellow-greens sometimes look a bit muddy when printed.
  • What are primary colours? Red, Yellow, Blue. These 3 colours are the base colours for every other colour on the colour wheel.
  • What are the primary colours for print? CMYK. This is the method used by printers the world over, and is also a clever way of mixing paints.
  • What are the primary colours for on screen? RGB. Remember, this color method is only used with light sources; it does not apply to printing.
  • Which colour model is additive? RGB. Any color source that emits the light itself… is built up of tiny red, green and blue dots. This color system is commonly referred to as the Additive Color System.
  • Which is colour model is subtractive? CMYK. The subtractive colour system is what comes to play when the color does not emit any light of its own, but reflects light from its surroundings. In the subtractive colour system, you get black when all colours are mixed.

In your own words, define the following:

  • Hue – What we usually refer to as colours. Red, green, blue, orange, and yellow are all examples of hues.
  • Value – A measure of how much white (or black) is in a colour. A brighter colour has a higher value than a darker colour. To check the difference in value, you can examine the corresponding greyscale versions of colours.
  • Saturation – Richness or intensity of colour. Completely de-saturated colours are shades of grey.
  • Tint and shade – Variations on an original colour. Take blue for example. Tints, created by adding white, would be lighter blues. Shades, created by adding black, would be darker blues.

What is the difference between each of these colour schemes?:

Analogous
Pairs of adjacent colours on the colour wheel, such as red and orange. The have very little contrast between them. Useful for serene designs.

Complimentary
Pairs of colours opposite each other on the colour wheel, red and green for example. They have the maximum contrast between them. Useful for making elements stand out.

Split Complimentary
3 colours made up of one colour, and the pair of colours adjacent to the compliment of the original (on the colour wheel). For instance, starting with violet you would need to add the two colours adjacent to yellow, i.e. yellow-green and yellow-orange.

Tetrad
Four colours with none adjacent each other on the colour wheel.

Triad
Three equally spaced colours on the wheel. There must be a 120 degree arc between each colour, such as blue – red – yellow.

What are these color schemes used for?
To aid in colour selections that are appropriate for designs to convey the desired messages / emotions.

Posted in Art | Tagged , , | 1 Comment

Critique of 3 inspiring websites

Posted on 28 June, 2009 by Vernon

How do you hold a self-critique?

Part I: The Project

  1. Restate the goal or aim of the project – in your OWN words. Do this to make sure you understand the problem you are setting out to solve.
  2. Did you fulfil the goal you were supposed to achieve? Did you miss the point of the original problem you were trying to solve?
  3. Is your solution appropriate for the audience or purpose of the project you are working on? For example, are your colours childish or corporate?
  4. Is your solution appropriately executed?
  5. Are you using a suitable visual hierarchy of information? Will your audience know where to look first, second, and third?
  6. Does your solution communicate the intended message to your audience appropriately? You can ask people to tell you what message they are interpreting from your design.
Part II: The Process

  1. Did you do any research? If so, how did you use it? Should you have done more?
  2. How many thumbnail sketches and roughs did you do before you created your comp? How much time did you really think about the problem?
  3. Did you experiment outside of your comfort zone? Or did you stick to your area of strength?
  4. Did you make any false assumptions about what you could or couldn’t do? Or did you take a positive approach that you could do anything if you really tried? It is very important to experiment and build your confidence in designing. Try flipping, stretching, skewing, speckling, etc.
  5. Did you really allow yourself to become involved in this problem you were solving? Did you use your imagination and feelings? Were your feelings personal or removed?
  6. Were you too judgemental? Did you give yourself a chance to be creative? Were you patient with the project and yourself? Don’t be so hard on yourself that it makes you afraid to take chances.
  7. Did you take chances? Were your solutions innovative? Did you dare to be different? Or did you do what most people would do? One way of determining this is to compare your solution to others? How many other people reached the same conclusions?

So here I go practising these critique methods on 3 inspiring designs within the Communication Arts – Webpicks http://www.commarts.com/webpicks/

Photographer Fredrik Clement
A screenshot of Fredrik Clement's photography website.http://www.fredrikclement.com/ Instead of hiding them behind a complex interface, the developer of this minimal site placed the images front-and-center in a gratifying full-screen display.

As a photographer’s portfolio, this website does a fantastic job in how it shows the photos unobstructed by interface elements and completely full-screen. A thumbnail film strip appears at the bottom edge of the screen, and contact information slides into view overlaying the top half when the pointer approaches. Left and right sides will preview adjacent images and they’ll slide into view when clicked. It is a simple and highly effective approach to the goal of such a project, and a most appropriate design for the intended audience.

Storyville Coffee Company
A screenshot of the 'Storyville' website.http://www.storyville.com/ This site introduces a new, available-only-on-the-Internet, coffee bean retailer. Storyville, equally passionate about perfectly roasted beans and independent artists, conveys its obsession with both in a collective, interactive experience. The continuity of the design aesthetic makes it a flawless brand experience from start to finish.

Visually gorgeous, the site is a highly polished sales project that appeals to coffee drinkers chained to their broadband internet – more customers than you might think. The transition animations, photography and videos, simple and clean layouts, colour scheme, and shop facility all blend together to cohesively complete the experience for caffeine consumers.

USHMM: Propaganda
A screenshot of 'United States Holocaust Memorial Museum: Propaganda Exhibit'http://www.ushmm.org/propaganda/ In January 2009, the United States Holocaust Memorial Museum opened a special exhibition titled State of Deception: The Power of Nazi Propaganda, that examines how the Nazis used propaganda to sway millions with their vision for a new Germany. Reflecting the museum’s efforts to keep the Holocaust and its lessons a topic of public discourse, it encourages people to think about how to recognize and respond to propaganda, to understand the potential consequences of it and provokes discussion about responding to hate speech and propaganda today.
Instead of presenting the exhibition in précis, the Web site is a further exploration of themes. It invites interaction with select content enabling visitors to explore the subject, its legacy and its implications in today’s world.
The materials are presented in a range of formats (artifacts, books, documents, moving images, sound recordings, etcetera) and logically organised into themes, a timeline, an artifacts gallery and resources, making it interesting and easy to find important information. The online forums and polls make a perfect platform for interactive expression. As an educational resource, the lessons and exercises are well referenced. The principle of exploring, as defined in the site’s by-line, allows users to move through the material at their own pace. The cohesive red, white, and black colours together with muted colour drawings, paintings and posters, and black and white video footage, are all excellently combined, enhancing the mood and feel for the target users. The only drawback I can find is that some secondary navigation items are elusive and / or buried. The video gallery, for example, contains a lot more than just 1 video, but it is accessed via a link on the front page titled Watch video about the exhibition.

And now for 3 less glamorous online designs, and why I think they’re poor… Continue reading →

Posted in Art | Tagged , , , | 1 Comment

From first encounters to the daily grind

Posted on 16 June, 2009 by Vernon

Commenting on my own experience of the Internet, I would have to say I’ve come along way. It seems a lot like comparing chimpanzees to Albert Einstein, with so many facets of change in simple routine habits. What was once an exciting frontier, seems to have moulded into the omnipresent.

Humble beginnings

How did you first encounter, hear or read about it?
Apple IIe green square cursorActually… I think it was back in high school when we did Computer Studies in Year 9 or 10. I can’t recall the teacher’s name but I remember his appearance. I’m sure he mentioned that it was quite powerful and we would be able to do some great stuff. This notion went down like a lead balloon as we stared at the screens of Apple IIe computers with a flashing green square cursor. I was definitely more interested in databases in those days – they seemed to store vast amounts of data and the fat controller would have the power.

When and how did you first ‘go online’ and what did you think of it?
Since I can’t remember exactly how and when I went online, I’ll describe my earliest memories. It was definitely all about email, Hotmail to be precise. Back then, in late 1996, it wasn’t owned by Microsoft and we looked at the messages through IE 1, 2 & 3, and sometimes Netscape Navigator – before we even knew there’d be browser wars.

Internet Addiction DisorderNot only was I one of those geeks who knew what the HTML means in HoTMaiL, but I also quickly aspired from building the RMIT Outdoor Pursuits Club’s members and equipment database, to crafting the first incarnation of their website.

The sky and today’s limits

How do you use it nowadays?
It might be quicker to define what we don’t do on the internet these days. Today’s communications come in a variety of forms such as Skype video calls to my brother on the other side of the globe. Socialising via Facebook and other networking is a small part of my online life. I took a quick spin on Second Life, but found it too time consuming and interfering with my real life. Photo (and to a lesser extent video) sharing are my regular online gigs. Blogging is something I started to do as a diary, a journal method, (which doubled as a script for a trilogy of films) and it has also evolved into my noting and recording space for things like my studies. Banking, bill payments, clocking payroll timesheets, some shopping, a little entertainment, research, education (both giving and receiving), weather forecasts, navigation and travel arrangements, calendaring and scheduling… They’re all online for me now. Have I missed anything – probably.
a pervasive internet
Do you think of it as different or part of your everyday life?
Clearly, the internet is a big part of my day to day living. In fact, so pervasive is it, I’m constantly on the lookout for tools and practices to better manage my online life.
Daily Life by Ennokni

Posted in Technology | Tagged , | Leave a comment

Google + Schwarzenegger terminating textbooks together

Posted on 15 June, 2009 by Vernon
Terminator

According to a news article on ABC News (PDF Calif. to Dump Printed Text..), Governor Schwarzennegger is trying to trim the state’s budget gap with a cheaper alternative to the traditional high school textbooks. California has a US$24.3 billion budget shortfall to face. How much is a billion? If we wanted to pay down a billion dollars of the US debt, paying one dollar a second, it would take 31 years, 259 days, 1 hour, 46 minutes, and 40 seconds. Now multiply that by 24 and you get roughly 761 years! This is just a single state’s deficit, and The Age reported that Arnold refused to increase taxes in order to fill the void. The former actor’s plan to save money pivots around phasing out hardcopy school textbooks in favour of learning over the internet.

Blackboard logoWhile the Terminator star plays with the politics, let’s look at some aspects of information access and learning over the internet. I went back to the books (and blogs) and since then, most of my learning is via each university’s implementation of the Blackboard application, and readings which are scanned into the institution’s online library. Limited (so far) study resources can also be found within Google Books, such as this title on focus groups.

Google’s mission is to organize the world’s information and make it universally accessible and useful.

http://www.google.com/corporate/

Google Books logoUpon reading the CNET News article Google’s digital book future hangs in the balance, one quickly finds that Google stands to make huge sums of money from advertising, book search, institutional subscriptions for access, and selling PDF copies of books. Did anyone check if Arnold has any investment in Google? If you’re also concerned over the legal issues, check out the groundbreaking agreement between authors, publishers and Google Books.

Posted in Books, Digital, Education, Technology | Tagged | 1 Comment

Distribution methods

Posted on 8 June, 2009 by Vernon

Distribution of a multimedia project should have been one of the very first matters considered during the initial concept stages. The matters of distribution can have some very simple as well as complicated reasons for choosing one method over another. There are many contributing factors to determine the right delivery method:

  • Target user group
  • Client’s wishes and expectations
  • Product’s limits and limitations
  • Interactivity
  • Expertise

So far, common forms of distribution are:

Optical discs

CD-ROMs, DVDs, etcetera…

Intranet

a high speed internal network

Internet

a mass distribution medium

Hardware or embedded application

embedded devices that are not normally associated with computer interfaces, i.e. organisers, kiosks, mobile phones, and etcetera.

Traditional distribution models

Traditionally companies that make consumer goods that are purchased in retail stores, sell their products to a wholesaler, which in turn sells to the retailers.traditional distribution models

Alternative distribution models

Given the highly competitive nature of the consumer multimedia market and the difficulty of obtaining retail shelf space, several other models are being used. alternative distribution models

Intranet versus Internet delivery

Intranets are secure, 10 to 100 times faster than an average internet connection, only require 1 copy to serve many users, and the quality is very high (presentations and corporate events can be telecast throughout the organisation).

Some examples utilizing an intranet delivery include corporate orientations, Computer Based Learning (CBL), presentations broadcasting, video conferencing, internal video services (VOD), and interactive information systems (customer information stations and POS systems).self-service checkout

Unlike an intranet, internet connection speeds will vary based on the type of connection as well as geographic location. Using the web as your delivery platform has a lot of advantages, but also requires meeting a lot of parameters and compromises. The benefits are: a potentially global audience, purchasing is easily carried out, product support can be facilitated with patches and updates, and product evaluation is also possible with demo versions of the product to try before you buy.

Some applications use the internet as a delivery platform. For example, streaming media in real time, Flash, and Java web-related applications, all rely on a constant internet connection.

Although there are many methods for delivering web multimedia, we recommend using stable technology that works for the great majority of client machines. You risk losing your audience if they have to jump through hoops to access your content.

http://www.webstyleguide.com/wsg3/12-multimedia/index.html

Content management

Content management is a system of organizing the delivery, storage and access rights of all the media components of an internet or intranet delivery system.
content management
By the system administrator or broadcast administrator, content management is used to set-up and manage scheduled content or on-demand programs, channels, recordings, and file transfers among various media servers. This can include the setting up of group profiles or individual profiles, in other words allowing only certain groups or individuals to view certain media.

Embedded devices

Typically these devices have no keyboard or limited input capabilities, and somewhat limited display capabilities and data storage. They are usually dedicated to performing certain functions or tasks only, and include mobile devices (personal organisers and mobile phones), home devices (appliances, home automation systems, home theatre systems, home security), automotive (GPS, in-car entertainment systems), and industry systems (information kiosks, ATMs, and cash registers).

iPhoneDue to advancements in computer memory and CPU miniaturization, devices now have the capabilities to provide levels of interactivity and intelligence previously unheard of. We are also seeing not only the breakdown of input and output limitations, but also a merge of delivery methods, in devices such as the iPhone.

Embedded devices traditionally perform dedicated functions, and are designed with a specific embedded software application. The end user cannot modify such closed systems. We see embedded systems everywhere – at the cash registers, in industrial controllers, at home in our digital set top box. They are usually simple to use, sturdy, fast and reliable. Unfortunately updates or upgrades contribute to the problems of a throw-away society and are costly in both time and money. Hence the reason developers attempt to future-proof systems as much as possible.

The choices of delivery methods to best deliver products are constantly increasing. Choosing the right method is not always your choice. The best safe guard is to know right from the conceptual stage, what delivery method(s) you and your team will be designing for.

Posted in Digital, Photo and Video, Technology | Tagged , , | Leave a comment

Promotion

Posted on 7 June, 2009 by Vernon

Selling the product you have made, whether that be to a client, to a customer, or to an audience, is crucial. A fantastic product marketed terribly is worthless. First impressions do count. Often the quality of your product will be judged by the quality of its presentation, so put your heart into it!

Making a fantastic product is great. Making packaging and promotional material is the next step.

Target the audience

As you start to decide the packaging, stay focused on these things:

  • If you keep focused on who you are designing for, then it is a lot easier to come to a concept without forcing it.
  • Do some research. Look specifically at the packaging and the promotional material for products targeted at the same audience bracket. http://creativedepart.com/category/packaging/ is just one place to start that research. Try to appreciate what elements others have used to good effect. Be critical of stupid design moves. Put yourself into the demographic of the product’s target group and assess it how they would.
  • Ask around. Basically, get a feel for the current market.
  • Use graphics, fonts, and language that are relevant for the demographic the product is aiming at… Compare the different demographics being aimed at on the packaging of these 2 racing games:
    Mario Kart package uses cartoon characters to appeal to children, or the child at heart.
    Gran Turismo 5 package uses realistic photos to appeal to more adult petrol-heads.

Ratings

Just like movies, video games are governed by a ratings system.

ESRB rating symbol on the front, and content descriptor on the back.

The Entertainment Software Rating Board (ESRB) ratings are designed to provide concise and impartial information about the content in computer and video games so consumers, especially parents, can make an informed purchase decision.

The process

Make quite a few possible package designs, and then cull them. If the design is incongruous with the rest of the project, file it with all the others sacrificed. Choose the 1 design that best fits the criteria – classy, attention-grabbing, effective, and informative. Remember, the purpose is to sell this product.

Layout

This final design stage is so important, regardless of how mundane the project may seem after your months of hard yakka. Package layout is comprised of fonts, copy, and graphics.
Text layout is vital – this is the text that is going to convince a client/customer that the cool box they just picked up is actually worth buying/trying.

On the front, on the back

See Packaging and the Premiere for the list of vital elements to include on the front and on the back of the packaging.

Fonts

Be consistent and use the same highlight fonts on the packaging as those in the actual product. Check back in Multimedia Fundamentals for the typography links. Legible and scannable are rather crucial qualities, and a secondary font should be used for body text.

Colours

Again, consistency is the name of the game. Besides, if using modern design software, you can save quite some effort and literally just re-hash existing artwork and palettes. However, other packages of the same genre will all be sitting on the market shelves alongside each other. So it may pay to add a classy, contrasting colour. Check Multimedia Fundamentals for the colour links.

Writing copy language and aesthetics

The language you use will either sell your product, or lose a user’s interest. Marketing departments should determine and prioritise the most important parts of the product, and the copy should reflect these important features. Sometimes it might help to use short words, but it is always best to avoid industry jargon and genre specific language. Use exciting language that briefly explains the purpose, features, and highlights.

Text should be large and clear, and restricted to designated areas on the box. Keep the blurb brief and in a compact space. Use bullets to visually distinguish between points.

Graphics

Age of Mythology package graphic on the frontAge of Mythology actual game screenshotPrimarily derived from sketches and the product, artwork must be consistently themed. Only a few screen shots are needed on the back. What actually makes a good graphic depends on the genre and target user group. A children’s game cover graphic would misrepresent an adult game, and vice versa. A good graphic also encapsulates the themes and characters of the product without necessarily reflecting the actual content. Cover designs of a variety of games all show a number of similarities and common concepts: a prominent title, and one central graphic feature.

Cross-marketing mediums

The important thing with cross-marketing is identifying the most effective mediums to use for promotion. Cross advertising a product for middle-aged business men in a drum’n'bass zine may not be the most effective method of advertising. Again, it comes back to being able to assess your audience – to know what other information mediums they access, and utilize those. Other potential information mediums are the web, radio, print, and any genre specific mediums.

Web marketing

GTA4 website cross-marketingCreating a parallel website is a great way of cross-promotion. Keep it consistent. Use the same fonts/colors/graphics as the actual product and the box. Include lots more information – reviews, in-depth discussion of plot, and etcetera.

The website for Grand Theft Auto IV (http://www.rockstargames.com/IV) mirrors the colours and artwork from the actual game itself. The website also features news (pictured right), radio stations, merchandise, updates, subscription, game information and other features.

Print marketing

Sample magazines for print marketing.Get reviewed. Advertise in relevant magazines (gaming, etcetera). Remember to use big headings and graphics in advertising material, and only provide basic information (website/distributor and genre).

Posted in Art, Technology | Tagged , , | 1 Comment