Side-Scroller Mood-boards

Main Character Mood-board:

Character_Moodboard_01.jpg

Biological Plague Character Mood-board:

Biological_Plague_Moodboard_01.jpg

Enemies Character Mood-boards:

This slideshow requires JavaScript.

Environment Mood-boards:

This slideshow requires JavaScript.

Side-scroller Mood-board:

Sidescroller_Moodboard_01

 

 

Advertisements

App Design Research

App Design:

Application Design refers to the creation, especially graphically and interactively, of applications. Nowadays, this usually refers to the creation of mobile applications, specifically for smartphones. Following the rise of said devices, the need for clean and readable User Interfaces and enjoyable User Experiences has risen.

The App Design market is heavily saturated, with many high-budget companies and indie start-ups providing good services and products; however, many designs are terribly flawed and provide an unsatisfactory User Experience. In order to create an efficient and user-friendly application, one must pay attention to the principles and elements of art and design, and how they intertwine with the human psychology. Thus, the User Experience is improved through the creation of a good User Interface.

Various groundwork must be put into place first, the designer needs to identify the function of the application, the desired target audience and the factors surrounding the influence of these variables.

As the application is designed, the elements and principles of design should be applied to the interface, ensuring that any user is instinctually aware of where they must go to access whatever it is they desire. Simplicity is key; clean shapes and minimalistic use of colour references ensures that the user knows what a symbol represents.

Example: A check/tick shape in green signified accept, while a cross/X in red signifies cancel or close. These are symbols and colour-references that have been ingrained in our psychology, further perpetuated by modern application design.

User Interface and User Experience are two extremely important elements when it comes to the overall design of an application, with User Interface requiring that the layout is attractive and User Experience requiring that the application is easy and enjoyable to use.

The use of mapped out wireframes, grids and tappable areas is incredibly important, as these allow you to plan the layout, readability and accessibility of your application. They also allow you to more efficiently adapt the design across platforms and devices, creating a cleaner and more efficient set of shapes to work with. Before finalising your wireframe, you must create a comprehensive flow map, detailing the potentials paths that a user may take to access the various parts of our application or website.

It is important that your test the User Experience responses to each stage of our design process, creating prototypes and gaining feedback on how to improve your current design.

Some advice to note, mostly for User Interface and Experience Design:

-Have extra views, as this will help de-clutter each individual page

-Create customized button styles that fit the theme of your application

-Ensure functional design over purely visually attractive design

-Avoid low-resolution elements, as well as the over-use of animations

-The user needs to know what is happening and what they are viewing at all times, ensure that they are aware of where they are in the application and what is currently occurring

-The main elements and objectives of a page and application should be highlighted using the principles and elements of design, ensuring a readable and clear purpose that aligns with the goals of the end user

How has App Design changed and developed since the start of smartphone based computing?

Application Design, as well as Website Design (both may fall under Graphic Design), has changed since the rise of smartphones. Compatibility is the main issue, with sites needing to be readable and accessible on both a large and small screen, varying in sizes and resolutions. To combat this issue, computer and mobile-based site versions are available on some hosting services. However, another way to ensure an application or website is readable interchangeably from device to device, design utilizing bold, graphic shapes and clean sets of colours is imperative. This allows users on mobile to access menus and desired tabs/pages easily and accurately, lowering the chance of ‘mis-clicking’. This also allows the application’s design to dynamically format to the resolution and size of the device’s screen while maintaining order and readability.

This adaptive formatting of websites and applications, and the use of specific edited versions for different devices’ User Experiences, has been dubbed Responsive Design.

An important factor to this dynamic formatting would be a grid system, with a series of blocks and rectangles that appear in different configurations when viewed on different devices or platforms, commonly referred to as Masonry Design.

How has Interactive Media authoring/creation changed since the invention of interactive systems? (Phones, tablets, computers). [Why have CD-Roms and DVD players become obsolete?]

Nowadays, just about anyone with a computer and internet connection can create and publish an application one of the many app stores worldwide. This, combined with the range of capabilities of the devices that are available today, render most old forms of specifically-purposed technologies obsolete in the current day and age. Going forward, more and more old sets of technological inventions will become less and less useful due to the extensive uses and functionalities of computers and mobile devices.

A device, of which can fit in your pocket, can access the internet, stream video, interact with various applications, message and call others is more efficient and useful than a bulky DVD player with a singular purpose. Nowadays, you can connect said mobile device (a computer or tablet may perform this task as well) to a smart TV, allowing you to watch a variety of content without the need for a singular purpose machine or device. Smart TV’s also have the capability to access the internet and stream video, as well as utilizing a series of applications.

Efficiency, accessibility and variety is what is pushing this modern technology far ahead of their older, more singular-purposed archaic counterparts. When designing an application or device in this modern era, one must consider not only the principles and elements of design, the tried and true theories in graphic design and psychology, but also the needs, wants and demands of modern life and people in this technology driven age.

App Design Moodboard

 

This slideshow requires JavaScript.

 

5 Good App Designs:

 

Spotify Mobile App:

Spotify is an incredibly intuitive and efficient application, allowing you to stream music anywhere and everywhere. Backed up by a plethora of genres, suggestions, playlists, songs, artists and settings, your listening experience is highly customizable.

In regards to visuals, it opts for a sleek and minimalistic look that is driving forward many design philosophies of this modern era; simplicity, readability, efficiency and ease of use/navigation, authentic and emotive photographs, hand-created icons that are instantly recognizable (and are backed by accompanying text in a clean, simple font), and the restrained use of bright colour (bright green for certain actions such as typing, shuffle play and toggling options).

Readability and navigation wise, it is a highly efficient application, with a bar of helpful main sections at the bottom, your current song (of which can be paused/played or brought up/down via an arrow), and simplistic and informative lists and titles that allow you to navigate the world of music through a categorized and search based system.

Spotify is extremely neat, with the clear images, graphics and text standing out on the dark background. There is a clear hierarchy of information, with different values being assigned to important headings, song/album/artist tiles and extra information.

Interacting with Spotify is a smooth and efficient experience, with interactive options that allow you to quickly navigate to various ‘hubs’ and pages in the application. Having the ability to access your current song, playlist and all of the various artists, albums and songs via that at any moment provides you with instant access and interactivity. Not only that, but you are also constantly discovering new songs via the suggested songs and related artists sections, as well as the various playlists, genre sections and radios that are available.

 

This slideshow requires JavaScript.

 

Instagram Mobile App:

Similarly to Spotify, Instagram ops for a more simplistic and elegant approach; the focus is on the images that are posted, with a hierarchy of information created through the use of text, font, type-face, symbols and imagery.  Interactivity is easy, with a bar (Similar to the one in Spotify) at the bottom of the screen of which allows you to access the home screen, search, add a new photo or video, look at your favourites/likes or view your own profile. From either of these sections, you are provided with a variety of interactivity options that only require a few, possibly even one, press to access or interact with.

Where Spotify opted for dark monochrome colours with hints of green, Instagram instead uses whites, greys and highlights of blue to show certain prompts or current selections. Most images and areas of text have their own demarcated circles, rectangles or squares, allowing for a variety of phone sizes and screen ratios to access the application (the same goes for Spotify).

Swiping left or right at the top bar, near the word Instagram (dark and highly contrasted against the light background), will allow you to either take a photo/video or access your direct messages. Two icons help represent this, of which may be clicked on to access these sections as well, and are highly recognizable in their intentions due to the symbolism and contrast used in their designs. Similarly, one may like, comment or share a post with a friend via the line-based designs underneath the images. The user will understand and associate these with the filled in icons and understand that they may be interacted with, their intentions clear via their symbolism-based designs. Once an image has been liked, the heart will fill in with a bright red, indicating its status to the user.

Overall, the application makes use of a simplistic, efficient and minimalistic design direction to help keep the creation, interaction and consumption of media the focus.

This slideshow requires JavaScript.

Daylio:

Once again, the trend of the hub-based bottom bar has continued. This time, the predominant colour is purple, aided by the monochromatic and simplistic designs that occupy the background and navigational menus/options. Important sections, information and current selections are assigned colours, helping them to stand out from the background and take hold of your attention to notify you of their status.

Being an application that helps you track your mood, a calendar and emotive based system is used to quickly and efficiently record and track your emotions throughout the various months. The emotional states, that are options for you to choose from, are assigned certain colours and descriptions; these range from rad (orange) to awful (dark grey). One may track their progress through the calendar and statistic pages, allowing them to see and alter trends in their emotional states.

Various options and settings exist, allowing you to personalize your experience via editing moods, activities and toggling whether or not you would like to have reminders to prompt you to record your emotional state at any given time of the day.

When recording or viewing your emotional state, you are given the option to affect or view your average mood or a variety of other activities. Readability is paramount here, with a white rectangle pop-up that jumps to the foreground, the background faded in grey, with a list of activities to choose from. Each one has an icon (with colours) assigned to them, with the amount of times they have been tracked next to them in brackets. The hierarchy goes as thus; Heading, Icons, Description, Extra Information, with each section being given a clear position through the use of colour, size and value.

Font-wise, the application remains consistent, with the only variant being in size and value.

Overall, the application is clean, effective and efficient in both navigation and interaction. The aesthetic style remains true to the trend of today’s applications; clean, minimalistic, monochromatic but with a hint of colour to help readability and amplify the UI/UX.

 

This slideshow requires JavaScript.

Daylio, sadly, includes advertisements that require payment to disable. Not only that, but the option to export your entries is locked behind a paywall; premium membership.

Shazam:

Shazam, like the previous three applications, continues to utilize the graphic, simplistic and hierarchical design structure that allows for ease of use and clear readability. Although it does assign certain sections, graphic shapes and clear wireframes to headings, options and selection options, the use of its characteristic bright blue and orange colours are rather liberal.

Even though this helps construct a coherent graphical style, it does wear down on the user’s vision and attention span. However, the application is only meant to be used in short bursts, so in that context the bright and simplistic design direction actually heightens its effectiveness.

Once again, options and interactivity options are displayed via a hierarchical network of text, colour, symbols/icons, drop down menus and interactive drop downs. To access the various parts of the application, one need only swipe sideways or select on of the clean, directly understandable icons displayed on the screen.

To use Shazam’s main function, the identification of music, one need only tap the large icon labeled ‘Tap to Shazam’ in order to prompt the application to listen and attempt to identify the music it is presented.

Navigation is smooth, especially due to the hierarchical network of information, sections and lists; although the bright use of colour and various icons from other applications that you are prompted to use distract the user and put strain on the eyes if viewed for extended periods of time.

 

This slideshow requires JavaScript.

Pinterest Mobile App:

Pinterest follows the same style as Instagram and Spotify, with its monochromatic scheme and limited use of bright colours leaving room for the centre stage attraction; the images shared, searched for and pinned on the application.

The application and experience is efficient and pleasant, with the options to search, post or access settings at the top of the screen. You may also create various boards, follow genres/boards, pin images and explore other user’s profiles.

Options that may appear on screen, while still editing or accessing a specific tab, appear ‘on front’ of the background, fading all but its own contents to grey.

Once again, a hierarchy of information is created through the use of images, symbols, values, colours (especially red, of which is used on certain options and prompts, usually for final actions), font sizes, placement, negative space and graphic shapes.

This slideshow requires JavaScript.

3 Bad App Designs:

Anniversary Birthday Reminder:

This application, aiming to provide a reminding service for birthdays, anniversaries and events, is rather poorly designed. The visual aspects of the app are extremely cluttered, with a variety of colours and tangents fighting for your attention. Although it tries to opt for a sleek design, through the use of minimalistic graphics, it falls short and presents an oddly cluttered and confusing layout. This is mainly due to the poor wireframing, positioning and combination of colours.

The ‘tags’ alongside the list inside the events section are confusing and difficult to read, with a purple colour on a cyan strip, sideways, while connecting by a tangent to the related image.

This slideshow requires JavaScript.

Kanban Board:

Kanban Board, an application designed for note taking, relies upon its novel appearance as an approximation to sticky notes stuck upon a board comprised of a cork-like material. This, in theory, may sound like a good idea; creating a note taking application that simulates a possible route of note taking in real life, adding a sense of realism and tangibility to the notes you are taking.

However, the design of the application, in regards to its visuals, is highly flawed. The greeting screen is decent enough, with three title-customizable columns that default to TO-DO, DOING and DONE. The top left of the screen features a plus button, the top right a trash bin icon. The user will be aware that the plus will add a new note, while the trash bin icon will delete a note. However, the main issues come in when observing the variety of textures, colours and icon styles, as well as fonts on display.

Upon clicking upon the plus button on the top left, you are prompted to add either a green or yellow note, or select an orange and white plus button. These icons are separated from the tiled background texture via a semi-transparent black strip with a small title saying; Add note. If one accesses the orange and white plus button, you are sent to a mostly black screen prompting you to ‘Download more note.’ Next to this, a smaller green bar prompts you to ‘Find out more’ with an arrow indicating a drop down near it. This bar, bearing close resemblance to advertisement pop-ups and embeds, makes the user wary to access it.

Another large issue is the disconnection between pages and fonts, with headings, text placeholders/prompts and other sections with text having a variety of different fonts and sizes. Not only that, but there are grammatical errors in some section; ‘Download more note’ and ‘LIST MORE NOTE’ being two prime examples.

Colour and texture wise, there is much to be desired. While the section prompting you to download more notes uses a somewhat cleaner aesthetic, it does not flow well from the heavily textured attempt at emulating a realistic board. When clicking on the plus button on the top left and then proceeding to create a new note, by clicking on either the green or yellow icon, you are able to type up a note. The note appears as a square shape, with one corner folded, in a rather garish green or yellow with grey substitute text. This is difficult on the eyes, with the grey text being difficult to focus on due to the distracting colour it is placed upon, as well as the heavily textured, yet faded out, background.

The size icon, a rather typical floppy disk icon of old, is present on the top left of the note. This further perpetuates the lack of consistency of icons, with the different buttons possessing different styles and levels of detail.

Overall, the application tries and fails to create a novelty note taking system, the inconsistency of styles and difficult-to-view visuals places strain upon the user’s eyes and discourages them from further use of the app.

This slideshow requires JavaScript.

Note Droid:

Note Droid takes what Kanban Board did, but does it to an even worse degree. Once again the user is greeted with a cork-textured board background, with a wooden strip at the top of the screen. Upon this sits the titles of the application, a search tool (indicated by a magnifying glass) and another icon that allows to to create a new category. The pop-up window that appears allows you to edit the name of the category, the ‘Pushpin’ colours, as well as the colours of the note that indicates the category.

Another issue with this application that coincides with the flaws of the previous app is that it features a variety of icon and font styles, rather disconnected from one another. The drop down menus are drastically different from the rest of the application, featuring a much cleaner aesthetic.

Upon creating a new note, you are presented with a new page featuring a note appearing as though it is part of a large notepad, the previous pages torn out. The font for the title at the top of the screen, the font for the titles and text of the notes, and the font used for the drop downs are all different. This may be a good thing, yes, it can help organise the different functions of the application by assigning them with different visual styles. However, the difference is rather jarring when combined with the various different background styles and aesthetics.

The icons, for the most part, stay consistent throughout the pages.  They stay within the top strip of the page, allowing you to save, return or access a drop down (of which lets you share the note) when typing up a note.

This slideshow requires JavaScript.

Adverts appear to be commonplace in many applications, with some of these apps allowing you to opt out via payment. Some, however, have no such option. Ideally, an application with no advertisements would be desired.

 

References

Broderick, J. (2011). Camera Button. [online] Dribbble. Available at: https://dribbble.com/shots/208524-Camera-Button [Accessed 28 Sep. 2017].

Clapham, S. (2013). How website design has changed with the rise of Tablets & Smartphones – Parachute Digital Marketing. [online] Parachute Digital Marketing. Available at: http://www.parachutedigitalmarketing.com.au/blog/mobile-marketing-and-apps/how-website-design-has-changed-with-the-rise-of-tablets-smartphones/ [Accessed 28 Sep. 2017].

Creative Bloq. (2013). 10 things web designers need to know about app design. [online] Available at: http://www.creativebloq.com/app-design/web-designers-need-know-3132155 [Accessed 28 Sep. 2017].

Fearlessflyer.com. (2014). User-friendly mobile Apps – 12 Must have Design Elements to Follow (Part 1) – Fearlessflyer.com. [online] Available at: http://fearlessflyer.com/user-friendly-mobile-apps-12-must-have-design-elements-follow-part-1/ [Accessed 28 Sep. 2017].

Flarup, M. (2016). What You Should Know About The App Design Process. [online] Smashingmagazine.com. Available at: https://www.smashingmagazine.com/2016/11/what-everyone-should-know-about-the-process-behind-app-design/ [Accessed 28 Sep. 2017].

Grannell, C. (2017). How to make an app in 2017. [online] Creative Bloq. Available at: http://www.creativebloq.com/app-design/how-build-app-tutorials-12121473 [Accessed 28 Sep. 2017].

Graphicloads.com. (2015). Factors to Make a Successful Mobile App Design – GraphicLoads. [online] Available at: http://graphicloads.com/factors-to-make-a-successful-mobile-app-design/ [Accessed 28 Sep. 2017].

Ling, T. (2017). Nexus Screen Android UI Design Kit PSD Mockups – PSD Mockups. [online] PSD Mockups. Available at: https://www.psdmockups.com/nexus-screen-android-ui-design-kit-psd-mockups/ [Accessed 28 Sep. 2017].

Matzner, R. (2012). Designing a Mobile App? Don’t Make These 10 Mistakes. [online] Mashable. Available at: http://mashable.com/2012/04/11/mobile-app-design-tips/#9MUKlUkTlPqY [Accessed 28 Sep. 2017].

Molla, R. (2017). How Apple’s iPhone changed the world: 10 years in 10 charts. [online] Recode. Available at: https://www.recode.net/2017/6/26/15821652/iphone-apple-10-year-anniversary-launch-mobile-stats-smart-phone-steve-jobs [Accessed 28 Sep. 2017].

Moore, J. (2017). A Step-by-Step Guide for Starting a New App Design Project in Sketch. [online] Medium. Available at: https://medium.com/ux-power-tools/a-step-by-step-guide-for-starting-a-new-app-design-project-in-sketch-469df0f24af8 [Accessed 28 Sep. 2017].

Moreira, J. (2012). Archivme iPad app – iOS. [online] Dribbble. Available at: https://dribbble.com/shots/391714-Archivme-iPad-app-iOS [Accessed 28 Sep. 2017].

Pierce, D. (2016). How Apple Taught the World to Smartphone. [online] WIRED. Available at: https://www.wired.com/2016/06/apple-taught-world-smartphone/ [Accessed 28 Sep. 2017].

Qayyum, A. (2012). 9 Easy Steps Towards Designing an iPhone App. [online] Smashinghub.com. Available at: http://smashinghub.com/9-easy-steps-towards-designing-an-iphone-app.htm [Accessed 28 Sep. 2017].

Rocheleau, J. (2017). Ultimate Resources For Mobile Web Application Design. [online] HKDC. Available at: http://www.hongkiat.com/blog/webapp-design-resources/ [Accessed 28 Sep. 2017].

Skyboy Design | Cape Town | Graphic Design | Branding | Interface | Web. (n.d.). UI Design: Mobile app for photographers by Skyboy Design. [online] Available at: http://skyboydesign.com/project/quickpic-app-uidesign/ [Accessed 28 Sep. 2017].

Smith, K. (2012). Interface Buttons for iPhone & iPad Applications / Design Tickle. [online] Designtickle.com. Available at: http://www.designtickle.com/2012/04/interface-buttons-iphone-ipad-applications/ [Accessed 28 Sep. 2017].

Staff, C. (2015). 16 killer design tips for creating mobile apps. [online] Creative Bloq. Available at: http://www.creativebloq.com/app-design/16-killer-design-tips-creating-mobile-apps-11513821 [Accessed 28 Sep. 2017].

Tierney, P. (2012). Good design/bad design – phone app wireframe. [online] phmtierney – web design for photographers. Available at: https://phmtierney.wordpress.com/2012/12/02/good-designbad-design-phone-app-wireframe/ [Accessed 28 Sep. 2017].

Titcomb, J. (2017). 10 ways the iPhone changed the world. [online] The Telegraph. Available at: http://www.telegraph.co.uk/technology/2017/01/08/iphone-turns-10-10-ways-changed-world/ [Accessed 28 Sep. 2017].

Anon, (2011). [online] Available at: https://www.quora.com/What-are-the-worst-examples-of-poor-UI-design-in-common-use [Accessed 28 Sep. 2017].

Barron, B. (2016). Cite a Website – Cite This For Me. [online] Elegantthemes.com. Available at: https://www.elegantthemes.com/blog/resources/bad-web-design-a-look-at-the-most-hilariously-terrible-websites-from-around-the-web [Accessed 28 Sep. 2017].

Cao, J. (2017). 10 Worst Design Failures of All Time. [online] Studio by UXPin. Available at: https://www.uxpin.com/studio/blog/10-worst-design-failures-of-all-times/ [Accessed 28 Sep. 2017].

Rutherford, Z. (2015). 6 examples of awful UX design. [online] The Next Web. Available at: https://thenextweb.com/dd/2015/09/29/6-examples-of-awful-ux-design/#.tnw_eA4K9ykg [Accessed 28 Sep. 2017].

Sandy, B. (n.d.). Menus And Buttons In Mobile Design – 45 Examples. [online] Design your way. Available at: http://www.designyourway.net/blog/inspiration/menus-and-buttons-in-mobile-design-45-examples/ [Accessed 28 Sep. 2017].

WebAppers. (2011). More Awesome CSS3 Buttons for Your Web Application. [online] Available at: http://www.webappers.com/2011/09/06/more-awesome-css3-buttons-for-your-web-application/ [Accessed 28 Sep. 2017].

Maya Animation Tasks

This slideshow requires JavaScript.

 

For this task, we had to create a key-frame animation in Maya using three different 3D primitives.

To begin, we set the animation settings to ‘Realtime’ and ’24’ fps, via Windows-> Settings/Preferences -> Preferences. Ensuring that ‘weighted tangents’ was selected, as well as the default set to linear, we were then able to begin the task.

Creating 3 different polygons, cube, sphere and cone, I spaced them relatively evenly apart. Ensuring that the attribute editor is open, I selected the cube and first frame on the time slider. I then navigated to the channel box and right-clicked on the ‘translate X’ option, of which allowed me to click on ‘Key selected’. You are notified of a created key-frame once the box has gone red.

I then moved the time-slider to frame 24, and moved the cube across to the opposite side of the grid plane. I then repeated the earlier process of creating a key-frame, selecting ‘Key selected’ for translate X.

Dragging the range slider to frame 48, as well as repeating the key-frame process for the sphere, allows me to move this object at half the speed of the cube. The same process is repeated for the cone, but this time its end point is reached at the 72nd frame.

Moving the cube back to the start of the grid, a key-frame is created at 48 frames. Moving it to the end again and creating another key-frame, this time at 72 frames, concludes, for now, the animation regarding the cube.

The sphere, at frame 72, is moved to the middle of the grid via the changing of its X translation to 0. Once positioned correctly, a key-frame is created.

Going back to the cube, a key-frame is created at frame 1 regarding Rotate X set at 0. At frame 72, another key-frame is created for Rotate X, however, this one is set to 1080. This configuration causes the cube to spin while moving across the grid.

For the Sphere, a similar process is used. However, Rotate Y is used instead, with the settings at frame 72 being 360 instead of 1080.

For the cone, Rotate Z is used. With the end number for Rotate Z on the 72nd frame being -90. This causes the cone to tip forward as it along the grid.

Navigating to Windows -> Rendering Editors -> Render View will allow you to apply shaders and textures to your objects, of which is the next stage of this task. Selecting Lambert from the Surface shaders is the next step, of which then has a colour applied to it via the menu on the right hand side of the screen. The material is then assigned to the cube via right clicking the material on the top right of the screen and selecting ‘Assign Material To Selection’.

This process is then repeated with various different shaders, materials and colours for the other objects.

We were then tasked with creating three separate animations, tied together via intertwined animation principles and processes.

The three tasks were thus; animate a heavy ball being dropped/bounced, animate a football rebounding off of a wall, and animate a ball bouncing down stairs.

In order to animate the heavy ball falling and bouncing, I had to consider the physics of such an occasion, as well as the possible materials that the ball would be made of. The conclusion was thus; the ball would drop and barely bounce, rebounding shallowly several times in quick succession before settling down.

The process I used comprised of creating a sphere, selecting the first frame, editing the Translate Y and Translate X co-ordinates, and right clicking them to select ‘Key Selected’ in order to create a key-frame. This process was repeated multiple times for all three animations, rather similar as to how the animation earlier in this post was created.

Utilising various animation principles, I planned out and executed the theory or ‘Squash and Stretch’, manipulating the size and rotation of the sphere as it moved through the air and made contact with other surfaces.

The graph editor was used to smooth out the animation, utilising the ‘Break Tangents’ option for finer control.

Heavy Ball Animation:

This slideshow requires JavaScript.

Rebounding Animation:

This slideshow requires JavaScript.

Stairs Animation:

This slideshow requires JavaScript.

We then moved onto another task, this one being lighting-based. We had to apply materials and lighting to a supplied model of a robot. In order to do so, we had to create and place several light sources, and then manipulate said light sources. Changing the distance, intensity and colour of these lights allowed us to create primary, fill and edge lighting, as well as different atmospheres and emotional responses.

 

Untitled

(Insert Screenshots/Images)

Moving on-wards, we did some more animation work, this time experimenting with a rig for a human character. We applied a rig to the supplied model and then manipulated it, moving the skeleton and nodes via Reverse Kinematics and key-frames in order to create an experimentation in animation.

 

 

(Insert Screenshots/Images)

 

Fuse Modelling/Model Editing Experimentation:

This slideshow requires JavaScript.

In this exercise we composed and edited a 3D model using a variety of preset modular elements and sliders, using our own faces as points of reference for the character. After creating and editing the character, we clothed it via picking from more preset options.

Finally, we uploaded it to a Mixamo Autorigger, allowing us to experiment with a variety of different preset animations that have already been created for open source use.

Maya Column Tutorial

This slideshow requires JavaScript.

For this task, we had to create a pillar in Maya while following a specific tutorial. In order to create said pillar, we had to utilize various primitive 3D shapes, manipulate them, and position them in the correct area in order to create the pillar.

The three main primitives used and manipulated were; the cube, cylinder, and torus.

In order to create the stepped base of the column, we had to edit the mesh via its edge loops, made possible via Edit Mesh -> Insert Edge Loop Tool (-> Options Box). I ensured that two edge loops are created when inserted, pressing the R key and dragging the edge loops, once in place, demarcates space for the steps. Before doing so, however, a cube was created and edited. The properties it received were thus; Scale Y 0.15, (insert other properties).

Once edge loops had been inserted along each edge of the column base, they were edited to ensure accuracy during the Extruding phase. Clicking the middle mouse button over the object allows you to select the central face, of which is then edited via Edit Mesh -> Extrude. Resetting the Extrude options may be helpful, as it might behave in a different way than you desire. The settings to input were; Thickness 0.2, Offset 0, Divisions 1. The process is then repeated multiple times until you are happy with the result, preferably twice more.

This slideshow requires JavaScript.

For the bulk of the column, a cylinder is created and named columnCylinder. This primitive is then given the following settings; Radius 0.4, Height 8, Subdivision axis 32, Subdivision height 1, Subdivision caps 1. Some additional manipulation is required, positioning the cylinder in the correct orientation. Turning on point snapping and holding down the D key allows you to move the pivot point to the base of the column, releasing the D key and then moving the column again allows for finer control.

Afterwards, a torus polygon is created; this primitive is used for near the top of the column, of which will be topped by a modified duplicate of the base. The settings for the torus polygon is thus; Radius 0.4, Section radius 0.1, Twist 0, Subdivision axis 12, Subdivision height 12.

The torus is then placed at the top of the pillar using the move tool, its position edited and finessed in order to eliminate any gaps.

This slideshow requires JavaScript.

Then, ‘columnBase’ is selected, followed by pressing CMD+D in order to duplicate it. The duplicate is then renamed ‘topColumn’, and is moved to the top of the column. Pressing spacebar will allow you to view the scene in four different perspective views and angles. Utilizing these views, carefully place the ‘topColumn’ on top of the torus.

Scaling of ‘topColumn’ may be required, and once everything is in place, you may select all of the objects in the scene. To do so, use the select tool (“Q”) and drag over all of the objects. Pressing CMD+G will group the objects together. Naming the group is helpful, and may be done so via the channel panel.

Once grouped, the column may be moved as a whole, allowing you to duplicate it and create a larger scene.

This slideshow requires JavaScript.

 

3D Topology, Maya and Careers

Topology:

Topology refers to the surface of a 3D object, usually displayed and manipulated via a 3D mesh made up of quads. Triangular faces are usually undesirable, with 4-sided quads being easier to manipulate. Sub-divisions allow greater detail density and finer manipulations of the topology, however, the higher the sub-divisions, the more memory is required to render the model efficiently.

Topology is usually manipulated using Hulls and Control Vertices, with the two main types of modeling being Polygonal (vertices, edges and faces) and NURBS. Ngons are usually avoided, as they are regarded as bad topology due to the complications that arise from faces with 5 or more edges and vertices. The same goes for triangles; any face with 3 edges or vertices are problematic when it comes to rendering, rigging and animating. Ngons and triangles both have the habit of causing artifacting to occur, complicating the modeling, animating and rendering processes. Quads, as they are easier to manipulate and are less prone to strange artifacting, are more desirable when it comes to clean topology.

 

08_bad_good_topom05

 Maya Work-space:

Asset management is an incredibly important part of Maya, as well as most other software applications, and allows you to maintain an orderly and efficient work-space. The correct labelling of file structures (Underscores are preferred over spaces) and placement of files will help ensure a smooth workflow.

The process for setting up a project in Maya is thus; File -> Set Project -> Select file structure that you desire to use -> Click Set. This ties your scene, and everything related to it, to that project and file structure.

Workspace Screenshot.jpg

The work-space consists of the main View-port, with the Shelf above it. To the left would be the Tool Box and View-port Layout section, to the right are the Channel and Layer Boxes. Below all of this, at the bottom, are the Animation Timeline and Playback Controls.

A few of the main hotkeys and navigational shortcuts would be:

Q: Select Tool   W: Move Tool   E: Rotate Tool   R: Scale Tool

View-port Navigation: Space-bar, or Alt/Option plus the Middle Mouse Button.

3D Careers:

Two examples of careers relating to 3D modelling and animation would be;

Animator (3D Computer Animation):

For this job, one would be required to use 3D packages and software to create three-dimensional images, of which when put in a sequence, produce the illusion of motion/movement.

Important skills and relevant traits would include good observational skills, feeling for timing and movement, passion for the industry and field of work, as well as various teamwork and organisational skills.

For animation, the principles are the same regardless of whether or not 3D or 2D is being used. The only different would be the tools and processes used to obtain the end results.

For the most part, the animators will be working closely with the individuals and teams that make up both pre-production and production, referring to various sources and material that has both been provided to and researched by them in order to produce an accurate illusion of movement in a three-dimensional state.

CG Modeller:

The job of a CG Modeller relates to the creation of three-dimensional models for a variety of media, with the software used depending upon various factors and limitations. The individuals working in this field will need to be able to think and visualise in 3D, work in a range of styles, possess the necessary creative and technical modelling skills, as well as various teamwork and organisational skills.

3D/CG Modellers usually work closely with the pre-production team, referring to references and turn-around sheets in order to accurately create their models. Later on in the process riggers, animators and texture artists will attend to the model, providing motion, shaders, materials and textures.

References

Pinterest. (2017). Tutorials | 3D Topology. [online] Available at: https://www.pinterest.co.uk/characterdesigh/tutorials-3d-topology/ [Accessed 23 Sep. 2017].

Pluralsight.com. (2014). Why Are Ngons and Triangles so Bad?. [online] Available at: https://www.pluralsight.com/blog/film-games/ngons-triangles-bad [Accessed 23 Sep. 2017].

Site.rukout.com. (2014). 3d-facial-modeling – Rukout. [online] Available at: http://site.rukout.com/resources/3d-facial-modeling [Accessed 23 Sep. 2017].

Thunder Cloud Studio. (2016). Modeling guide: realistic human head. [online] Available at: http://www.thundercloud-studio.com/tc-tutorial/modeling-guide-realistic-human-head/ [Accessed 23 Sep. 2017].

Creativeskillset.org. (2017). Animator (3D computer animation) – Animation – Creative Skillset. [online] Available at: http://creativeskillset.org/job_roles/370_animator_3d_computer_animation [Accessed 14 Oct. 2017].

Creativeskillset.org. (2017). CG Modeller – Animation Job Roles – Creative Skillset. [online] Available at: http://creativeskillset.org/job_roles/366_cg_modeller [Accessed 14 Oct. 2017].

Game HUD Mood Boards and Analysis

Our second assignment is related to game HUDs. A HUD is the “Heads Up Display” that is onscreen during gameplay, of which can be broken up into three different types. Permanent, Pull-Up and Actioned HUDs have different purposes and are integral to a good user experience. The Permanent HUD is always on and displays things like abilities, health bars and mini-maps etc.

The Pull-Up HUD however involves elements that are only shown when the user interacts with something in the game world or HUD; an example of this would be your equipment selection screen pop-up or looting options when mousing over a fallen foe.

Actioned HUDs are quite similar to Pull-Up HUDs with the difference being the user has no control over them appearing and are instead triggered by certain circumstances or events. An example of an Actioned HUD would be words appearing on the screen when your ultimate is ready, like Battlerite. Another Actioned HUD element would be blood splatters or condition effects appearing on your screen when inside combat such as in Borderlands 2.

 

Here is a mood board of various HUDs:

hud_moodboard_1

Here is a breakdown of a couple of the games featured above and their HUD types.

Battlefield 1: Battlefield 1’s HUD is usually Permanent, with elements including mini-map, ammunition, squad members and health. Recent kills fall under Actioned HUD and interactions with objects/vehicles where mousing over them causes a button prompt to appear and a single word explanation of what that action will do.

woc6xcs5ip5x.png

WoW: The Permanent HUD of WoW includes many elements. Abilities, health/mana bars, character portrait, bags and the HUD artwork/design itself. The equipment and character stat menu can be brought up via a button press, which qualifies this as part of the Pull-Up HUD, another example of part of the Pull-Up HUD would be clicking on an enemy’s corpse to loot it, which brings up a display showing what items were dropped. The Pull-Up HUD also includes interactions with NPCs where text and various options are displayed once clicked upon. The Actioned HUD in WoW includes de-buff icons that may appear during combat and telegraph icons that some enemies display before doing special attacks.

Borderlands 2: Borderland’s Permanent HUD is usually wrapped around the character’s view as if it is being displayed to the character as well. Health, shield and shield bars, ammo and mini-map are displayed within that Permanent HUD. The Pull-Up HUD includes interactions with NPCs, much like in WoW, where text or other options are displayed. The Actioned HUD in Borderlands 2 includes damage numbers, status effects/de-buffs and critical hit notifiers inside of combat, much like WoW. Borderlands shares many similarities with MMORPGs in regards to their looting, statistics/character developments and damage numbers/notifiers.

hud-1

Dark Souls 3: Dark Souls HUDs are usually quite minimalistic, allowing you to be immersed in the game world. Health, Magic and Stamina bars, your equipment and your souls collected are part of the Permanent HUD of Dark Souls 3; however there is an option to cause your Permanent HUD to fade out when outside of combat and can be bought back by swinging your weapon or using equipment. Status effects comprise a large part of the Actioned HUD, that and the notification of your death with the iconic YOU DIED screen.

ESO:

default-hud.jpg

Battlerite:

download

Overwatch:

screenshot_16-05-29_22-51-03-000-973x547

Images used for reference and mood boards were found online.