The design

is a plan or construction of an object or a system. It may be an
architectural blueprints, engineering drawings, business processes, circuit diagrams or sewing patterns. The design has different connotations in different fields.
The design is what links creativity and innovation. It shapes ideas to become practical and attractive propositions for users, clients or customers. Design may be described as creativity deployed to a specific end.

Colour theory…

There are a few key points that I will expand on to show the importance of colour theory.

Colours convey strong emotional meaning to an audience.
Marketing research studies have been done regarding the subconscious
perception of colour and its ability to drive consumer behaviour.
Red, yellow and green have been shown to increase hunger and impulse
purchases, which is why we see this combination frequently used by fast
food chains and manufacturers of junk food items in retail packaging.

In western culture the following colours have the following meanings.

Blue is seen as reliable, conservative and dependable.
Financial institutions and insurance companies frequently
use this hue in their logos and promotional materials.

Yellow is a cheerful and playful color associated with fun,
energy and vitality. It can have the problem with not being
perceived seriously.

Brown suggests stability, reliability, and comfort. Studies have shown
that in times of economic uncertainty, consumers tend to purchase more earth tones for clothing and home décor.

Orange represents vitality, energy, and fun. It is considered the
most visible colour in the spectrum, so it is used in safety and
construction products that demand the attention of passersby.
Like yellow, it is not generally associated with sophistication and
refinement and is not always taken seriously

Purple is associated with mystery. Darker shades of this colour are associated with royalty and wealth. Purple is generally considered a feminine colour in advertising, packaging, and marketing.

Green is associated with freshness, growth and renewal.
This colour is used frequently to convey organic products.
Light green is perceived as tranquil and is frequently used
inside of hospitals and prisons.

Grey conveys a sense of refinement and sophistication.
We often see this used in the advertisement for luxury items.
It is a colour proven to decrease appetite, so it is not generally
used in restaurant settings or on consumer food packaging.

White is perceived as pure and innocent.
It is associated with cleanliness and sterility.

Black is a colour of mystery, fear and danger. In the west, it is
closely associated with death. In advertising and marketing, it is
often used as a colour to denote sophistication and masculinity

It is important to note that colour associations vary across world cultures.
For instance, the colour white suggests purity and innocence in the west,
but in some African and Asian countries, this colour is associated with death.
Red is the colour of lust and adventure in Western cultures, but symbolises
luck, prosperity, and marriage in Asian countries.

The above information only highlights how It is extremely important to research many cultures, beliefs and world trends when making a logo or design that you hope to be a global hit.

Colour Spectrum-

Colour is based on light Colour perception based on the two components: wavelength and luminosity Colour of light is determined by wavelength and how it hits a surface. there are certain Colours can exist beyond the spectrum visible to humans: ultraviolet and infrared light are examples.

to explain some terms used with colour i have highlighted the main ones below. Hue: Any single colour in the spectrum (red, yellow, blue, etc) Value: The relative lightness or darkness of a colour. Tint: A colour with white added.
Shade: A colour with black added. Saturation: The relative intensity or brightness of a colour Bright, vibrant colours (reds or oranges) have a saturation dull or muted colours (browns) have a low degree of saturation.

Like other elements of design, hue, saturation and value can be used
to emphasise certain areas of a composition or deemphasise others
Colours can balance, organise and harmonise a design, or to create discord
Colours with high saturation intensity and brighter value are more visible
and demanding of a viewerʼs attention
Colours with low saturation can be used to set apart secondary information
or to create background elements.

Primary Colours: Red, yellow and blue; the hues that form colour wheel base
Secondary Colours: Green, orange and violet; hues that are mixed
by combining two primary colours.
Tertiary Colours/Intermediate: Colours created by mixing a secondary colour and a primary

Complementary Colours: Colours that are opposites on the colour wheel that,
when combined, neutralise one another. Scheme provides strong visual
contrast and demands attention. For best use, de-saturate the cool colours
rather than the warm ones.

Analogous Colours: Colours that fall in adjacent proximity to each other on
the colour wheel, such as red, red orange, orange
Using analogous colours in a design creates unity and harmony.

Split Complementary: Colour scheme using a hue and the two colours that lay on either side of its compliment on the colour wheel
Provides more visual variety than complementary scheme; strong contrast
Harder to balance than monochromatic, analogous colour schemes
For best results, use one warm colour with a range of cool colours or vice versa and avoid de-saturated warm colours.

Triadic: Colour scheme uses three colours equally spaced around the colour wheel.
Provides strong visual contrast while adding balance and richness.
For best use, choose one colour to be used in larger amounts than others;
experiment with colour saturation and value.

Tetradic (Double Complementary): This is the richest of all the schemes;
utilises four colours arranged into two complementary colour pairs
Can be hard to harmonise; if all four colours are used in equal amounts, this scheme risks looking unbalanced and chaotic, so choose one colour to be dominant.

There are may ways as we have seen colours and design work together to great effect above, below I have given some examples of how to explore further with alternative methods:

Simultaneous Contrast: The concept of colour perception based on
the other colours surrounding it.
Colour can look completely different when set against different hues,
and is perceived in relation to its surroundings.

Advancing/ Receding Colour: Warm and bright colours give
the illusion of being closer to a viewer within a composition,
while cool and dull colours appear to be further away.

Vibration: Complementary colors of equal saturation and brightness
compete with our eye for attention when seen in close proximity to
one another.

Weight: Colours differ in visual weight based on their hue and intensity.
For example, red is considered a “heavy” colour, and would demand
a viewerʼs attention, even if shown in only a small amount within a
composition.

Using Grids for designs…

The Benefits of Using a Grids in design are for Efficiency and flow of your project. Grids allow designers to quickly add elements to a layout because many layout decisions are addressed while building the grid structure. Economy — Grids make it easier for other designers to work and collaborate on the design as they provide a plan for where to place elements. I have included a few well respected and widely used frmats below:

Golden Ratio (or Rule of Thirds) Composition is important for any image, whether it’s to convey important information or to create an aesthetically pleasing photograph. The Golden Ratio can help create a composition that will draw the eyes to the important elements of the photo.

The Fibonacci Sequence is the series of numbers:

0, 1, 1, 2, 3, 5, 8, 13, 21, 34, …

The next number is found by adding up the two numbers before it.

• The 2 is found by adding the two numbers before it (1+1)
• The 3 is found by adding the two numbers before it (1+2),
• And the 5 is (2+3),
• and so on!

Breaking the grid-

Probably the most well-known rule of typography is to use a grid when designing. But that’s not your only option – playing with and challenging the typographic grid can lead to great designs too , as long as it’s done right!

There’s a long history of playing with the grid, and the ability to do so successfully is a mark of skilled designer.

Gestalt theory…

Proximity–We tend to group objects that are close together as part of the same object. 

This iconic example from the Girl Scouts presents three faces, two outlined in white, one in green. However, they appear to be a part of the one item. It can be perceived as both separate faces or one image..

Similarity: we tend to perceive things that physically resemble one another as part of the same object.

In this example from Sun Microsystems, the SUN logo contains a U and an upside down U; however, when they are together, they look like they are forming the word “SUN”, and are part of the same logo.

Continuity: When we see one object, but are compelled to move through another object; when our eyes naturally follow a line.

In this example, our eyes follow from the C in Coca to Cola. We then follow the C in Cola through to the L and A in the word. This helps our eyes continue to move through the word.

Continuity: When a shape is not complete, but enough of the shape is shown, our minds will fill in the blanks and construct the whole of the shape.

In this example, there are spaces missing in the panda bear’s head and back. This is normally where the white fur would be; however, because most people are familiar with the shape and color of a panda, we are able to perceive it as that animal.

Typography…

Is the Anatomy of letterform broken into the following categories:
• Evolution of letterforms & type classifications

There are an overwhelming amount of fonts, but the main two categories of fonts out there are.

Serif: Serif is the slight projection at the end of a stroke that’s most commonly seen at the bottom of letters. If you look closely, some fonts will have “little feet” on them. This is what characterizes it as being a Serif font. This allows the eye to flow through sentences with ease.

Sans Serif: Fonts that are Sans have no “feet,” or serif. 

• Type terminology typefaces, type styles & type
families

• Measurements of type, font types are measured in picas. there are lots of parts to think of including ear, counter, ascender, apex, beak, crotch, vertex, when making and measuring fonts
• Line spacing

• Letter spacing and word spacing is known as kerning

• Working with large bodies of type it is improtant to use the correct fonts and sizes, a few key points are listed below:

• The most legible fonts are Arial, Courier, and Verdana.
• At 10-point size, participants preferred Verdana. …
• At 12-point size, Arial was preferred and Times New Roman was the least preferred.
• The preferred font overall was Verdana, and Times New Roman was the least preferred.

• Alignment for large bodies of type is a very important skill, to make it easy for the user to read and continue to be engaged with, Below you can see, although they all will be suitable for different needs. 90% of the time left aligned is the simplest and easiest to read and keep reading.

• Choosing and using a typeface worthwhile spending time on as some fonts may come across as casual, while some may look formal and professional. Others show fun and carefree identity, while some give you an impression that they’re meant to be used for more serious things. This is what typefaces do. They give any text they are used on its own personality, allowing people who read it to identify with it more effectively. once coupled with your target market research it can become an effective tool.

Examples of presentation styles:

Firstly I will start with formal presentation, A formal prevention is Presenting ideas effectively to individuals or groups when given time to prepare. Usually in a pre arranged setting. The presentation follows a chosen path, typically used for bids, pitches, conferences and investor presentations. A formal pitch is majority one way broadcast rather than a conversation. using programs such as Key note or Powerpoint are great to use with a formal presentation. I have given a few examples below.

Secondly I will explain informal presentation, An informal presentation is Presenting ideas to anyone on an ad hock basis as these are sometimes off the cuff and not pre arranged. although the presentation follows a path to the end objective it is done in a friendly non treating way, both parties can be involved. Using such programs as keynote or powerpoint could kill the vibe of an informal presentation.

Types of Styles and how to use them.

Coach Style – an energetic and charismatic style used to sell and emphasise with an audience.

Storytelling Style – Where you rely on you own examples to bring your presentation to life. Best used once you are very experienced in your field and have all areas well covered.

Freeform Style – An impromptu style that can be off the cuff and need a script or plan. Best used for short presentations that can come up unexpectedly.

Visual Style – A presentation that relies heavily on visuals such as slides and charts. Best used if you have a large crowd with many ares to touch on.

Connector Style – A presentation where you connect with your audience through Q&A’s and product feedback. Best used when you are early on in your ideas and are looking for some real time feedback.

Skills required for a great presentation…

Below I have highlighted some of the main skills and how to implement them for a great presentation.

Know you content – It is important to learn your content, to show you care about and have a clear understanding of your product, this gains trust from your audience. Notes are a good idea if there is a lot to take in.

Use a visual aid – Using a visual aid will not only help you keep on you path but allow your audience to as well. using programs such as keynote or power point will help portray to message.

Use appropriate language – Obviously swearing is a no no but using language that your audience understand will keep them interested and engaged. steer clear of slang, abbreviations and tech heavy jargon.

Make eye contact – by having eye contact it instills trust and engagment.

Be yourself – it is important to be yourself, only you will do! by trying to act or behave like someone else will only put you or the audience off.

Voice – using your voice is obvious but how you use it is what counts, think and practice your pitch, pace and volume.

Remember to breath and drink – it is important to breath and relax, it will help you focus and regain your thoughts. Having a drink to hand will give you that to break or wet your whistle when you need it most.

The Internet is the term we use for the physical network of servers, wires, fibre optic cables and wifi that we use along with the “backbones” that make it possible such as undersea cables, landing stations and signal amplifiers. I have given an example of the scale of the “Backbones” that expands across continents in the picture below.

The World Wide Web was created by Sir Tim Berners-Lee, it is platform used with the Internet as a way to link on document directly to another. It is different to the Internet as the Internet is the infrastructure and the WWW is a service on top of that Infrastructure.

Types of Coding and what they are for…

Types of “coding” or an easier to understand term “computer language”. This computer language enables computers to understand each other across the world without language and cultural boundaries.

A few examples of the different coding terms are as follows:

HTML (Hyper Text Markup Language) html has the function to structure and format documents enabling it to link to other resources and documents.

CSS (cascading Style Sheets) css is how HTML elements are displayed, cascading. css is used for presentational purposes, such as text, images and the general feel of the website.

Javascript is the coding used for the behavioural aspect of the website such as how the user can interact with the site and the interactivity like hoover over features, scrolling features and animation.

Hardware and software needed…

The hardware you need to use the internet and to access the world wide web has the following minimum requirements:

Landing station – to connect to the country you are in.

Signal amplifier – to boost signal along Cables

Fiver optic cables – to transport the information

Servers and data farms – to receive information and distribute to you

Computer – to receive information, it must be internet enabled

The Software you need to use the internet and to access the world wide web has the following minimum requirements:

An operating system – to process and deliver information in user friendly format

Internet browser – to be used to browse the internet and discover URLs.

Why use CSS…

CSS is a clean code, making it easy for browsers to read. CSS allows cross platform adaptation, again making it available from further sources, CSS is SEO friendly , allowing your site to be found easily. CSS is compatible with HTML.

Why use HTML…

HTML is mainly used for the structure of the site. HTML has video and audio support. HTML supports office browsing which can be a real benefit to your site, allowing to view content without an internet connection. HTML is SEO friendly. HTML is easy to keep your website maintained and updated. HTML has cross browser compatibility.

Copyright Legislation is in place to protect the original artist/s and his work, It has been in place in different formats since 1709, the current Act in use is the 1988 Copyright act. It is an Offence to use, distribute or alter an image without the consent from the original artist, However free use is applicable if you are using the image for personal use or education to name a few, It is always good practice to credit the original artist and seek their permission.

I have included 3 examples below to highlight copyright further…

Example 1 – Jonathan Mannion vs Coors

Jonathan Mannion was the photographer who captured an iconic image of basketball player Kevin Garnett for SLAM magazine. The beer brand Coors recreated it for an LA billboard advertisement, Crucially without Jonathan’s consent.

The Court ruled in favour of Jonathan, His victory was very significant. Copyright cases like these value the look and feel of a photo, and as Mannion said in a 2013, photographers now have a president when others change their images for commercial gain.

Example 2 -Photojournalist Daniel Morel vs Getty Images

Daniel Morel was one of the first people to sue getty images as they took the image from his twitter account, ultimately breaching his copyright to the image. 

Example 3 – John Maloof vs Vivian Maier

John Maloof acquired and published the unprocessed photos of late street photographer Vivian Maier. A lawyer and former photographer, David C. Deal, Represented Maiers closest living relative  to fight for her right to copyright.

Example of Legal Issue involving Images – Dixie Plantation

The owners of Dixie Plantation sued a photographer for trespassing onto their property to take a picture, which he then sold. The lawsuitsought an injunction that would prohibit further distribution of the photograph.

After the ruling by the court, trespass was the only surviving claim. The case was ultimately settled confidentially, but the photo notably remained for sale.

This U.S. court case is one of the most significant regarding trespassing for commercial photography. No question; Ham poked his camera where it didn’t belong, but the Charleston Foundation went a step further by claiming they had lost the “exclusivity of a unique image and representation found on Dixie Plantation”.

The court ruled that simply taking a photo of private property did not constitute a transfer of copyright. Rightfully so; at Pixsy we often come across infringers who think this is a valid excuse for stealing photos. 

For me trespassing without permission and constant is a legal breach of copyright.

.mov A Movie file is a common multimedia container file format developed by Apple and compatible with both Macintosh and Windows platforms.

.JPEG stands for Joint Photographic Experts Group it is a commonly used method of lossy compression for digital images, particularly for those images produced by digital photography.

.PNG Portable Network Graphics is a file format for image compression 

.GIF stands for graphics interchange format a lossless format for image files that supports both animated and static images.

.RAW A raw file is a collection of unprocessed data. This means the file has not been altered, compressed, or manipulated in any way by the computer.

,PDF stands for Portable Docment File a file format for capturing and sending electronic documents in exactly the intended format.

.AVI Audio Video Interactive is a multimedia container format introduced by Microsoft in November 1992 as part of its Video for Windows software. AVI files can contain both audio and video data in a file container that allows synchronous audio-with-video playback. Like the DVD video format, AVI files support multiple streaming audio and video, although these features are seldom used. Most AVI files also use the file format extensions developed by the Matrox OpenDML group in February 1996. These files are supported by Microsoft, and are unofficially called “AVI 2.0”.

.EPS is Encapsulated Postscript Vector graphics (Adobe Illustrator) EPS is a file extension for a graphics file format used in vector-based images in Adobe Illustrator. EPSstands for Encapsulated PostScript. An EPS file can contain text as well as graphics.

.Ai file is Adobe Illustrator Artwork (AI) is a proprietary file format developed by Adobe Systems for representing single-page vector-based drawings in either the EPS or PDF formats. The .ai filename extension is used by Adobe Illustrator. The AI file format was originally a native format called PGF.

Raster vs Vector…… 

There are two main type of image files: Raster and Vector. Raster images are created with pixel-based programs or captured with a camera or scanner. They are more common in general such as jpg, gif, png, and are widely used on the web. Vector graphics are created with vector software and are common for images that will be applied onto a physical product. Also used in CAD, engineering, and 3D graphics which we do not provide information nor services for. 

When using a raster program you paint an image and it’s similar to dipping a brush in paint and painting. You can blend colors to soften the transition from one color to another.

When using a vector program you draw the outline of shapes: and it’s similar to creating an image with tiles of all different shapes and sizes. e.g. an eye shape, a nose shape, a lip shape. These shapes called objects display one single color each.

Storage and Retrieval…..

The organizing of your computer documents is vital to your success in your professional and personal
life. It is much easier to locate a file that has been placed in a well-named sub-folder, it is also often very difficult to find files on systems that are not organised in any way. If you organise all of the documents from a project into a sub folder, you will be able to easily find all of resources that you are working. The process of moving files between computers and work colleges and backing up files all become much easier as you can simply choose a folder to move instead of all of the individual files associated with a topic. Lastly if you begin a project by organising your files, it will be much easier to keep them organised in the long-term.

Using logic will really help, for example use unique identifier, Version numbers and Year/Month/Date format for your files.

File Naming:

How you name your documents will have a huge impact on your ability to find those files later on and to understand what it is that they contain. You should always be consistent and descriptive when it comes to naming so that it is obvious where to find specific data and what the files contain. It is a good idea to set up a clear directory structure that includes information like the project title, a date and some type of unique identifier. Individual directories may be set up by date, the name of the person currently working on the project, version number, or whatever ever else makes sense for you and also anybody else working on the files.

Define Multimedia and Interactive Multimedia

Multimedia is multiple media including Text, Images, Sound, Video collaborating on one project or platform.

Interactive multimedia is multimedia that the user can interact with giving them access to control, combine, and manipulate their experience.

Identify how multimedia & interactive media

The BBC news website I have used for my first example as it includes the use of multimedia including Text, Images and videos.

The bbc news site uses video to support the text, it uses images to visually support headlines. it uses interactivity to encourage visitors to comment and will then provide related articles.

Youtube video sharing platform I have chosen for my 2nd example as it is a great example of video and sound being used to produce productions that spread across many categories and the comments options to include interactivity creating a community.

Fortnite is my 3rd example as is highly interactive, it uses multimedia to give the player options to customise their character including graphics for clothing and sound for bespoke dance moves. by using sound and graphic effects during the fighting scenes while getting shot during the game it gives user feedback and a deeper involvement giving the user an immersive experience. during the game it has counters and graphs to show the user instantly their game level and progression.

Musicmap.info is an interactive infographic, this is my 4th example, it is a great example of interactive multimedia as by using a clever infographic it can take a lot of heavy information and make it fun and concise to the user. by making it easier to use it leads users to explore more information. it has a flowing effect showing the genres music. by highlighting when the cursor moves over a subject it gives the user feedback on which section they are about to open.

Summery.

To summarise the design principles for interactive media, I believe that the key points are, knowing your audience and focusing on user experience is a essential starting point. By understanding your target audience you are sure to have a better customer experience. Typography is also high on the list of priorities because it is important to make your project legible for a broad audience by having good typography you are more likely to pass the 5 second test. The 5 second test is when the users gather their initial impressions. Users make important judgments in the first moments when they visit a page, by getting this right you are more likely to get your user to follow the 3 click rule which is where you can give the user what they want within 3 clicks. once you have thought about these things mentioned above you can implement them into a wireframe. Once the wireframe is complete you can proceed to a mock up.

Thanks for joining me!

Good company in a journey makes the way seem shorter. — Izaak Walton