Monthly Archives: December 2015

Notes, Sketches and Planning

21

Various sketches, notes and workings out done while working through my Studio Work. Included here in order to show my thought processes and methods of working through ideas.

Finalised Logo Design

Branding_Doc_sm

I created the above Branding Document to showcase my finalised design and briefly summarise the concept behind it.

  • The logo in colour, using only a minimal amount to draw attention to the Icosahedron, while also making the 'D' more distinguishable.
  • The logo in monochrome white on black
  • The logo in monochrome black on white

Since my last update, I refined the logo very slightly after taking in some feedback from others. I liked the look of the Icosahedron placed behind the ‘D’, but was concerned this might cause it to be misread as an ‘O’. I slightly tweaked the shape to be less rounded and decided to use Magenta (the colour of Weedy’s eggs) for the shape itself – creating further distinction. As well as this, I added some glitched details to the shape which integrates it into the design and theme better and also improves the overall aesthetic.

I’m pleased with how the design has turned out but so far, by just creating the logo itself, I have still only scratched the surface of the overall brand. Further down the line, in order to create a coherent identity and brand (rather than just a logo) I will need to consider and focus on:

  • How the logo will work as an App Store icon (possibly just isolate the ‘D’ and use that within a square)
  • How the identity will work across a broader range of marketing (download page, website, game cover art, etc)
  • Define a Style Guide with more detailed specifications (colour palette, typeface usage, etc)

For now, considering this project is focusing on Pre-Production, I am satisfied with the progress of the design and have actually overshot my target (earlier, I had only planned to submit some initial sketches for the logo, not a finalised design).

Prototype II Progress

Since last working on my prototype I have started a fresh with a slightly different and much simpler script (with the help of George). This should help editing and troubleshooting easier, as there is much less complex script to cause errors or confusion. I can build up more features and in-depth movement later on, such as in BA3b. For now, though, I am still experimenting with different methods and figuring out how everything should function.

1_Flippy

The current state of the revised prototype (Prototype II)

As shown above, the current prototype:

  • Looks around/change direction using mouse
  • Move vertically with LMB/RMB
  • Forward/Left/Back/Right with WASD
  • An overview of all scripts
  • [Current] Core movement script
  • The script used to tilt on strafe
  • One attempt at fixing the pitch issues
  • Various methods used to try and fix problems

The character successfully tilts on up and down movement, which I had some problems with initially where the actor was rotating but the camera wasn’t Various attempts at fixing this are shown in the gallery above, but I eventually managed to fix this by simply attaching the Rotation to the Camera as a second target, as well as being attached to the FlippyMesh (For some reason it didnt work when attached to the SpringArm, only the Camera).

  • Before
  • After, the camera is also attached

However, this also causes the camera to rotate on MoveForward as well. This is a problem I still need to fix, as I only want it to happen on MoveUp (on Moveforward, the Mesh should rotate but not the Camera).

My next step to try and fix this will be to try copying the logic and hooking each function up separately, making one catered to rotating both components while the other only rotates the Mesh — this should fix my issue.

Next steps (goals before submission):

  • Make it so the MoveForward tilt only applies to the Actor, not Camera
  • Tweak all values such as pitch, speed, etc to refine the movement further
  • Build a more substantial testing level/zone

A Graphical Revolution: Making sense of zeros and ones

Technological Prehistory and Notable Early Influential Developments within Interface Design

As well as looking to art history itself, the rise and history of interaction design also offers interesting perspective. The invention of the Graphical User Interface (GUI, pronounced ‘Gooey’) was a significant turning point in design, hugely influencing how we interact with technology and—consequently—the influence of that technology on our lives. As video games are fundamentally interactive experiences, the advancements of the GUI and other developments within Human Computer Interaction (HCI) play a crucial role in the evolution of game play.

To trace the roots of the GUI, it may seem logical to travel back to the dawn of Personal Computers (PCs). After all, what use would we have for a graphical interface before then; what would we possibly put it on? However, ideas of such an interface can indeed be traced back much further than the personal computer, far before technology was capable of realising them.

1930’s, Vannevar Bush and The Memex

Particularly, the late 1930’s, when Vannevar Bush wrote about a hypothetical device named the Memex, published in an article named As We May Think. His idea would have far reaching influence on interface design, long after it’s time.

HAH4zsjRQ_4uSMN2YovI4t5TTaLO22jU84uBojmiMugc_6tQG3-1SsunNQEFFFSSYUL1R8frggoCTV2RmTs7kxjz_kGR6nhuu-kcnuY48POxLcGnFp7VXaFSdrV2OIuOLec0Sqc

The Memex, pictured above, was envisioned as a desk with two touch screen displays, a keyboard and a scanner attached to it. The idea was to allow the user access to all human knowledge using connections very similar to the hyperlinks we are familiar with today. The fact that this idea was conjured as early as the 1930’s is hugely interesting, and the way in which technology has panned out since is remarkably close to Bush’s ideas.

“The irony here, is that a middle-aged army scientist, writing thirty years before the first PC, understood interactivity better than all the Web titans in Silicon Valley. [..] After all, sometimes the best way to understand a technology is to approach it with no expectations, no preconceived ideas. Unhampered by any historical precedent”

—Steven Johnson, Interface Culture

We do, in the present day, have access to a huge expanse of human knowledge through the internet. Whether this is exactly what Vannevar had in mind or not is unclear but the concept is certainly not too far of a stretch — especially considering our method of interacting with that knowledge is through graphical displays, input devices and a system of hyperlinks all very much like what Bush described.

It is innovators like Vannevar Bush who we can thank for paving the way towards the methods of interaction we often take for granted now. In the words of Frank Chimero, innovators “do not stand on the inside of what is possible and push; they imagine what is just outside of what we deem possible and pull us towards their vision of what is better. They can see through the fog of the unexplored spaces and notice a way forward”.

I think this is a quintessential way of describing not only the ideas of Bush, but of all the other hugely influential innovators of interaction, some of whom I will briefly cover in the following sections. In fact, I could go as far as to say that Chimero’s words epitomise the very core sentiment of this entire paper.

1960’s, Douglas Engelbart’s Demo

One of those innovators who pulled us toward their vision with great impact is Douglas Engelbart. Although the Memex wasn’t developed because of the lack of technology at the time, the ideas proved hugely influential later in the century. Douglas Englebart, often considered the ‘father’ of the GUI, began to work on a machine which would serve to improve human intellect. He recalled Vannevar Bush’s essay to conceptualise such a machine, where the user could build models of information graphically and navigate around them dynamically.

In 1962 this was a huge leap of thinking, undoubtedly difficult for most people to comprehend; the computers which existed at this time were room-filling mainframes operated by specialists only. Despite being a difficult concept to persuade, by 1968 his ideas, technology and staff had grown sufficiently and he demonstrated his ideas publicly in front of over a thousand computer professionals.

qb_rZUtiS9H0qxXXzL-NIC55lgFEolxDd5nE2kzWwfM1P5h2JITfUukIIVO8r77cYDk4c1t0LXbQYmT-KdHWMu5jW42LcDkA3-2VPXTFdTs8P7Dcq3yJRhZF0V7RKNns0CEvPto 5C2BYivglF_aPZlrhxnTA9FgIkdk0NEJQ-JVA8P12JbLomglLvqy7Opa6HDK_PjR0Syepj4gTkPcwg_6O8bfsK6Ef7vgIN3v2tE2yObc9mpzjSx-WFntgkiTsZfKq5JDd9Y3E7U

 

This was the “public debut of the computer mouse” but this was only “one of many innovations demonstrated that day” [Source]. The mouse was mechanically different to modern mice, however the way which the user interacted with it is virtually identical. This demo would spark the widespread adoption of the GUI and therefore “dramatically changed the way in which humans and computers interact” according to Johnson (1997), who continues: “The visual metaphors that Doug Engelbart’s demo first conjured up in the sixties probably had more to do with popularizing the digital revolution than any other software advance on record”

Johnson’s comments certainly carry weight which can be seen simply by noting the similarities between Douglas’s 1960’s demo and modern technology. Douglas was undoubtedly one of the most influential figures in interface design; his technological advancements provided a solid base for which designers to work upon in the coming years. Although his work was focused more on mechanics and physical technology rather than design, without his intellect GUIs would not have received the foundational technology on which to base themselves, which was necessary in order for them to eventually achieve the result we experience today.

1973, Xerox PARC’s The Alto

Researchers at Xerox PARC were amazed by Douglas’s demonstration, which inspired their creation of the Xerox Alto in 1973. Despite being a commercial failure, the Alto is widely considered a large influence in interaction design, making some important breakthroughs with the design of its GUI. It was widely used for research purposes [Source] and therefore allowed for further developments within Human Computer Interaction.

The Alto began with an interface that resembled a command terminal more than a desktop environment, but eventually resulted in the creation of SmallTalk in 1975. Originally conceived as a programming environment, SmallTalk went on to become the first modern GUI and in turn conceived the earliest use of icons and pop-up menus.

  • Early Alto Directory
  • SmallTalk, a visual programming environment adopting early use of the GUI

An early file directory on the Alto, compared with a later, more graphical interface of SmallTalk, Source [1] [2]

As well as this, the Alto also demonstrated the first use of a diagonal-pointing bitmap cursor pointer which we recognise in modern computing today. What is most notable about this particular cursor is it’s behavior – it alternated between different shapes depending on the task. For example, today the cursor may change into a hand when grabbing; a watch, spinning wheel or hourglass when loading; various different arrows for re-sizing, etc. This is a significant example of early visual feedback, a crucial element of interface design.

A final advancement to note is that the Alto also inspired the creation of Alto Trek, one of the first network-based multi-person video games which was also the first game to utilise the mouse, and would later inspire the creation of Microsoft’s Allegiance [Source]. It is clear that Xerox contributed many important and varied developments within interaction design.

One of the most crucial of all these developments, though, occurred by inspiring the work of another important innovator — Steve Jobs.

1978 Apple Lisa and the 1984 Apple Macintosh

As established, the influences of the Xerox team were far reaching, but their effect on the developments of Apple was one of—if not the—most crucial of all; what Steve Jobs would go on to create from this sparked revelation he experienced during a visit to Xerox PARC would alter the landscape and direction of User Interface and Experience indefinitely.

Development for Apple Lisa began in 1978, with some members of the team being former members of the Xerox PARC group. The project was to design a powerful personal computer with a Graphical User Interface that would be targeted toward business computers.

 

  • Apple Lisa GUI
  • 10.11 OS X El Capitan

[1] [2]

The Lisa used a desktop metaphor and saw the birth of the first pull-down menu bar, with each menu always appearing horizontally across the top of the screen. This is just one convention created then that still exists, almost entirely unchanged, in Mac OS X today (at the time of writing, the current version is 10.11 OS X El Capitan, as shown in Fig above). The Lisa also introduced many other elements which we take for granted today: check-marks for selected menu items; keyboard command shortcuts; greyed out inactive items; the trash can; the use of icons to represent the entire file system; drag-and-drop; double-clicking — just to name a few. The developments here allowed for progress towards a universal structure for organising information on the screen, in a way that is familiar, versatile and user-friendly.

  • (Left) 1978 Lisa which inspired the creation of the (Right) 1984 Apple Macintosh
  • An early Apple advert for the Macintosh, pushing its ease of use

However, it wasn’t exactly the Lisa itself that went on to make history. Despite being such an advanced machine, sales were limited mostly due to the $10,000 price tag and difficulty of writing software for it. This called for a much more simplified, lower cost version of the Lisa. Steve Jobs took the task upon himself and achieved this goal with the original Apple Macintosh, which was introduced to the world in dramatic and iconic fashion in 1984, retailing for $2,495. It retained most of the GUI features of the Lisa, and even shared some of its low-level code, but the operating software itself was written from scratch to fit in the small memory footprint. It was this machine that would succeed, and mark a significant turning point for interface design.

Questions surrounding who invented what or who stole from who are often hotly debated within the technology industry. However—regardless of personal opinions or accusations—if artists, entrepreneurs and inventors didn’t take influence from one another, then that would be a true hinderance of innovation. Influence is an intrinsic, fundamental element that is necessary for innovation to happen.

This sentiment can, in fact, be best described with a Haiku written by Yosa Buson.

“Lighting one candle

with another candle—

spring evening.”

In the words of Frank Chimero,

“Buson is saying that we accept the light contained in the work of others without darkening their efforts. One candle can light another, and the light may spread without its source being diminished.”

As creators, we must accept that creation and innovation is an accumulative effort – one that is ever progressing. Our own ideas along with everyone else’s snowball together to collect new thoughts and developments along the way — a movement that never ceases. As our malleable inspirations travel down the infinite branches of the thoughts of others, they become reshaped — moulded into something new. An improvement here and a new perspective there, the result is perpetual growth and change. At each stage, no one can claim ownership to an idea, for it is the combined product of a hundred others. Did Karl Benz, Edouard Michelin, or Henry Ford steal the wheel from the Sumerian people of the Bronze Age? Equally, did Douglas Engelbart steal from Vannevar Bush? Or did their personal contributions build upon an ever-progressing concept; the summation of the ideas and contributions of many, always pushing the boundaries of what we know, drawing us closer to that which lies beyond what we currently see?

This is how we innovate; we take inspiration and then develop it. This is what distinguishes innovation from thievery—personal, individual development. Steve Jobs took a mouse that cost Xerox $300 to develop and made it cost $15, while also simplifying it and improving the ease-of-use. “If you lined up Engelbart’s mouse, Xerox’s mouse, and Apple’s mouse, you would not see the serial reproduction of an object. You would see the evolution of a concept.”  —Malcom Gladwell, Creation Myth [Source]. An idea must be built upon, for it to not be stolen. Developed, adapted, improved.

As Isaac Newton said,

“If I have seen further it is by standing on the shoulders of giants”

But even this was adapted from another,

“Bernard of Chartres used to say that we are like dwarfs on the shoulders of giants”

— John Salisbury.

Creation requires influence (Kirby Ferguson, Everything is a Remix). The forces that shape our lives can’t be attributed to individual owners; we are the product of everyone before us. In order to see beyond what we know, we must stand on their shoulders.

Identity, Branding and Logo Design

Starting Point:

startingpoint

logothemes

The three main concepts I wanted to incorporate into the logo. These don’t necessarily need to be literal/figurative or particularly obvious – but they are the underlying ideas/themes.

Using Pinterest to create a moodboard of reference and inspiration

Using Pinterest to create a Moodboard of reference and inspiration [View Full]

Sketches

I began sketching and brainstorming initial ideas while also gathering reference and images to take inspiration from. I mixed between sketching ideas on paper and digitally, occasionally taking an idea from paper into Photoshop or Illustrator in order to see whether it works in practice or not.

10_iteration

Some early experiments sketched out in Photoshop – I liked the direction and the ideas behind them, but none of them worked particularly well in practice

w_only

When brainstorming ideas for a type face based on geometry, it occured to me that the letter ‘W’ is visible in the edges of an Icosahedron. I thought it may work well to base the logo on a single Icosahedron with the ‘W’ highlighted along the edges. In the sketches above you can see some attempts at visualising how this could work, as well as experimenting with the faces of the shape ‘exploding’ outwards and the ‘W’ being revealed in the gaps.

Origin

It then became apparent that each letter could be made from various combinations of edges. This idea instantly stood out to me, with a strong geometric foundation that’s closely linked to the shapes and themes of the game. The shapes of the letterforms are very similar to the stylistic nature I had in mind and are reminiscent of the  “futuristic cave painting” style alphabet I designed for the in-game world.

It’s important to me that the design has a strong, meaningful foundation – even if implicit evidence of that is subtle in the final design. I want the design to have solid grounding and reasoning. Details such as this are what drew me to this concept.

1_iteration

Initially, I intended to keep the 3D images of the Icosahedra behind the letters in order to show the viewer where the letter shapes actually come from. However, I wanted to also experiment with the type being isolated from the Icosahedra. This will allow for a more minimal design which is always important when it comes to identity and logo design; I want to keep it minimal while also injecting as much personality as possible. I was concerned that the varying dimensions would make the logotype look unbalanced, but this actually functions quite well for the concept as I wanted to represent a feeling of imbalance – the main concept of the game revolves around a universal and environmental imbalance that Weedy journeys to fix, so it makes sense for a sense of this to come through in the design.

2_iteration

I experimented with various different stroke styles and weights for the letters before settling on the medium weight above. I wanted a fairly chunky logotype that would give enough substance to work with and display well at a variety of sizes (bearing in mind the likely display on small mobile screens).

3_iteration

I utilised some of my previous text ideas to experiment with how to handle the rest of the title. The type above uses letters made entirely from the lines of an isomeric cube, continuing the theme of type created from geometric forms. My inspiration from this comes from Sol Lewitt’s Variations of Incomplete Open Cubes, 1974 and other artists’ subsequently inspired works.

Typeface Sol was created as a continuation of Sol LeWitt’s 1974 project entitled ‘122 variations on incomplete open cubes’ which consisted of 122 views of unfinished cubes constructed from wooden planks. The character set of Sol is defined by the spatial potential of a cube. The new definitions are dependent on the viewer’s imagination and ability to recognize letters in seemingly abstract composition.

Although I do really like the concept, the actual visual result wasn’t working well for me – the varying angles between the heading and the subtext were clashing and the geometry didn’t flow or seem balanced and harmonious. I continued to experiment with other ideas.

logos

I wanted to use ‘Weedy’ as the main type with ‘the seadragon’ supporting it as sub-text (see examples above). This creates a strong, memorable association with the main protagonist while also providing some more context on the theme. By using just one short word (Weedy) as the main stylistic element, it means I can work more into the design of this one word without it becoming too complex and long – as it would if I tried to design the other three words as stylistically.

4_iteration

 

I decided to leave the sub-text for the time being and focused on the main type. This would allow me to focus more on shape and form and then create sub-text to match later on, which is a more logical way of approaching it. I took inspiration from the glitchy, melting text in my earlier Mood board and experimented with how I could recreate this effect in Illustrator. I iterated until I was happy with the overall weight and form. I was aiming for a piece of text that evoked a sense of liquid and water while also retaining its original geometric nature.

5_iteration

Once I had the ‘Water’ element in place, I also wanted to add the ‘Glitch’. I broke up, fragmented and further distorted the type to create the result above. I then moved on to create the rest of the text in a style that would complement it.

sketches

Sketching out ideas for the sub-text, taking inspiration from the in-game alphabet I designed previously

9_iterationI decided to proceed with the third design and begin iterating on it further. I wanted to mock the design up in different settings so I could ensure it would be versatile. When designing logos, I always bear in mind a few fundamental rules:

  • Always begin designing in solid black only

The design should always be able to function in one solid colour, allowing it to be perfectly versatile well into the future. As well as this, trying to implement colours, shading, gradients and other decorative effects in the early stages only distracts from the core design itself.

  • Always ensure the design works equally well at both very small and very large sizes

The design should be versatile for any application – whether it’s the size of a postage stamp, on a mobile phone screen or on a billboard.

  • Keep it simple (simple is effective and helps the design meet the other criteria)
  • Memorable (brands don’t have a long time to make an impression)
  • Distinct (it must be instantly recognisable and unique)
  • Focused (don’t try to fit in too many features or ideas)

This kind of theory knowledge I have adopted over time from studying the work and reading the books of designers such as David Airey (in particular, his book Logo Design Love), Paul Rand, Alan Fletcher, etc.

The original concept's starting point

(1) The original concept’s starting point

Improved the background to match the theming more closely. The background isn't necessarily part of the identity design but just to support for the purpose of this mock-up. I wanted to test how the design works on busier backgrounds as well as start showing some initial ideas for what kind of artwork it may be used with.

(2) Improved the background to match the theming more closely. The background isn’t necessarily part of the identity design but just to support for the purpose of this mock-up. I wanted to test how the design works on busier backgrounds as well as start showing some initial ideas for what kind of artwork it may be used with.

Wanted to make the 'water' aspect of the design more pronounced. Added slightly more distortion to the text to elicit waves, ripples, the surface of water, reflections, etc.

(3) Wanted to make the ‘water’ aspect of the design more pronounced. Added slightly more distortion to the text to elicit waves, ripples, the surface of water, reflections, etc.

The previous iteration made the 'water' aspect of the design more apparent but the 'geometry' aspect was still fairly weak and barely evident (according to feedback). I wanted to hint at the origin of/rationale behind the particular letter-forms chosen, to subtly show where the design comes from. This also makes the 'D' letter more balanced in relation to the others.

(4) The previous iteration made the ‘water’ aspect of the design more apparent but the ‘geometry’ aspect was still fairly weak and barely evident (according to feedback). I wanted to hint at the origin of/rationale behind the particular letter-forms chosen, to subtly show where the design comes from. This also makes the ‘D’ letter more balanced in relation to the others.

Showing more structure of the 3D Shape. I'm not sure if this is too complex, or if the detail works and adds a nice level of depth?

(5) Showing more structure of the 3D Shape. I’m not sure if this is too complex, or if the detail works and adds a nice level of depth?

Resized the characters to be more balanced (but still not perfectly - as I wanted to keep some sense of imbalance). I also kerned the letters more tightly to see if it created a more coherent logo type. I feel like this design is fairly far from the original concept, but it could work. At this stage I feel like it's less effective than the others, however.

(6) Resized the characters to be more balanced (but still not perfectly – as I wanted to keep some sense of imbalance). I also kerned the letters more tightly to see if it created a more coherent logo type. I feel like this design is fairly far from the original concept, but it could work. At this stage I feel like it’s less effective than the others, however.

At this stage, I feel like I have created some strong designs, but I will need to gather feedback to help get a better idea of which is the most effective.