Web Design


Video Showing Responsive design of the website


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: https://www.awwwards.com/99-creative-logo-designs-for-inspiration.html (Accessed: 11th April 2018)

Awwwards (2012) 95 Inspiring Websites of Web Design Agencies. Available at: https://www.awwwards.com/95-inspiring-websites-of-web-design-agencies.html (Accessed: 11th April 2018)

Cuberto Design (2018) Cuberto. Available at: https://cuberto.com/ (Accessed: 11th April 2018)

Creative Bloq (2017) 12 colours and the emotions they evoke | Creative Bloq. Available at: https://www.creativebloq.com/web-design/12-colours-and-emotions-they-evoke-61515112 (Accessed: 8th May 2018)

Evolution Design (2018) Who owns your logo? IP intellectual property law | Evolution Website Design. Available at: http://evolution-design.co.uk/who-owns-your-logo-a-question-of-ip-intellectual-property-law-not-rights/ (Accessed: 11th April 2018)

Expert Market (2018) Graphic Design Agency in London & UK | Prices & Rates. Available at: https://www.expertmarket.co.uk/graphic-designers/graphic-design-agency-london-and-uk-prices-and-rates (Accessed: 24th April 2018)

Future Publishing Limited (2014) The UK’s top 50 graphic design studios revealed | Creative Bloq. Available at: https://www.creativebloq.com/studio/uks-top-50-studios-revealed-101413115 (Accessed: 11th April 2018)

Hello Monday (2018) Hello Monday. Available at: https://www.hellomonday.com/ (Accessed: 11th April 2018)

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

Morton Graphics and Text (2018) Basic Colour Theory. Available at: https://www.colormatters.com/color-and-design/basic-color-theory (Accessed: 8th May 2018)

Nurture Digital (2016) Nurture Digital. Available at: http://www.nurturedigital.com/ (Accessed: 11th April 2018)

Orange Cup Studio (no date) Price list – Graphics Design | Orange Cup Studio. Available at: https://orangecupstudio.co.uk/pricing/price-list-graphics-design/ (Accessed: 24th April 2018)

P22 Studio (no dateP22. Available at: http://p22.studio/ (Accessed: 11th April 2018)

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

Size (no date) Homepage: Size.agency. Available at: http://www.size.agency/ (Accessed: 11th April 2018)

UK Copyright Service (2004) Designs and design rights. Available at: https://www.copyrightservice.co.uk/protect/p15_design_rights (Accessed: 11th April 2018)

UK Copyright Service (2018) Intellectual Property: Copyright, Trademarks and Patents. Available at: https://www.copyrightservice.co.uk/copyright/intellectual_property (Accessed: 11th April 2018)

UK Copyright Service (2018) Logo Copyright. Available at: https://www.copyrightservice.co.uk/protect/logo_copyright (Accessed: 11th April 2018)

UK Copyright Service (2011) P-09: Copyright Law | Fair Use conditions. Available at: https://www.copyrightservice.co.uk/copyright/p09_fair_use (Accessed: 11th April)

UK Copyright Service (2006) P-18: Copyright Law | Does copyright apply to names, titles and phrases? Available at: https://www.copyrightservice.co.uk/copyright/p18_copyright_names (Accessed: 11th April 2018)

UK Copyright Service (2011) The Berne Convention | fact sheet P-08 (international copyright law). Available at: https://www.copyrightservice.co.uk/copyright/p08_berne_convention (Accessed: 11th April 2018)

Ultra Noir (2016) ULTRANOIR VR. Available at: http://vr.ultranoir.com/ (Accessed: 11th April 2018)

FMP Proposal

Guidance:For your Project Proposal you must provide an outline brief of your Final Major Project. This brief will normally be of your own choosing. Where the brief is set by your tutor, or where you are working on a group brief (with other Learners), please make sure that you cover how you will respond individually to the brief and/or your individual responsibilities/contribution to the work of the group.
Your Project Proposal must be produced as a focused outline brief:
Section 1:
I will be working towards producing a brand design for my graphic design company, which I am planing to set up after college. Through the branding design, I would like to communicate who I am, what services the studio could offer to the clients and where they would be able to find me. I will develop 2D promotional materials such as: business cards, letterheads, compliment slips etc. The concept will be based on the Acoustic Art theme…In adition to that I will create a website design, which should promote the studio online and will act as an online portfolio.

Section 2:
I will research existing design studious online and I will select a couple of books related to logo design, typography styles, branding and website design in order to inform my study further. In addition I will do a thorough research on Trade Marks and Copyright legislation to expand my understanding about the way I could protect my creative ideas and outcome. Also I will look at the latest edition of the Creative Review magazine to get the glimpse of the current trends in graphic design.
ii. Early ideas, research and sources (you must include a short list of research sources and bibliography texts). This list can be attached as an appendix



Ambrose,Gavin “The visual Dictionary of Typography” 1st edn. Lausanne, AVA publishing SA, 2010
Ambrose/Harris “ The Production Manual” 1st Lausanne, AVA Publishing SA, 2008
Cullen, Cheryl “ Graphic Design that Works”, 1st edn. USA, Rockport publishers, 2006
Drew, Keith “Online Branding” 1st edn. London, Laurence King Publishing, 2002
Morgan, Conway “Logos”1st edn. Crans-Pres-Celigny, Rotovision SA, 1999


Design Council (2018) “The power of branding”  Available at: https://www.designcouncil.org.uk/news-opinion/power-branding , (Accessed on 21 March 2018)
Inkbot Design, Branding (2017) Available at: https://medium.com/inkbot-design/tagged/branding , (Accessed on 21 March 2018)
Jacob Cass, (2014)“Design your own site” Available at: https://www.creativebloq.com/logo-design/get-started-7112864 , (Accessed on 21 March 2018)
John Rompton/Forbes, (2014) “ 12 Principles of Great Web Design” Available at: https://www.forbes.com/sites/johnrampton/2014/11/14/12-principles-of-great-brand-design/#4482bb667032 , (Accessed on 21 March 2018) Legislations (1988) “Copyright, Design and Peterns Act 1988” Available at: https://www.legislation.gov.uk/ukpga/1988/48/contents , (Accessed on 21 March 2018)

(Guide: 50/100 words)
Section 3:
i. Intended techniques, media, processes
I will be sketching out my initial ideas, then select the best outcome and continue with the development process. The rest of the allocated time I will use to produce the digital outcome of the logo, business card and all related document templates as letterhead, compliment notes and the price list. In addition I will design the web page layout design to compliment the full promotion of the graphic studio and the services it could offer to the clients.


ii. Timescales (an action plan is essential)
Date Tasks Resources/Techniques
20 05.02.18 Brainstorm ideas, group discussions, outlining the possible outcome Blog, sketchbook , books, magazines HALF TERM   Visits to the graphic design studio and more initial ideas for the branding design Blog, sketchbook, Library21 19.02.18 Mind-maps and moodboards Blog, sketchbookPhotoshop, Illustrator22 26.02.18 Initial research Blog, sketchbookPhotoshop, Illustrator23 05.03.18 Writing a FMP proposal Blog, sketchbookPhotoshop, Illustrator, Word24 12.03.18 Research expansionMore moodboards Blog, sketchbookPhotoshop, Word25 19.03.18 Pitch presentation Blog, sketchbook26 26.03.18 Initial ideas of the logoMoodboards Blog, sketchbookIllustrator EASTER Digital development process of the selected design ideas and experiments with the layout and possible colour combination. Blog, sketchbookIllustrator, In-Design27 16.04.18 Obtaining a formal feedback from friends, teachers and peers via set questionnaire, analysis and consideration of possible changes based on the feedback.  Blog, sketchbookIllustrator, In-Design28 23.04.18 Final logo and templates design  Blog, sketchbookIllustrator,In-Design29 30.04.18 Start of the web page designMoodboardsThumbnails and initial sketchesColour swatches and layout compositions Evidence on the Blog, sketchbookMuse30 07.05.18 Further development of the initial ideasMore colour experiments, relevant information about the studio and the services it offers that has to be included. Record on development process on the blog, sketchbook, Muse31 14.05.18 Digital page design – content Muse, Photoshop, Illustrator32 21.05.18 Final touches and selection of files for printing.Writing the FMP evaluationBlog updates In-Design, IllustratorPrinter, Blog HALF TERM   Arranging a professional printing facilities and appropriate materials. 33 04.06.18 Selecting the final outcome that should be presented on the Exhibition. Print out those files with a good quality and mount them on foamboards ready for display.  Blog, Snapshots,Display on the allocated place 34 11.06.18 CIC Big Event (Tuesday 12th June)

(Guide: 50/150 words)
Section 4:
i. Proposed method of evaluation (how you will review your FMP in critical and analytical ways – self and peer review, tutorials, critiques, etc)
In order to evaluate my work regularly, I am going to ask my peers for a feedback, by informal conversation in class and will gather their opinions via a formally set questionnaire, as well. Also I will discuss any problems with my teachers and seek for their professional opinion. This will help me to see my work from a different perspective and eventually consider some changes to improve my design concept in order to achieve my goals and meet the requirements set on the FMP brief.

(Guide: 50/100 words)
Your Project Proposal must be not less than 250 words, Aim to have more than 500 words.