Mise-en-scène

Mise en scène is the arrangement of scenery and stage properties in a play. Translated from French, it means "setting the stage" but, in film analysis, the term mise en scene refers to everything in front of the camera, including the set design, lighting, and actors. Mise en scene in film is the overall effect of how it all comes together for the audience. 

Setting

This is is the actual setting of the shot for both still and moving images. The physical location

Props

Elements which are added to the scene to add effect 

Costume (hair and make-up)

The appearence of the actors in a scene can be adapted through the use of of costumes and make-up.

 Colour

The use of colour can have a dramatic effect on the visual appearence of the scene. 

Figure expression 

The expression of the actors can also have a dramatic effect on the overall appearence.

Sizing

The sizing of the different elements can have a dramatic effect on the overall image/shot. It is important to consider the implications of this on the desired message.

Image manipulation and effects

Software such as Photoshop and After Effects can be used to edit images/clips in post production. The images can be refined to better suit the intended message. Beauty magazines will often use highly edited images of celebrities to create a specific representation.

Juxtapositions 

Juxtaposition happens when there are two or more elements in a scene that contrast with each other. ... To create a point of juxtaposition, the picture must contain at least two elements with strong visual weight. The viewer looks at both of these at the same time, coming to a conclusion about the purpose of each element. 

Line 

The use of lines in images is very important to consider as it dictates how the viewer sees the image. Lines can be used to direct the viewers attention towards or away from certain elements.

The first and most basic element of design is that of the line. In drawing, a line is the stroke of the pen or pencil but in graphic design, it’s any two connected points. Lines are useful for dividing space and drawing the eye to a specific location. For example, think about how a magazine uses lines to separate content, headlines and side panels.

Shape 

Shapes, geometric or organic, add interest. Shapes are defined by boundaries, such as a lines or color, and they are often used to emphasize a portion of the page. Everything is ultimately a shape, so you must always think in terms of how the various elements of your design are creating shapes, and how those shapes are interacting. 

Size 

Playing with the scale and size of your objects, shapes, type and other elements add interest and emphasis. How boring would a symmetrical website with all similarly sized ingredients be? Very. But the amount of variation will depend heavily on the content within. Subtle differences suit professional content, while bold ones prefer creative enterprises. 

Texture 

It’s counter-intuitive to think about texture when the piece isn’t ever going to be touched. Websites and graphic design do rely on the look and impression of texture on the screen, however. Textures can create a more three-dimensional appearance on this two-dimensional surface. It also helps build an immersive world. 

2D 

Some techniques give a very 2D appearence such as silhouettes, a lot of detail is lost but it does have quite an interesting effect on the audience.

3D 

Some techniques will emphasise the 3D appearence of an image/ scene. Again, this can be used to encourage a specific reaction from an audience.

Balance alignment 

Never forget that every element you place on a page has a weight. The weight can come from color, size, or texture. Just like you wouldn’t put all your furniture in one corner of a room, you can’t crowd all your heavy elements in one area of your composition. Without balance, your audience will feel as if their eye is sliding off the page.

Symmetrical design creates balance through equally weighted elements aligned on either side of a center line. On the other hand, asymmetrical design uses opposite weights (like contrasting one large element with several smaller elements) to create a composition that is not even, but still has equilibrium.

Symmetrical designs are always pleasing, if not occasionally boring. Asymmetrical designs are bolder and can bring real visual interest and movement to your composition.

repetition

If you limit yourself to two strong typefaces or three strong colors, you’ll soon find you’ll have to repeat some things. That’s ok! It’s often said that repetition unifies and strengthens a design. If only one thing on your band poster is in blue italic sans-serif, it can read like an error. If three things are in blue italic sans-serif, you’ve created a motif and are back in control of your design.

Repetition can be important beyond one printed product. Current packaging design is heavily embracing beautiful illustrated patterns. Anyone thinking about a startup knows one of the first things you need is a strong logo to feature on your website, business cards, social media and more. Brand identity? Another term for repetition.

Contrast

Contrast is what people mean when they say a design “pops.” It comes away from the page and sticks in your memory. Contrast creates space and difference between elements in your design. Your background needs to be significantly different from the color of your elements so they work harmoniously together and are readable.

If you plan to work with type, understanding contrast is incredibly essential because it means the weight and size of your type are balanced. How will your audience know what is most important if everything is in bold?

As you seek out examples of really strong, effective design, you’ll notice most designs only feature one or two typefaces. That’s because contrast can be effectively achieved with two strong fonts (or even one strong typeface in different weights). As you add fonts, you dilute and confuse the purpose of your design.

Space

All of the other elements deal with what you add to your design. White space (or negative space) is the only one that specifically deals with what you don’t add. White space is exactly that—the empty page around the elements in your composition. For beginning designers it can be a perilous zone. Often simply giving a composition more room to breathe can upgrade it from mediocre to successful.

White space isn’t sitting there doing nothing—it’s creating hierarchy and organization. Our brains naturally associate ample white space around an element with importance and luxury. It’s telling our eyes that objects in one region are grouped separately from objects elsewhere.

Even more exciting, it can communicate an entirely different image or idea from your main design that will reward your audience for engaging with it. The logo above uses active negative space to communicate multiple ideas in one fun, creative design.

First person

This puts the audience in the scene, they view the action as if they are in the movie themself. This can help to actively engage the audience.

Third person

This puts the audience in the scene as a bystander they are not actively involved in the scene but they have a good vantage point to follow the action.

Scrolling

This is a technique that was utilised in early computer games such as Mario. It is also often used in films, the camera will scroll from left to right to follow the action.

Aerial

This gives a perspective of the action from above. This is often used to give us extra information. For example, a castle under attack might be viewed from above to give us an indication of the sheer volume of enemies attacking it.

Font

By definition font means a set of printed letters, numbers, and other symbols of the same style. It is important we carefully consider the font we use as it can have a big impact on the message and how the audience recieves the text. 

Typography has two main purposes in graphic design. The first is to promote legibility, and the second is to help communicate the messaging, tone, and sentiment of a design piece. Another function of typography revolves around aesthetics. We're drawn to visually attractive designs that are clean and easy on the eyes. In contrast, if a design is busy, confusing, and causes us to strain our eyes, we run the other way. 

Graphic design is all about visual communication. Through typography, we can heighten the message of a design in a clear and legible way. In a design that's primarily image-based, the typography needs to be strong enough to get noticed. In a text-heavy design, we need to use typography design in order to differentiate different sections and call attention to important messages. Either way, there needs to be an intentional and harmonious balance between different competing elements in order to get the primary message across quickly and easily.

Hierarchy of type

One important way typography is used in graphic design is to create visual hierarchy. This is often accomplished through sizing--the largest element on the page naturally draws the eye first. In a text-heavy graphic design, such as a newspaper or brochure, the headlines stand out and draw attention because they're larger than the body text.

Typography

The terms "typeface" and "font" are often used interchangeably. In fact, when most people say "font," what they're really referring to is a typeface. As a graphic designer, it's important to understand the difference between these terms.

A typeface is a family of fonts. Some familiar examples include Times New Roman, Arial, and Brush Script. A font is a variation of a typeface, typically bold, italic, or a combination of the two. Examples of fonts include Times New Roman Italic and Arial Bold.

The below graphic helps illustrate the difference between typefaces and fonts, using Proxima Nova as an example.

Another way to create typographic hierarchy is through the combination of different typefaces. For instance, using a geometric sans serif typeface for headings and a classic serif for the body. The standard approach is to establish three levels of typographic hierarchy: headings, subheadings, and body copy. Each level utilizes a different font, and the hierarchy is further established through sizing.

White Space

White space is the area between design elements. It is also the space within individual design elements, including the space between typography glyphs (readable characters).

Despite its name, white space does not need to be white. It can be any color, texture, pattern, or even a background image.

White space can cause problems between designers and clients. Design theory promotes the use of white space for elegance and ensuring a quality user experience. Sadly, many clients and managers consider white space wasted space. They think it could be used to house more information or other visual elements.

On the contrary, white space is a great tool to balance design elements and better organize content to improve the visual communication experience. If you were a technical writer in charge of composing hundreds of manuals for a kitchen appliance company, you would work to find a superb balance of words and images. Few people read manuals for pleasure; it is then crucial to hold the readers’ attention! For that, the white space is the real star of the show, working between the words and the pictures. It keeps each page from looking busy. Instead of calling the helpline, readers will digest the troubleshooting advice.

People get frustrated when information bombards them. We’re humans, not machines. White space calms us, letting us “breathe”.

As with the other user interface elements, you as a designer need to understand the role white space plays and experiment to find the right balance between it and the rest of the elements.

consistency

Consistency is a key factor in web design for both visual elements and functionality.

Consistency ensures that your website looks coherent and works harmoniously across all its different elements, such as headers, footers, sidebars and navigation bars. It also:

• gives your users a more positive experience

• enables users to carry out tasks more quickly and efficiently

• improves usability and learnability of your website

• eliminates pain points and difficult navigation

• saves money and time on design

Consistent navigation

Navigation elements offer users a road map to all the different areas and information within the site. In order to work effectively, navigation should be clear and consistent across your website.

Visitors to your website should be able to move from page-to-page easily and always know where they are. Difficult website navigation can tempt them to leave your site.

Page layouts and menu structure

It is a good idea to use templates to create a common page layout across your site. Create smooth transitions between pages by having consistent elements on each page. For example:

• have menus in the same position on each page

• have same fonts and colours throughout the site

• have a clear, visual hierarchy to the elements on your page

• ensure that your business logo appears on each page

• make sure that your logo links back to the homepage

• include a search box on each page in the same location

You should also consider the placement of any marketing messages and 'calls to action', such as newsletter sign-up, special offers or discounted products or services. Place these prominently as positioning can improve customer response rates.

Fonts and typography

Designing for a website restricts your font choices. If you specify a font that a user does not have on their computer or mobile device, their browser will substitute a default font, changing the look of the page.

It is best practice to choose standard fonts for pages and specify a font family - this will help reduce the possibility of the page being displayed using system fonts. The web page will also look clearer if you choose fewer fonts and type sizes.

Remember to test your web pages on multiple browsers to see what effect these have on the overall appearance.

Branding in web design

If you already have a recognisable brand or image, make sure to incorporate it into your design. Your website should:

• reinforce your corporate brand

• use your company logo consistently throughout the site

• be part of your wider marketing strategy in an attempt to reach your target audience

While you are making sure that your website is consistent and true to your brand, don't forget it also needs to be accessible and usable. Read about web accessibility issues.

Visual Hierarchy

Visual hierarchy is the principle of arranging elements to show their order of importance. Designers structure visual characteristics—e.g., menu icons—so users can understand information easily. By laying out elements logically and strategically, designers influence users’ perceptions and guide them to desired actions.

“Visual hierarchy controls the delivery of the experience. If you have a hard time figuring out where to look on a page, it’s more than likely that its layout is missing a clear visual hierarchy.”

Building Blocks of Visual Hierarchy

Hierarchy is a visual design principle which designers use to show the importance of each page/screen’s contents by manipulating these characteristics:

• Size – Users notice larger elements more easily.

• Color – Bright colors typically attract more attention than muted ones.

• Contrast – Dramatically contrasted colors are more eye-catching.

• Alignment – Out-of-alignment elements stand out over aligned ones.

• Repetition – Repeating styles can suggest content is related.

• Proximity – Closely placed elements seem related.

• Whitespace – More space around elements draws the eye towards them.

• Texture and Style – Richer textures stand out over flat ones.

In user interface (UI) design, an effective visual hierarchy helps inform, impress and persuade users, who have expectations – especially about an interface’s appearance. So, for a website, app or related product to succeed, it’s crucial to structure its pages or screens to minimize users’ uncertainty, show maximum empathy with them and give them something pleasant to view.

Interface

A video game User Interface is an interface with components that help players navigate, find information, and accomplish goals. There is a large list of game UI components—life bars, coin counters, level maps, etc. Just like UI design for mobile apps, video game UI design requires close attention to detail and functionality. 

Interactive elements

Modern computer games have many interactive elements to entertain users. The purpose of these is to enterain the user and add other elements to the game which will attract the user to continue playing the game. Many modern games such as Golf Clash and 8 ball pool have random bonus chests that you must log in each day to open.