HUD Project – Design (Task 3)

Team designs

Team 1

Stylesheets

Team 1  Design Sheet - Manta Ray.png

Logo

Team 1  Design Sheet - Manta Ray.png

 

Team 2

Stylesheet

Team 2 Design Sheet - DragonFly.png

Logo

FinalDesign_HiRes.png

Team 3

Stylesheet

Team 3 Design Sheet - Falcon.png

Logo

FinalDesign.png

 


Hud design

sketchbook Design

SAM_0360SAM_0361SAM_0351SAM_0352SAM_0353

SAM_0348SAM_0349SAM_0350

SAM_0354

SAM_0358SAM_0355SAM_0357SAM_0359

SAM_0356

Graphical design

HUD elements

BatWarningDirectionArrowsLapTimeNavigationSpeedElements

Final HUD design

HUD_01.png

Advertisements

HUD Project – Research (Task 2)

 HUD Elements and Information Set

The information set is an overall term for the mechanics and design aspects in a game that help to immerse and engage the player and provide stats about the gameplay. Usually, the information set is broken down into two parts: user Interface and user experience.


User Experience

World Of Warcraft.jpg
Example of bad HUD design [Xav (2012) http://i.imgur.com/69ouo.jpg]
User experience refers to the how easy and immersive the game is to play. This is linked to HUDs as an overcrowded HUD can make good game unengaging and overcomplicated. Menus and Gameplay are also a large part of User Experience- if a menu is difficult to navigate or the objective of the game isn’t very clear, it can take away enjoyment from the playing the game.

 

 


Things that help make a good User Experience

  • A clear goal and/or endgame that are challenging enough to not be boring yet are still achievable.
  • In game menus that are easy to use/navigate
  • A HUD that immerses and adds to gameplay without being too overcrowded and complicated.

 


User Interface

The user interface is the inputs (keyboard, mouse, touchscreen, controller) and the visual (and audio) interfaces that enable and help the user to interact with the game. An essential part of the UI is the HUD (Heads Up Display). There are three different types of hud elements: Permanent, Pull-up and Actioned.


Permanent HUD elements

fuel-gauge.jpg
[Karen Arnold (2017) http://www.publicdomainpictures.net/pictures/50000/velka/fuel-gauge.jpg]
Permanent hud elements stay on the screen at all times and cannot usually be switched off. Examples of permanent HUD elements in a car racing game could be Dashboard, Speed dial, fuel gauge etc.

 

 

 

 


Pull-up HUD elements

head-up-disp
[Sygic a.s. (2016) https://help.sygic.com/content/5-sygic-car-navigation/4-add-on-features/1-head-up-display-addon/head-up-disp.jpg]

Pull-up HUD elements are like permanent elements except they can be turned on and off, usually by pressing a key. Examples of Pull-up HUD elements in context to a car racing game could be Steering wheels, Navigation/map, Pedals, Gearstick etc.

 

 

 


Actioned HUD elements

3grey.png
[Atlantic Performance (2013) http://www.atlanticperformance.co.uk/main/images/stories/3grey.png]

Actioned HUD elements are different to permanent and pull-up HUDs as they are usually not visible until they are triggered by an event in the game. Examples of Actioned HUDs in context to a car racing game could be Low fuel warnings, Lap time indicators, Checkpoints etc.

 

 

 

 


Morals, Ethics and Copyright Laws

Morals

Morals are a set of personal beliefs and ideology that determine how we ourselves act in everyday life.

Ethics

Ethics are morals that have been adopted by a majority or group of people and generally define how we behave as a society.

 


Intellectual Property and Copyright Law

‘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, 2017)

Copyright is universal and applies to work that is recorded in some way. Literary, artistic, musical and dramatic work are covered by copyright as well as films, sound recordings and typographical arrangements. It gives the author specific rights in relation to the work, prevents unauthorised actions, and allows the creator to take legal action against cases of infringement or plagiarism.

However, trademarks are registered at a national level with an appointed government body and are not automatic. A trademark can be anything that identifies a product or organisation such as a name, logo or slogan. Registering in countries such as the US, the UK, Japan, etc will only protect you in that country. Trademarks can be recognised by the abbreviation ‘TM’, or the ‘®’ symbol.

 

 

Existing Driving Games


F1 2016

Things that are good about the HUD

  • Shows all of the information necessary for gameplay.
  • Is a good representation of real life car dashboards/ HUDs which is important as this game is based on the real Formula One.

Things that are bad about the HUD

  • Could be difficult to see as all the icons are overcrowded and cramped on the steering wheel.
  • The icons themselves are very complicated and not simplistic.

Does it work effectively as a HUD?

F1_2016.jpgIn my opinion, this HUD is not very effective as it is quite difficult to see and interpret the information presented by the numerous dials and gauges on the steering column. An improvement to this could be to increase the size of the icons as the HUD doesn’t take up too much of the view.

 


Need for speed

Things that are good about the HUD

  • Icons are simplistic and easy to understand.

Things that are bad about the HUD

  • Hud takes up a little too much of the screen.

Does it work effectively as a HUD?

Need_For_Speed.jpgThis is an interesting HUD design as is mainly made out of text based gauges. I think this HUD design works because it has an easily understandable design. If I was to improve it, I would perhaps make the box where the dials and gauges are located a little smaller as to not encroach so much on the gameplay.

 

 


Forza Horizon 3

Things that are good about the HUD

  • Very simplistic HUD, only showing what is essential for gameplay.

Things that are bad about the HUD

  • Limited/no mapp, only showing basic directions.

Does it work effectively as a HUD?

Forza_Horizon_3.pngI think that this hud is effective because it relays the essential information whilst not being too overcrowded or taking up too much space. The only improvement i could make would be to add a map into the HUD.

 

 

 

 


Car Dashboards Moodboard

Car_Dash_Moodboard.jpg


Sources

Cobie Everdell (2015) Why the car industry needs to rethink the dashboard interface design | TechCrunch. Available at: https://techcrunch.com/2015/10/08/why-the-car-industry-needs-to-rethink-the-dashboard-user-interface-design/ (Accessed: Jan 2017)

Desi Quintans (2013) Game UI By Example: A Crash Course in the Good and the Bad. Available at: https://gamedevelopment.tutsplus.com/tutorials/game-ui-by-example-a-crash-course-in-the-good-and-the-bad–gamedev-3943 (Accessed: Jan 2017)

Emil Lamprecht (2017) The Difference Between UX and UI Design-A layman’s Guide. Available at: http://blog.careerfoundry.com/ui-design/the-difference-between-ux-and-ui-design-a-laymans-guide/ (Accessed: Jan 2017)

iA (2016) UX Lessons in Game Design – iA. Available at: https://ia.net/topics/game-design/ (Accessed: Jan 2017)

PCGamesN (2017) Racing games for PC: 10 of the best for 2017 | PCGamesN. Available at: https://www.pcgamesn.com/10-best-racing-games-pc (Accessed: Jan 2017)

Pluralsight (2014) Designing a HUD That Works for Your Game. Available at: https://www.pluralsight.com/blog/film-games/designing-a-hud-that-works-for-your-game (Accesed Feb 2017)

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

 

HUD Project – Planning (Task 1)

Introduction to the Brief

Your client, a large game publisher, requires you to design the interface elements for a new console-based racing game. The game world and tracks are based on the streets of London; you can identify your own routes.

The game involves a series of races between 3 teams using electric concept cars to promote new technology and sustainability. The environment and car graphics have a photorealistic look. Your interface must communicate game information but also help support the storyline of the game. Your designs must include: Track maps / speedometer / Way-Finding (e.g direction arrows) / start lights / placing / Lap / Checkpoints / Fuel gauge but you can include any other interface item that you feel is necessary.

In addition to the general interface, you also need to devise names and design a colour scheme, identity and logo for the 3 different race teams you propose.


Week 1 – 09/01/17 – Planning

  • Plan Hud research and design

Started: 12/01/17
Completed: 15/01/17

Week 2 – 16/01/17 – Research

  • Driving Game research – write about two examples
    • Driving Game Timeline
  • Research Copyright and Branding laws

Started: 16/01/17
Completed: 24/01/17

Week 3 – 23/01/17 – Research

  • Specific icons/displays from existing cars
  • Car Dashboards
  • Think about team names and ideas for the game concept.

Started: 23/01.17
Completed: 31/01/17

Week 4 – 30/01/17 – Ideas: Initial sketchbook ideas

  • Team name ideas
  • Rough logo designs
  • HUD concept elements

Started: 1/02/17
Completed: 06/02/17

Week 06/02/17 – Design: Sketchbook work

  • Develop logo designs
  • Develop HUD elements

Started: 07/02/17
Completed: 15/02/17

Week 13/02/17 – Design: Digital work

  • Create team stylesheet
    • Final Logo Designs
    • Team cars
    • Colour swatches
  • Create HUD mock-up

Started: 16/02/17
Completed: 21/02/17

Week 20/02/17 – Evaluation

  • Describe and evaluate final design
  • Talk about how the final design was reached
  • Compare HUD to professional HUDs from existing video games.

Started: 22/02/17
Completed: 28/02/17

Week 27/02/17 – Finish off

  • Complete any unfinished work

 

Completed: 09/03/17

Poster Design – Evaluation (Task 4)

design_05Out of the three final posters, I chose ‘the Polyshape’ as my final design it best fitted the brief and utilises a wide range of vibrant and contrasting colours which are eye-catching. The poster was inspired by geometric patterns which are an important part of architecture and I created my ‘Polyshape’ to give the impression of scaffolding.

design_04My second choice, the Shard poster was close behind the ‘Polyshape’ poster in terms of how much I liked it. However, the final poster just didn’t jump out quite like the first one did. The simplistic Shard centrepiece was inspired by the art-deco movement and helped to define the colours user in the rest of the poster.

design_04My least favourite poster, the city hall poster was a real pain to make as the shape and curve never seemed to fit together properly. Adding to that, the lines on the back always looked a bit off. And the final thing was basically in black and white so didn’t really have much variety in the colour palette.

Next time, when printing my poster I would probably use a different printing technique as it was very hard to print in the same colours as the digital version they would sometimes change as the poster was printing. Perhaps I could have used offset lithographic printing which might have resulted in a more consistent colour.

The colour scheme for the majority of the poster designs has been largely the same throughout the designing process. I used Adobe Kuler to choose most of the colour palettes and so they all tended to work together – the only exception being the background for the Polyshape poster.

Poster Design – Research (Task 1)

Introduction:

static1-squarespace

For this assignment, I have been asked to create an A3 poster for the London Festival of Architecture 2017. The finished poster must include the words ‘London Festival of Architecture’, the date of the festival (1st – 3oth June 2017) and the LFA logo. The target audience for the poster is people studying and working within architecture, engineering and spatial design so I decided to use a lot of architectural and structural imagery in the poster to appeal to that.

 


Historical Printing Techniques:

Woodblock Printing

p18
getty.edu

Chinese woodblock is the earliest known form of printing, using blocks of wood that are carved and then applied with ink before having paper pressed onto the print surface. The first known media printed with this technique is the Diamond Sutra (circa 868ad) which is a Chinese adaptation of a Buddhist text.

 

This is a relatively cheap form of printing as it doesn’t require many specialist materials and can be printed in either oil or water based inks.

However, the quality of the finished print is usually lower than that of most other printing methods and it can be difficult to carve the design in the first place; also the mediums that it can be printed onto are also somewhat limited as they have to be flat.

Movable Type Printing

1669750_orig
asu-bookarts.com

Movable Type printing, also a Chinese invention, originally used baked clay stamps arranged on a wood (or metal) sheet to form a printing plate. Wooden (and later metal) stamps were also used as they were more durable than the fragile porcelain.

 

This was a better form of printing for text documents than woodblock printing, as it allowed modification and the re-use of the stamps to create other documents.

However, when printing drawings and artwork, it would still be easier to use woodblock printing as they cannot be made up of interchangeable stamps.

Lithographic Printing

lithography_stone_princeton_motif
upload.wikimedia.org

Stone Lithography, invented by Aloys Senefelder, was created as a cheap way to print out colour prints. Working on the principle that water and oil don’t mix, it used a limestone slab that was painted with a greasy hydrophobic layer in the areas to be coloured. Then, the stone slab is wetted and oil based ink layered on the top. The oil based ink will only stick to the areas that were painted with the hydrophobic grease.

Compared to Woodblock and Movable type, this form of printing produces a much better final image, along with it being more consistent each time.

However, the materials and equipment are more expensive and harder to come by than other types of printing.

 


Modernist and Contemporary
poster analysis

 

Modernist Poster

cassandre__normandie_60_voyages
retrographik.com

An example of a traditionally printed modernist poster is ‘Normandie’ by Adolphe Moron Cassandre – a commission for a new liner.

The over-exaggerated ship in the centre, coupled with the minuscule flock of birds on the left, shows the immense scale of the newly built ship – which was one of the largest for its time.

Lithographic printing onto paper was used to create bold yet simplistic imagery similar to many other art-deco style posters. Stark contrast between the left and right sides of the bow has been used to draw the eye toward the text at the bottom of the poster.

Interestingly, the rule of thirds was not used in this poster as the ship is central. However; this helps to emphasise the dramatic shapes of the poster.

The use of black in the poster gives the connotation of sophistication and glamour – creating the impression that the ship is for the upper class and the wealthy elite.

Contemporary Poster

rogueone_onesheeta
a.dilcdn.com

Unlike modernist posters which are usually made using physical mediums (such as lithography), Contemporary posters are usually designed digitally on a computer using software such as the Adobe Suite and are mostly printed using digital inkjet printers or offset lithographic printing.

An example of a contemporary poster is the new Star Wars – Rogue One poster. The colours in the poster are mainly tones of blues and reds which creates a feel of serenity and hope. This is juxtaposed by the red of the title which creates a feeling of courage and defiance.

The poster uses the ‘Golden Triangle’ rule to split the poster up into three separate parts. This helps to draw the eye to the title of the poster.

 


Resources and References Used:

History of printing and Printing Techniques:

https://printinghistory.org/timeline/
http://afe.easia.columbia.edu/song/tech/printing.htm
www.leicesterprintworkshop.com/printmaking/a_brief_history_of_stone_lithography/

Modernist Poster:

https://designschool.canva.com/blog/typography-terms/

Contemporary Poster:

http://www.colour-affects.co.uk/psychological-properties-of-colours

http://www.digital-photo-secrets.com/tip/3372/18-composition-rules-for-photos-that-shine/