1. Principles of Designing for the Screen Fundamentals Lecture

2. Unity-Visual Echoes Consistency Throughout The Design A screen design should be a unity (a whole, a totality). A design theme is introduced early on in a piece and is carried out throughout the pieces interior. A book (for the most part) has the same type-face throughout, the same size pages; a film has a consistent "look" which a production designer, cinematographer and director have agreed on; a piece of music is played in a certain key, with a core combination of instruments, in a definable style, and so on. A building has a recurring set of textures, color, room-sizes, fenestration (window) sizes, and so on that are repeated throughout. Identity and Constancy Unity is another word for identity - we know who we are, where we are, etc., by looking for certain common, recurring features. Imagine if a face we were looking at changed shape ever minute. We would find that disconcerting - the same applies to a web page, or any design. We need to be able to establish a certain constancy of the object we are viewing or listening to. Unity Example

3. Proximity  Group Related items together. This way they are seen as one cohesive group rather than a bunch of unrelated bits.  This gives the user an instant visual clue as to the organization and content of the site.  Notice how related elements are grouped together. Also, their size and distance tell the user what information is and is not related.

4. PROPORTIONALITY  Relative Magnitudes Proportionality is the principle of creating ordered or structured relationships between things by manipulating the relative magnitudes of those things.  Varying the size (magnitude) of things is one of the chief ways that we create interesting differences for the eye and the mind. Looking at the façade of a residential house, generally the door is taller than the window. If all of the openings on a building were the same size, we would find that tedious.  On a page, likewise, we create large and small spaces, we apply large and small fonts, medium and tiny tables… and so on. We create images and blocks of text of different size. We do this in a struggle against tedium. Proportionality Example

5. Balance Variation and Consistency  Human beings like variation. We also like unity. Human beings like contrast. We also like over-all purpose and consistency. One of the challenges of design is to reconcile these imperatives.  The task is to create "unity in diversity", which is no small task. We are called upon to provide the kind of variation that enlivens us; at the same time to avoid chaos.  Design is like coming to a massive banquet - laid out before us a huge array not just of tools, but of font sizes, colors, possibilities for dividing up a page, and so on. How do decide to proceed so the possibilities don't just overwhelm us, or so that we don't randomly try the first thing to hand?  The art of it all is to find a way of putting together all of the differences we can create so that coexist in an orchestrated way.  The two most powerful ways we have of ordering the oppositions that we create on a page are symmetry and proportionality. symmetry and proportionalitysymmetry and proportionality Balance Example

6. Symmetrical balance Symmetrical balance is easiest to see in perfectly centered compositions or those with mirror images. In a design with only two elements they would be almost identical or have nearly the same visual mass. If one element was replaced by a smaller one, it could throw the page out of symmetry. To reclaim perfect symmetrical balance you might need to add or subtract or rearrange the elements so that they evenly divide the page such as a centered alignment or one that divides the page in even segments (halves, quarters, etc.). Symmetrical Site

7. Asymmetrical design Asymmetrical design is typically off-center or created with an odd or mismatched number of disparate elements. However, you can still have an interesting design without perfect symmetry. With asymmetrical balance you are evenly distributing the elements within the format which may mean balancing a large photo with several small graphics. With asymmetrical balance you are evenly distributing the elements within the format which may mean balancing a large photo with several small graphics. Or, you can create tension by intentionally avoiding balance. Asymmetrical Web Example

8. Radial balance On square and rectangular pages we generally place elements in orderly rows and columns. With radial designs the elements radiate from or swirl around in a circular or spiral path. Parts of the design must still be arranged so that they are balanced across the width and length of the page unless you're intentionally aiming for a lack of balance. http://gagnet.net/

9. Rhythm Rhythm is defined as a repetition. In music sounds are repeated to create a rhythm. In design the elements are repeated. Repeated lines, as in a picket fence, produce a visual rhythm. Splashes of the same color throughout a room is another way to provide a sense of rhythm. Rhythm can also be progressive in form, A shape that increases gradually in size as it is said to create a progressive rhythm. A color that decreases in value as it is repeated produces a progressive rhythm. Visual progressions can be from light to dark, large to small, rough to smooth, and old to new. http://cossetteinteractive.com/

10. Contrast Contrast is often used to attract attention. Product package designers use contrast so that consumers will notice a particular product on store shelves. Just as red and white stop signs are highly visible to motorists. Great contrast can add emphasis to an object in an interior. However, contrast must be controlled. Too great a disparity produces discord. Too little difference is dull. Too much contrast used over a large area can be tiring to the eyes. High contrast in light can especially be a problem in passive solar interiors and may be overcome in part by color choices.

11. Alignment A centered alignment creates a dull or sedate look. A right or left alignment creates a sharp sophisticated look. http://www.rustboy.com/rustweb.htm http://surface.yugop.com/

12. Splash Pages, Logos and Middle Media These are all large self contained pieces. Think of it as building the meat of the project by a clever splash page or an inside animation. http://everydayland.com/ http://www.kurtross.com/tn/index.html http://nathanj.com.au/ http://www.meomi.com/ http://muffinfilms.com/

13. Brainstorming with Words Read through the list of words and choose 5 of them to create a screen design. You may use Photoshop, Illustrator or Flash. I will help you with anything you need. Create a background image for your computer desktop.

14. Layout All Image All Type AsymmetryBackgroundBorderBleedCircleColorCropEmblemFree-FormGraphicGridImageIllustrationLineworkPatternPhotoRectangleSymmetrySquareStarTriangle Weird Shape StyleBitmapBig/SmallBlueprintBlurBusy/PlainCartoonChildlikeCollageContrastCrudeDamageDark/LightDeformDoodle Drop Shadow ElegantFrameGhostGraffitiHuge/TinyIntricateLinocutMinimalismMultimediaNegativeOddOrnamentalOverlapPrintPerspectiveRealismRepetitionReverseScientificSequenceSilhouetteSketchSpiralSplatterStampSymbolTranslucentTiltColorComplimentContrastOld-StylePrimaryMonochromePsychedelicUnityTypeBoldCalligraphyCondenseCursive Custom Font ExpandHand-LetterInitialsItalicLabelLargeLetterspaceMonogramOutlineOverlapPunctuate Sans Serif ScriptSerifSmallTypewriterThinMoodAngerWeepShoutWhisperLoudBuoyantFunsportyEraFuturisticIndustrial Middle Ages ModernNaturalPrehistoricRenaissanceRevolution Gilded Age Gen X

15. Assignments: Start thinking about the design concepts. Sketch out designs that employ the principles to be scanned and created digitally during the next class. Begin sketching design ideas for our interfaces that employ the design principles. This is a good time to create a self-promotional piece and decide what type of output you will need examples include: DVD Menu, CD-Rom presentation, Kiosk Menu etc.