App Design Research:Well Design Vs Poor Design

Well Designed Apps

1.Steam:

Steam Is program on the pc that acts as a store to purchase games as well as a social platform for gamers to interact with their friends, there is a menu that displays all of your friends and which of them are currently online/in a game. It also shows the user which of your friends owns a game that you play, this is a great way of getting people together to have fun and play games, this is also good for business because, for example, one person in a group of friends might see that everyone else plays a game and decide that they want to join in and purchase the game themselves.

unnamedThe Steam app for your phone contains many of the core features that the computer program has, such as; Viewing the store/purchasing an item, viewing who is online and in-game, talking to friends, and also managing downloads on your pc. If you purchase a game whilst in the app you can set the game to install on your computer while you are on the go.

steam-ios-2

The design layout of the steam app is very pleasing to the eye, it has a mellow dark blue background (much like the computer program) and a dark theme throughout. The dark theme can be a nice design element because it highlights the white text on the screen and any pictures that you may see. The store section of the app has a slightly brighter background but it does not stand out, what stands out is the colourful pictures and the bright logos of the games available to buy, users can also view the recommendations for the games and see comments etc in a pleasant, readable format.

2. Instagram:

Instagram is a social media app that enables users to upload photographs and short videos to their profile, people who follow that profile will see these images in their feed when they press the home button. The app is all about Images and so it has to have a layout that compliments the images without making it too complex/crowded. When users scroll through their feed they will notice that on either side of the screen are two white columns that frame the images, this creates negative space and helps the user to focus on the image in the middle of the screen. Above the image is the username of the person who uploaded the image, this shows the users straight away who has uploaded this image. Below the image there is space for a brief description and a comments section, the comments are usually hidden unless you press to revival them, this ensures that the feed will not get too clustered and users can scroll through to the next image with ease.

When users scroll through their feed they will notice that on either side of the screen are two white columns that frame the images, this creates negative space and helps the user to focus on the image in the middle of the screen. Above the image is the username of the person who uploaded the image, this shows the users straight away who has uploaded this image. Below the image there is space for a brief description and a comments section, the comments are usually hidden unless you press to revival them, this ensures that the feed will not get too clustered and users can scroll through to the next image with ease. At the top of the home screen you will notice several circles with images in them, these are the people you follow who have posted images to their story (Original concept by snapchat) Although it is an obvious copy of another well-known app; the principal of design is there. There are gaps between the circles and a row of blank space above and below it, this entices users to click on them or add to their own story. Finally, you will notice the buttons on the app are aesthetically pleasing yet simple, the buttons (Home screen, search bar etc) have to be simple otherwise it takes away from the images, they are five all spaced evenly along the bottom of the screen evenly.   hero.0.1498855501

3. Gmail:

Gmail is an email service that aims to simplify how we use email, you are presented with 3 tabs that represent: ‘Primary’ ‘Social’ and ‘Promotional’. The promotional tab is simply a tab exclusively for emails sent by your service provider, these emails contain promotional content by Google/Samsung etc. Another tab ‘Social’ sorts all of the emails sent by social media and stores them all in one place so that your email is no longer messy,  this tab has the same slick style of the other ones.

There is the main space you will find below these three tabs that display each email by date if the title and email address are in bold, this means you have not seen the email before and entices you to click on it. With all the negative space, simple font and smart folders; Gmail is very easy to use and understand what you are looking at.unnamed (1)

 

Badly designed apps

  1. Snapchat:

    The layout is unclear, a lot of the buttons you need to use the app are not shown and are found on the pull-down/pull out menu bars. This may confuse a lot of people resulting in the app not being used properly. There is not a lot of negative space within the design which causes it to look quite messy.

Hud’s in Existing Racing Games

Need for speed 2015:

I enjoy the simplicity of this Hud design, when a game designer wants players to focus on gameplay they will try to make other aspects of the game less daunting. The last thing a player wants is to be confused by all the different numbers and symbols on their screen. The Hud blends in really well with the overall atheistic of the game92d90a76d28a91e11f6cf62dc13a9b23

The pros that I can see are: Simplistic, Easy to follow, stylish design.

And the only cons that I can see for this Hud is the map being a little bit too small/awkward angle and the font being too plain. 3b50b6a5785b572a0ad74265f269cbb3

 

 

 

 

 

 

 

 

Forza Motorsport 7:

This Hud takes ‘simplistic’ to the extreme, Although it compliments the graphics of the game nicely by giving the player more space to view their surroundings I personally think that this is too simplistic to be able to follow what is happening. The speed gauge is just a tiny number on the bottom of the screen and the same can be said for the Position and Laps text. As a player I think this would take a bit of getting used to but once you do you can appreciate the visuals and game play.

forza

Wipeout:

This game has a different theme to most racing games and it’s only appropriate that the Hud theme is different too, it is obvious that the Hud is designed to look more futuristic/sci-fi themed and I think that the designers have done this very well. This style helps to immerse the player in the theme of the game as well as relaying information effectively and clearly. The speedometer is much different to the other ones we have seen; the layout has been changed to a bar that curves up at the end as oppose to the standard circular speed meter that appears on every other racing game. This game also gives the players the ability to pick up powerups that help them in the race, at the top center of the screen the current powerup is clearly visible and will disappear when the player has used it. Lastly I would like to point out how the composition of the Hud creates a pleasant symmetrical aesthetic, this draws the players eye to the center of the screen where the vehicle is.

wipeout

Team Logos Development

Team 1: Team Icarus

In order to design logos for my teams I had to first draw a few different draft sketches, I decided that I wanted the first logo to look like a pair of wings for the team ‘Icarus’ ; I experimented with different styles but settled on a tribal kind of pattern because this would look best digitally and give it a more slick design.Iccarus Logo

Team 2: Valkart:

1494882126678-3034995a-5582-4e7e-bbdc-357edc981052Norse LogoFor my second team; ‘Valkart’ I drew a few different version of the Norse Valknut, I thought that this design would be perfect for a logo and so I made a few variations and chose my favorite one to develop. Inspired by the northern lights I chose to give this one a blue gradient coming out of the side, this adds a professional finish to the design and some much needed colour.

 

Alpine Racing Logo.pngTeam 3: Alpine Racing

For the third Logo I wanted to do a simple design and decided to have 3 low poly trees that represent ‘Alpine Racing’.

I played around with the idea of having a gradient for the sky but ended up deciding that would be too similar to the team Valkart logo. Below is some sketchbook development of my logo. 1494881963632-a1b870d3-670b-44bf-97f7-c817d3f1b5aa_

Heads up Display in Games

Video Game HUD’s:

A HUD in games is the interface that the player sees on their screen, the HUD is often positioned on the borders of the screen giving the player as much visibility as possible. The HUD contains key features that relay information back to the player about the scenario for example; how much health the character has or where they are in the map. This is an extremely important part of games design, it can often create a players first impression of the game, if the HUD is horrible to look at then the game will be too.

My first example of this is an RPG game called ‘Skyrim’, Skyrim is a game where the player is able to make their own choices frequently and the HUD reflects this. In the game you can choose between using magic or physical weapons to kill your enemies, if the player is using spells then there is a mana section of the HUD that appears when they are casting to show the player how much mana they have left until they can no longer cast spells. This means that if you are never using magic then the mana section of the HUD will not appear giving you a clearer experience.

30m62j6
HUD when using spells
skyrim
HUD without

The rest of the HUD is also designed to give the player enough space to immerse themselves in the game, all three of the gauges for mana, health and stamina are quite thin bars along the bottom of the screen. Instead of having a mini map like most role play games there is a compass, this adds to the immersion as the player is able to see more of the game itself and adds a little more challenge to navigation. Other useful information that is displayed is the enemy health bar under the compass and the ammunition count in the bottom right, most if not all other RPG games have individual health bars above each enemy and although this is helpful to the player it takes away from the immersion by having floating boxes above peoples heads. The overall design is very slick and allows the player to have a much more indulging experience than many other games of its time.

Racing Games:

The HUD is especially important for racing games as the player needs to know where they are, how fast they are going, what abilities they have at all times. If it is unclear what is going on it can have a major effect on the players performance.

I researched what a racing game HUD should contain and found that there are four key components; A mini map, a player position chart, a timer, and a speed meter. These are the features that I need to focus on when I design my HUD.
Dirt2_HUD1686523-609593_20110404_001

Mario Kart: Then vs Now Visual Timeline

 

Mario Kart has changed a lot over the years, You can see the visual changes immediately when looking at a screenshot of the first game and a screenshot of a new one. Each time the game changes the hud is noticeably different.

mariokartoldhud
Super Mario Kart (1992)

There are some pretty serious changes from the ‘Super Mario Kart’ game and the ‘Mario Kart 64’ game, the hud changes are also quite drastic. The most noticeable change is the mini map, there is now a less detailed map in the corner of the players screen, the reason for this is because the game has moved from a ‘DS’ device to a television screen. This feature allows players to see what is going on without having to look at another screen.

mario-kart-64
Mario Kart 64 (1996)

In ‘Mario Kart: Super Circuit’ the hud adopted an 8 bit pixel theme to go with the new style of the game. The coin counter has also returned.

43323-mario_kart_-_super_circuit_uinferno-9
Mario Kart: Super Circuit (2001)

As the game goes back to having a 3D design the hud once again changes accordingly. This game was the first in the series to introduce player heads on the mini map (replacing the circles in the previous design). This feature was implemented to help players understand where they were in the race and display everyone else’s position, this has now become a key feature for many/most racing games. One other noticeable change is the player heads on the left hand side, in this particular Mario Kart game there are two characters per car, this is the only game in the series that features that change.

dd
Mario Kart: Double Dash (2003)

The hud for this Mario Kart game was changed to accommodate arcade systems; the colours are much more vibrant and the layout is simple in comparison to other games in the series, the reason for this is to attract new players to the game and give them a good first experience at playing the game.

arcadegp
Mario Kart Arcade Gp (2005)

This ‘DS’ game has once again got a mini map on the secondary screen although this time it is a traditional top down map and appears to be further zoomed in, this gives players a more in depth analysis of where other players are positioned. The character position chart has also moved onto the other screen to give the player a more viewing space on the primary screen.

mario_kart_ds_screenshot
Mario Kart DS (2005)

Once again the arcade version the colours have been enhanced, the hud has a completely different layout to standard edition games. The hud is a little more crowded to make it a more exiting experience for new players,

arcade-2
Mario Kart Gp 2 (2007)

The most noticeable change with this hud is the disappearance of the player chart, this is a bold change and definitely a risk as it was a key feature of the game, in order to accommodate this change the mini map has been made bigger as well as the position number.

mario-kart-wii-20080408044102949_640w
Mario Kart Wii (2008)

The next instalment to the franchise doesn’t appear to show any changes in the Hud itself, everything is in the same place.

mario_kart_wii7
Mario Kart 7

 

 

Copyright; legal and ethical rights

Regulations & Compliance

Regulations – The Restriction, licenses, and laws applicable to a product or business, imposed by the government.

Compliance – Regulatory compliance is an organisations adherence to laws, regulations, guidelines and specifications relevant to its business. Violations of regulatory compliance regulations often result in legal punishment, including fines.

Intellectual Property Rights

This includes:

  • Characters
  • Storylines
  • Code
  • Designs

All are considered as a commodity.

IP Rights legally protect inventions, Symbols and creative expression and can be bought, traded, given away and licensed.

Copyright_Symbol
Copyright Symbol

Copyrights protect an individual’s or group of individual’s original expression of an idea into a tangible medium. Copyrights do not protect the idea or concept, only the actual expression of the idea. For example you cannot copyright your idea for a game until it is expressed in a tangible form, like computer code. Copyright protection exists the moment an author fixes an expression in a tangible medium. This means the moment you save your source code to disk, or you sketch out the artwork for your game character or level art, you automatically have copyright protection without doing anything further. A publisher will often organise a deal with a developer to obtain the copyrights so that they can create derivative products and reproduce the product free and clear. Better known developers will be in a better position to negotiate this and potentially retain the copyrights.

Registered_Symbol
Registered

After registration, you can then switch to ®, or continue using TM, as this does not lose you any rights. . There are some countries – the US is one of them – where failure to use R once a mark is registered will lose the trademark owner some of his rights, but this does not apply to the UK.

Trade_Mark_Symbol
Trade Mark

Trademarks are identifying symbols, words or devices used to distinguish the trademarked good from other similar goods. The trademark rights prevent other people from using a similar mark, but the rights do not prevent others from making similar goods and selling them under a different trademark. This logo is a trademark that distinguishes the games that Rockstar publishes from other games. Trademarks must be distinctive so they are easily distinguished. Some are stronger than others and are therefore more enforceable. The strengths of the trademark are judged by a range of terms from weakest to strongest.

  • Generic
  • Descriptive
  • Suggestive
  • Arbitrary
  • Fanciful Interactive Computer Games

 

Real life HUD’s:

Car Dashboard:

There are many applications of heads up displays in the real world. Every vehicle will have some form of dashboard that displays all of the useful information to the driver; Fuel level, speed, and many different warnings about the state of the vehicle.

The fuel level is indicated by the fuel gauge, this is a curved display that shows the letter F at the top and E at the bottom, the F stands for ‘Full’ and the E stands for ‘Empty’.There are several dashes in between that show the level of fuel left in the car, an arrow points to the appropriate section of the display so that the driver knows how much fuel they have left.
Sports Car Acceleration_590x300The speed of the vehicle is measured with a Speedometer, this tells the driver how many miles per hour they are traveling (MPH are only used in the UK and the US, apart from a few countries the rest of the world used Kilometers per hour ‘KPH’, however many cars will display both to enable safe driving for people wishing to bring their car to another country). The gauge for a speedometer is shaped like a circle with a small segment missing at the bottom, the lowest speed appears on the left hand side of the gauge and the maximum speed appears on the right. There is an arm in the bottom-center of the gauge that points to the current traveling speed.

dashboard-warning-lights-cropped_2
Warnings are given to the driver in the form of small light up icons, if there is a problem with the car ,for example low battery or faulty airbag, then a light will appear on the corresponding icon, this is usually accompanied by a dinging noise to alert the driver.

Airline:

14838231614_68f4095f96_h-640x426This is another real life example of a HUD, this is a little more extreme as the HUD has to be very clear to the pilot meaning that stylish designs are not welcome. Pilots will have an array of of meters and gauges telling them about various things throughout the cockpit but the most interesting feature is this lens that the pilot looks through so that they can see things such as the angle the plane is positioned in, the current flight path and airspeed.

Racing Game Hud; Planning and Timetable

Week 1 – 12/01/17 – Planning

-Plan HUD research and design

Started: 12/01/17
Completed: 19/01/17

Week 2 – 16/01/17 – Research

-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: 30/01/17

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

-Team name ideas

-Rough logo designs

-HUD concept elements

Started: 01/02/17
Completed: 05/02/17

Week 06/02/17 – Design: Sketchbook work

-Develop logo designs

  • Develop HUD elements

Started: 07/02/17
Completed: 18/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: 28/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.