Uncategorized

Unit 20: Graphics for Interactive Media

As a Marketing Assistant at MediaVita, my main role involves designing a variety of graphics for web use. This includes social media related designs and website display banners. In this assignment, I have provided and explained a workplace assessment carried out by myself, with reference to relevant theory and evidence.

1 Understand theory and applications of digital graphics technology

1.1 Describe theory and applications of digital technology with some appropriate use of subject terminology

The media industry is one of the fastest growing industries and is constantly evolving with the development of new technologies. In the creative media industry there are a huge variety of applications applied to Interactive Media Graphics. Interactive media is simply types of graphical art or data that is interactive for an audience. Interactive media is the integration of digital media including combinations of electronic text, graphics, moving images, and sound, into a structured digital computerized environment that allows people to interact with the data for appropriate purposes. Interactivity can help to make sense of information and give control to the user.

One of the most popular types of interactivity requires scrolling from its users, which usually triggers animations and transitions. It is a great technique for drawing viewers attention and making them feel more engaged. The most common interactive media graphics include screen icons, advertising web banners, navigation menus, web links and buttons and animated graphics. Another great example of an interactive media graphic is to have clicks or rollovers that offer more information. This allows users to explore information and skip over minor topics of little interest. Graphic elements can be created from simple software such as paint to complex and professional software such as Adobe Indesign or Photoshop. Graphics editing software is used to edit bitmap and vector images.

Great applications for interactive media systems must include advanced interactive devices that are mobile but to also be effectively engaging. They must also include cloud-based analytics to map user interest to global information and social networks.

Platforms applied to:

  • Hand-held devices e.g. mobile phones
  • Worldwide Web
  • CD/DVD/ROM
  • Information kiosks
  • Interactive TV

Applications of Interactive Media Graphics

Interactive media can be used for a variety of different purposes, including e-books, interactive TV, mobile applications, and museum information kiosk touch screens. These products usually comprise of a range of multimedia and interactive elements to engage and entertain users, as well as educate them.

Interactive media can be implemented using a variety of platforms and applications that use technology. Some examples include mobile platforms such as touch screen smartphones and tablets, as well as other interactive mediums that are created especially to solve a unique problem or set of problems. Interactive media is not only suitable to a professional environment. It can also be used for any technology that responds to user actions. This can include the use of Javascript and AJAX in web pages.

Navigation Menus

At the heart of every well-designed website is a navigation menu. Ease of navigation is one of the biggest keys to the usability of a website. An easily approachable navigation menu is one example of an effective interactive navigation too. A navigation menu is simply a digital index and online compass that guides the user around a website helping them discover what they’re looking for. They are often obvious and visible on a site design. Typically, a main navigation menu will sit along the top of the page in the center or aligned to the left or right of the page. They are effective because they are able to help increase page views and improve the user experience. All navigation menus should lead to more information surrounding a topic and is able to support all kinds of website designs.

WordPress is one example which supports multiple menus so a theme can have support for more than one navigational menu (e.g. header and footer menus). This allows you to add posts, pages, and custom links to a navigation menu using drag and drop functionality.

creative-market-

Website Banners

A web banner or banner ad is another example of interactive media and is a form of advertisement displayed into a web page. They allow businesses to advertise on other sites through messaging and visual graphics. The advertisement is possible to be created in a variety of file formats including JPEG, PNG or GIF, as well as a multimedia object (usually created using flash). Therefore banner ads can either be static or animated, depending on the technology used to build them. Web banner elements such as well structured ‘Call to actions’ and button linking through to a site is what draws users attention.

All banner ads share the same basic function: you click on the image/multimedia object you see on a web page and your internet browser will direct you to the advertiser’s website/landing page. Their purpose is aimed to generate traffic to a website, grab user attention and increase brand awareness. Banner ads are also an effective way to announce or promote discounts, sales or offers.

website-banner-templates_1124-156

Animated Graphics

Animated graphics have become practical and useful web design tools. From full-screen moving images to small hover effects, touches of animation have now become a popular interactive media creation. Animation happens when something created in still or two-dimensional form is ‘brought to life’. Web animations are often saved as GIF, CSS, SVG, WebGL or video. They can be anything from a simple underline that appears when you hover over a word to a full-screen video or background image.

http _mashable.com_wp-content_uploads_2013_05_Go-Animate

Icon Graphics

Icons are another type of interactive media graphic. An icon is a small picture or symbol that serves as an intuitive representation of the content of a website. They can be used in different parts of a website from headers, menu lists to content. They can be fully interactive cues that help lead users through a design and provide extra visual engagement. They can be different shapes and are sized depending on where they are being viewed.  Due to their condensed size and versatility, icons are a simple, effective way to transmit information in an abbreviated pictorial form to the user. Iconic images are often applied to illustrations and can work both as links and images. When used correctly, icons can increase conversion rates and improve page stay times.

service-marketing

Where to use icon graphics:

  • Homepage of website
  • Text heavy web pages
  • Graphs or Diagrams
  • Supporting Calls-to-action

Creating an Interactive Media Graphic

When designing an interactive media graphic, it is important to consider the following:

  • Size
  • Download time
  • Content type
  • Costs
  • Copyright
  • Requirement for plug-ins

To create an effective Interactive Media Graphic, you need to understand:

  • Past and current practice (inspiration)
  • Purpose of the graphic
  • Target audience
  • Graphic Style
  • Platform Purpose

The Production Process will involve:

  • Creative abilities
  • use of technologies
  • technical applications
  • accuracy to plan
  • time management

Construction of Interactive Media Graphics

There are numerous types of graphic file formats and each type stores graphical data in a different way. Standard file formats are recognized by nearly all computer applications that can use interactive media. These include JPEG, BIT MAP, GIF, PNG etc. Bitmap, Vector and Meta file formats are by far the most commonly used formats. Adobe Indesign and Photoshop can import a wide range of graphics file formats.

Pixels:

A pixel is the basic logical unit in interactive media graphics. Pixels are combined to form a complete image, video, text or any visible thing on a computer display. Computer based images are comprised of thousands of tiny dots of colour called pixels. When these groups of pixels are viewed as a whole, we see the entire image. Most standard computer displays have resolutions that vary from 72 to 96 pixels per inch(ppi/dpi), depending on how the monitor and display card are configured. Resolution indicates the number of pixels that are displayed per inch for an image. Images for web are always limited by the resolution of the computer screen. Thus a square GIF graphic of 72 by 72 pixels will be approximately one inch square on a 72-ppi display monitor. Although retina displays used for graphic design and print are said to have a resolution greater than 300dpi.

When you are creating graphics for web pages, you should always use the 1:1 display ratio (one pixel in the image equals one pixel on the screen), because this is how big the image will display on the web page. Images that are too large should be reduced in size with an image editor such as Adobe Photoshop to display at proper size at resolution of 72 ppi. The more pixels per inch, means more pixels covering an area.Colour systems use 24 bits per pixel, allowing them to display more than 16 million different colours. Therefore more colours are identified, resulting in a sharper and better quality image.

Raster Images:

Raster graphics are also called bitmap graphics. They are digital images that are composed of tiny rectangular pixels, or picture elements, that are arranged in a grid or raster of x and y coordinates in such a way that it forms an image. The file size of a raster image depends also on the size of the image, which is determined by the number of pixels being used in the image. Since raster graphics store much more information, they require large file sizes. Fortunately, there are image compression techniques that have been developed to help reduce the file sizes. JPEG and GIF are the most common compressed image formats on the Web. However BMP and TIFF are also some of the raster image file formats available. One advantage is that raster graphics can typically be scaled down with no loss of quality, but enlarging a bitmap image can cause it to appear “pixelated”.

JPEG:

The JPEG format is by far the most common used file type in comparison to others. An advantage of JPEGs is that they have a high versatility which enables them to be supported by all operating systems and other platforms such as mobile devices. JPEGs are also best known for their ‘lossless’ file type. This means that it can be compressed to make a smaller file. It also supports 24 bits per pixel which allows it to display a wide variety of over 16 million colours, making it very useful when images need to be colour critical. However JPEGS are not best suited for logos as they do not allow for transparency. With these features, JPEGs are perfect for web use. One reason for this is because JPEGs are abed to be saved as ‘progressive’, which is very useful for uploading a large image to the internet because when the webpage loads, the image will load in stages, firstly appearing as de-focused. This is a great engagement technique to give users an incentive to remain on a web page for longer. As well as being ideal for web upload, JPEG is the industry standard file format that digital cameras capture images in, therefore they are frequently used for print purposes.

jpg

PNG:

PNG files are similar to GIF files in the way that it supports both animation and transparency within the image. Therefore they are very useful when making illustrations, designing a website, creating photography etc. A PNG file can support 8, 24, and 48 bits per pixel, meaning it can display either 256, over 16 million or 281 trillion respectively. With these features, PNG are best suitable for interactive documents such as web pages, but are not ideal for print purposes. This is because they have higher compression rates, allowing for smaller files that download quicker. Also PNGs are ‘lossless’ file types, meaning you can edit them and not lose quality, they are still low resolution.

png

GIF:

GIF image files are widely used mainly for displaying images with animation. They appear mostly on Tumblr pages and in banner ads. This a useful file type for navigation buttons, menus on websites and general web projects where an image needs to load very quickly. Unlike JPEG, GIF files can support transparency in the rendered image. The compression GIFs use does not decrease the quality of the eimage. However they store image data using indexed colour. In their most basic form, GIFs are constructed of up to 256 colours in the RGB colour profile. Due to the limited number of colours, they are typically a small file size and are very portable.

GIF

PSD:

A PSD file format is an image file created by Adobe Photoshop, a professional image-editing program. The PSD format enables you to open the file with all the editable layers within the image individually, allowing you to enhance different images at a later date. You can save as either 16 or 32 bits per pixel, meaning it can support over 16 million colours and transparency.  PSD file types also support all available colour modes including Bitmap, Gray-scale, Duo tone, indexed colour, RGB, CMYK, Lab and Multichannel. An advantage of PSD file types is that they can be converted using the Adobe Photoshop program to other formats one by one. For example you can convert/export the layers as TIFF, JPEG, PNG, BMP in batch using Total image converter.

PSD

RAW:

RAW is an image file format used by many high-end and professional digital camera. They are considered to be the best form of image file, since it does not process the picture, leaving total control of the editing to the user. This is because RAW images are uncompressed and contain information from the sensor used to record the image. This provides much more freedom when it comes to to manipulation or refining of an image using a suitable editing software. RAW files can be edited by Adobe Photoshop and Corel Paintshop Pro. RAW files are much larger compared to JPEG files. This is because JPEG only records 256 levels of brightness, whereas RAW records between 4,096 to 16,384 levels. Those additional steps of brightness let you make more adjustments to your image, including exposure, blacks, fill light, recovery, contrast, brightness. These effects cause no reduction to the quality of the image. Another advantage is that RAW can capture between 12bit or 14bit, therefore the finer tones and colours means it produces better quality prints.

TIFF and BMP:

TIFF and BMP are another example of bitmap (Raster) image file types. TIFF is best for any bitmap images that you intend to edit. They are lossless image files, meaning that they do not need to compress or lose any image quality or information, allowing for very high-quality images but also larger file sizes. Therefore you cannot use TIFF image files for the web, as most web browsers will not display TIFFs.

The BMP (bitmap) format is a commonly used raster graphic format for saving image files and is recognized on both Macs and PCs. The BMP format stores colour data for each pixel in the image without any compression. This means BMP store more information and allow for higher quality graphics. Therefore they are no suitable for web purposes, but are often used for printable images.

tiff

Vector Images:

Along with raster images, there is another graphic file type called Vector. Vector graphics are made up of lines and curves. Vector images, alternatively allow for more flexibility. They are constructed using mathematical formulas rather than individual coloured blocks. Vector files are suitable for a variety of designs such as logos, charts, icons, or any hard-edged graphics. This is because you can freely move or modify vector graphics without losing detail or clarity, because they are resolution-independent.

Vector file types such as EPS, AI and PDF are perfect for creating graphics that frequently require resizing. They are the best choice for artwork such as logos, that will be used at various sizes and in various output media. For example, your company logo and brand graphics should be created as a vector and saved as a master file so you can use it with smaller items such as your business card and letterhead. It is recommended to always create a JPEG or PNG for use on the web from this master vector file. One advantage is that vector files such as AI and EPS can remain editable, so you can open them back up in Illustrator and edit any text or other elements within the graphic.

Bit depth:

The colour depth of an image is measured in bits. A bit depth specifies how much colour information is available for each pixel in an image. The more bits of information per pixel, the more available colours and more accurate colour representation. Most computer systems and digital cameras use 24-bit images. This means there are over 16 million possible colours per pixel. As industry standard, images tend to be saved at either 8, 16 or 32 bits. The maximum number of colours in an 8 bit image is 256, whereas in a 16 bit image the maximum number of colours is 65536. Therefore a 16 bit colour depth image will be twice the file size. As the bit depth increases, the file size of the image also increases because more colour information has to be stored for each pixel in the image.

What to Consider:

Different Colour Modes:

  • RGB (Millions of colours)
  • CMYK (Four-printed colours)
  • Index Mode (256 colours)
  • Grayscale (2 colours)
  • Bitmap Mode (2 Colours)

The Colour space, also refered to as Colour mode, determines how colours combine based on the number of channels in a colour model. Different colour modes result in different levels of colour detail and file size. For example, CMYK colour mode is best suitabe for images in full-colour print brochures, whereas RGB colour mode is more suitable for images in web or e-mail to reduce file size while maintaining colour integrity. CMYK refers to the four inks used in some colour printing: cyan, magenta, yellow and black. RGB colour mode images use only three colours: red, green and blue, in order to reproduce colours on screen.

images

A colour management system is a collection of software tools used to ensure that colours remain the same regardless of the medium or device used for displaying the colours. Colour systems are recommended, although it is still advised that the digital graphics you work on are produce using the colour mode that is best suitable to the intended use of the graphics. For example, when I am designing social graphics at work, I always set the standard colour profile to RGB as this model is best suitable for web use purposes.

photoshop-color-modes

Grayscale is another colour mode which uses different shades of grey in an image. Most image file formats support a minimum of 8-bit grayscale and this can represent up to 256 shades of grey. Every pixel of a grayscale image has a brightness value ranging from 0 (black) to 255 (white). While grayscale is an important aspect of digital images, it also applied to printed documents. This is useful if you just need to print a document reference and don’t require a colour copy.

Another colour space example is HSV (hue, saturation, value). HSV is defined in a way that is similar to how humans perceive colour. It describes colours (hue or tint) in terms of their shade (saturation or amount of grey) and their brightness value. The HSV colour mode is used when selecting colours for paint or ink because HSV better represents how people relate to colours than does the RGB mode. It is also used to generate high-quality graphics and is available in many professional image editing software programs such as Adobe Photoshop.

Image Capture:

Image capture is the process of obtaining a digital image from a vision sensor, such as a camera. In the creative media industry, there are a variety of ways you can capture images so that they are compatible for web use and other print purposes. For example, you are able to create a digital image file directly using a camera or a scanner and both of these use the same technology. The digitization process requires both hardware and software.

Scanner

One example of an image capture method is scanning. Scanners are a type of computer hardware that allows you to make a digital copy of a physical picture or text document. Depending on the scanner, this can either result in a really high or low quality image. It can then be stored and displayed on your computer which allows you to edit or enhance the image further in an application like Adobe Photoshop.

84482619-56a77b415f9b58b7d0eae8d6

Digital Camera

Digital cameras are another device that allows you to capture an image or video that can be used to create interactive media material. Digital cameras come in a wide variety from DSLRs to a compact digital camera, which are commonly used to take photographs, typically in the JPEG format. Although most DSLRs allow for capturing photos in a RAW file format. A digital camera is designed to capture raster images, depending on the model. This means that the resolution can be predetermined, for example I could choose to shoot at 72dpi or 300dpi.

81SStlnw9LL._SX522_

Hardware and Software

The digitization process of image capture requires both hardware and software. The choice of hardware will be dependent on the nature of the source of image and the intended quality of capture. Image capturing hardware and software will allow you to determine the quality or resolution of an image or graphic. This helps you ensure that you have both an unprocessed RAW image file as well as lower resolution and processed image file. This allows you to revert back to the higher quality image, if anything happens to the image optimized for the web.

Some cameras can be directly built into an imaging system and come with software plugins for the more common image manipulation packages, such as Adobe Photoshop for capturing images directly. Some scanners have plugin software modules that drive the scanner directly from some of the more popular image processing software programs.

Version control

Due to the fact graphic designs usually require develop and change over a period of time, it is important to understand version control. This involves saving the graphic editable, layered file e.g. PSD, as well as the converted file e.g. JPEG. This allows for the opportunity to revisit an earlier design and be able to make future refinements. This will lead to more storage space being taken, but by removing previous versions that have already been signed off, there will be enough free space maintained.

Storing Images or Graphics

There are a group of considerations that need to be made when it comes to storage of digital graphics or images. These include memory, file size and asset management. Memory is important when it comes to digital graphics because you need to ensure there is sufficient storage capacity to store the graphics after they have been created on Photoshop or taken with a digital camera. To enhance your storage capacity, there are many types of storage devices you can invest in, such as USB Drive, External Hard drive, internal hard drive, CD/DVD and flash drives i.e. SD cards. The file sizes for both images taken by camera and the graphics edited on the computer will differ, therefore you need to understand the maximum storage capacity required. Typically once you take photos using a digital camera, it is advised to transfer them onto the computer to edit in graphic software such as Adobe Photoshop.

In my role as a marketing assistant, it is important for me to follow MediaVita’s standard filing and naming conventions when saving any images or graphics I have created, captured or obtained. I do this by giving them a relevant title and name the folder they are transferred to. This allows for easier identification and access to those assets correctly.

Optimising

Optimising is another important process in graphic design. The term optimising refers to converting an image file to a type that can display in browser. Reducing the file size of an image so that it is small enough to be sent or received electronically e.g. download as part of a web page. It can be a difficult challenge because you have to get the right balance between file size and image quality. Your website will be incredibly slow if you don’t drop the sizes of the images. For example, by reducing the resolution of a JPEG from 300dpi to 72dpi, I would be optimising it for web use. The type of optimisation required is dependent on the intended purpose for your image/graphic, such as web, screen or print. To optimise correctly, you need to consider the bit depth, resolution and dimensions of an image. In my role, if I was creating a graphic for the web, I would set it to standard RGB colour mode, however I would transfer it to CMYK colour mode if I needed it for a print document. I would also need to ensure that it was at 300dpi, with a 3mm bleed so that it printed at a high quality. Another example is if I am sent RAW unprocessed images to be uploaded onto a web gallery, I will scale and size them down and use the ‘save for web’ tool so that they can be displayed on browsers.

2 Be able to generate ideas for digital graphics for an interactive media product

2.1 Generate outline idea for digital graphics for an interactive media product working within appropriate conventions and with some assistance

With every project I have been involved with at MediaVita, follows a sufficient planning and idea generating process. This mostly applies to website designing, where an organised and effective project plan is required. This helps to ensure our clients receive the highest quality service result.

The first stage of a design process is to discuss the project brief in a team meeting. The brief is usually sent over by the client or at a consultation meeting, where they provide us a description with a list of goals they want to achieve. Next our directors Antony and Lee have to confirm with the client that they are happy to undertake the project. Following from this, strategic planning and research into the client will need to be done, in order to understand any project based features that may be required such as the use of specific plugins and how they will affect the design we build.

The second stage is where the project meeting takes place, involving all dedicated project managers, including Antony and Lee, the client business director, as well as me and Shauna as specialist marketing assistants. This involves clarifying the work that will be carried, a process overview and an estimated time frame period until it is complete. This is also the opportunity to ask any additional questions specific to the project that may help us further. For example, if the client wants to roll out a dedicated campaign, the purpose of the advertisement and who their target audience will be and the After the project meeting, the team should have a better understanding of exactly what the client wants in terms of styling and the amount of content is most suitable. As marketing assistants, me and shauna would find the time useful to clarify any plugins required for their site as well as ask questions about copy we will be producing.

After the group of meetings, the next step includes generating ideas and getting the planning done. For example, at MediaVita our Project director Antony Long, will design an initial visual proof for our client to assess. The client will need to confirm it with us via Email, Phone call or a scheduled meeting to assure us they are happy with it and that it meets their expectations. This process is called an IA (Information Architecture). The IA provides our client a clear image representation of what their site layout will appear like, the amount of content and how the graphic/page feature will link and what to such as a “Call to Action”. It also contains a few design features that our directors have planned e.g. logo positioning on graphic, colours and fonts. It will also showcase a responsive mobile design visual in order to check that the navigation elements work for both a site browser as well as mobile/smart devices.

In this section I will be providing appropriate evidence from two different projects I have worked on at MediaVita. These were for a freight logistics company called Brunel Shipping as well as a Skin beauty therapist client, Noele Hammett.

For Brunel Shipping, I had to plan and implement an effective marketing strategy for their recent campaign called ‘Amazon Fulfilment’, along with my colleague Shauna Harrison. Whereas for Noele Hammett I worked independently to design an interactive gallery to promote her social media blogs, as well as a set of icons for her instagram highlights. Each project brief was communicated to me through email and discussion by either my director Antony Long or colleague Shauna Harrison. The following screenshots are client brief related, which I used for guidance.

A list of the Instagram Icons I had to create for Noele Hammett:

IMG_0271

My colleague Shauna asked me to create some Brunel Shipping blog posts to promote their ‘Amazon Fulfillment’ Campaign:

IMG_0484

After receiving these briefs, I decided to do some competitor analysis to gain some inspiration of similar related projects. For example, for Brunel Shipping, Shauna kindly sent me this link http://brunelshipping.co.uk/importing-from-china-tips/ directed to a latest blog post she had written for the website. This gave me some ideas for content, as well as their branding and style to make sure I adopted. For Noele Hammett, I done some social media research on other similar Skin beauty Instagram accounts, to analyze what icon designs they had used. This helped me gain an understanding of the design features utilized for this industry, such as layout design, colours used, fonts, text and images.

Below is an image of the Instagram icons I researched for inspiration:

unnamed

Following on from my research, I collated the information I had found onto a Microsoft Word Document and saved it on our MediaVita server drive. it was my responsibility to send this document to our director Antony’s, who could use this as a guide for when creating his IA visual proof. We typically use Adobe Indesign or Illustrator to design the initial project.  Although before the IA visual is created, our directors Antony and Lee will usually complete a selection of design sketches, as this allows them to be more productive when it comes to building the IA in Adobe Indesign.

It is important that this visual is shared among the rest of the team, so we all have the opportunity to input our ideas. There are a few methods we use to share the visual proof with both our clients and team, including Dropbox, Wetransfer, E-mail and Skype. Wetransfer is the most efficient as it allows you to send larger files, in a quicker time frame. By doing this, it gives our client an idea of the type, the amount of content they will need to produce and the general design layout which shows them how the feature will link to certain elements and function. For example, our client Noele Hammett will want her Instagram icons to link through to the relevant product blog images, as well as Brunel Shipping will want their Amazon Campaign graphic to click through to a call to action in order to increase revenue.

wetransfer_200x200

unnamed

unnamed

Brunel Shipping Web Animation ideas

Web Animations can be anything from a simple underline that appears when you hover over a word to a full-screen video or background image. Large-scale animations can be an interesting visual that attracts a user to a design. At MediaVita I have produced web animations that have been used on sites, in place of static images. For some of these, I used Adobe Photoshop to generate different template designs for the finalized animations.

The following screenshots are three example template designs I created. This was for a project for our client Brunel Shipping’s website Home Page slider animation:

unnamed

unnamed

46404136_2323088884428822_1065798355000492032_o

Through generating some template ideas for the web slider animation, I was able to identify the elements I needed to incorporate to ensure it guided users. For example, by adding a hyperlink that directed the user to a service landing page as part of a campaign. I also knew what colours, font and sizes I wanted to use before I created a final version proof to send to my client. To keep track of this, I copy the colour swatch code, font style and sizes onto a word document to refer to when creating the final design.

Considerations

As part of our design process at MediaVita, we always discuss any considerations we might need to make before we begin any sketch design plans. It is particularly important that we take into account the legal and ethical aspects of a project and how these may force us to amend our artwork accordingly and change the assets we use.

Copyright

Copyright is the exclusive right to control reproduction and commercial exploitation of your creative work. It is an intellectual property right which protects any kind of artwork, including illustrations, photographs and graphic design. Generally, the person who creates a work is considered its “author” and the automatic owner of copyright in that work under copyright law. Copyright infringement happens whenever someone makes copies or commercially exploits a work without the copyright owner’s permission. Images and designs are a type of intellectual property. At my work I have to make sure that any stock images I wish to use for my designs have been purchased. I also have to credit the authors and name titles of my images.

If I download any images off of the internet, I have to make sure they are free to use, otherwise I will need to gain permission rights from the owner to use it. Another option is to purchase stock licensed images if client has said they are happy with it. Although sites like Pixels or Stocksnap do contain libraries of free images to download and use for both commercial and personal use.

Ethical considerations

To meet relevant ethical legislation, I have to make sure the content I feature on my designs portrays fair representations of gender, race and religion. My content needs to be professional without any offensive or discriminating remarks. It is important that any content is confirmed with my client before I publish it live on the web. My artwork designs need to have effective user accessibility levels, for example it needs to be suitable for each individual user e.g. typeface, colours and fonts to be clear and legible for those with visual impairments. This means making sure text is kept at a reasonable size and at larger line heights e.g. for Noele Hammett’s icons I used bold thick icon graphics so that they stood out from the light background.

Graphical Specification

This involves prioritizing clients needs, to make sure their standard of expectations is met. This is so that their targets are achieved. To do this, It is important to know what their audience wants to do on their website e.g. my Brunel Shipping campaign is targeted at local/national customers interested in shipping freight products. The aim of it was to get users to invest their money into the Amazon Fulfillment services to increase revenue. I was able to do this by adding a hyperlink that was able to direct users to an Amazon Fulfilment landing page, with a ‘Call to Action’ link to encourage users to make use of Brunel Shipping services.

Visual Style

Visual style is another important consideration during the design planning process. It is about meeting client’s interests and desires, to result in the best possible service outcome. For example, clients will want their graphic design to be recognizable by maintain their branding style. To create an effective design, you need to consider all design elements by questioning “Are they suited to the brand?” and “Do they work well with the rest of the design? e.g. if there are any text colour clashes, this will make it unreadable for users and accessible for those visually impaired. Another way to enhance the visual style is to add a drop shadow to the ‘Call to Action’ box.

For example, in terms of style, our MediaVita project designers discussed how they wanted to stay with the website branding for both Brunel Shipping and Noele Hammeett. This included maintaining the branding colour schemes, font styles and the tone of voice to have a friendly and welcoming approach.

Examples of our graphics with same Website Branding Elements:

Noele Hammett

Icons:

IMG_0263

Website:

unnamed

Brunel Shipping

Graphic:

unnamed

Website:

unnamed4.png

Placement

When it comes to adding the logo, this stage comes last because my preferred approach is to organise what image I want to use on the animation graphic first, then see what positioning works compliments the logo. With the Brunel Shipping web animation, I knew I wanted to add a button too, therefore the logo positioning and text was important. I was able to experiment with this when I made my template designs on Adobe Photoshop. It made it easier to use the vector logo file too, as this made sure it retained its layers, quality and size.

Technical

There are a group of technical considerations to also take into account when designing for the web. In terms of file format, the web animation asset I created and the Instagram highlight icons were both exported and saved as a PNGs as they are best suitable for web use. Considering the icons require transparency and were designed for social media purposes. The web animation graphic is also built as part of a plugin slider element, therefore WordPress does the work for you. I always ensure I have an editable backup file saved too, which is the PSD format version. This is because it contains all the important file layers and elements which I can manipulate or enhance following the publish stage. This also allows for the elements to be extracted if necessary for future projects.

File Size

Another factor to consider is file size when designing for the web. A graphic design file size will determine how compatible it will be for the web. This means how quickly it will load and if the high-quality is retained. For web purposes, it is recommended that graphics are scaled down to ensure they are suitable for the internet. Most of the time, when files are exported from the PSD design, they will be the exact size required for uploading, and at the standard 72dpi. By using the ‘Save for web’ tool on Adobe Photoshop, you can adjust the file resolution manually, which is ideal for sites that will display lots of image files.

X3AIY

Screen Shot 2018-10-28 at 11.41.59

File Output

The intended output for all of my design assets I create at MediaVita are for web use, such as social media or websites. Therefore it is important I optimise my images to the suitable pixel dimension and file size in order for them to be compatible for display monitors and responsive mobiles. This ensures they retain a high-quality, without looking pixelated or taking a long while to fully load on the browser. Industry standard, by saving a graphic at 72dpi ensures a sharp and crisp image without having to be resized.

Screen_Shot_2012-08-01_at_2.05.18_PM

3 Be able to create digital graphics for an interactive media product following industry practice

3.1 Create digital graphics for an interactive media product following industry practice, working within appropriate conventions and with some assistance

In the task sections above I have showcased some of the planning, ideas and experiments from my role as a Marketing Assistant at MediaVita. With the support from a variety of software, tools and techniques, I have been able to roll out my work effectively and accordingly whilst develop my skills further.

Every digital graphic I produce for interactive media needs to follow a structured plan that either myself of my colleagues have organised. For example, when designing website and social media graphics, I will follow a plan I have created. This would include content ideas, colour schemes, font styles and output.

An example of a Social Media Graphic content plan:

USE CHRIS’S SKYPE

In order for me to roll out my graphic designs, I may need access to specific content and resources. For example, if I am creating social media graphics, I may want to liaise with the client via email or telephone call, to go through some wording or topic ideas that may be required. I could also obtain content resources from my collage Shauna who is often sent through a monthly social media brief from our clients.

For any social graphic schedule plan, me and my colleague Shauna organise time frames and dates in which to publish them live. This is dependent on the type of social media site, for example, it is recommended to post on Facebook between 1-4pm to get the most engagement. Me and Shauna also plan a date to post, as well as any links to direct the audience to. To ensure they are posted accurately, we use Hootesuite to schedule our social graphic posts, which automatically does the job for us. At the start of a social graphic project, we provide details of the number of designs required and transfer this onto a newly create Job bag sheet. This helps our project managers to schedule in the work, consider how long each design will take and show the project detail pack to our clients. Therefore it is crucial we track and provide the accurate time amount spent on a design job. This ensures deadlines are met and that there are no delays in the post scheduling process.

Each project will follow this process:

  • Project Launch – This is a scheduled meeting between the designers, project manager and client to discuss and agree specifically what they want to achieve from the design. Our digital marketers team will also be involved depending on the requirements of the project. We also allow the option to hold the meeting in-house or organise a visit the client’s location.
  • Visual Design – Our project designers will produce a detailed visual plan of the ideas they have brainstormed, based on what they agreed with the client. This is usually completed on Adobe Indesign and is then exported as a PDF copy.
  • Internal Quality Assurance (IA) -The visual proof is tested by everyone involved on the project. This allows them to check that it meets the professional standard and is within scope of the brief provided. It also gives them the opportunity to address any problems with the visual. As a result, all of the required amends are dealt with immediately.
  • Presentation – The visual proof is presented to the client either in-house or via an email PDF attachment.
  • Amends – We are flexible with the amount of amends we offer per visual design on every project. Our project designers will provide a version number for each file sent, to help stay on track with the time spent on the project.
  • Sign Off – The client signs off the IA for the visual proof.
  • Design – Our designers will follow the IA visual proof as a guide to produce the designs required.
  • Design Internal Quality Assurance -The designs are assessed by those working on the project. Usually the project manager, developer and digital marketing team who liaised with the client will check the designs as they know what to look for. Any amends that arise will be dealt with too.
  • Design Presentation – The designs are presented to the client.
  • Design Amends – Following the presentation, the client has the opportunity to review the designs and provide us with constructive feedback. We will deal with any required amends immediately.
  • Design Sign Off – The client confirms with us they are happy, then themselves and our team can sign off the final design version.
  • Build – Our developers will begin the design build process.
  • Build Amends – The built site will be reviewed by those involved on the project, and amends will be dealt with.
  • Build Presentation – We organise an in-house meeting or a visit to the client’s location in order to present the design built by our team. It is unlikely, however any amends that arise will be dealt with straight away. Support training is also provided to the client on how to manage it.

Web Graphic Design

Software

In regards to software, when I am creating a digital graphic, I tend to use the industry standard Adobe Photoshop or a free online tool called Canva.com. Adobe Photoshop is perfect for web designs as it allows me to ‘save for web’ so that my graphics are compatible for browsers. I tend to export files as PNG as this file format is mostly ideal for web use too.

If I am amending any print based designs, then I use Adobe Indesign or Illustrator to roll out any changes. Our website designs are also built onto WordPress, which I have had one-to-one training for by my mentor Antony, so that I am able to use it effectively.

When designing a graphic for web, the first stage involves opening up a saved PSD template from a previous file created for the same client. This is because it has all the editable layer assets, such as fonts, text, colours and dimensions, which helps maintain the branding style. If the graphic design is for social media, I tend to scale my image to 960×640, at 72dpi and using the RGB color mode. This is because these are the recommended specifications for social media posts, as well as the most suitable for web use.

photoshop-color-modes

Screen Shot 2018-11-06 at 11.50.48

Once I have opened the template, I then import a suitable image from either Pexels.com (Free Online Photo Download) or a dedicated folder from the client which stores their original images. I do this by going to ‘File’ – ‘Open’ and selecting the image file name. After the image has inserted, I scale the image to the canvas using the shift and drag action, as this helps it to retain the images high-quality. To refine the image, I may adjust the brightness and contrast, along with adding a light drop shadow. I amend the text to fit the social media post topic. I obtain this by following our standard workplace procedure. This involves liaising with the client via email or telephone call, to discuss the topics they would like to advertise throughout the month. I find it easier to create a Microsoft Word document detailing each topic, so that I have something to refer to during the design stage.

In order to keep within the branding style, I always copy and paste my new content over the top of the original text in order to maintain the font and colours. Once I have finalized my enhancements, I use ‘File’ – ‘Save for Web’ and make sure it is on preset PNG file format. I save the graphic into the client’s dedicated folder to allow for easier identification.

The next stage of our workplace procedure involves an internal assurance review by those involved in the design project. For example, at MediaVita my director Antony is responsible for signing off the first design version, in order for me to sign it off with the client. To make it easier for Antony to access the graphic file, it is crucial that when we save files, they are in organized and expected locations. Therefore this enables any one of my colleagues who need to access the files, can do so with ease.

At MediaVita we follow a set of professional conventions, to ensure our files are organised and easy to identify for other team members. This prevents the file search from being time consuming. Firstly, each client has their own dedicated folder on our local backup server. They contain separate folders for each project, with different categories due to the reason we are not just a graphic design company. For example, folders will include ‘Logo’, ‘Brochure’, ‘Website’, ‘Social Media Graphics’ etc. There are also version control folders with numbered design versions and final version files e.g. V1, V2, V3 etc. As well as the PSD design files, they also include client brand ‘assets’ or ‘images’ depending on the project. In the images folders, the files are grouped accordingly either based on ‘RAW’ or ‘Web’ images, so that we can identify the unprocessed images and the scaled images. The images are also named so we can organise them quicker. In order to maintain and secure our design files, our directors Antony and Lee complete a weekly back up session by securing our files to a secure external location.

Web Banner Design

Designing web banner graphics requires knowledge of the web, interactive media design conventions as well as good skills with the software you use. At MediaVita we use Adobe Photoshop to produce any website banner graphics.

The main tools I use when producing a web banner are the image adjustment controls. These allow me to experiment different brightness, contrast and hue and saturation levels on my chosen image. This gives me the ability to refine and enhance my image, whilst maintaining the layer quality. For evidence in this task I will be focusing on the range of tools I utilized when designing a web banner graphic for Brunel Shipping’s website homepage. This was part of their ‘Amazon Fulfillment’ Campaign which they wanted to promote.

unnamed

 

When designing a web graphic, the image content is just as important as the design. There are many image capture methods and procedures that can help you obtain appropriate assets to use. For example, if a printed image is required for the web, we can use it by scanning it. Although the quality can be reduced this way, and the original file is always beneficial. Another method is to take the photos yourself for the client, or they they can provide us with quality standard photos on a camera or memory output source. These are typically the RAW, unprocessed format images, which allow for more freedom when it comes to manipulating, refining and editing them through Adobe Photoshop.

Another consideration is that the image content typically has to link with the brand’s particular style. To help you, there are a wide variety of tools and techniques that you can utilize.

For example, the background on my web banner graphic is an image file I inserted from Brunel Shipping’s folder on our local server. This way I knew it was an original asset from their website. Once this was inserted, I used the shift and drag tool to scale it to the canvas size (1024×512). I made sure this layer was behind the mask layer, which had the red overlay effect. This colour was taken from the branding elements (logo) that I copied using the colour swatch.  I was able to adjust this to make it transparent, by reducing the ‘opacity’ levels. I also made use of the blur tool to give an effective look to the lines and shape in my design. It also helps to take the user’s focus away from the image, by sitting it behind the text. To ensure the colours were represented at the best interpretation, I preset the Colour mode to RGB as this is most suitable to web use.

INSERT // SCALE

As this was already a previously saved template, the graphic already displayed the B shape layer. This ‘B’ shape was exported as a vector file form Adobe Indesign/Illustrator and was created into a mask layer. It produces an interesting ‘cut out’ effect, allowing the image behind it to transparent through the exact shape.

To fulfill the brief I received regarding the campaign, I amended the graphic text to read “Amazon Fulfillment Centre”, “Now Open”. This gets across a new, interesting service for users to read more about. To make the design eye catching, I used the ‘Bold’ tool to give the first text a thicker and heavier shape.

BOLD TOOL

Once my web banner graphic was complete, I used the ‘File’ – ‘Save for web’ tool in order to scale the graphic down to 72dpi and preset it to RGB mode. I done this so that it was compatible for the web. I clicked ‘Save’ and made sure it was placed in the right client and project folder so it could be easy to locate.

SAVE FOR WEB

Once my web banner graphic was saved to our local server, I uploaded it to the WordPress site and set it as one of the images on the homepage slider. I was able to do this by going visiting the ‘Slider Revolution’ plugin on wordpress and clicking on the current created slider with title “Home Slider”. I was able to click ‘add new image’ and import it from our desktop files.

In terms of interactive media, I was able to implement a navigation link onto the graphic text which reads “Now Open”. This text hyperlink directs the user straight to the services page for more information if they are interested.  In order to add the link, I edited the text on the graphic slide by going to ‘slider revolution” and clicking edit “Home Slider”. I highlighted the text I wanted and clicked on the link symbol icon and pasted in the landing page URL. This ‘one click’ hyperlink action makes it much more easily accessible for users, if they want to research more about service.

The landing page can be seen here: http://brunelshipping.co.uk/amazon-fulfilment.html

My Web Banner Ad Graphic

unnamed5.png

Evaluation

After our designs at MediaVita have been built and signed off by the client, we follow a project review process. This is involves close communication with the client to ensure they are still happy with their design. It is also the opportunity to ask questions within the team, relating to the project. This allows us to identify how successful we believe the project went and the things we could have done differently, to improve our future projects.

It is also important that I am able to reflect and assess my own work. The design project I carried out for Brunel Shipping is a good example to reflect on. The purpose of their Web banner graphic design was to promote their ‘Amazon Fulfillment’ services campaign. It was aimed to direct users to a landing page on their website to raise awareness of their company and increase business revenue by converting users into customers/clients.  To reflect on my design work for Brunel Shipping, I believe I retained their branding style effectively. I done this by utilizing the same red colour tone as their logo and website. I also adopted a friendly and professional tone of voice for the content which was clear and informative to clients. I also made sure that the web banner graphic maintained the same font styling and shapes. For example, I used their logo vector file to create a transparent mask layer on the design, to give the main image more focus.

In terms of image source, I believe I managed to use a relevant image to the service and was original from their website. Therefore there was no risk of copyright infringement of intellectual property. The image refinements were also effective, because they were subtle enough to give the text more definition. The red mask layer also worked well sitting behind the text, as this prevented the black text from clashing with the image colours. This made it readable and accessible for all users. The interactive hyperlink which I implemented was also effective, because it made it a lot easier for users to navigate the site and access the landing page quicker.

In terms of project planning and preparation, I believe I worked well as team and supported my colleagues closely, whilst maintaining good communication throughout. I was able to liaise with the client to discuss their requirements, as well as brief my directors on my visual designs. I was quick at responding to amends and dealing with them professionally by updating the project version on Adobe. Regarding time management, I believe I was able to keep track on the time I was spending on the project well, whilst also prioritizing specific elements effectively. Overall, I feel that the design project was managed efficiently, with assistance from my colleagues, client and software.

The final design which I built is now live on the Brunel Shipping website, boosting the website user interactivity and engagement. The feedback I received from my colleagues was very positive, especially from my director Antony Long. I am happy with the professional style of my design which I managed to create. I am also proud of the variety of tools and techniques that I experimented with on Adobe Photoshop. This made me enjoy the project even more as I had lots of freedom with the graphic design and interactive features. This allowed me to showcase my creativity skills further.

Bibliography:

https://prezi.com/66-10fdpwq__/applications-of-interactive-media-graphics/ [27/11/18]

http://www.atsf.co.uk/atsf/interactive_media.pdf [27/11/18]

https://www.creativebloq.com/infographic/8-pro-tips-creating-interactive-infographics-1113356027/11/18%5D

https://www.ibm.com/developerworks/library/bd-interactive/index.html [27/11/18]

https://en.wikipedia.org/wiki/Interactive_media [27/11/18]

https://www.ocr.org.uk/Images/139149-level-2-unit-13-interactive-media-production.pdf [28/11/18]

https://www.vandelaydesign.com/inspirationalnavigation-menus/ [28/11/18]

https://envato.com/blog/best-website-navigation-menus/ [28/11/18]

https://www.wpbeginner.com/glossary/navigation-menus/%5B28/11/18%5D

https://blog.bannersnack.com/beginner-guide-banner-ad/%5B28/11/18%5D

https://designshack.net/articles/graphics/an-introduction-to-animation-in-web-design/ [28/11/18]

https://www.awwwards.com/websites/icons/ [28/11/18]

https://designshack.net/articles/graphics/effective-icon-design/ [28/11/18]

https://www.fileformat.info/mirror/egff/ch01_04.htm%5B28/11/18%5D

https://helpx.adobe.com/uk/indesign/using/graphics-formats.html [28/11/18]

https://webstyleguide.com/wsg3/11-graphics/4-web-graphics.html%5B28/11/18%5D

https://www.techopedia.com/definition/9098/raster-graphics [28/11/18]

https://whatis.techtarget.com/fileformat/RAW-Raw-File-Format-bitmap [29/11/18]

https://photographyconcentrate.com/10-reasons-why-you-should-be-shooting-raw/ [29/11/18]

http://raybro06048325.blogspot.com/2013/12/image-capture.html [30/11/18]

http://nigelbuckner.com/downloads/handouts/web/Optimising%20graphics-2.pdf [30/11/18]

https://designshack.net/articles/graphics/an-introduction-to-animation-in-web-design/ [2/12/18]

https://www.aiga.org/copyright-basics-for-graphic-designers [2/12/18]

 

 

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s