My App Concept Development

Working Title – Auroral Tarot/ Roseus Tarot

Genre – Tarot reading app

Target Audience – My target audience is spiritual practitioners who may be part of pagan or Wiccan practices. Their ages will likely range from 14 – 40.

Outline

Visual Elements / Mise en Scene- My app will have a pink and blue colour scheme, relating to the potential name of the app, Auroral Tarot. Auroral referring to the dawn.

Audio – Soundtrack, Effects (Foley); Music. Remember to state reasons for using certain sounds and why?

Rationale – Ive chosen this idea as I already have an interest in and some knowledge of tarot cards. Having used apps related to this subject, I am aware of the required features and have ideas for new features which will improve the user’s experience.

Primary and Secondary Research – As secondary research I have reviewed a tarot app I currently use and downloaded a few which I have not seen before.

Legal and ethical considerations – Are there any legal or ethical considerations you might need to be aware of and is your product being shown on television, film or radio?

Questions to consider before designing my app

Summarise app in a few sentences: 
This app is for current and aspiring tarot readers who want a portable and efficient way of reading tarot cards. The app provides both information on each card and the ability to pick out cards from a digital deck. The user can pick cards from an existing spread or create their own custom spreads which they can save for future use.

Who is the target audience:
People who have interest in tarot readings. This audience usually is very spiritual and sometimes involved in pagan religion. The design of the app should be gender and age neutral.

Who will the app compete with:
The app will mainly compete with other tarot reading apps. However, no other apps offer the feature of using custom spreads. The Tarot Sampler app allows for a “Free Form Spread” where the user can place their cards where they wish, however the is no ability to assign a meaning to each card or to save the layout.

Advertisements

Tarot Reading Apps Research

Golden Thread Tarot 

Aesthetics: The colour scheme of this app is limited to gold and shades of blue. The background is a shade of dark grey which contrasts well with the light blue and gold graphics and text. Menus and page titles are turquoise and tarot card names are gold which helps to assign colour correspondences in navigating the app. The graphics are both turquoise and gold to match the scheme. Text is in white for ease of reading.

The graphics are minimalist line art with symbolism related to each card. Original tarot card designs are quite detailed so these graphics translate the key aspects of each card with the title for extra clarity. For example, the Knight of Cups shows a man on a horse holding a cup with a mountain and river in the background and plants in the foreground.

Overall, I feel the app is very visually appealing. The colour scheme uses the complimentary colours, orange and blue.

Screen Shot 2017-10-09 at 13.55.29.pngScreen Shot 2017-10-09 at 13.55.11.png
Purpose + Features: The key features of this app are: reading tarot from pre-made spreads, checking card meanings and being introduced to learning to read tarot through short tutorials. It also allows you to log any physical readings you have done using the app’s spreads which can be looked at in the “My Log” section.

A feature which I find interesting is, when reading the cards digitally, they will show facedown in the shape of the spread, allowing the user to tap on them and turn them over individually in any order they wish.

Brief tutorial

Screenshot_2017-10-09-12-56-33Screenshot_2017-10-09-12-56-42Screenshot_2017-10-09-12-56-44Screenshot_2017-10-09-12-56-46

Home page

Screenshot_2017-10-09-12-57-16Screenshot_2017-10-09-12-58-45

Menu + Card information

Screenshot_2017-10-09-12-57-27Screenshot_2017-10-09-12-59-17

Getting a reading

Screenshot_2017-10-09-12-59-32Screenshot_2017-10-09-13-02-57Screenshot_2017-10-09-13-03-05

Tarot Academy

Aesthetics: This app uses black, white and shades of grey. The background is grey swirls with semi transparent black boxes under-laying white text for ease of reading. The graphics used are small white and simple, placed next to each title. Overall, I feel the app does not look aesthetically pleasing; this is due to the textured background and gradient tab bar. Both are too visually complex and messy-looking. Having plain backgrounds with, perhaps, a few minimalist graphics would make the app appear much more organised and professional.

Screen Shot 2017-10-09 at 13.57.14.png
Purpose + Features: The key features of this app are: reading tarot from pre-made spreads, checking card meanings, logging previous readings and calculating birth cards. The app also has a few articles about tarot such as “Important people in the history of Tarot”.

Loading Screen + Home Page

Screenshot_2017-10-09-13-04-41Screenshot_2017-10-09-13-06-34

Getting a reading

Screenshot_2017-10-09-13-06-53Screenshot_2017-10-09-13-06-59

Card information

Screenshot_2017-10-09-13-07-07Screenshot_2017-10-09-13-07-11

Tarot Sampler

Aesthetics: This app is also not particularly aesthetically pleasing. Using a jpeg image as a background, rather than a plain colour or pattern, often appears crude with text layered above it. Inside the app, the colour scheme includes a quite jarring combination of medium-grey and beige.

Purpose + Features: The key features of the app include: a database of card meanings and different tarot decks;  reading tarot from spreads or drawings cards for a free-form spread; and picking a card of the day. A feature I find interesting is, before drawing cards, you can have the app shuffle them in different ways such as cutting the deck. When drawing cards there is the option to pick individual cards for a reading, however, the app doesn’t  show all 78 cards which I feel takes away from the experience.

Screenshot_2017-10-14-16-54-03Screenshot_2017-10-14-16-54-28Screenshot_2017-10-14-16-54-47Screenshot_2017-10-14-16-55-13Screenshot_2017-10-14-16-55-44Screenshot_2017-10-14-16-57-52

 

 

 

Social Apps

FACEBOOK

Wireframes and journey

Facebook-Lite-main-menu-settings-840x494

Aesthetics

The Facebook has an iconic blue which is simplistic design. The app has a very basic list-like structure of buttons that redirects the user to the page. The background of the app uses a full white colour with a blue tab bar that runs along the top of the screen

Purpose/UI and UX

The app is mainly used to share posts that consist of videos, photos, text and gifs. it is also used to communicate to friends in real time instant messages. The app uses basic mobile patterns such as a tab bar, pull out menu and gesture-based navigation

SNAPCHAT

snapchat-how-to-take-photos-top-bar

Aesthetics

The app consists of simplistic shapes and colours. It also places buttons at bottom right and left of the screen so it doesn’t cram a lot of information on the screen. The app shows a hierarchy through the size of buttons, the photo taking button is the largest on screen which fits the purpose of the app. The smaller buttons lead to other features such as chat, shown as a message icon in the bottom, and the stories page, shown as a three white circles. The main colours used are purple, red, blue and primarily yellow. The first three are associated with video, photo and text and the last with the logo.

Purpose/UI and UX

The app is photo/ video-based social media that utilises funny and weird filters to share or just upload to friends and family. The app also has memories feature that keeps all of your uploaded snaps saved so you can rewatch them later on or repost it. The UI is very fast and simple

Snapchat-1044693301

WHATS APP WIREFRAME:

Snapchat-1909834263

SOCIAL APPS

Characteristics of successful social media apps (2017):

Bright colours, e.g yellow in sc, green in WhatsApp, blue in FB

Bold typography

In-app gestures
Used to access features. e.g. zoom in camera, swipe between pages, access maps

Authentic photos

Minimalism

Hand drawn graphics + icons

Gifs

Snapchat-527419032Snapchat-1938652577Snapchat-2021063471

BASIC WIREFRAME:

3D Modeling Tutorials

Polygonal Modelling
Polygonal modeling is an approach for modeling objects by representing or approximating their surfaces using polygons. This type is best for real-time rendering.

NURBS
Non-Uniform Rational B-Splines
Used for modeling surfaces with complex curves
It is a mathematical model used in computer graphics but a mathematical understanding is not necessary for its use
“NURBS is popular because the objects are easy to manipulate interactively, and because the algorithms that create them are both efficient and numerically stable.”

Topology
Topology is the geometric characteristics of the surface of a 3D object. Artists strive for clean topology which involves: “efficient polygon distribution, proper placement of polygonal edge-loops, few or no triangular faces (as opposed to 4-sided “quads”), and clean precise creases that minimize stretching and distortion.”
Good topology is essential for fast framerates and good deformation. Vertices and edges need to be placed correctly for good deformation so that the model bends and stretches well when skinned. This is important where the model deforms most such as hands and cheeks.

Asset Management + Saving a Project
Projects should be saved in a folder and file names should not have any spaces.
Assets should be stored properly as otherwise, the program may not be able to locate the assets used next time it opens.

Maya Shortcuts
Space – views
F – frames object
A – frames scene
Green frame – object mode
Q – select
W – move
E – scale
R – rotate
+ – – scales manipulator handles
S – sets all object information to keyframe

Columns

In this tutorial, I made a basic Greek temple structure with columns and steps.

Placing Objects in Scene: Can select basic shapes from the bar or for more options, select from the menu.

Screen Shot 2017-10-02 at 11.51.44.pngScreen Shot 2017-10-02 at 11.52.04.png

Channel Box: Primary and quickest way of editing object attributes accurately. Screen Shot 2017-10-02 at 11.49.47.png

Snap to point: moves the object to the closest control vertex or pivot point.
Holding down “D” allows you to move the objects pivot point. These points are used for precision
.Screen Shot 2017-10-02 at 10.49.13.png

Duplicate: to duplicate an object you press CMD+D. Maya uses duplication rather than copy/paste.

Perspectives: when spacebar is tapped, 4 views of the scene appear. Three of these are each axis (x,y,z) and the last is the 3D perspective view. To navigate these, the cursor must be placed on the required screen and spacebar tapped again.Screen Shot 2017-10-02 at 10.48.53.png

Group: CMD+G for a model comprised of several objects to be moved as one. Also, become grouped under one heading in the outliner panel.

Insert Edge Loop: Found in the mesh tools menu. Used to split polygon faces. In this case, we used it twice per face so that the center could be extruded, creating a step.Screen Shot 2017-10-02 at 10.48.34.png

Layers: In display menu, there is a layers tab. New layers can be made by clicking the layers tab and clicking “Create Empty Layer” or “Create Layer From Selected.”

Screen Shot 2017-10-02 at 11.53.33.pngScreen Shot 2017-10-02 at 11.53.26.png

Finished Model

Screen Shot 2017-10-02 at 10.48.23.png

 

 

Basic Keyframes

Screen Shot 2017-10-02 at 10.52.56.png

Timeline + frame range
Here you can select individual frames and the range of frames you want to see on the timeline. Applying a frame adds a red line to the timeline.

Screen Shot 2017-10-02 at 10.54.29.png

Sets a frame which only takes information from X translation.
To do this you right click and select “key selected”

Screen Shot 2017-10-02 at 11.40.48.png

To watch the animation inside Maya there are playback options.

Screen Shot 2017-10-02 at 10.57.41.pngScreen Shot 2017-10-02 at 10.57.52.pngScreen Shot 2017-10-02 at 10.57.56.png

Frame 1 – Frame 13 – Frame 25
The cube moves along the X-axis for 1 second.

Screen Shot 2017-10-02 at 10.59.35.pngScreen Shot 2017-10-02 at 10.59.41.png

Frame 24 – Frame 48
When you double the amount of time it takes for the object to move the same distance, the speed halves.

Screen Shot 2017-10-02 at 11.00.47.png

Frame 38
The amount of time is doubled again so the last object moves the slowest.

Screen Shot 2017-10-02 at 11.10.25.png

To select all 3, drag down along them. Writing a number in will apply it to all selected.
Here I am rotating the cone by 360 degrees and applying a keyframe at the end of its translation at 72 frames.

Screen Shot 2017-10-02 at 11.10.33.pngScreen Shot 2017-10-02 at 11.10.52.png

To create and apply materials, the Hypershade window is used.

Screen Shot 2017-10-02 at 11.42.00.pngScreen Shot 2017-10-02 at 11.42.13.png

The Hypershade window uses node-based programming. “Lambert” is a basic block coloured material. The colour can be changed to the side of the window by clicking on the coloured rectangle and selecting from a colour-wheel.

Screen Shot 2017-10-02 at 11.23.57.png

Screen Shot 2017-10-02 at 11.24.01.png

Screen Shot 2017-10-02 at 11.25.23.png

To apply a material, you select the object, hold the right mouse button on the material and select “Apply material selection”.

Screen Shot 2017-10-02 at 11.23.19.png

 

Bouncing Ball

Screen Shot 2017-10-16 at 10.12.16

Area/resolution to be shown when using the camera in Maya.

Screen Shot 2017-10-16 at 10.14.39

Interactive Creation-  Allows editing of various attributes while creating a polygon primitive.

Screen Shot 2017-10-16 at 10.26.30
Gives a menu with animation oriented tools.

Screen Shot 2017-10-16 at 10.27.05
A graph form for viewing the X, Y and Z transformations. A flat line shows that values haven’t been changed.

Screen Shot 2017-10-16 at 10.31.21
This button eases frames so that the animation appears less jagged.
Screen Shot 2017-10-16 at 10.31.27

Screen Shot 2017-10-16 at 11.02.34.png
To be able to edit each tangent separately they must be “broken”.

Screen Shot 2017-10-16 at 11.03.09.png

A key principle of animation is squash + stretch where the object deforms to match its movement. This is done by changing the X and Y scale of an object and applying it to the keyframe.

Screen Shot 2017-10-16 at 11.12.53Screen Shot 2017-10-16 at 11.13.00

Game Concept Development

plot_brainstormpurpose_brainstorm

How to write a Treatment

Working Title – 

Genre – Side-scroller

Duration – One level/stage

Target Audience – Anyone interested in indie video games. Roughly ages 10 – 30. 

Outline – Reneare lives in forest with the secretive elven tribe of archers, druids, healers and respected elders. When it is profecised that the eclipse realm will be opened by the mages residing in the capital city, as is tradition, it is decided a champion will be sent out on their quest to secure peace. Unsurprisingly, the champion called forth by the villages eldest elder is Reneare; the tough, raucous yet gunning sort who would prefer to wield a greatsword than a druids staff. 

As she sets off, venturing out of the familiar forest, the games mechanics are revealed. Ah fellow elf is seen and can be spoken to, an npc who offers vital information and guidance. Forest creatures, far from the village, are not accustomed to fearing elves and will attack, giving the player gold and experience which can be used for bartering and character development. 

Character Breakdown – Reneare, warrior elf. Young for her race, 30 compared to the average 170 year lifespan of the forest elves. Well built, tall and easily wields a human claymore. Now wears full armour made from light yet durable dwarven metals in a silver colour with golden/peach tones. Naturally short tempered yet possesses the social tact and bartering skill of her people 

Warren, human mage. Belonging to the mages guild in which he grew up and studied. Living in capitol city sculpts a person quite differently than a forest village, yet Warren and Reneare both want to be powerful and reach their full potential. Rather than being the village champion, Warren hopes to accomplish this by leading the mages in opening a gate to the eclipse realm. According to ancient books, the eclipse realm has many great secrets which will deliver unimaginable powers to those who decrypt them. 

Visual Elements / Mise en Scene-  Visually, my game will use vector assets made on illustrator. Backgrounds will be layered and move independently to create a paralax effect. 

Audio – My audio would be comprised of soundtrack and sound effects. 

Rationale – 

Primary and Secondary Research – My primary research involved playing games in the genre I’m making and with the theme I’m using. 

Requirements and resources – My required resources are the college Macs, their software and my graphics tablet which are all readily available to me. 

Constraints and Contingency – My constraints may include my lack of experience. 

Legal and ethical considerations – Legally, I must be aware of copyright laws and not use others intellectual property without permission. 

Budget – 

Schedule – 

App Research

 

The iPhone was first released in 2007 and since then almost 2 billion people today rely on smartphone technology. The launch of the iPhone caused the creation of mobile apps to take root, apps which previously had only existed to support basic computer functions.

Some of the first apps included:
PhoneSaber – An app which provided a “vroom” sound effect when the phone was waved around. This app didn’t have a purpose but was more so for showing off the new technology.

The New York Times app: An app which still exists and showcases 9 years of development. The most prominent change in this app and many modern ones is the ability to operate without Wi-Fi.
Image result for new york time appImage result for new york time app 2008

Recently, with the advancements in technology of computers, physical media has become more irrelevant and disc drives are being scrapped. This is due to:
– less requirement of extra, portable storage as modern hard drives are being able to store much more data than its predecessors.
– the reduced size of mobile computers as disks are larger than the space it would be worth designating to a disk drive.
– the rise of non physical media and apps
Starting with ripping CDs to mp3 format for listening to music on phones, it has become increasingly popular to have digital copies of all forms of media. Steaming apps and digital stores in particular have aided this. For example, Spotify provides any song imaginable for download and offline listening; Netflix does the same with films and series; Steam has become the most popular game marketplace for digital download and digital stores such as the Google Play store sell books, movies, music and other forms of media. Having such easy access to these over the internet makes the effort of procuring digital copies almost inefficient.

There are many things to consider when designing an app to provide an efficient UX.
1) Simple, easy to navigate menus
2) Progressive onboarding to ease the user into the app
3) Fluid layouts which adapt to differing screen sizes
4) Predictable design, the app works how the user would expect
5) Skeleton screens to maintain user interest while the app is loading
6) Consistency in design
7) Use familiar mobile patters e.g. drop down, sliders, animations
8) negative space, focuses user attention to important elements
9) Optimal readability, use of typography
10) Chunking content through use of subheadings and bolding

Well Designed Apps-

  1. Gmail
    1. The Gmail app opens on a screen with a list of emails in the centre with a red bar at the top of the screen and 3 buttons. On the top left is the menu button, shown as the universal symbol of 3 horizontal lines. The menu has quite a bit of information but ever category has a title and thumbnail for understanding .
    4. The app works as expected due to conventions of app design being applied effectively. The top left has a menu button, the top right has a search button and the bottom left has a circular button with
    6. The app has consistency in design throughout all its pages; there is a red bar at the top of the screen with a button on the top left and right and a light grey background with horizontally listed emails/settings to click on.
    7. Hamburger menu, tab bar.
  2. Human
    1. This app also uses a hamburger menu which opens a list of pages which can be tapped. 
    2. On start-up the app provides a short slide show explaining its purpose.
    6. The app is very simplistic and has a consistent gray-scale minimalist theme
    7. Hamburger menu, tab menu
    8. This app greatly utilises negative space. A lot of the screen is black background which draws the eye to the key features. The lack in text emphasises the main purpose of the app, a large white text which says “0 min” and shows how many minutes of active movement are done. The centre of the screen has a semi-transparent grey map which emphasises the other main feature of the app, being able to see fellow app users in the area and their progress.
  3. Instagram
    1. The “menu” consists of a bar of thumbnails and the bottom of the screen. The graphics are universally understandable with a house for the home page, a magnifying glass for the search page and a plus sign for uploading content, etc.
    3. The app adapts to the device it is used on by changing the width of the posts and menu bar.
    5. Skeleton screens are used while loading where the caption of the photo will show while the photograph loads onto the grey square placeholder.
    6. The design is consistent in its white, grey and black colour scheme and general minimalism. Everyone’s profile page has the same layout and every page either has photos in a grid or one after another to scroll through.
    7. Gesture based navigation, tab bar.
    9. The app is aimed at teens and young adults so the font is an average size which is readable to most. There is the option to change language but none to change font size, giving the app average accessibility.
    10. Chunking is used to separate each post; the username will show up in bold to indicate a new post, then the photo is shown, then the caption.
    Formal Elements:
  4. Everlist
    1. The menu opens out from the left of the screen and contains page names with related thumbnails.
    2. Provides short pop up tips for using the app.
    4. The app’s layout is almost identical to that of Gmail; There is a menu icon in the top left, a search icon in the top right and a circular symbol in the bottom right  which gives the option to write new notes.
    6. The apps design is consistent as there is a green and grey colour scheme throughout and each page has a green tab bar at the top of the screen. All the main content of each page can be found in the grey centre of the screen which can be scrolled through.
    7. Hamburger menu, tab bar, gesture-based navigation
    8. The app uses negative space on the home page to draw the user to their already existing notes or the button which allows them to create a new note.
  5. Tasy Recipies
    1.

Badly Designed Apps-

  1.  Snapchat
    1. Snapchat’s menu is unnecessarily hard to access. Initially I would look for a menu button at the top of the screen; there isn’t one. Then I would swipe down on the home screen; this brings down an overwhelming screen of Snapchat’s sponsored and live “stories”. It is revealed that the menu is brought down by clicking the cartoon face at the top of the screen. From here it is simple enough to figure out how to work the menu as there is large text and thumbnails and a gear symbol in the top right for access to settings.
    2. The app, overall, if quite confusing to use as I have had many friends join the app and require me to talk them through using it as the app itself does not provide this. A lot of the features are discovered by chance.
    8. There is a distinct lack of negative space as each part of the app is filled with content or buttons and symbols.
  2. Astro Horoscope
    Simply put, the app is displeasing to look at. The opening screen shows labelled symbols of each of the 12 zodiac signs, this alone would have been enough and even quite aesthetically pleasing. However, alongside this there is a starry background beneath the zodiac overlay which gives a very tasteless effect. The worst of this is the incessantly flashing settings symbol.
  3. Linkedin
    1. There is no menu other than the tab bar at the top of the screen. A hamburger menu could have been very beneficial to the app to reduce the amount of space taken up by unnecessary thumbnails such as the one for “Linkedin Apps”.
    2. There are tips to use the app, however, when finally loaded in the effect is still extremely overwhelming
    6. The design is relatively consistent until you scroll to the messaging page. Here they remove one of the rows of the tab bar and have the first instance of empty space I have seen on the app. This page has a much stronger layout than that of the rest; if the left thumbnail was replaced with a menu symbol, the right with a search symbol and the removed ones placed instead in the menu I feel the design of the app would be much stronger.
    7. There is a tab bar which has 2 rows and is reminiscent to a 2006 browser with roughly 20 plug-ins installed. The search bar has added text which is unnecessary and seems to only have been added to completely avoid having any unused space.
    8. The lack of negative space adds to the overall overwhelming feel of the app as there is content taking up every cm of the screen.

Sources:
https://thisisglance.com/how-the-art-of-app-development-has-changed-over-the-years/
https://creativemarket.com/blog/app-design-user-experience