App Design Evaluation

 

For this assignment we were tasked with creating a working application design for mobile use, making use of research and references gathered from apps in the industry.

I began by researching application design and its multi-faceted industry, touching upon various principles and theories of design in the process. Not only was research done into application design in general, but also into applications already on the market and available to download. Analysing these applications, both ‘bad’ and ‘good’, I was able to extrapolate a variety of information, especially by observing trends between both the current state of the industry and where it has evolved from, as well as between good applications and bad applications. Observing and recognizing what makes an application good, and what makes an application bad, allows one to create a shortlist of factors to either include or exclude from their designs.

Taking into consideration ethical, moral and law-based obligations and factors is incredibly important as well, as one must respect both trademarking and copyrighting when it comes to Intellectual Property (IP) and design in general.

Not only was written research conducted, but visual as well; gathering a variety of images, both of elements within applications, as well as application designs, screens, and flowcharts, enabled me to be inspired with a basis of design that is grounded in the current state of the industry, allowing me to create an application that leans towards minimalism and modernism, staple keywords in this field of design.

This slideshow requires JavaScript.

For my application, I chose a calendar task-management style of application. In conjunction with sketches of my own application design, I researched images of other applications that served a similar purpose, of which helped inform my design process even further. Having mood-boards of both applications/screens/pages from applications, elements pulled from apps and websites, as well as applications installed upon my phone, gave me an opportunity to decipher the structure of good application design, and reconstruct it for my own purposes.

For the ideation process I created a multitude of sketches, testing out different layouts, wire-frames, elements and fonts, as well as different names and logo designs. This variety allowed me to test out different directions and flows for the application and its screens/pages.

This slideshow requires JavaScript.

Once I had settled upon the main design direction for my application I moved into the digital medium, utilising Illustrator in order to create my design and flow-chart. Ensuring that there were correlations and similar elements between related screens in the flow-chart and application helps ensure the user knows where they are and where they are connected to/are sitting within the flow chart. Not only does colour help with this, but shape design and text information help communicate the relevant information efficiently in both subtle and obvious ways.

The name of the application, ToDooZ, is a slight play on words; the combination of To-Dos and ‘It’s a doozy’, subtly hinting that this application will make the management of work an easy task. The design of the logo includes the letters ‘T’, ‘D’, and ‘Z’, as well as a simplified and implied calendar design, making use of three rectangles and a box, of which the rest of the design lies within, to hint at a calendar-based aspect to the application. The strip at the top of the calendar is coloured blue, while the three rectangles are red, correlating with various shapes, screens and mechanics of the application.

For the design, there is the main Home page, of which enables the user to access the other three main pages; Calendar, Reminders, and To-Dos. Calendar allows the user to view the entire month, as well as whether they have Reminders or To-Dos for any of the days within the current or future months. Tapping/Clicking on the Reminders or To-Dos icons within the Calendar will bring up a menu that allows the user to view their To-Dos and Reminders for that day, as well as giving the user an option to return to the Home screen. To exit this view, the user can click on the arrow at the top of the screen, allowing the player to return to the currently ‘greyed-out’ Calendar page/screen.

From the Main screen the user is also able to access the main Reminders and/or To-Dos screens, of which give the user the option of accessing either the Reminders or To-Dos pages without returning to the home screen, or they may choose to immediately access the Calendar page.

Application_Design_Refined_JPG

(Note: Colours displayed are not exact to actual colours used.)

Reviewing my design, it could have used a more professional polish regarding both the visuals and mechanics, allowing the user to have more options and tools at their disposal. Not only that, but the logo design could have been clearer and more readable, enabling it to be recognizable from any distance. For the overall visuals, the use of stroke and outlines could have been minimized, allowing for a cleaner and subtler look to the design. A more in-depth look at fonts and font-pairing would have helped to create a more cohesive design and layout, allowing a better hierarchy of information to exist within the application design.

Muse Screen Flow Test:

Application Design Flow-Chart:

 

Overall, I believe my design is able to communicate its desired intent, however more work and a closer attention to detail would have ensured a more efficient and cohesive application.

Advertisements

5 Side-Scrollers Reviewed

Hollow Knight:

This slideshow requires JavaScript.

Visual Style:

Hollow Knight’s art style is beautiful and haunting, with the dark colour scheme evoking a sense of longing and melancholy, furthered by the other atmospheric elements of the game, such as audio and storytelling. The combination of hand-painted backgrounds, stylised character designs, careful use of colour, and fluid animations creates a beautiful cinematic experience. Various gameplay elements and mechanics are separated from the environment via colour, style, animation and design, allowing the player to make sense of the visual information that they are presented with.

Story/Themes:

Hollow Knight, while evoking a sense of melancholy and longing, follows an unwavering protagonist whom ventures into the ancient city of Hollownest. The adversity he faces, and friends he makes along the way, further contrast his small stature, and back-footed nature, as he ventures through this ruined world. Starting off with just a cracked nail, the player becomes more and more powerful as they continue their adventure, coming across various archetypes, themes and elements, some light-hearted, some dark.

Gameplay/Mechanics:

Gameplay revolves mainly around melee combat, general movement, dashing/dodging, and jumping. There is an energy-like resource that one collects, from both within the environment and fighting enemies, that allows the player to heal and charge up/use certain abilities. Adding to this would be the various ‘nail arts’ (special moves), and ‘charms’ that one may equip. These charms, equipped while sitting at a bench (save and healing station), allow the player to upgrade and specialise their character for different playstyles.

There are various hidden areas, upgrades and mechanics within the game, with the player being encouraged to seek them out. They may provide benefits such as; upgrades/charms, extra quests/lore, maps, and transportation routes.

The currency, Geo, is collected within the environment and from enemies, allowing the player to purchase upgrades from various NPCs, usually hidden throughout the environment/s, for their character.

Health-wise, the character has a few ‘points’ of health, of which can  be added to (the ‘energy meter’ can be added to/upgraded as well) via the purchase and discovery of items/upgrades within the environment/from NPCs.

 

Cuphead:

This slideshow requires JavaScript.

Visual Style:

A unique visual style is present in Cuphead, of which borrows from and pays homage to the Western cartoons of old, blending water-colour backgrounds with graphic cell-shaded animations and characters. Readability is paramount, with platforms, projectiles and enemies standing out from the background via the stark contrast between outlines and flat shading versus water-colour backgrounds and landscapes, the textures, volume of detail, and animations separating them from each other while still maintaining coherency.

Story/Themes:

The game revolves around two characters, Cuphead (main character) and Mugman, whom accidentally stumble upon the Devil’s Casino. There they are tricked into signing over their souls to the devil, who assigns them a task; collect a series of soul contracts from the indebted residents on the isle they inhabit to gain back their souls, or they remain under the Devil’s possession for eternity.

The themes, of course, involve hell and gambling, as well as various tropes and clichés spawned out from the era of animation upon which the game is based.

Gameplay/Mechanics:

The gameplay revolves around general movement, crouching, dodging/dashing, jumping and shooting, with various upgrades, weapon types and supers available via an in-game currency, earned within the optional run-and-gun levels within the game.

The gameplay revolves mainly around dodging various attacks, and learning the levels/bosses, progressing through a series of creative and unique boss fights. A parry function is present, allowing the character to charge up their super abilities by jumping when about to encounter any pink projectile or object within the game environment.

The character has limited HP, with each hit lowering the counter, of which can be added to via an upgrade that can be purchased with in-game coins.

 

Ori and the Blind Forest:

This slideshow requires JavaScript.

 

Visual Style:

Similar to Hollow Knight in regard to beauty and aesthetics, the hand-painted approach, focusing on aesthetics and readability, works wonderfully. Certain colours, like in Hollow Knight, are reserved for certain gameplay elements and mechanics. However, there is a greater range and intensity of detail, colour and atmosphere, with a variety of emotions being created through visual and auditory storytelling, furthered by the fantastic character and environment design.

Story/Themes:

The story, focusing around a small monkey-like being, involves heartbreak and adventure, crafting likeable, hateable, and quirky characters of which are communicated through visuals/design, audio, animation and gameplay. The once vibrant forest inhabited by the main character has fallen into ruin via the meddling of a gargantuan owl, the man villain, causing the environment to become hostile and dangerous, with the trees bearing no fruit and monsters lurking around corners. The caregiver of the main character, within the opening sequence, meets their end due to the declining nature of the environment. This spurs the main character on, hoping to solve the issues pervading its home.

Gameplay/Mechanics:

Gameplay revolves around general movement, shooting, jumping and swimming, with the character gaining extra abilities throughout the game that allow them to traverse previously inaccessible areas, of which is something that occurs within Hollow Knight as well.

The character has limited HP and ‘charge’, of which can be restored and upgraded via traversing the environment and discovering upgrades and areas of rest.

 

Shovel Knight:

This slideshow requires JavaScript.

Visual Style:

Shovel Knight, similarly to Cuphead, pays homage to what came before. In this case, however, it harkens back to the Super Metroid era of platforming, with the distinctive visual style of the platformers back in the day being revitalised. The pixel art aesthetic, evoking a sense of nostalgia in both new and old fans of platformer games, is executed beautifully. The sprites and backgrounds are not too complex, they are, instead, rather graphic and simplistic via their limited individual palettes and colour schemes/combinations.

Story/Themes:

The main character must attempt to rescue his friend, Shield Knight, and to do so he must defeat the members of “The Order of No Quarter”, who have been sent by the main antagonist, the Enchantress, to defeat him. The game touches on topics of heroism, friendship and evil.

Gameplay/Mechanics:

The gameplay revolves around general movement, jumping, attacking with a shovel, as well as various upgrades/special abilities that the character may purchase from a hidden vendor/NPC throughout most levels, or from NPCs within villages. The shovel that the main character possesses allows him to fight enemies, dig up treasure, or aim below him when attack enemies while jumping to bounce upon them.

An element of risk-and-reward is present in this game, where the player may choose to destroy checkpoints to gain greater treasure. Upon death, the player drops some of their currency, of which can be retrieved via collecting the flying sacks that spawn near where they last died. A similar mechanic is present in Hollow Knight, where upon death you lose a portion of your max energy, of which can be resolved via defeated your ‘shade’ near where you last died.

Completing the game allows the player to choose New Game Plus mode, allowing them to replay the game at a harder difficulty.

Super Metroid:

This slideshow requires JavaScript.

Visual Style:

Super Metroid, being one of the older platformers, still holds up strong to this day. As stated above, Shovel Knight borrows from this game in regards to aesthetics, with the pixel art style in this game being extremely ambitious for its time, with bosses being packed full of detail, contrasting nicely with the thematic environmental backgrounds.

Story/Themes:

The main character, Samus Aran, pursues Ridley, the main antagonist, who has stolen the Metroid larva Samus delivered to the Ceres Space Colony after her previous expedition. This larva, having believed her to be its mother, had imprinted itself upon her.

Gameplay/Mechanics:

Gameplay focuses on running, jumping, crouching and shooting, with other special movement options such as wall jumping (similarly to Ori and the Blind Forest and Hollow Knight), as well as the “Moon Walk” ability.

Power-ups are available throughout the game, allowing the player to unlock special abilities and areas of the game, similarly to Hollow Knight and Ori and the Blind Forest, two games that also feature backtracking that is unlocked via exploration.

 

References

En.wikipedia.org. (2017). Cuphead. [online] Available at: https://en.wikipedia.org/wiki/Cuphead [Accessed 14 Nov. 2017].

En.wikipedia.org. (2017). Ori and the Blind Forest. [online] Available at: https://en.wikipedia.org/wiki/Ori_and_the_Blind_Forest [Accessed 14 Nov. 2017].

En.wikipedia.org. (2017). Shovel Knight. [online] Available at: https://en.wikipedia.org/wiki/Shovel_Knight#Shovel_of_Hope_campaign [Accessed 14 Nov. 2017].

En.wikipedia.org. (2017). Super Metroid. [online] Available at: https://en.wikipedia.org/wiki/Super_Metroid [Accessed 14 Nov. 2017].

GameSpot. (2015). Ori and the Blind Forest Review. [online] Available at: https://www.gamespot.com/reviews/ori-and-the-blind-forest-review/1900-6416053/ [Accessed 14 Nov. 2017].

Parish, J. (2017). Metroid Game By Game Reviews: Super Metroid. [online] USgamer.net. Available at: http://www.usgamer.net/articles/metroid-game-by-game-reviews-super-metroid [Accessed 14 Nov. 2017].

Provo, F. (2007). Super Metroid Review. [online] GameSpot. Available at: https://www.gamespot.com/reviews/super-metroid-review/1900-6177708/ [Accessed 14 Nov. 2017].

Tucker, B. (2015). Retro Thunderdome – Metroid (NES) vs Super Metroid – Skirmish Frogs. [online] Skirmishfrogs.com. Available at: http://skirmishfrogs.com/2015/11/05/retro-thunderdome-metroid-nes-vs-super-metroid/ [Accessed 14 Nov. 2017].

USgamer.net. (2014). Daily Classic: 7 Reasons Super Metroid was an SNES Masterpiece. [online] Available at: http://www.usgamer.net/articles/daily-classic-7-things-that-make-super-metroid-a-timeless-masterpiece [Accessed 14 Nov. 2017].

Market Research + Legal, Ethical and Moral Considerations Regarding Application Design

Regarding the target audience, my application is designed for and aimed at young adults, especially university and college students, who need to track their tasks and deadlines in an efficient manner.

This presents a set of challenges, with this age group being in a transitionary stage between their teenage lives and that of adulthood. This modern era, in the context of both application design and design in general, simplicity and minimalism has been a key factor and common thread between many design solutions. Keeping in this vein, my application will aim to maintain a minimalist visual layout, as to not distract the user from their task; managing their workload, and completing said tasks.

In order to do this, I must find solve a variety of problems, with the solutions deriving from both abstract, psychological, association and design backgrounds. Providing a visual and feedback orientated link between related areas of the application will reinforce where the user is navigating to and from, also helping to divide the different menus and screens into manageable chunks that follow a clear visual and functional hierarchy.

Content-wise, students would require the functionality of both a calendar, To-Dos, and Reminders, allowing them to schedule in tasks for the day, as well as over-arching reminders for due-dates, deadlines and meetings. This would allow a student to keep track of all upcoming tasks, as well as completing incremental chunks of work as the days, weeks and months go by.

 

Important Elements to Include:

-Login Screen (Possibly, depending on whether the application is cross-platform or not etc.)

-Home Screen

-Calendar Screen

-To-Dos Screen

-Reminders Screen

-Logo and Name of Application

-Various Icons and Symbols (Calendar Icon/s, To-Dos Icon/s, Reminders Icon/s, Buttons etc.)

 

When it comes to the legal and ethical aspects of designing an application, one must always be aware of copyright and IP laws. Intellectual Property (IP) is a blankety term that refers to anything that is a tangible result of creativity, such as a videogame, movie or application design. Copyright, on the other hand, refers to the legal right that a person, company or organisation possesses regarding their Intellectual Property.

Intertwined with IP and Copyright would be trademarks, of which allow you to protect the logo and name of your company or design from those who might wish to replicate it. Not only does this protect others from stealing your company’s logo or name, but it helps reinforce and create a more trustworthy brand identity, solidifying your position in the industry and market as a more reputable competitor. Registering through the government is the only avenue of obtaining a trademark, however, the process of securing copyright is more open-ended. Where a trademark is more concrete, relating to a specific name or logo design, copyright refers to a broader collection of artistic, auditory, literary and code-related elements that have been created by a person. These creations and efforts are ‘copyrighted’ once they have been expressed, tangibly, in a medium. One may pursue specifically registering a copyright, for the added legal rights and protection, however this is not essential.

Related to copyright, but not exactly the same, would the Scène à faire. This concept references artwork and design elements that are required for something to work and are not able to be copyrighted, such as a log in button or search tool icon.

Morals and ethics are linked and attached to these concepts, with ethics relating to the widespread code of morality that influences people’s behaviour and perception of the actions committed by others. Applying these terms to IP and legality, morality influences people’s perceptions of business practices and design decisions, especially when relating to copyright and unjust monetary expectations on customers.

The symbols, icons and other design elements of the application must be readable and responsive, especially if the application has consequences that may reflect in your life, such as a banking app. Not only that, but these elements shouldn’t be directly stolen from other applications and designers, while not only being illegal, this practice is frowned upon and condemned by many consumers.

This relates to the readability of the layout, the user experience, as well as the efficiency of the application. Users want an efficient and enjoyable experience when using an application, especially one that they are paying for. Therefore, if an application demands a monetary value in exchange for its operation, and does not deliver upon its promises, customers may feel scorned regarding such business practices, possibly pursuing legal action if the consequences were dire enough.

 

Several IP, Law, Copyright and Trademark acts and laws:

 

-Copyright, Designs and Patents Act 1988 (CDPA)

-Copyright Directive

-ACTA trade agreement

-Copyright (Computer Programs) Regulations 1992

-The Copyright and Related Rights Regulations 2003

 

References

BBC – What is Copyright? – Copyright. (2017). [online] Bbc.co.uk. Available at: http://www.bbc.co.uk/copyrightaware/what-is [Accessed 24 Nov. 2017].

Copyright. (2017). [online] En.wikipedia.org. Available at: https://en.wikipedia.org/wiki/Copyright [Accessed 24 Nov. 2017].

Duhaime, L. (2013). Copyright. [online] Duhaime.org – Learn Law. Available at: http://www.duhaime.org/LegalResources/IntellectualProperty/LawArticle-116/Copyright.aspx [Accessed 24 Nov. 2017].

Duhaime, L. (2017). Scenes A Faire Definition. [online] Duhaime.org. Available at: http://www.duhaime.org/LegalDictionary/S/ScenesAFaire.aspx [Accessed 24 Nov. 2017].

How to Register a Trademark for a Company Name – Small Business – WSJ.com. (2016). [online] Guides.wsj.com. Available at: http://guides.wsj.com/small-business/starting-a-business/how-to-trademark-a-company-name/ [Accessed 24 Nov. 2017].

Intellectual property and your work – GOV.UK. (2016). [online] Gov.uk. Available at: https://www.gov.uk/intellectual-property-an-overview/what-ip-is [Accessed 24 Nov. 2017].

Intellectual Property Office, (2014). Copyright Acts and related laws – Publications – GOV.UK. [online] Gov.uk. Available at: https://www.gov.uk/government/publications/copyright-acts-and-related-laws [Accessed 24 Nov. 2017].

Intellectual Property Office, (2017). Intellectual property: Copyright – GOV.UK. [online] Gov.uk. Available at: https://www.gov.uk/topic/intellectual-property/copyright [Accessed 24 Nov. 2017].

Intellectual property. (2017). [online] En.wikipedia.org. Available at: https://en.wikipedia.org/wiki/Intellectual_property [Accessed 24 Nov. 2017].

Margaret, (2016). IP Lawyer Training Game. [online] Open Law Lab. Available at: http://www.openlawlab.com/2016/11/30/ip-lawyer-training-game/ [Accessed 24 Nov. 2017].

Methenitis, M. (2007). Law of the Game: Copyright: What Every Gamer, Developer, and Aspiring Game Developer Needs to Know. [online] Lawofthegame.blogspot.co.uk. Available at: http://lawofthegame.blogspot.co.uk/2007/06/copyright-what-every-gamer-developer.html [Accessed 24 Nov. 2017].

Nowak, P. (2010). MythBusting: Game Design and Copyright, Trademarks, and Patents (US Law) | BoardGameGeek | BoardGameGeek. [online] Boardgamegeek.com. Available at: https://boardgamegeek.com/thread/493249/mythbusting-game-design-and-copyright-trademarks-a [Accessed 24 Nov. 2017].

Quinn, G. (2011). Patenting Board Games 101 – IPWatchdog.com | Patents & Patent Law. [online] IPWatchdog.com | Patents & Patent Law. Available at: http://www.ipwatchdog.com/2011/12/22/patenting-board-games-101/id=21356/ [Accessed 24 Nov. 2017].

Scènes à faire. (2017). [online] En.wikipedia.org. Available at: https://en.wikipedia.org/wiki/Sc%C3%A8nes_%C3%A0_faire [Accessed 24 Nov. 2017].

Sellars, S. and Bicknell, P. (2015). Practical Law. [online] Uk.practicallaw.com. Available at: http://uk.practicallaw.com/2-598-3565 [Accessed 24 Nov. 2017].

Contractual, Legal, Ethical and Professional Issues Within the Games Industry. (2012). [online] Hsunit13.blogspot.co.uk. Available at: http://hsunit13.blogspot.co.uk/2012/05/contractual-legal-ethical-and.html [Accessed 24 Nov. 2017].

Mattwattsmedia, (2012). Legal, Ethical and Contractual constraints in the Media Industry. [online] Slideshare.net. Available at: http://www.slideshare.net/Mattwattsmedia/legal-ethical-and-contractual-constraints-in-the-media-industry-13456879 [Accessed 24 Nov. 2017].

Takahashi, D. (2004). Gamasutra – Ethics Of Game Design. [online] Gamasutra.com. Available at: http://www.gamasutra.com/view/feature/2181/ethics_of_game_design.php?print=1 [Accessed 24 Nov. 2017].

Victory Media, (2014). The Game Industry – contractual, legal & ethical. [online] Slideshare.net. Available at: http://www.slideshare.net/jcolebrook/the-game-industry-contractual-legal-ethical [Accessed 24 Nov. 2017].

Auza, J. (2015). 5 Best Calendar Apps for Google Chrome. [online] Junauza.com. Available at: http://www.junauza.com/2015/09/5-best-calendar-apps-for-google-chrome.html [Accessed 24 Nov. 2017].

Conti, G. (n.d.). How to Manage your Personal Tasks with a Project Management App – The Ultimate Guide to Project Management – Zapier. [online] Zapier.com. Available at: https://zapier.com/learn/project-management/personal-project-management-app/ [Accessed 24 Nov. 2017].

En.wikipedia.org. (2017). Ethics. [online] Available at: https://en.wikipedia.org/wiki/Ethics [Accessed 24 Nov. 2017].

En.wikipedia.org. (2017). Morality. [online] Available at: https://en.wikipedia.org/wiki/Morality [Accessed 24 Nov. 2017].

Gale, T. (2005). Design Ethics – Dictionary definition of Design Ethics | Encyclopedia.com: FREE online dictionary. [online] Encyclopedia.com. Available at: http://www.encyclopedia.com/science/encyclopedias-almanacs-transcripts-and-maps/design-ethics [Accessed 24 Nov. 2017].

Hindy, J. (2016). 10 best calendar apps for Android. [online] Android Authority. Available at: https://www.androidauthority.com/best-calendar-apps-for-android-331512/ [Accessed 24 Nov. 2017].

Jawaid, Y. (2014). Sign In / Login UI Designs | Inspiration | Graphic Design Junction. [online] Graphicdesignjunction.com. Available at: http://graphicdesignjunction.com/2014/03/sign-in-login-app-ui-designs/ [Accessed 24 Nov. 2017].

Klosowski, T. (2017). The Best Calendar App for Mac. [online] Lifehacker.com. Available at: https://lifehacker.com/5833231/the-best-calendar-app-for-mac [Accessed 24 Nov. 2017].

MeisterTask. (2017). Task Management for Teams – MeisterTask. [online] Available at: https://www.meistertask.com/?connect&email=irolf%2540me.com [Accessed 24 Nov. 2017].

Play.google.com. (2016). Business Calendar. [online] Available at: https://play.google.com/store/apps/details?id=netgenius.bizcal [Accessed 24 Nov. 2017].

Play.google.com. (2017). Google Calendar. [online] Available at: https://play.google.com/store/apps/details?id=com.google.android.calendar [Accessed 24 Nov. 2017].

Raj, M. (n.d.). App Login Screen. [online] PSD Repo. Available at: https://psdrepo.com/free-psd/app-login-screen-freebie/ [Accessed 24 Nov. 2017].

Thundertask.com. (n.d.). ThunderTask: A simple task management tool that makes your life easier. [online] Available at: http://thundertask.com/ [Accessed 24 Nov. 2017].

Side-Scroller Story and Game Concept

The story and game I am currently developed may be summarised like thus;

 

A robot, powered by sunlight, wakes up after millennia on standby in low power mode. The world, dominated by metal/synthetic based life forms, has started to fall to ruin by a biological plague. This plague, of which catalyses synthetic materials to organic matter has started to progressively consume its way through a complex network of cities.

 

This robot, controlled by the player, possesses a flaw in their internal network and operating system. This flaw lead to him being placed in a standby mode while ‘doctors’ worked on figuring out and curing his ailment. The machinery that held him in stasis eventually ran out of power, ejecting him into the current time period.

 

The robot that the player controls is not an original synthetic life-form, but is instead a robot created as a servant to serve those higher up in the social and economic hierarchy. Being the favourite of a more influential synthetic being, he was put under stasis while his ‘glitch’ was being analysed for a cure.

 

He then leaves the facility that he wakes up in, venturing forth into the decrepit world he once knew. He discovers that the flaw of his, one that causes over-powered energy discharges, works to his advantage when encountering hostile lifeforms. Driven by a desire to understand why his world has fallen into ruin, what happened to his brethren, and hoping to finally cure his ailment, he strikes out towards the capital in a desperate bid to find help and make sense of the current situation.

 

Along the way, not only does his ‘flaw’ save him many times from crazed synthetic life forms, half consumed by the aforementioned biological plague, by allowing him to discharge high levels of energy in their direction, but it also uses the abundance of solar energy to protect his machinery from said biological plague. A thin layer of electricity coats his outer matter, frying and eliminating any biological matter that hopes to latch on and seep into his circuity.

 

The mechanics of these are explained through the use of visual and auditory storytelling, with animations and accompanying diegetic and non-diegetic sounds supporting the message being told to the player.

 

Biological life-forms are seen absorbing old machinery, however, when a tendril touches the main character while he is in sunlight it recoils from a static/electrical shock. The same occurs when the character is at full energy level, of which is required if the character is infected when not meeting the right requirements, for negating the effect to ‘dispel’/cure it. Synthetic life forms have micro solar panel-like ‘cells’, absorbing and converting the energy into electrical currents that then power their bodies, processes and networks.

 

Several bosses and enemy types will have different views on the biological plague; some may embrace it, some may hate it and attempt to exterminate it, some wish for a pure and exalted race of synthetics, some may be hoarding energy and controlling energy nodes/weather modifiers etc.

 

The different factions will have different aesthetics, enemy types and mechanics, as well as different motivations and opinions regarding the main character.

 

You must find and reconstruct energy nodes to help power up sections of cities and environments, their inherent energy levels having been lowered through the changes in weather and lack of sunlight in many areas. Once back online, the energy nodes will enable weather modifiers/manipulators to clear the skies and provide greater and more powerful sources of sunlight to shine down. This changes the environments, with the synthetic life-forms and miscellaneous objects changing in various ways to reflect the influx of power. Not only that, but one is then able to progress to the next area via the opening of a door or the defeat of a guardian/boss.

 

Collecting the various parts required for the energy nodes requires one to explore the zones, horizontally and vertically. Some areas require that you complete the energy nodes to progress, others requires you to defeat a boss and/or guardian, or complete a puzzle and/or quest. Even if the node is not required, it does make progressing through the area easier, and is especially helpful during difficult boss fights. The more nodes you reconstruct throughout the game, the easier fights may become.

 

Narrative will be delivered purely through visuals and audio, with some text-based pick ups or signs in the environment. The character, for the most part, is silent and reclusive, having spent the majority of his time either in stasis or avoiding others for fear of hurting them due to his flawed systems/processes.

 

Visually, the original synthetic society strove to be a utopian paradise (with heavy influences from modern and futuristic architectural concepts), with flowing and organic forms. Contrasting, yet complementing simultaneously, would be the organic plague, of which possesses similar flowing forms, however the textures, colours, shapes and forms that it creates intertwine with and assimilate into the original structures and forms present in the world.

 

The original synthetic life-forms will possess many similarities to the life-forms present on earth, however their materials and evolutionary tracts differ greatly. For the most part, the player will come into contact with the robotics, machinery and biological plague as enemies, especially in the early levels of the game.

 

NPCs, certain enemies and bosses may provide dialogue options and/or speak to the player when not prompted to do so. The dialogue provided will help build up the world, as well as the characters within it. Certain bosses and enemies may be spared should you share their ideology, with different rewards based upon how you dealt with them. The same may go for collectables and mini-quests, with NPCs sheltering away from the plague and eager for/to help, willing to reward those that come to their aid.

 

Various factions and communities have built up and fallen over time, with several gaining traction and developing into a formidable force, holding and improving territories. These different areas reflect that, with shelters, props and environmental factors indicating the predominant inhabitants.

 

Bodies and augmentations can be altered and modified, allowing different enemies and friendlies to customize themselves in a way that depicts their intentions. Some, however, still appear (underneath, and apart from, the biological plague covering/infiltrating them)  as they do before the plague hit. This also helps distinguish between those in different social classes before and after the plague hit, with augmentations being scavenged and reproduced using makeshift and repurposed factories/assembly lines.

 

Different cores and weapon types may be added and combined, providing different combat options and effects when combined together. These effects may influence your movement, damage, weapon type/spread/speed/attributes, regeneration/absorption of energy and more.

 

The player must utilise jumping, dashing/dodging, shooting/aiming, shielding, powering/charging, general movement and weaponry upgrades/augmentations to their advantage. You may have a specific weapon type, however, you may augment it with an upgrade that provides different benefits (some of which may carry over from/be similar to another weapon’s properties).

 

There will be health and energy bars, with either the lack or abundance of these resources affecting the player’s character in different ways. Charging your energy levels requires you to stand in sunlight, or use a recharge node/port, and when doing so allows you to use your abilities to a greater extent, especially your ‘channeled’ shield ability (of which drains energy the longer you hold it). The player may change their current weapon type and augmentation at any time, with this customization being available through a menu/inventory system (You may need to be near a certain node/station to customize your weapons/augmentations).

 

The different weapon types and augmentations are visible through their firing patterns and properties, as well as the visual representations on the character’s sprite. Different colours, shapes and forms represent different customizations/combinations.

 

Different areas will be affected differently by the plague, of which will affect the enemies and their motives within those areas. Moving more and more towards the capital, the player may take note that the patchiness of the plague morphs into a steadier covering and epidemic. Upon discovery of where the Central Core is housed, the revered synthetic being that orchestrates their society, the player finds that the area/building/tower is overrun by the plague, with tendrils and vines of misshapen organic and synthetic matter intertwined amongst each other.

 

Auto-defence systems and guardians are ‘infected’, their programming malfunctioning and overridden, unlike the other beings where they are in the middle of reprogramming (causing them to go mad) these beings have a completely altered perception of the world and its inhabitants, seeking to destroy all synthetic life-forms. However, a large portion of their matter is still synthetic, yet covered and intermingled with organic matter.

 

The robot, upon discovering that the Central Core is the source of this plague, must use his own flaw to defeat the glitched Central Core that is creating and perpetuating the epidemic of organic matter.

 

There are several avenues that the story may depart down, of which I will list here:

 

-The Central Core did this on purpose, wanted to start anew and create a perfect race utilizing the marriage of organics and synthetics?

 

-Was glitched/flawed due to some other reason?

 

– Someone reprogrammed it, having acquired a sample of organic matter offworld and used it to alter the Central Core?

 

The player must defeat the guardians of the Central Core, possibly saving and freeing it or destroying it as well?

 

-Another boss fight, where you must defeat the being within the core controlling it and/or the one who reprogrammed it?

 

-All powerful celestial being is imprisoned inside, his mind being mined in order to create and program an entire synthetic planet?

 

-Experiment in synthetic evolution derived through biological processes?

 

The story of this game, especially relating to the main character and his development, is influenced by The Hero’s Journey, a re-occurring story-telling theme throughout history and mythology. To summarise, The Hero’s Journey usually occurs in a series of stages; Departure, Initiation, and Return. All three of these relate to the character’s journey, especially since most characters involved with this formula are usually flawed in some way. The presence of flaws within a character, whether it be physical, mental or emotional, help create a more real and believable character, one that some may be able to identify with.

Notable examples of The Hero’s Journey would include;

-Star Wars by George Lucas

-The Hero with A Thousand Faces by Joseph Campbell

-The Lord of the Rings by J.R.R. Tolkien

-A Variety of Myths and Legends

-The Story of Theseus

 

References

McQuire, S. (2016). What Your 6 Favorite Movies Have in Common [Infographic] – Venngage. [online] Venngage. Available at: https://venngage.com/blog/heros-journey/ [Accessed 3 Nov. 2017].

Mythologyteacher.com. (n.d.). MythologyTeacher.com. [online] Available at: http://www.mythologyteacher.com/The-Hero%27s-Journey.php [Accessed 3 Nov. 2017].

Ray, R. (n.d.). Hero’s Journey Examples | Monomyth | Heroic Journey. [online] Storyboard That. Available at: http://www.storyboardthat.com/articles/e/heroic-journey [Accessed 3 Nov. 2017].

Shmoop.com. (n.d.). Theseus: Birth and Early Adventures Hero’s Journey. [online] Available at: https://www.shmoop.com/theseus-birth-and-early-adventures/heroes-journey.html [Accessed 3 Nov. 2017].

YourDictionary. (2014). Examples of Each Stage of a Hero’s Journey. [online] Available at: http://examples.yourdictionary.com/examples-of-each-stage-of-a-hero-s-journey.html [Accessed 3 Nov. 2017].

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

 

 

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.