app design

For this project we need to create a concept for an app. Within this I will need to create a brand and logo. 

12/10/20

Logo ideas on what other movie apps look like - This shows that they mainly involve the play button, the camera icon and a tv.  The colours are mainly blue black and yellow. Black background have the connotation of power, which is given to by the user to choose. And there are shade of orange/yellow which connotes joy. The bolder the colour, the more it stands out.

image: EveryDay-Tech (2016)

After research there are a few apps like mine to help people pick what to watch but they are all very similar of just giving the user a list of movies and their descriptions.

Freepik (n.d) "A set of movie icon illustrations"

Icon reference to inspire me for my logo. Which I personally prefer the camera.

I think if I used "What to Watch" as my brand name, for my logo I could create an animation within After Effects that turns the a few of the letters into a camera. To do this I will make the question mark fall to give the title a bounce which will scramble to letters as they are in the air to then fall back down.

After some feedback I was told that it looks like there are 2 people. I was going to fill the middle box in white to make it look more like a film camera. Therefore, I will make the opacity 100%

19/10/20

draft 1

I am unsure about the question mark at the bottom of the logo after the letters disappear.

I created a splash on Photoshop which is the loading screen for when opening the app. This is a good way to get my brand recognized.

When making the animation, I wanted to export the layers to Photoshop to use as my logo, but as I built it within after effects not as a png it wouldn't allow me to transfer, therefore I took a screenshot and cut around it using Photoshop.

Splash draft 1.

draft 2

I used to movie genre image in a new composition and duplicated it onto one canvas. 

I used create clipping mask to put the movie icon image behind my shape.

App icon draft1

I made adjustments to brightness and contrast to the original marble image to make the logo stand out more.

I decided not to use this de to not finding much relevance of the marble background.

App icon draft2

App icon draft 3

Loading/splash screen without question mark:

Loading/splash screen with question mark:

26/10/20

I looked at other home screens to get some inspiration on how my home screen should look. I created a header at the top and from looking at Instagram, Facebook, YouTube etc. all have the name of the app at the top.

I created a user icon within photoshop then merged the layers and pasted it onto my home screen.

I decided to redo the look of my buttons, therefore I decided to make them seem 3D in a neumorphism style, this is done by duplicating shapes and making them blurry to add shadow.

Before 

After

2/11/20

I edited my splash loading screen to make the reel play for longer, by doing this I copied and pasted the frame and moved them along in a new composition to make it look tidier.

Brand advert

Splash export

I started a "Sponsored by" page and made another colour for the home screen where users can personalise. This took inspiration from the app colour scheme with oranges and yellows. And I love how the shuffle button pops with the white.

UI design Heuristic:

Nielsen and Molich's established 10 user interface design heuristics (guidelines) in the 1990's:

 - visibility of system status - users should be informed of system operations with easy to understand and visible status displayed on the screen

- Match between the system and the real world - it should mirror the language and concepts users would find in the real world. information should be presented in logical order in order to reduce cognitive strain making the system easier to use.

- user control and freedom - backward steps possible; undoing and redoing previous actions

- consistency and standards - graphic and terminology should be maintained across platforms

-error prevention - eliminating or flagging actions that may cause errors are ways of error prevention

- recognition rather than recall from memory- try not to make user have to remember how to use it.

- flexibility and effiency of use - less interactions that allow faster navigation (can use hidden commands and micro facilities)

- Aesthetic and minimalist design

-Help users recognise, diagnose and recover from errors - error messages should almost always be expressed in plain language

- help and documentation - when users need help, make sure its easily located

Fitt's Law:

Fitts law was created in 1954 and it states that the amount of time required for a person to move a pointer i.e. mouse cursor. The longer the distance and the smaller the target's size, the longer it takes.

In relation to desktops you would apply this to sizes and distances, edges, menus (pop up menus)

In relation to mobiles you would apply this to; thumb zones via horizontal and vertical orientation, 

HCI is human computer interaction - looking at the interaction between humans (the users) and computers. Discipline's that contribute to HCI are: computer science, engineering and design, ergonomics/human factors, linguistics, philosophy and psychology. These build interfaces that are easy to use, efficient and accessible

It is a broad field which overlaps areas like user-centered design(UCD), user interface (UI) and user experience (UX) design.

Factors in HCI - organisation factors (planning), environmental factors (noise, lighting), the user (cognitive process, enjoyment, satisfaction), comfort factors (layout), user interface (input devices, use of colour, commands, navigation), task factors (easy/complex), constraints (cost, budget), system functions (hardware, software, app), productivity factors (increase output, decrease errors)

"Until the late 70's mainly those who interacted with computers were technology professions dedicated hobbyists" until the personal computer including personal software (apps such as text editors and spreadsheets) and personal computer platforms (hardware, operating systems) which made everyone in the world a potential user. - The interaction Design Foundation (2012)

16/11/20

Today I tried adding a gradient to my background, this meant I had to redesign the buttons so they would match the gradient background. However when I tried adding it to the buttons, it would flip horizontally without me doing anything so that you can see the buttons on the background which isn't what I want, therefore some button highlights were brighter than other. - try doing in animate?

I also done more research into sponsorship and made another page for the sharing screen.

23/11/20

I downloaded assets from freepik.com such as message box, shuffle icon etc.

I made a few of my own icons such as the close icon for the trailer and the dropdown icon. .

8/12/20

After losing my memory stick I try to back up my usb to OneDrive, I ran out of storage and had to backup to google drive instead. Therefore I can access my work when using remote access.

I encountered problems with adobe media encoder where it kept crashing within remote access.

11/12/20

Using remote access I continue my prototype in after effects, I'm now creating transitions such as a swipe effect when the back button is clicked, I added motion blur to give it more of an effect.

17/12/20

I redone the boarders by copying and pasting to place. So that there will be consistency through the prototype. I also realigned text so that it is in the center of boxes/shapes.

22/12/20

I continued with aligning the screens as I realised the back button kept changing size, then moved it into after effects so my prototype flows nicer.

5/1/21

I continued adding my new screens to my video prototype. Slowly fixing the small movements where things were not placed in the same place such as the yes no maybe button on the trailer pop up page.

After realigning and making the pages I export a recent version on Adobe Media Encoder. However it was unresponsive. After a few attempts it works.

After watching my video back I realised that one of the pre compositions I duplicated and changed, changed the original! where it went from clicking back on comedy to go to the home screen, and I done the same but with the shuffle clicked on the "New decision" page to another shuffled title. Which when I made changes to one, it done the same to the other. Therefore I created a new composition and pasted the components that made the transition work.

6/1/21

I started digitally making my flowchart using lucid charts. But as it was free I was limited to the amount of functions I could add so I done hat I could and continued it within PowerPoint.

I made a Link accounts page so I can put it on my site map. I downloaded a free gear icon from freepik

I used the rectangle tool to only show a bit of the options box as I didn't have the previous saved and I needed to make it look like the matched button has been clicked

I get a free phone image from freepik and put my home screen designs on phones for my presentation.

To skew the image to put it in the phone you ctrl/alt click the corner.

11/1/21

I had a tutorial today, and I made some tweaks to my presentation.

I added some final touches to my prototype such as white boarder when the decision page goes to the profile.

I added the phone image to my final prototype in Premiere, where I also changed the 'audio gain' down so when the trailer played it wouldn't blast out.

I downloaded button click sound from https://www.soundjay.com/button-sounds-3.html for the button click audio and a typing sound from https://soundbible.com/464-Typing-On-Keyboard.html and https://soundbible.com/1682-Robot-Blip.html for the blip noise and https://soundbible.com/1003-Ta-Da.html for the "ta da" sound

I tried to find free audio for the loading before the user 'links up' but I couldn't find any I liked or that would fit.

Reference:

Anon (2018) "What is demographic Segmentation & why is it necessary?" [online] - demographic help - https://instapage.com/blog/demographic-segmentation#:~:text=Demographic%20segmentation%20divides%20the%20market,defined%20group%20within%20that%20market. [accessed 23/11/20]

Anon (2017) "5 hugely profitable multiplatform sponsorship advertising models" [online] - https://www.mequoda.com/articles/multiplatform-publishing-strategy/selling-multiplatform-sponsorships/

Anon (2019) "Introduction to HCI" [online]  - https://www.cs.bham.ac.uk/~rxb/Teaching/HCI%20II/intro.html [accessed 2/11/20]

Anon (2012). The interaction Design Foundation.  "Human Computer Interaction" - https://www.interaction-design.org/literature/book/the-encyclopedia-of-human-computer-interaction-2nd-ed/human-computer-interaction-brief-intro [online accessed 2/11/20]

Anon (2012) The Interaction Design Foundation, "What is Fitts law?" [online] - https://www.interaction-design.org/literature/topics/fitts-law [accessed 2/11/20]

Freepik. (2019) - www.freepik.com - [online]

Smith, J (2012) Applying Fitts Law to Mobile Interface -  https://webdesign.tutsplus.com/articles/applying-fitts-law-to-mobile-interface-design--webdesign-6919  - [online accessed 2/11/20]

Wandera (2020) "App risk assessment - how we determine risk level of apps"  [online] https://www.wandera.com/app-risk-assessment/ [accessed 13/1/20]

Warren, C. (n.d) "5 mobile apps for finding great movies" [online] https://mashable.com/2010/11/08/mobile-movie-finding-apps/?europe=true [accessed 12/10/20]

Wong, E. (2019). Heuristic Evaluation - https://www.interaction-design.org/literature/article/heuristic-evaluation-how-to-conduct-a-heuristic-evaluation - [accessed 2/11/20 ]

Images:

Bemis, C. (n.d) "link icon" - Free download on iconfinder [online] - https://www.iconfinder.com/icons/227581/link_icon [accessed 23/11/20]

Choice - https://pixabay.com/photos/choice-select-decide-decision-vote-2692575/ - [accessed 20/10/20]

Chbosky, S. (2012) "Perks of being a wallflower" [online] - https://www.imdb.com/title/tt1659337/ - [accessed 2/11/20]

EveryDay-Tech (2016) 20 of the best free movie apps for android and iphone [online]  https://everyday-tech.com/top-20-free-movie-apps-ios-android/ 

Filmsourcing - sharing filmmaking resources (2013) Horror Movie Poster  [online] https://www.filmsourcing.com/blog/2013/creating-a-horror-poster-tutorial/

Filmsourcing - sharing filmmaking sources (2013) "Comedy movie poster tutorial with a free psd template" [online] were the millers poster- https://www.filmsourcing.com/blog/how-to-create-comedy-film-poster-tutorial/ [accessed 23/11/20]

Freepik (n.d) "enjoy these background vectors for free" [online] Movie genre image - https://www.freepik.com/vectors/background'>Background vector created by macrovector_official - www.freepik.com</a> 

Freepik (n.d) "A set of movie icon illustrations" [online] movie icons - https://www.freepik.com/premium-vector/set-movie-icon-illustration-collections-movie-icons-concept-isolated_7182209.htm

Freepik (n.d.) "Enjoy these mockup PSD for free" [online] Phone image - 'https://www.freepik.com/psd/mockup'>Mockup psd created by rawpixel.com - www.freepik.com</a> [accessed 7/1/21]

Freepik (n.d.) "Download Modern Smart Phones mockup for free" [online] tilted phone - https://www.freepik.com/free-psd/modern-smart-phones-mockup_11400033.htm

Free transparent PNG Logos(n.d) "share icon" [online] - https:https://www.freepnglogos.com/pics/share [accessed 23/11/20]

Icons for free(n.d) "Shuffle icon" [online] - https://icons-for-free.com/shuffle+icon-1320196060924471100/  [accessed 23/11/20]

Marble image reference - 'https://www.freepik.com/vectors/background'>Background vector created by freepik - www.freepik.com</a> 

Netflix advert poste r- https://www.imdb.com/title/tt11156614/ - [accessed 2/11/20]

Message icon - https://www.pngegg.com/en/png-xucvi  [accessed 23/11/20]

message box icon - https://thenounproject.com/term/message/ [accessed 23/11/20]

Pinterest (n.d.) "Free download: Pulp fiction screenplay" [online] - https://www.pinterest.co.uk/pin/578782989594890391/ [accessed 23/11/20]

Planet - https://pixabay.com/photos/solar-system-sun-mercury-venus-439046/

Wikipedia (2020) "tennet (film) poster" [online] - https://en.wikipedia.org/wiki/Tenet_(film) [accessed 23/11/20]