Digital Development and Evaluation – HUD Assignment

 

This slideshow requires JavaScript.

At the beginning of the digital creation of my HUD, I sought to pin down the visual language and style early. I experimented with the modified trapezium shape that I designed in my sketchbook, expanding upon it further. I then incorporated the LED strip around the edge, making use of strokes and shapes and a soft airbrush to create the glowing LED effect. To create the element, I used a pen tool to create the overall shape, added a stroke for the LEDs, copied the shape and enlarged that to create the rim. The segments were created using the line tool repeatedly.

 

This slideshow requires JavaScript.

Once I had the main design direction down, I used the sketches in my sketchbook as reference as I began to create the HUD. I decided to have two main elements on the bottom part of the HUD, angled off as though they were jutting out of the HUD itself and wrapping around the viewer. The bottom middle section is more flat, located directly in the centre and below the drivers eyes. A similar process to that mentioned before was used to create these elements, with the side panels being skewed to create the extruding look.

Backing panels were created to keep the other panels from floating off, paired with the bright blue LEDs, allow the HUD to be readable on most backgrounds. The use of guides and the pen tool was integral in this process, allowing me to line up the various elements and ensure symmetry. The shapes, having been created with the pen tool, were able to be manipulated and changed as I designed. The bar at the top was created, once again, in a similar fashion to the other elements. This time I added in a battery charge bar, using more lines to create segments that would react and change colour depending on their charge. In order to create the look of glass covering the chargeing bar, which represents the current electrical charge of the car, I used the bevel effect, as well as manually designed highlights.

Once the main parts of the HUD were positioned, I began to incorporate the overlay. The analogous colours of blue and green harmonised nicely, standing out from one another yet unifying the design as a whole. This is further reinforced later on when I included green in other parts of the HUD, such as in the speedometer and the way finder/compass.

To create a more 3-dimensional look, I used the 3D Extrusion tool/option to manipulate the bottom panels. The extruded area, even when manipulated, did not fit in with the rest of the HUD. I then decided to manually incorporate 3D elements instead, using the line tool to create a vanishing point off the side of the canvas. I then used the pen tool to create sides to the panels.

Moving on from that, I further worked on the overlays. I included your current position and lap, using the TimeBurner font to do so. In order to create the glowing effect, which helped communicate the ‘overlay’ aspect, I used both the Outer Glow effect with the Lighten blending mode. I set the colour to a bright, saturated green and manipulated various sliders to create the desired effect.

This slideshow requires JavaScript.

To create the track map, I traced over screenshots taken using Google Maps of London and other surrounding areas. To do so, I used the pen tool to create a series of nodes that I then manipulated using the Convert Anchor Point tool. This allowed me to create curves, more accurately tracing the roads. Once that was completed, I turned the path into a selection and added a stroke to it to create the track. I then took the traced track, on its own layer, and isolated it into another document. There, I placed it in a copy of one of the panels from the HUD. I then created a 3D extrusion, manipulating it in space. Once I was happy with the angle and level of extrusion, I used the gradient tool, opacity and eraser to hide and reveal different parts of the track, fading it into the display.

To add more information to the track map, I created a circle that I extruded in 3D to represent the player (green) and the other racers (red). To create the checkpoint/start/end point, I created a triangle using the shape tool. To ensure readability I added a grey stroke around the border. Afterwards, I created the chequered flag within a mask, using a series of black and white squares. Once completed, I placed that on a part of the track and copied over the layer group back into my HUD document.

This slideshow requires JavaScript.

Initially I had created a bar-based speedometer for the HUD, however, that design did not fit the overall direction and was distracting. Therefore, I decided to re-do the speedometer in a more modern, stylish way. I used the TimeBurner font to create a series of numbers representing speed in KM/H. I then created multiple divides, made using the line tool, between these numbers. Below the numbers themselves I created dots so that the positioning of the needle is more accurate and is able to be read more clearly. The needle itself was created using the pen tool and went through multiple iterations. I decided to go for a long, sleek look to the needle, the modernity being further reinforced by the contrasting glow and dark background. To create familiarity, I referenced real-life speedometers and included a base for the needle. With the needle being a digital representation, the base is more to create a grounded area that the eye can use to track the needle along, rather than actually house and operate the needle. It also provides a glow, spreading out from beneath it, helping to illuminate the surrounding area and tying in with the glow from other areas of the HUD.

To create the glow for the text, lines and dots, I used a similar process to the one I used for the overlay. The needle, instead of just having an Outer Glow, had an Inner Glow effect applied upon it as well. This furthered the glowing digital look that I was creating.

As I progressed with the HUD, especially after I added highlights to the panels and displays using bevels and gradients, I realised that the blue of the needle and numbers were being lost and confused due to the close proximity of the same blue colour.

Therefore, I changed the needle, numbers, lines and dots in the speedometer display to green. This created a much better visual impact and increased the readability without creating too much contrast. To change the colour, I added in the Colour Overlay effect and set it to green.

This slideshow requires JavaScript.

The creation of the targeting overlay digitally was done with referencing the early sketches made in my sketchbook. The design itself is heavily inspired by the symbol of a battery when represented in an electric circuit. I used the varying lengths and contrasts of verticals and horizontals to inform my designs, creating a tiered overlay. At the centre of the targeting overlay, I have contrasted those verticals and horizontals by creating a diamond shape with a circle at the centre, mimicking a stylised eye. The lines themselves were created using the line tool with the help of the guides and rulers. The glow, once the overlay was put into the HUD, was created using the Outer Glow effect.

 

This slideshow requires JavaScript.

In order to create the way finder/compass, I had to extend the middle panel to accommodate the circular shape. The intention of this element is due show the player what direction they should be heading, as well as their orientation in the map. The compass itself will react to the direction that the player faces, spinning to hide and reveal parts of the circular digital display.

To create the way finder/compass, I had to extend the middle panel to accommodate the circular shape. The intention of this element is to show the player the direction they should be heading, as well as their orientation in the map. The compass itself will react to the direction that the player faces, spinning to hide and reveal parts of the circular digital display.

The TimeBurner font did not create the type of capital N that I needed to ensure readability for this element, so I instead tried out a few fonts before settling on Cordia New. Again, I added the relevant glow effects and colour overlays.

 

This slideshow requires JavaScript.

I experimented with several colour harmonies, although I did stick with the analogous blue and green. These colours were ones used by the Battery Conservationist team, which is the team this HUD is for.

During the process of creating the HUD, I regularly referenced real life dashboards, my research and analysis of other game’s HUDs and my sketchbook.

For the final HUD design, I added in a background to provide context. In order to create this, I used an image from Google Maps that I then manipulated and photo-bashed with the aid of several other photos. I masked out the sky and inserted an image of a starry night. I then used several photos of cities and long-exposure photographs of streets to build up the rest of the image. TO create the sky line I inserted several images, layering them on top of one another and integrating them by applying blending modes and erasing unnecessary parts. The healing brush tool helped with repairing areas where needed. To create the look of headlights, I used the gradient tool to lay in some blue light spilling out from in front of the player’s ‘car’.

I created several variations, with a solid bevel on one, a glass bevel on another and one with the isolated HUD.

hud-development-final-bevelhud-development-final-glass-bevelhud-development-final-isolated-hud

Compared to some of the more recent driving games that I researched and analysed, such as Forza Motorsport 6, my design is not as minimalist, however I believe that it works well in context. The brief was to create a HUD for a racing sim game that features electric concept cars. The Battery Conservationist’s logo and HUD complement each other nicely and fit into the context of the imaginary game level nicely. However, I could have made better use of the space by going for a more simplified and stylish approach, though that would not fit with the team’s identity.

I applied some of the lessons I learnt when analysing the HUDs from other racing sim games, such as the need to create an area for the player to see without being cluttered by too much useless information. The targeting overlay may appear slightly intrusive but it only appears when you are fully charged and are ready to use your vehicle’s special ability or weaponry.

Seeing as we were working in a computer room/classroom environment, we had to ensure safe working practices so that no harm befalls you, your peers or your teachers. Bags were kept out of the walkways, off the desks and no food or drink was consumed inside the room. This guaranteed that there are no tripping hazards and that no equipment is damaged.

 

Design development process (as mentioned in Task 1 Blog Post):

The design development process can be broken up into R.I.D.E., meaning Research, Ideation, Development and Evaluation. This is a tried and true method that helps provide a clearer roadmap, especially once planned, for projects and assignments.

The process is continuous, even though you may have ‘completed’ your research near the beginning of the project, more should still be done throughout the duration of the assignment. You should continuously be analysing and evaluating your designs, and once you have arrived at a more finished design or prototype, you must evaluate that before either moving onto finalisation or going back to the ideation and development phase.

 

 Images used for the photobashed background were found online and can be accessed here:

 

http://wallpaperswide.com/city_lights_2-wallpapers.html

 

http://hd-wall-papers.com/single/1383638-city-lights-wallpaper.html

 

http://more-sky.com/WDF-418396.html

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s