Web Design

WebDesign

Video Showing Responsive design of the website

Advertisements

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)

Websites

‘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

ApexApex

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.

BowlBowl

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

SerifSerif

  • 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.

Face/Family

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.

Naming

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.

 

Layout

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.

KerningKerning

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.

LeadingLeading

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

WeightWeight

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

XHeight

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

Constructed

  • 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

Geometric

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

Ligatures

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

Modern

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

Reductionism

  • 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

Roman

  • 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

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)

Trademarks

‘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

‘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

Vibrancy

  • ‘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)

Blue

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

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

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

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.

Red

 

  • 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.

Pink

  • 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

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.

Brown

  • 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

Black

  • 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.

Grey

  • 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

  • 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.

Beige

  • 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)

 


Moodboards

This slideshow requires JavaScript.


Citations

 

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)

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’.

 


Moodboards

Icon mood board

AppDesignMoodboard3

Colour palette mood board

AppDesignMoodboard4

App layout mood board

AppDesignMoodboard2

 


Citations

http://www.creativebloq.com/app-design/16-killer-design-tips-creating-mobile-apps-11513821

http://www.webdesignerdepot.com/2013/07/20-beautifully-designed-smartphone-apps/

The principles and processes of interactive design – Jamie Steane

https://gauss-development.com/mobile-app-design/

https://www.forbes.com/sites/amymorin/2014/02/04/how-to-use-color-psychology-to-give-your-business-an-edge/#2e5a9a0b170a

https://www.timeshighereducation.com/student/news/student-experience-survey-2016-methodology-what-do-students-care-abouthttps://www.collegechoice.net/top-15-study-apps-for-college-students/