Sketchbook Development and Evaluation – HUD Assignment

This slideshow requires JavaScript.

For my logos and HUD designs, I started off creating sketches in my sketchbook. I attempted to create three distinct yet connected design directions for the three different logos and teams, evolving the designs through multiple iterations. I experimented heavily with alterations and variations, trying out symmetrical and non-symmetrical layouts.

The designs evolved as I iterated, with the three different directions becoming clearer the more I worked. I not only experimented with the shapes, but also the values, testing out value hierarchies and making sure that the logos read well. For the Red Angels logo, I focused more on the contrast between round and angular, making use of values to further this juxtaposition. The arrangement of the circles and ‘wings’ were initially inspired by the position of a pilot or driver in the cockpit or seat of a vehicle. As I drew I realised that it resembled a radiation symbol, I then made use of that to help inform the designs, pushing the arrangements and proportions of the angular ‘wings’.

In regards to The Architects’ logo, I wanted to include an angular diamond shape that is reinforced by strong, structural verticals and horizontals. The diagonals helped create an overlapping division, allowing the two other elements to exist on a similar plane without interfering with one another. The use of angles and measurements helped greatly with accuracy in the drawings, allowing me to achieve symmetry in the designs.

The Battery Conservationists’ logo is visually similar to the Red Angles when it comes to the angled ‘wing’ designs bordering the centrepiece. The curves in this design, however, are reserved for the battery symbol in the centre. This simplified shape, representing a battery, provides clues as to the nature of the team. Experimentation was done regarding the overall design of this logo, with changes to the background rectangle, the placement and size of the battery and the nature of the ‘wings’. In some designs, they leaned more towards a battle-axe look, while others were more geometrical and triangular. The curved ones were experimented with extensively, negative and positive space being pushed and pulled throughout the iterations. Positive and negative symbols, and value separation regarding them, were experimented with for the battery part of the designs. However, I decided not to include any other symbols on it, to avoid clutter.

Once I was happy with the sketched options, I moved into Photoshop in order to create the finished logos. Research into colour combinations and harmonies was also done to ensure a visually pleasing final result.

After I was happy with the design of the logos, I moved onto the HUD designs. Continuing the theme of angular shapes, creating rough layouts of the overall HUD as well as the various elements within. The main shape language stemmed from a modified trapezium shape. To help create a border between the information within the HUD and the game world, I created thin borders around the main space of the shapes. Past that, I experimented with bevels and other borders of different values, ensuring that the HUD was visible while against a variety of backgrounds.

I planned for the top bar to display health or electrical charge, whilst the bottom displays would contain speedometers and track maps/mini-maps, as well as other information. For the electrical charge bar and speedometer, I was going in the direction of digital display with a bar that fills up, changing colour as it reaches a different amount of charge or speed. Multiple iterations were created of these various elements, as well as the overall shape language.

Experimentation was also conducted to find other ways to display the electrical charge, such as an overlay. This overlay, visually similar to that of a fighter pilots, would serve to display information that was not built into the car, but rather added as modifications for racing and are able to be updated for various situations. Instead of using it to display electrical charge, which I decided the top bar would do, I instead used it as a targeting overlay. I also used it as a way to show the player their lap number and position. To make sure that this stood out from the rest of the HUD, I flipped and altered the orientation of the shapes that housed the elements in the HUD, arranging them onto the sides of the top bar. To tie the targeting overlay in with the theme of electric concept cars, I researched the electrical symbol used for batteries and create multiple iterations of the targeting overlay based on that. I settled on a design direction that incorporated a series of lines of varying lengths, bordered by strong verticals with a diamond shape in the centre, contrasted by a circle within.

I needed to add more visual interest to the HUD, so I decided to make use of the thin borders around the various elements that I had designed to incorporate LED-like lights, neon in nature and broken up by thin lines to create a series of segments. With the direction leaning towards high contrast and futuristic digital displays, I re-worked the speedometer to include a more traditional approach, edited to create a more futuristic look. I used the visual language of the modified trapezium as a basis to create a speedometer, adding in repeating lines to represent the different speeds and placement of numbers. To further mimic real life speedometers, I included a needle. However, this needle exists separate from its elongated base, it is a digital representation that moves independently from it.

I experimented with different iterations for the needle, trying out thick and thin variations with different proportions. Alongside these iterations, I tried out different value combinations for the speedometer, seeing how the digital representations of the needle and lines would create patterns of light and dark. The digital shapes would cast off a slight glow, illuminating themselves on the dark background.

Design Sheets:

design-sheet-1design-sheet-2design-sheet-3

 

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