R/600/9038 ­& R/600/9010 – Communicating and Presenting Ideas in the Creative Media Sector & Contribute to good working relationships

R/600/9010 1.1

Explain the importance of balancing the needs and tasks of people

It is important to create a balance between the needs and tasks of people in the workplace. There is an obvious priority to tasks in the workplace, as these are what generates revenue. Ensuring that tasks are managed so that they are completed to deadlines is vital to being successful. Creating timescales for projects is a good way to manage each task. It is important though that there is communication within a team concerning their needs. I may need another team member to change a deadline for their task in order for me to complete mine. If I find myself unable to reach a deadline I would communicate my needs to the manager so that the priority of other tasks could be adjusted.

However, it is important to remember that people have needs too. Having employees focus 100% on the tasks whilst at work can be very draining on them, and allowing them to have small breaks to distract themselves can actually improve productivity. (http://www.pcworld.com/article/239054/why_employees_should_surf_the_web_at_work.html)

We have a fairly relaxed and flexible working environment. I feel this generally improves productivity and certainly builds team morale. This is as long as tasks get completed to deadlines, if colleagues spend too much time socialising it can affect tasks getting completed and this can reflect negatively on morale. To this point, we generally coordinate coffee breaks etc, so that everyone in the team works and breaks equally.

It is also important to note the needs of clients. For example, a recent project I have is creating the Annual Report for a client. They have a final deadline for the project to be completed so it can be printed and delivered for an event. They also need to be aware of my needs in order to complete the project; receiving content in time to actually create the layout.

 

 

R/600/9010 1.2/1.5

Explain the Importance of sharing information with colleagues

Explain the Importance for liaison with colleagues to productivity

 

It is important to share information with colleagues so that everyone has all the facts. It is particularly important if multiple people are working on the same project. For example, when creating a new website we would have different people on different tasks, i.e. setting up plugins, gathering content, designing. Some of these tasks may be dependant on having other tasks completed, so it is important to keep the rest of the team updated on your own progress so that they know when something is ready or so that they can focus on a specific area so as to not hold up other stages of the production. By liaising with your colleagues you can make sure everyone is aware of what stage each other is at and ensure everyone can work productively.

When starting a new website project, we will have someone complete a form with all the basic information of the client (form template below)

Screen Shot 2017-05-24 at 10.42.46.png

This will be shared on Dropbox in the relevant client folder so everyone in the team has access to it. This is useful as we don’t need to rely on one individual for specific information, particularly due to how our company is structured with employees & volunteers having flexible hours.
We also email each other with updates of how stages of a project are going. Image below shows how I was informed that a domain transfer was progressing.

Screen Shot 2017-05-24 at 10.49.23

This meant I could begin packaging the offline version of the site to be transferred to the new domain once we have it linked to our hosting provider.

R/600/9038 1.2

Compare a range of techniques used for influencing and persuading others and their application

 

There are numerous ways one can influence or persuade others, with different techniques being more suitable and effective depending on the context.

 

One can try to persuade someone verbally by having a discussion. This works well when trying to persuade one person as you can adjust your argument based on their input. Alternatively, you can use written communication (e.g. email, printed report). The benefit of this method is that it gives the individual you are persuading the opportunity to go over the information at their own pace and really process the facts. When persuading a larger group, preparing a presentation can be a successful technique. It allows you to put your point across and have supporting data displayed on a screen. Another technique would be to provide a demonstration. This can be useful when the matter that you are discussing is somewhat abstract, an example could be when working on a logo design for a client. Showing them an alternative design is much easier than trying to explain how a particular different design would be better (without them seeing it).

R/600/9038 1.3

Describe how to give and receive constructive feedback

R/600/9010 1.3

Identify ways of tactfully requesting others to change working arrangements to improve own productivity

 

When giving constructive feedback it is important to speak objectively and not attack an individual personally, this can be done by separating the situation from the person. It is also important to be specific with the feedback. For example, if you had presented a design to your manager and they said “I don’t like the colours used”, the only useful information you have is that the colours used need to be changed. You could edit your design and still be using colours that aren’t right. Better feedback would be “The colours aren’t right, I think using warmer colours would work better as it would reflect the nature of the product more”, this highlights a reason why the original is not successful and provides a guideline for what would work better.

 

Another common technique when giving feedback is known as the “feedback sandwich method”. This is where you offer a positive, followed by a criticism and ended with another positive. This helps it not seem like an attack on the feedback receiver as you don’t jump in with what’s bad and highlight the positives of their work.

 

When receiving feedback it is important to remember not to take it personally and not to get emotional over it. It is also important to clarify any feedback you receive to ensure that you have understood what is being said properly, this also shows that you are listening and willing to make improvements.

 

When requesting others to change their working arrangements to improve your own productivity, it is important to communicate and explain your reasons and needs and allow them to respond. You may need to find a compromise that benefits both parties. It is important that you do not force them, or make them feel forced, to change their arrangements as this can conjure negativity and damage relationships.

 

An example could be that I have a task and need additional help to ensure I can deliver it to the deadline. A colleague may not have such time sensitive work so I may ask them to assist me, however by doing so I may end up putting them in the same situation as me in the future. In light of this, I could ask them to assist me and then I would help them with their tasks so they can maintain their schedule.

F/600/8323 – Produce Copy for Interactive Media Products

Task 1

1.1. Identify relevant constraints, possibilities and opportunities offered by the selected target medium/platform

1.2. Identify key constraints or considerations arising from the use of an online content management

 

I typically write content for websites using the WordPress CMS. WordPress offers a basic text editor allowing you to set text styles and import media, it is however rather limiting. Often making your content appear just how you want it requires additional CSS. A lot of the websites I work on use the Divi Theme which does offer more freedom in layout and style due to the Divi Builder plugin. This essentially offers a grid system with pre-made modules which offers more freedom in how content is laid out. Additionally, created layouts can be saved allowing you to load previously made layouts for new posts and maintain a consistent style for similar posts.

 

A benefit of using the WordPress CMS is that there is a multitude of plugins available to improve functionality and experience. A common plugin we use is a Social Network Auto-poster. This allows us to define certain post types that, when created, will automatically be shared to connected social media accounts. Furthermore, the Divi Theme (and most modern themes) is fully responsive, meaning that it will display nicely on various screen sizes.

 

I also write content for printed media, generally for advertising purposes such as flyers or displays. This is usually done in Photoshop or Illustrator. Working with text in design software essentially allows full control over the appearance. What isn’t available is spelling and grammar checking, so this has to be done manually or outside of the design software.

 

Task 2

2.1. Identify a style that is suitable for the target audience and purpose of the communication

home roller.jpg

The attached copy is from a roller banner for the company I work for to be used at events. The target audience of the copy is essentially anyone in attendance at the event where the banner is being used, with the aim of it to express the core identity of the company. As such, the writing style needs to be clear and concise, conveying the key facts about the company in a way that it can be comprehended quickly.

 

As the banner is generally used at events, the copy has to be written in a welcoming tone to encourage people to talk to us. Rather than referring to the company by name “we” is used. This personifies the company, which makes it more approachable. Verbs such as “offer” and “provide” are used as they aren’t forceful and have charitable connotations. “Sell” could have been used instead of “offer” and it certainly would have made much clearer the fact that what the company does is sell a service, yet it would have had a colder tone and focused too much on the business aspect of the company rather than the charitable aspect (as a CIC).

 

2.2. Maintain a consistent style both within texts and between related texts

Show at least one other example of a post to show that you have a consistent style by analysing this as before and commenting on the similarities in style.

homead.jpg

The provided example is an advert highlighting the services the company offers. Like the previous copy, “we” is used to personify the organization and make it appear more approachable. Again, verbs like “help” and “provide” are used as they are less forceful and indicate the company’s focus on helping.

 

Task 3

2.4.  Structure the text-based content for readability and accessibility

2.6. Format copy, following relevant writing conventions, style guides and policies

 

As a lot of the copy I produce is for printed media, length/amount of text is often depending on size and context of the media. For example, the roller banner is 200cm tall and 80cm wide which gives me a lot of space to add text. However, in the context it is used it is better to include less text. This is because it will generally be viewed from a distance, meaning text needs to be large. Additionally, the audience is usually viewing it at a busy event and it is not suitable for them to be standing still reading large swathes of copy. Whereas an A5 sized flyer is much smaller in physical size, it is more appropriate to include more text as the reader can hold it and spend more time looking at it.

 

I generally have to be quite adaptive with the style I write in as I often produce copy for different clients. If I am given a guideline on the tone they use in their writing I will follow it, otherwise I will read through other copy they have and reflect its style in my own writing.

 

As demonstrated in the previously attache examples, I will use paragraphs to break up text as it allows the reader to distinguish different points easily. Similarly with the list of services, I chose to include one item per line as it enforces that they are separate items, which can be important when using terms that the reader may not know as to avoid confusion.

 

Task 4

2.7. Produce appropriate captions or descriptions to accompany content

 Screen Shot 2017-05-18 at 15.32.39

When adding images to WordPress, the media library allows you to define the image Title, Description, Caption and Alternative Text.

 

Task 5

2.9. Produce and embed metadata

Screen Shot 2017-05-18 at 15.27.55.png

We use the SEOPresser plugin on our WordPress websites which allows us to add metadata to pages and posts on the website. Here I have defined the Title Meta, which indicates the title of the page, and provided a Meta description, which provides a brief overview of what the page is about. Utilising metadata help with SEO and the data can be used as snippets when displayed in a search engines results page.

Screen Shot 2017-05-18 at 15.30.50.png

Task 6

3.2. Check the accuracy of any facts and figures quoted, seeking advice as required

 

How I check facts and figures depends on the context of the information. For example, if I am writing about the services a client offers I will contact them for an accurate list of check their website/social media to see what they have previously stated. If it is a more general fact, I will use google to see if I can find a reputable source that backs up the claim.

 

For example, for the advert attached above, I asked my line manager for an up-to-date and accurate list of services the company offered to include in my advert, and then had her check the final version to ensure it was all correct.

Screen Shot 2017-05-24 at 11.02.15.png

 

Task 7

4.1. Review the content against any legal and ethical considerations

4.2. Make any necessary changes to comply with relevant legislation

 

One of the main legal and ethical considerations when producing copy is that the information is truthful and not misleading. I ensure this by fact checking and confirming the information is indeed correct. Furthermore, it is important to write statements in a way that is clear and comprehendible and not to word text in such a way that its interpretation is ambiguous. Not adhering to this would breach certain laws and open the company up to legal issues.

With the advert attached previously, I ensured that the information was all accurate and truthful and had my manager check it to both see if it was correct and that it isn’t worded in a way that could mislead the audience.

Another consideration is copyright. If I have used someone else’s copy it is important to get their permission to reproduce it, or if I am quoting them to ensure I include adequate reference to them. Copy can be protected under copyright law so using it without permission would be a legal issue, there is also a matter of how ethical it is to use someone else work without permission, even if it is technically legal to do so.

Screen Shot 2017-05-24 at 11.24.56

Y/600/9039 – Converging Technologies

1.1

How is digital technology used in the creative media sector and what relationships has this created between different industries in the sector?

 

In the creative media sector, digital technology is a vital component in being able to function and improves productivity and efficiency in many areas. At the company I work for (a marketing company) we use digital technology in almost everything we do.

 

Looking at a typical project that we would undertake; the creation of a website, we use digital technology at most stages of development and production. To begin with clients are given a form created in Microsoft Word to assess their requirements for the website. From this we can begin to create wireframes either using Photoshop or a wireframing tool such as Sketchapp. These are then uploaded to our cloud storage and a link shared via email to the client for feedback. Using digital technology for these tasks allows us to produce and share them quickly and easily.

 

When building the site we use the WordPress CMS and a premade theme. This allows us to quickly create the website and add content without the need for excessive coding as the CMS and theme both provide a foundation to work from with the necessary features and code required already existing.

 

Once the website is completed we can use social media to promote it. Social media allows us to reach a wide range of people with ease so we don’t need to target the desired audience individually. We also sent out an email using Mailchimp which allows us to create a professional email and send it out to a mailing list incredibly easily.

 

The use of digital technology in the creative media sector has allowed collaboration between different industries to be achieved much more easily. It has also meant that there has been a merging of some of the services these industries offer due to the ease of access to the technology. For example, a web design company may previously have just designed the layouts and coded the website, whereas now, with digital photography and the availability to create professional imaging easily, they may be more involved in producing the content for the site as well.

 

2.1/2.2

What is meant by converging technology and what impact has it had on the workforce within your organisation/industry?

 

“Technological convergence is the tendency that as technology changes, different technological system sometimes evolve toward performing similar tasks. Digital convergence refers to the convergence of four industries into one conglomerate, ITTCE (Information Technologies, Telecommunication, Consumer Electronics, and Entertainment).

 

 

Media convergence is the interlinking of computing and other information technologies, media content, media companies and communication networks that have arisen as the result of the evolution and popularization of the Internet as well as the activities, products and services that have emerged in the digital media space.”

(https://en.wikipedia.org/wiki/Technological_convergence)

 

 

Converging technology is where separate technologies evolve to perform similar tasks as other technologies. A prime example being mobile phones, which besides their core function of voice calls and text messaging are now cameras, gaming devices, payment methods (e.g. Apple Pay), video players and basically a computer in your pocket.

 

The impact that technological convergence has had in my industry is substantial. With the improvements to smartphone cameras, a lot of content can be created and shared quickly without quality being a concern. Social Networks have also allowed us to created targeted advertising for a lower cost and with improved accuracy compared to traditional methods (printed ads, radio ads etc).

 

3.1

How has converging technology changed the expectations of audiences/consumers within a chosen creative media industry?

 

Looking at web design/development, one of the main changes in consumer expectations due to converging technology is the focus on mobile-friendly design. With more people accessing the internet from mobile devices (http://www.telegraph.co.uk/technology/2016/11/01/mobile-web-usage-overtakes-desktop-for-first-time/) there is a demand to make websites that work well on smaller screens and with touch input. Additionally, due to Social Media being such a widely used tool for organisations, there is a strong need for Social Network accounts to integrate with websites, be it by displaying posts from the Social Network on the website or by having new content from the site being automatically pushed to the social network accounts. There is also an expectation for websites to be full of high quality content, particularly high-res images and HD videos.

 

3.2

How have ideas for multi-platform content been used to reach new audiences/generate revenue?

 

A great example of how multi-platform content has been used is Lego. Lego has branched out from a physical toy and released a series of computer games, the more recent ones being tied into larger entities such a Harry Potter, Star Wars and Lord of the Rings. By doing so they can introduce their product to fans of the other series as well as gamers. Additionally, Lego has created feature length films, most recently The Lego Movie and The Lego Batman Movie. Creating a successful film can be a huge revenue boost, and The Lego Movie generated over $450 million at the box office and a further $128 million from domestic video sales (http://www.the-numbers.com/movie/LEGO-Movie-The#tab=summary).

 

By expanding into different platforms, Lego has offered new ways to generate revenue and can reach audiences who may not typically be interested in their core product.

 

3.3

Describe examples of commissioning processes and funding opportunities in relation to converging technologies

 

It is much easier for new projects to find funding with the advent of crowdfunding organisations such as Kickstarter, Indiegogo and GoFundMe. These crowdfunding companies allow a user to upload their pitch to the site, set a funding target, offer funding incentives etc. and then anyone can help fund it.

 

A prime example for the effectiveness of crowdfunding is the Pebble Smartwatch. The company failed to attract traditional investors (https://en.wikipedia.org/wiki/Pebble_(watch)#Funding) so turned to crowdfunding through Kickstarter. Their target was $100,000 and they offered the smartwatch to users who backed $115 (effectively pre-ordering the device at a discount). They achieved their goal in 2 hours, and went on to raise over $10million during the campaign.

 

Pebble researched other successful Kickstarters to build the most effective campaign, deeming a “video that had a personal pitch and talked directly to your customers and viewers was really important”. They also realised that the most important aspect to a Kickstarters success is how traffic is driven to the Kickstart page. In light of this, they target a number of relevant tech & gadget bloggers as well as teaming up with Engaget to promote the launch of the campaign.

(http://www.huffingtonpost.com/michaelprice/heres-how-the-pebble-smar_b_5798406.html)

The launch of the Kickstarter essentially went viral, reaching a wide audience and gaining massive exposure through online and social media.

 

For content creators who regularly release new content, e.g. Youtubers, websites like Patreon offer an opportunity for funding. Patreon is another crowdfunding solution, however it works on more of a subscription basis, with individuals pledging an amount on a monthly basis in return for extra content. Other methods to receive funding can be to include adverts on their content or to gain sponsorship.

 

Task 3: Understand legal and ethical constraints

Intellectual Property Rights

Intellectual Property Rights are a set of protections for the creator of Intellectual Property. The different types of protections for Intellectual Property are:

  • Copyright

    Gives the creator of an original work exclusive rights to it. Applies to a wide range of mediums, such as web content, photography, illustrations etc. The creator will automatically gain Copyright protection upon the creation of their work. It protects the creator from others copying the work, distributing the work, adapting the work and displaying the work. It may be necessary to apply for copyright in other countries, though there are international copyright agreements. The length of the copyright varies depending on the type of media. Copyright doesn’t cover ideas but rather their form of manner of expression, for example, an idea for a novel can not be copyrighted whereas the written novel can be.

  • Patents

    Patents are used to protect inventions and give the holder the right to take legal action against anyone who makes, uses, sells, offers to sell or import their invention. In order to be given a patent, the inventor must publicly disclose the information of the invention. For a patent application to be successful the inventor needs to prove the following: new, inventive and applicable. That is it can’t be an obvious idea, can’t be a modification of a previous idea and must be able to be used or made. Patents are only applicable to the country in which they are applied for, it is possible to apply for a patent in multiple countries by applying under the Patent Cooperation Treaty, for example.

  • Design Rights

    Design Rights protect the visual design of something that is not purely utilitarian, that is to say the aesthetics of it. For 3D objects, you automatically gain the design right when its designed. For 2D designs, such as wallpapers or graphics, the design right needs to be applied for. To claim design right you need to provide proof, which can either be copies of design drawings or photographs held be a bank or solicitor, or sent to yourself via registered, dated post and left unopened.

  • Trademarks

    A Trademark is used to protect your brand, this can be product names or logos. Holding a Trademark allows you to take action against anyone using your brand without permission and allows you to sell and license your brand. By holding a Trademark you can apply the ® symbol to your brand to indicate it is protected.

  • Trade Dress

    Trade Dress is a protection for the visual appearance and characteristics of how a product is packaged that signify the source of the product. For example, the Apple Stores are protected under Trade Dress due to their unique layout and design. Trade Dress can also apply to things such as Magazine covers or a restaurant chains decor and colour scheme.

In relation to digital design, Copyright and Trademarks are perhaps the most relevant. As a designer any photographs or illustrations created are immediately protected under Copyright. Logos and branding can be protected under Trademark if applied for.

 

Creative Commons

Creative Commons licenses is something that one can apply to their own work which gives you protection on how the image is used. There a various different versions of CC licenses, each with their own limitations and allowances.
A breakdown of the Creative Commons Licenses:

  • Lets others distribute, remix, tweak,  and build upon your work, even commercially, as long as they credit you for the original creation.

 

  • This license lets others remix, tweak, and build upon your work even for commercial purposes, as long as they credit you and license their new creations under the identical terms.

 

  • This license allows for redistribution, commercial and non-commercial, as long as it is passed along unchanged and in whole, with credit to you.

 

  • This license lets others remix, tweak, and build upon your work non-commercially, and although their new works must also acknowledge you and be non-commercial, they don’t have to license their derivative works on the same terms.

 

  • This license lets others remix, tweak, and build upon your work non-commercially, as long as they credit you and license their new creations under the identical terms.

 

  • Only allows others to download your works and share them with others as long as they credit you, but they can’t change them in any way or use them commercially.

 

  • Allows content creators to opt out of database and copyright protection, allowing their work to be available as freely as possible in the public domain.

Other ways to Copyright protect an Image

There are numerous other methods to protect your work from being used without permission. A common example is by including your website’s URL or name below the image in the actual image file. This would mean if anyone directly copied or hot-linked the image on their website it would display your information. Of course, they could simply crop the image to remove the text. This can be combatted by applying a watermark or watermarks to the image. This is text or an image overlayed on the image. This does provide more protection to the image, as it is time consuming to remove the watermark, particularly if the watermark is placed over key areas of the image, but is more intrusive and can detract from the image. Another option is to use HTML to overlay a transparent image to your image. This would mean that if someone were to try to copy the image, they would instead get a transparent image file. This does not prevent your image from being copied by using a screenshot however, and a more technically literate individual could access the required image from examining the page source. It is also possible to use javascript to prevent the user from right clicking on your website, this would prevent the user from being able to access the Save Image command but could also prevent them from reaching other commands in the Right Click Menu that would be useful. Another method which would prevent search engines from indexing your images is by editing your sites robots.txt. Using the right command can prevent bots from indexing your site and storing copies of your images on their server, for example stopping your files from being on Google Images. There are also numerous third party softwares created to help protect a creators image on the web. These can provide the aforementioned solutions in one package and more. For example CopySafe requires the user to install a plugin to be able to access the protected content. The plugin then restricts the user from copying the files while still being able to view them without any obstructions. These more extreme options can however put off the user from visiting your content.

Searching for Protected Images

On Flickr

Flickr allows their users to apply various licenses to their work when they upload it. This then allows visitors to search for work and filter it by the type of license.

Screen Shot 2016-07-12 at 11.52.37.png

For example, after entering a search term on flickr you can then filter the results by the license type. The above screenshot shows filtering by all Creative Commons Licenses. You can also filter by more specific license limitations. When viewing an image flickr presents an icon of the relevant CC license applied to it, clicking on it will bring you to the relevant license page on the Creative Commons website.

On Google Images

Google Image Search will keep any information on usage rights of images it indexes. When a user searches they can then filter the results by usage rights, done by selecting Search Tools from the menu and selecting the required option from Usage Rights

Screen Shot 2016-07-12 at 11.58.39.png

Ethical Constraints

A question often arises as to who owns the copyright for a design, the designer or the client. It may seem logical that as the client payed for the design they would become the full owner if it once completed. However, Copyright law states that it is the designer who owns the Copyright and receive Copyright Protection automatically. Therefore, when hired to create work for a client, unless stated in the contract, the designer will own the copyright to the work. An exception is if the designer is employed by a company. If the client hires the company to undertake design work, and you are the person who actual makes the design, you do not own the copyright, rather your employer does.

If clients are being difficult, the best way to deal with them is professionally. Highlight to them the terms of the contract and explain what it means, if they require work or services not outlined in the contract an additional contract would need to be drawn up indicating the terms of the work. It is important to protect yourself from difficult clients when agreeing on the contract, and if they are insisting on unreasonable terms, or ones that make you uncomfortable you have the right to simple walk away.

Task 1: Understanding the principles of interactive media design

Typography

Researching websites and finding examples of Serif, Sans-Serif and Handwritten font types.

SERIF

First, looking at Serif fonts. Serif fonts feature a small line at the end of the stroke in the letters.

Screen Shot 2016-06-28 at 10.50.37

Typically, they are easier to read in print which explains the wide usage in books. The example website I chose is the Financial Times site, the use of a serif font replicates the appearance of the printed newspaper. Serif fonts are often viewed as official, straightforward and reliable, making them an apt choice for a newspaper.

Screen Shot 2016-06-28 at 10.18.52

SANS-SERIF

Sans-Serif fonts lack the ‘tick’ in the characters, the name coming from the French for without; “sans”. Sans-Serif fonts are usually viewed as modern, clean and professional.

Screen Shot 2016-06-28 at 10.29.57

Apple uses a custom sans-serif font for their website (and as the system font for their computer and mobile operating systems), reflecting the companies modern aspect and clean design.

HANDWRITTEN

Handwritten fonts tend to vary a lot from example to example. They can be described as playful, elegant or creative. Due to the variations in style of handwritten fonts they can appear in a multitude of different environments.

The below example is from Lost My Name, a company that produces personalised children’s books.Screen Shot 2016-06-28 at 10.40.49.png

The use of a handwritten font is particularly apt here for a selection of reasons. Primarily, it is more relaxed and playful due to the lack of uniformity and the fluidity of the type. This seems suitable for a subject relating to children and stories. Further to this, the handwritten font reinforces the notion of personalisation, handwriting is often unique to the writer.

Class Exercises

Workshop 1: Creating Logos

Creating type based logos for two companies, considering font, kerning, tracking and colour amongst other things.

The first company is Brighton Business Solutions, the brief describes it as a clean, sophisticated business site. With this in mind, I focused on using Sans-Serif fonts for all the designs. Sans-Serif fonts are often associated with being precise, clean and smart; an ideal choice for this company.Brighton Business Solutions 1

I used Helvetica for my first logo, perhaps the most famous of fonts. I adjusted the kerning and tracking to make the letters and words be closer together, giving the design a compact feel. Additionally the adjustments allowed the text to remain in line with each other, further adding to the tidy, compact feel to the design. To differentiate the title from the tag line I used capitals for the former and lower case for the latter, additionally using italics for the tag line. This allows the viewer to quickly differentiate the two. To further cement the compact concept to the design I contained the text within to neat bold lines at the top and bottom.

Brighton Business Solutions 2

I chose Futura as the font for my second design, another sans-serif font. Futura has a very neat aspect to and seems very considered and balanced.  Similar to the previous design, I differentiated the title and the tagline by using capitals for one and lower-case for the other, however, in this instance the tag line uses all capitals. I further differentiated the two by using opposing colours for the text, black and white. I adjusted the kerning so the words themselves were compact, but increased the space between words so they were distinct. For the tagline I adjusted the kerning and spacing to maintain the line with the title.

Brighton Business Solutions 3

For the final design for Brighton Business Solutions I selected Avenir Next as my font, again, a sans-serif typeface as these are usually deemed as professional looking and modern. I adjusted the kerning more specifically on this design, for example, making the the I in Brighton and the L in Solutions line up. This, combined with my reduction of the leading gives the words a sense of connection. For the tagline I chose to make the first line in italics, as this draws a focus to it and highlights to the viewer that it is a key piece of information in identifying the company.

The second company was South Coast Tees, a youthful, creative, edgy t-shirt company. From this brief it is evident that one can be more playful in the design.

south coast tees 1

I chose Futura again for this design. However, in the title I used the Condensed ExtraBold version. Along with the extremely narrow kerning, and adding an outline, it created a very bold title, reminiscent of bubble text. I curved the title line to add some movement to the design. For the tag line, I arranged the text in two columns. Adjusting the kerning so each line of text was constrained to the lines in its column, I also used varying sizes for the font to help achieve this.

south coast tees 2

For my second South Coast Tees design I decided to be more playful, creating a figure from the typography. This was achieved mainly by adjusting the position of the words to make the o in Coast and t from Tees line up, which gave my a head, body and arms. The legs were created using an inverted v. I used tight kerning as I felt this gave the appearance of handwriting, enhancing the style of the font used: Bradley Hand. The tag line was arranged in a vertical column, I made the text blue and had it become lighter the lower down the column it went. I felt this invoked notions of a wave, and I felt that the beach and the sea were aspects linked to the company due to its name.

south coast tees 3

For my final design I wanted to incorporate the idea of the south coast. I achieved this with a simple background of blue and yellow, reminiscent of a beach. The font used was DIN Alternative, I felt that this was a contemporary font. I was creative in how I arranged the title text. South was written vertically, with Coast and Tees sharing letters from it, sprouting out horizontally. I had to adjust the kerning in South as the letters were by default too far apart when arranged vertically.

Workshop 3: Display Type

Selecting appropriate typefaces and styling for the following pieces of copy:

  • Pure Poetry
  • Traces of Conflict
  • Keep off the Grass
  • Down Memory Lane

 

Colour Theory

Colour theory concerns the aspect of colour and how it interacts with itself. There are three things to consider when discussing colour.

  • Hue – The colour itself, such as red or green
  • Saturation – The vibrance or lack there of in the colour
  • Lightness – The levels of black or white in the colour

pri-sec-ter

At the base level, there are three primary colours; Red, Yellow and Blue. Combining two of these gives secondary colours, such as green or orange. Between primary and secondary colours are tertiary colours, for example, between yellow (a primary) and orange (a secondary) you find yellow-orange (a tertiary).

When one colour is being used it is defined as monochromatic and deals with the different shades, light to dark.

tint-tone-shade

Looking at the use of colour on the web and finding examples of websites using complimentary, monochromatic and multi-coloured colour schemes.

Complimentary colours achieve what their name suggests, they are colours that compliment each other. When looking at a colour wheel, finding the complimentary colour for a selected colour involves looking at the opposite side of the wheel.

Complementary

It is worth noting that there are two main systems for colour, additive and subtractive, and they do differ slightly. Traditional colour theory concerns subtractive colour,  that is where the combination of colours results in the absorption (subtraction) of light. Subtractive colour is relevant to printed materials or painting. Additive colour concerns digital mediums more, where the combination of different light colours results in new colours. This also leads to different definitions for primary colours, where green is deemed as primary and not yellow. The below example highlights the difference in subtractive and additive colour, notably, the combination of all colours resulting in black for subtractive (due to all wavelengths of light being absorbed) and white for additive (due to the presence of all wavelengths of light).

color_cmy-and-rgb.jpg

Website Examples

Monochromatic

Use of red as the sole colour for the site. Gives a simple clean appearance.

Screen Shot 2016-06-28 at 12.02.36

Complementary

Use of red and green, two complimentary colours. The red areas contrast to the green background drawing the viewers focus.

soutez

Multi-coloured

Use of multiple colours, gives the site a vibrant and lively atmosphere.

www-17081d61805162a72423bc4c93f73ee0_h

Colour Workshop 2

Black Coffee Moodboard

black coffee

Citrus Moodboard

citrus

 

Colour Workshop 1

Colour scheme created based on four words

Untitled-1

Silence

Grayscale colours chosen to reflect an emptiness.Untitled-2

Aromatic
Rich, warm and vibrant colours chosen to reflect spices.

Untitled-3

Old Fashioned
Muted tones chosen to evoke an aged feeling.

Untitled-4

Agression
Dark, ominous colours and vibrant red to suggest rage.

 

Composition

Rule of Thirds

The rule of thirds is a concept where you divide an image of web page into thirds, both vertically and horizontally, giving you 9 boxes, 4 lines and 4 focal points where the lines intersect. The diagram below shows the layout expected, the numbers indicate the average amount of focus given to each area, indicating that important information should be placed in the upper left and that the lower right can quite acceptable be left empty.

rule-of-thirds-2.jpg

rule of 3rds

Here we can see how on the Nikon website they have divided their page using the rule of thirds. The menu is kept in the top third, with their prime advert in the middle third. A prominent call to action appears in the centre left block, an area naturally looked at more.

White Space

White space is just that, empty space. There are two types of white space; Active and Passive. Active White Space is space left intentionally blank to provide a better structure or to draw emphasis to content. Passive white space is the empty space around websites or the byproduct of the layout process.

Screen Shot 2016-07-12 at 00.27.57.png

An example of active white space, drawing focus to the product.

Emphasis

Emphasis is where the layout is set up to put focus on certain content, often achieved by manipulating the size of elements on the page. Having one section significantly larger than the rest will draw the user to it and is useful to highlight important information.

Screen Shot 2016-06-28 at 15.51.12.png

The New York Times uses emphasis in its layout to highlight important or new articles.

Alignment

Alignment in can effect how a layout is perceived drastically, be it giving it a stable balanced appearance or suggesting fluidity and motion. It is usually vital that there is some alignment in a layout, otherwise it tends to appear jumbled, uncontrolled and messy.

alignment

The Google search result page keep all returned results in align with the search bar at the top.

 

Task 2: Understanding the principles of interactive media design

Good vs. Bad

Looking at two websites in the category of Art Colleges, exploring an example of good and bad design.

First, looking at an example of bad design I have chosen the Yale University School of Art website.

Screen Shot 2016-05-31 at 11.39.04

Focusing on the appearance first we can see that the site uses less than half the page size to show its content, leaving a lot of empty space. This would not be such an issue if the content was centred rather than aligned left. The choice of background differs on each page but each follow the same style of being an image repeated. This creates a cluttered appearance and can distract from the content, especially on the pages where the background image is animated, for example on the page displayed below.

Screen Shot 2016-05-31 at 11.45.46.png

Moving on to discuss the colours used in the website, they pages do tend to use the same set of colours for the content but it does not always seem to be used for the same elements across the pages.

We can see in the above screenshots the pages for Faculty & Staff, and Students. One uses a green background for its text whereas the other a blue. Both pages contain similar information; a list of people with links to their profile, but using a different colour scheme can make it seem like it is different content. There is a lack of uniformity to the colours used.

Generally, the text across the site is legible. There are however some examples where it is difficult due to the design, an example below.

Screen Shot 2016-05-31 at 11.52.54

The majority of the text on the site is within containers with distinct borders and solid background which is necessary to maintain legibility against the differing backgrounds. The example above is not within a container, instead each word has a white background closely surrounding it. This, along with the selected background for the page, which itself has a white background, makes it hard to distinguish the words easily.

Screen Shot 2016-05-31 at 11.58.59

The navigation for the site is generally easy to understand. There is a menu on the left of all the pages which maintains it styling and position throughout. The menu however is rather simple; black text on a white background, and depending on the page it can be hard to see. The organisation of the links is somewhat unusual for a website. Generally the pages are organised in order of importance, with the “Home” link at the top. For this site the links are arranged alphabetically except for the final two, the last one being “Home”. This goes against the conventions in web design and can frustrate users when it isn’t arranged as they would expect.

The amount of content on the pages varies, and some feel like they have too much. Including a submenu for certain pages would improve navigation, as currently the user needs to scroll a lot to find the content they require. Additionally, much of the content is contained in small scrollable text boxes. An example is below

Screen Shot 2016-05-31 at 12.07.48.png

Scrolling within a page which scrolls can cause issues for users if they don’t have their cursor over the area they desire to scroll. For example, if the user scrolls on the page shown above, when they arrive at the content shown above they will begin to scroll that box rather than the page if the cursor is over it.

As a whole, the site is easy to navigate and what the pages relate to is clear. Finding certain content can be hard due to certain pages containing too much.

Now to look at an example of a good website. I have chosen the Camberwell College of Arts site.

Screen Shot 2016-05-31 at 12.16.29.png

This site has a much cleaner appearance than the Yale site discussed previously.Looking at the “Home” page first, each section is clearly defined.

Screen Shot 2016-05-31 at 12.25.49

The use of dividers between sections as well as clear titles makes it easy for the user to identify that there are distinct sections being presented. The different sections on the home page link to various different areas of the site, though not all of the pages shown in the navigation menu. Instead it seems that they demonstrate the information that a new visitor to the site would be most interested in. If the user wishes to navigate elsewhere on the site it can be achieved through the navigation menu, which remains at the top of the page when scrolling, allowing easy access to the navigation for the users.

Screen Shot 2016-05-31 at 12.29.00.png

The layout of the site is generally uniform, the exceptions being the homepage and the “News” page. The homepage is a full-width page, by utilising the entire screen space it immerses the user and captures them in the site. The rest of the pages follow the same structure (other than the “News” page which will be discussed later), the main navigation bar at the top, the content arranged vertically and a submenu on the left.

Screen Shot 2016-05-31 at 12.46.11.png

Keeping the same layout for majority of the site greatly improves the user experience as they can understand how to navigate quickly. Additionally, maintaining the same colour scheme adds to this point, in the case of the Camberwell site a simple monochromatic colour scheme is used.

Screen Shot 2016-05-31 at 12.34.54

The above screenshot demonstrates how the submenu is structured, in this example it is for the “People’ page. We can see how it allows the user to easily navigate between the different sections of the “People” pages and easily get back to the previous section they were in.

The other page than the Homepage which differs in layout is the “News” page, which in fact links to the Camberwell Blog. The fact that it is based on a blog structure would explain why it differs in layout to the main site as it is built from a different base.

An issue with the news page is it is not connected to the main Camberwell site, meaning navigating back to the site requires either using the browser’s back button, and if you have gone deeper into the news section would require more clicks, or to navigate back to the University of Arts London homepage and then finding your way to the Camberwell site from there.

Screen Shot 2016-05-31 at 13.48.35

The content is organised chronologically, which each article categorised. The page allows you to filter by category or search for an article. Each article is clearly defined from the next due to being contained within an independent box. The page does maintain the general colour scheme for the site.

Audiences

Looking at two websites that both deal with the same category, Music, and how they target different audiences. The examples chosen are Radio 1 and Classic FM.

First looking at the website for Radio 1.

Screen Shot 2016-06-14 at 00.20.15

The design for the site has a lot of focus on the visual appearance. Utilising large image tileboards to deliver its content.

Screen Shot 2016-06-14 at 00.24.22.png

The general design of the site is very simple and clean and easy to comprehend. The tiled nature is reminiscent of popular social media platforms such as pinterest or instagram, clearly an attempt to remain up to date, which reflects the majority of the music played on the station as well as appealing to the generally young audience.

The site breaks up the content into clear sections, allowing the user to find new and popular content quickly or find their favourite DJ easily.

Comparing this to the site for Classic FM we can see a major difference in design.

Screen Shot 2016-06-14 at 00.29.24.png

The Classic FM site appears much more cluttered than that of Radio 1, a mix of text, widgets and images across the page. The page feels too small for all the content and it can be hard to pinpoint quickly the section you want. The layout has similarities to that of a newspaper, perhaps a reflection of the typical age of the audience.

Unlike the page for Radio 1, the Classic FM page offers more than just links to the music and broadcasts from the station but also provides links to related articles.

Screen Shot 2016-06-14 at 00.34.22.png
The site offers more than just the content of the broadcast but also news and content desirable to the audience.

Navigation Design

Primary Menus

These are the top level menus on websites, usually including the main sections of the site. image001Primary menus should appear on all sites as they are necessary for basic navigation, they are simple to understand and allow the user to easily jump between sections.

Secondary Menus

These are a level down from the Primary Menu, and provide a menu of the main sections of one of the top level main sections. image003Secondary menus are suitable when the top level links open up more specific options, such as in this example, Sport goes into the different types of sport and allows users to navigate around the subsection they are in.

Tertiary Menu

Like the Secondary, these are a level down from their previous level, providing links to even more specific pages. Tertiary menus are suitable when there are many sections and subsections of pages. image005.pngLike in the example above, e-commerce sites often feature tertiary menus. They allow users to jump straight to a deeper level of the site quickly, bypassing the previous levels. Although some sites may have a 3rd level to their sections, a tertiary menu may not be entirely suitable as the user may miss out on necessary context by jumping straight in to a section.

Mega Menus

These are vast menus which included large amounts of links and can often be overwhelming. Often used in e-commerce sites, allowing the user to view the many different sections available. image007These are suitable when the page has many sections but the user only needs access to a specific one, allowing them to jump straight to it quicker, much like tertiary menus.

Visual Cues

There are many different visual cues to aid a user in navigating a site. Highlighting areas of the site that can be interacted with. A common example is when text changes colour on a mouse hover.
image023
Generally this indicates the text contains a hyperlink and will lead them to another page. Buttons are another example often used, giving a distinct area to click and sometimes changing appearance, be it colour or style, on a mouse hover to further identify itself as an area of interaction.

Calls to Action are another often used visual cue, most commonly used to link to a sign up page for a site. Generally a clearly defined area on the page that explicitly states what it wants the user to do.
image029.png
Rollover images are another visual cue. These are when an image interacts with a mouse hover and changes in appearance. The example below demonstrates how it is used in an online shop to indicate that the item can be bought by clicking on the image.

Icons and Buttons are common visual cues, the benefit of icons are they allow the user to make a quick connection to what will happen based on its visual appearance. Common uses are for social media sharing or redirects to appstores.

Screen Shot 2016-12-06 at 10.16.44.png

Technology

Looking at the genre of film websites and the specific example of the Cabin in the Woods site and the different technologies employed.

Upon loading the site, a video for the films trailer appears over the page.

Screen Shot 2016-06-14 at 10.38.59.png

Often when people visit the site for a film the trailer is a key piece of content they are looking for, by automatically opening it over the page the user doesn’t even need to look for it.

Upon the trailer ending the main site is visible. There is an audible low rumble in the background, this use of sound enhances the overall atmosphere of the film, that is of a horror movie.

Also evident is the use of animation. There are two examples of it present.First is the review line which fade in and out showing all the different reviews for the film. By using animation to scroll through it the user can see all the content without having to move around the site.

Screen Shot 2016-06-14 at 10.41.33Screen Shot 2016-06-14 at 10.41.22

The second example of animation on the page is that of the image of the house. Numerous aspects of the image are animated, and although it doesn’t add any functionality to the site it engages the user. A moving image will captivate the viewer for longer compared to a still as the watch to see how it changes.

The page also employs a slideshow gallery, utilising the entire screen space.

Screen Shot 2016-06-14 at 10.53.55.png

The user can either scroll through the images at their own pace or allow the site to move through them at regular intervals.