FMP Brand Design Research

Existing graphic design/media studios

Logo Design

‘£200 will get you a simple logo, whilst if it is full company-branding you are after don’t expect any change from a £1000. If you want to use one of the top design agencies who are used to dealing with the large corporate – don’t expect to pay less than £10,000.’ (Expert Market, 2018)

‘From £650. This offer is great for small and starting businesses. You need a highest quality logo that will represent you in all what you’re doing. Creating a logo isn’t only knowing essentials rules of logo design. It is understanding of your business, your target market, your goals. It means hours of sketching and bringing the right ideas to live. To learn this can take years and if you hire a professional designer you can save yourself hours of time and get the results you’ll be proud of.’ (Orange Cup Studio)

Business cards/Letterheads/Brochures Etc. (Stationary)

‘£300 should get you a nice but simple design that you can put on things like business cards and company letters, whilst anything bigger will obviously cost more.’ (Expert Market, 2018)

‘Hourly rate £22. We can design anything from posters, leaflets, banners, brochures, billboards to different bespoke packaging labels or boxes to help promote your business offline. Don’t forget that with professionally designed materials you will have the edge over your competitors. Professional graphic designers always save your time in the long run and help your brand to be recognised on the market.’ (Orange Cup Studio)


‘Generic websites can be designed for you from as little as £250, whilst if you want one specifically designed to suit your business you are looking at £1000+.’ (Expert Market, 2018)



Typography/Font design

Letter Anatomy


An apex is a point formed at the top of a character, such as ‘A’. It can have different styles such as pointed, rounded or flat.


  • The part of a character that encloses a space in circular letterforms such as ‘O’ and ‘e’


  • A small stroke at the end of a main vertical or horizontal stroke that aids reading by helping to lead the eye across a line of text.

Classification Systems

The aim of font classification if to organise and describe the many different fonts that exist. Font classification is not entirely straightforward as there are multiple standards and way to describe a font. Fonts can be classified by their characteristics, time period or typical usage.


A font face or family is a collection of all the different versions of a particular font or typeface. This can include different weights, widths and italics.


As with font family names, there are multiple ways to describe different versions of fonts, however, names tend to have prefixes and suffixes that allude to the characteristics of the design I.E. ‘Bold, Italic, Regular’. Fonts can also use a numbered system, such as the typeface Univers 45.



BaselineShiftBaseline – Baseline Shift

Baseline shift determines how high or low each letter will be relative to the baseline. Characters will usually sit on this line, however, some characters like ‘o’ might fall slightly below the baseline.


Kerning determines the spacing between letters or combinations of letters. This helps to make the text look more balanced and helps handle difficult letter combinations.


Leading is the space between lines of type.

TrackingTracking – Letter Spacing

Tracking determines the spacing between letters, this is different from kerning as it affects the whole text rather than individual spacings


Weight determines the thickness of the lines of a typeface. Heavy fonts are often known as Bold or Extra Bold while thinner weights are often known as light. A range of different weights are usually used to create a hierarchy in a piece of text.



X-height determines how tall non-ascending characters, such as ‘x’, will be. The x-height is measured from the baseline to the mean line. Large x-heights are useful for text-heavy publications that use a small point size as they are more readable as a block.

Examples of Different Font Styles


  • A process where a type font is built rather than crafted

Fixed width (Monospaced)

  • Font is aligned vertically by allocating the same amount of space to each character
  • can be useful for financial data as numerals align from line to line


  • Sans serif typefaces that are based on geometric shapes
  • Tend to be rounded
  • inspired by constructivism and Bauhaus


  • The process of joining two or more separate characters to form a single shape – E.G. for a logo


  • Characterised by their extreme stroke contrast
  • Wide use of hairlines and unbracketed serifs


  • Seeks to boil an idea down to its essence and use that as a basis for a design
  • helps a designer think outside the box and go beyond standard form and ideas in search of underlying patterns


  • Based on Roman inscriptions
  • Always upright in-stance

Sans Serif

  • A typeface that does not have serif strokes
  • Tend to be looked down upon by designers
  • Defining aspect of modernist typography


In-depth research of copyright protection laws

‘Intellectual property (or IP) refers to creative work which can be treated as an asset or physical property. Intellectual property rights fall principally into four main areas; copyright, trademarks, design rights and patents.’ (UK Copyright Service, 2018)

The Berne Convention

‘The full title is the Berne Convention for the Protection of Literary and Artistic Works. While details of copyright law will vary between nation states, the Berne Convention lays down a common framework and agreement between nations in respect to intellectual property rights. The convention is administered by the World Intellectual Property Organization, (WIPO).’ (UK Copyright Service, 2011)

The Berne Convention is a

  • First adopted in 1886
  • provides protection for citizens of registered countries
  • the author of the work has exclusive rights to
    • claim authorship
    • object to any treatment of the work which would be ‘prejudicial to his honour or reputation’
  • None of these actions can be taken without permission from the author for the duration of the copyright
    • reproduce the work, though some provisions are made under national laws such as ‘fair use’
    • authorise public performance or broadcast, and the communication of broadcasts and public performances
    • adapt or alter the work


Copyright covers work that is recorded in some way such as music, literature, films, graphics/artworks etc. It protects the author of the work and allows them to take legal action against infringement or plagiarism.

Copyright is an international right and a single registration with the UK Copyright Service means you have verifiable evidence of Copyright to help prove and protect your rights Nationally and Internationally.

(UK Copyright Service, 2018)


‘A trademark is a name, word, slogan, design or another unique way of identifying a product or organization.’ (UK Copyright Service, 2018)

  • Registered at a national level
  • only protected in that country
  • Identified By TM or ® symbol
  • illegal to falsely state validity of a trademark
  • typically takes 6-18 months to process

Design Rights

‘Unregistered design rights protect the shape or configuration of a marketable (or potentially marketable) product, and are used to prevent unauthorized copying of an original design. Design rights can also be bought, sold or licensed in a similar manner to copyright.’ (UK Copyright Service, 2004)

  • Independent of copyright
  • designs may be subject to copyright and design rights
  • may also be registered in a similar way to patents


‘Patents are grants made by national governments that give the creator of an invention an exclusive right to use, sell or manufacture the invention.’ (UK Copyright Service, 2018)

  • Apply to industrial processes and inventions
  • protects against unauthorized use of the invention
  • registered at a national level
  • typically takes 2-3 years to be granted

Passing off

‘Passing off is a term used when a company or individual represents themselves in a way that may mislead potential customers into believing that they are dealing with a different, more established company. If a company is passing off another brand, the original company can take action to defend their identity. Passing off is not always as simple as determining who was using the name first, and public perception of who the name is associated with should also be taken into consideration.’ (UK Copyright Service, 2006)

Studio name ideas

Introduction to original branding ideas

Possible new brand name ideas

  • Adaptive media – Taken
  • Modern Interactive – Free
  • Venture Design – Taken 
  • Acoustic Art
  • Contemporary Design
  • Minimal Media
  • Modern Illustrations
  • Noah Shankster

Colour Research


  • ‘As a general rule, brighter shades tend to be more energetic, while darker shades feel more relaxing. The brighter shades of calls-to-action attract the eye, while the darker shades in backgrounds help create an immersive effect.’ (Creative Bloq, 2017)


The colour blue is usually linked to feelings of calm and serenity. Its calming effects make blue friendly and inviting while inspiring security and a feeling of safety. It’s these properties that make it one of the most popular colours in web and brand design, as companies with lots of blue are perceived as safe and friendly.


Green is usually used to represent the environment and outdoors as it suggests a natural and organic quality. Being one of the most balanced of colours, green can be used to bridge between warm, stimulating colours like orange and calming, cool colours like blue.


Yellow, while not a very popular colour due to its effects on the anxiety centre of the brain, is often associated with happiness. Much like red and orange, it has stimulating and revitalizing properties. However, it is also usually associated with warning and danger so it is important to use it sparingly.


Orange can signify health, vitality and vibrancy it is also usually linked to haste and playfulness. Adding orange to a design is a good way to add excitement without severity.



  • associated with both love and war, but the unifying factor in all meanings is a sense of importance.
  • Lighter shades emphasise the energetic aspects of red – including youthfulness – while darker shades emphasise power, and even durability, such as a brick wall.


  • most people interpret pink as feminine
  • the colour is popular for targeting female users.
  • links with childhood and with sugary treats give pink a sweet, sometimes innocent appeal
  • traditionally used with love and romantic themes, alongside red and light purple


  • associated with royalty, creates an air of luxury, even decadence
  • Using a purple dominantly is a quick way to create a sense of elegance or high-end appeal
  • Lighter shades of purple – especially lavender – bring to mind spring and romance.
  • Darker shades add more mystery, and can even symbolise creativity.
  • Darkening the shade will also turn the romantic elements more sensual.


  • not a popular choice in web design
  • brown can, under the right circumstances, be effective
  • associated with the earth and trees,
  • can add an outdoorsy feel, maximised by a pairing with green
  • brown is often used in conjunction with wood texturing, giving the same old-fashioned and rustic atmosphere of a wooden cabin


  • strongest of all colours
  • often used only sparingly – such as for text
  • however, it works quite well as a primary colour element (like for backgrounds).
  • Much like purple, black adds an air of sophistication and elegance, and also mystery, though with much bolder confidence.


  • intermediary between black and white,
  • grey exudes neutrality or a lack of any particular sensation
  • By varying the vibrancy, grey can take on the properties of either black or white – attention-grabbing or repelling – to specific degrees.
  • That means if black is too powerful for your design, try dark grey.
  • If white is too bland, try light grey.
  • On its own, though, grey is rich with individual characteristics.
  • It is the colour of formality, so sites aiming to look traditional or professional tend to favour it.
  • It can also give a depressing vibe, as it’s the colour of gloomy, rainy days.
  • When used dominantly, it can be somewhat subduing, for better or worse


  • white pairs well with just about anything
  • As a primary colour, though, white gives off an impression that is both clean and chaste.
  • White has that ‘spotless’ feeling that, for the right site, feels completely effortless.
  • Its association with purity can make it seem virtuous, but also sterile and cold.
  • some web designers will tend towards an ivory or cream instead
  • These offshoots of white are softer and even less noticeable, but with the same minimalist and complementary aspects. They are the more comforting and less stark alternatives to white.


  • it takes on the characteristics of the colours around it
  • While dull on its own, its enhancing effects make it a powerful choice as a background or secondary colour

(Creative Bloq, 2017)



This slideshow requires JavaScript.



Ambrose, G and Harris, P. (2010) The Visual Dictionary of Typography. Lausanne, Switzerland: AVA Publishing.

Awwwards (2015) 99 Creative Logo Designs for Inspiration. Available at: (Accessed: 11th April 2018)

Awwwards (2012) 95 Inspiring Websites of Web Design Agencies. Available at: (Accessed: 11th April 2018)

Cuberto Design (2018) Cuberto. Available at: (Accessed: 11th April 2018)

Creative Bloq (2017) 12 colours and the emotions they evoke | Creative Bloq. Available at: (Accessed: 8th May 2018)

Evolution Design (2018) Who owns your logo? IP intellectual property law | Evolution Website Design. Available at: (Accessed: 11th April 2018)

Expert Market (2018) Graphic Design Agency in London & UK | Prices & Rates. Available at: (Accessed: 24th April 2018)

Future Publishing Limited (2014) The UK’s top 50 graphic design studios revealed | Creative Bloq. Available at: (Accessed: 11th April 2018)

Hello Monday (2018) Hello Monday. Available at: (Accessed: 11th April 2018)

Moving Brands (2018) Moving Brands – an independent, global creative community. Available at: (Accessed: 11th April 2018)

Morton Graphics and Text (2018) Basic Colour Theory. Available at: (Accessed: 8th May 2018)

Nurture Digital (2016) Nurture Digital. Available at: (Accessed: 11th April 2018)

Orange Cup Studio (no date) Price list – Graphics Design | Orange Cup Studio. Available at: (Accessed: 24th April 2018)

P22 Studio (no dateP22. Available at: (Accessed: 11th April 2018)

Parallax (2018) Digital Agency in Leeds & London | Parallax. Available at: (Accessed: 11th April 2018)

Size (no date) Homepage: Available at: (Accessed: 11th April 2018)

UK Copyright Service (2004) Designs and design rights. Available at: (Accessed: 11th April 2018)

UK Copyright Service (2018) Intellectual Property: Copyright, Trademarks and Patents. Available at: (Accessed: 11th April 2018)

UK Copyright Service (2018) Logo Copyright. Available at: (Accessed: 11th April 2018)

UK Copyright Service (2011) P-09: Copyright Law | Fair Use conditions. Available at: (Accessed: 11th April)

UK Copyright Service (2006) P-18: Copyright Law | Does copyright apply to names, titles and phrases? Available at: (Accessed: 11th April 2018)

UK Copyright Service (2011) The Berne Convention | fact sheet P-08 (international copyright law). Available at: (Accessed: 11th April 2018)

Ultra Noir (2016) ULTRANOIR VR. Available at: (Accessed: 11th April 2018)


App Design – Idea Development/ Treatment

App Idea Outline

BlueProject – Project Organiser App

My idea is a Coursework/ Project planning app that allows the user to easily and intuitively plan out their work, setting deadlines and goals easily viewed by a calendar /work to do page.

There will be two versions of the app, a ‘free’ version for students and a ‘paid’ version for professionals in the industry. This business model will allow students, who may be limited in their budget to use this app and also pay for its development with the ‘paid’ version. This design will also draw in ‘paid’ users as once they leave education as the app will automatically ask you to upgrade to the professional version.

Each version will be tailored to its specific market audience I.E. the student version having teacher login accounts that are able to set deadlines and review work and the Professional version having client login accounts that are able to see the progress of the company/employee’s work.


Feature ideas:

  • Current Projects
  • Upcoming Projects
  • Project Pages
  • Media Libary for sharing content
  • Student and Professional version
  • A version of the app for clients so they can view the progress of work


Target Audiences

Student version (Free)

The first demographic the app will cater to will be students in coursework based education such as art and design/media. They will most likely be aged from 16-20 covering both college and university students.

What features will differ

This version of the app will have a ‘Teacher login’ that allows course leaders to set projects and deadlines for their students. Students will also be able to set their own goals alongside these deadlines or create their own projects and deadlines independently.


Professional version (Paid)

The second demographic will be aimed at professionals in the creative industry such as media production or graphic design. This version will act as a sort of ‘premium version’ as the Student version will require a user to register with a teacher before they can use the app.

What features will differ

As this version is more industry-focused, it will have a feature that allows the users’ clients to view their progress. This will improve communication between client and artist as they will easily be able to see and give feedback on work.


The visual style of the app

The visual style of both versions of the app will be professional and have a minimalist design. The colour palette will be made up of different shades of blues and turquoises which will reflect and compliment the name ‘BlueProject’.



Icon mood board


Colour palette mood board


App layout mood board




The principles and processes of interactive design – Jamie Steane

Film Noir Trailer Ideas

Idea 1 – Watchdogs

  • Follows player around as they ‘hack’ various things
    • Traffic lights
    • Doors
    • ‘breaks into’ a building (possibly filmed in the college)
  • Only really needs main character (could have others as ‘bystanders’)
  • Design/themes would be modern/ urban (perhaps set in and around Kingston)

Idea 2 – Player Unknown’s Battlegrounds (PUBG)

  • Set in/around towns
  • have around 5 actors hunt each other down
  • Plane drop scene could be gameplay footage to cut down on special effects
  • Locations
    • Houses
    • College
    • Parks around Kingston
    • Town centre (need to be respectful to public)
  • Last player survives using a frying pan

Web Design Research

Examples of poor website design

Arngren Shot 2018-01-03 at 15.27.38

Overall, I think the design of this website is quite unorganised and hard to understand as lots of information has been crammed into one page. If I was going to improve this webpage, I would separate different items into categories and display them in more of a list or grid-like format with more negative space between each entry.

Ling’s Cars Shot 2018-01-03 at 15.28.33

In my opinion, the design of this website- while better than the previous one as it is organised in a more visually easy to understand layout- is still overcrowded and perhaps uses too many colours that make it look messy and even unprofessional which is not good for a company selling cars. However, the logo and menu bar on the lefthand side is a good design choice as the viewer’s attention is naturally drawn toward the lefthand side first.

WMGH Shot 2018-01-03 at 15.42.18

Personally, I dislike the layout of this website as I think a webpage should use as much screen space as possible as designers have to show a lot of information while not overcrowding the page and leaving large borders on the side is a waste of this valuable resource.


Examples of good website design

Evernote Shot 2018-01-03 at 15.48.49

I think this is a good example of web-design as it has lots of negative space, making the important elements such as the logo and tagline jump out more as they are not being overcrowded. The use of a logo as the home button is also a nice feature I would like to include in my own website as I think this gives the website a more professional feel.

Air BnB Shot 2018-01-03 at 15.46.23

Like the last example, this design also has a lot of negative space and uses a logo as a home button, however, the rest of the menu is positioned in the top right corner. This in a way balances the webpage as there is a similar amount of information on both sides of the screen. It is not immediately obvious however that a user has to scroll down to see more of the webpage and although this is an interesting feature that I would like to use in my own design I will have to take care to make this more apparent.

Common locations of elements in web design

The logo is usually in the top left as this is the first place the eye is drawn to when viewing a webpage. Menus tend to be either directly to the right of the logo or on the top righthand side of the page. Content is usually underneath with either a large bold heading or an image.

Origins of the internet / World Wide Web


The predecessor to the current Internet we know was called ARPANET (Advanced Research Projects Agency Network), it was initially designed to link computer at Pentagon-funded facilities so that they could share information between them. Although it was funded by ARPA, a branch of the US military department, it was more academically focused than military.

ARPANET was also responsible for the invention of packet switching – the system used to send information across networks. it consists of splitting information into small ‘packets’ that each takes their own route across a network. This allows the network to become more like a web of connected devices than having everything routed through one server or hub.


The transformation from ARPANET to Internet

The early network protocols had many limitations, they could only do three things- Log on to a remote computer or server – NCP (Network control protocol) printing to a remote printer and transferring files between different computers – FTP (File transfer protocol).

As ARPANET became more popular, other networks began to pop up around the world. However, It’s design required too much control and standardization to be able to connect to these new systems. So Vinton Cerf and Bob Kahn began considering ways of connecting the Networks together. The system they came up with would eventually be known as TCP/IP (Transmission-Control Protocol/Internet protocol). This protocol would eventually form the basis of the internet we know today.

The term ‘Internet’ became popular around 1983 when TCP/IP came into wide use. ARPANET was split into two parts, MILNET and a civilian version of ARPANET. The word internet was originally an easy way to refer to both of these networks that were ‘Interworking’.

As free and commercial internet services like Prodigy, FidoNet, Usenet, Gopher, and many others rose, and as NSFNET became the backbone of the internet, ARPANET’s relevance diminished – eventually being shut down and decommissioned permanently in 1990.

DNS (Domain Name Servers)

Originally, internet server addresses consisted of numbers called an IP (Internet Protocol) address. As more address nodes popped up, it became more difficult to keep track of them so a system called DNS was developed.

DNS basically maps IP addresses to a more human-readable domain name. A domain name is broken down into different levels. For, the top level would be com, the middle google, and the subdomain www. This tree hierarchy allows each domain node to specify different subdomains e.g. for mail traffic or FTP traffic.


Tim Berners-Lee and the creation of the World Wide Web

dbdaa3676c2f185821f774d3cf1ca4ea7e55bffbBorn in June 1955, Tim was and is a computer scientist from London. From a young age, he was interested in electronics and whilst in college, he made a computer from an old television set.

After graduating from university, he then went on to become a software engineer at CERN. Tim noticed that scientists were having trouble sharing the information they had gathered, and so he realized they could solve this by using the fast-growing Internet and exploiting the developing technology known as Hypertext.

By October 1990, Tim had created three fundamental principles which he insisted must be kept royalty free: HTML (Hyper Text Markup Language), URI (Uniform Resource Identifier) and HTTP (Hyper Text Transfer Protocol), that we still use to this day. He also wrote the first webpage browser/editor and the first web server HTTPD. From here, the Web exploded, with thousands of web servers popping up all over the Internet.

Search engines

Initially, users would lookup webpages addresses on dedicated directories. As websites became more popular, it became necessary to have a tool to search and index these sites. One of the first examples of this was created by Matthew Gray. Called Wandex, it was the first indexing tool to ‘crawl’ the web, indexing and searching catalogued pages on the web.

Modern search engines, such as Google and Yahoo use complex algorithms to index and rank web pages based on keywords and network traffic.

Development of Web sites, Web protocols and Web pages

Responsive web design

Responsive web design has emerged as a range different devices and screen sizes become Web-Enabled such as smartphones and tablets. Web-designers will have to take this into consideration when creating web pages so that they work across all if not most resolutions. They can do this by creating ‘break-points’ in a page that will reshuffle and scale the content so that it is still easy to interpret.

Website Hosting

web hosting can be broken down into two categories- first party and third party. First party hosting is where you run and maintain a server yourself. This can be quite difficult and requires a decent competence in computers and debugging. Third Party is where someone else hosts and maintains a physical server that you run your website from. usually, a third party host will run many web servers simultaneously for multiple clients using virtual machines running off one physical server.


A browser is a program that is used to connect and receive content from web servers on the World Wide Web. An example of a popular browser is Google Chrome. Modern web browsers can interpret a number of different content types, such as standard HTML, Javascript, CSS and FTP. Many browsers also offer extensive plugins to do anything from spellchecking to video calls/conferencing.

Apache (HTTP Servers)

HTTP servers are what your browser connects and sends requests to when looking at a website. the server can connect to other server programs, such as SQL or PHP to further modify and customise the final webpage. the default webpage for a server is usually called index.html (or .php depending on what language is being used). Other web pages can then be linked to through this page.


Html is the base level programming language for web pages, consisting of different tags (e.g. <head> <body> <p>) that are used to layout information on a page.


CSS (cascade style sheet) is a programming language that allows the web designer to create classes and tags that an HTML document can use to standardise the design and layout of the website. Without CSS, it would be very difficult and time-consuming to layout a webpage visualy and so many would still be almost completely text-based.

An example of a CSS class:
#header {
color: green;


Javascript is a scripting language that can be combined with HTML and CSS to create interactive elements and designs such as a slideshow or hamburger menu.


Structured Query Language (SQL) is a programming language for accessing and manipulating databases. an example of where this would be used is to store user login details or other variables/information.


File Transfer Protocol (FTP) is a filesharing protocol that allows users to log in to a central or ‘cloud’ server to access files. This can be useful when running a website from a remote location as it allows the client to modify and change it from pretty much anywhere.




UPDATED – 2D Game Design Sketchbook Development

Character And Enemy Design

Main Character

Initial character ideaCharHelmetDevelopmentInitial astronaught design

These were my first ‘Concept’ drawings of the astronaut character. Originally, I wanted to create a more robotic style character, however, I later settled on the minimalistic space suit as I realised that this would be much easier to implement into the game.

Pod Droid

PodDevelopmentInitial Station Droid design

On the left, are the first ideas I came up with for the Station droids that the player would’ve had to fight to get to the end of the game, from these I then came up with the final concept sketch, with a closed and opened view.



The AI design has been mainly the same throughout most of the design process, being made from this initial concept sketch.

Prop/Weapon Design


Level Design

Pod Design RoughPod Design Cont


UI Design