App Design – Idea Development/ Treatment

App Idea Outline

BlueProject – Project Organiser App

My idea is a Coursework/ Project planning app that allows the user to easily and intuitively plan out their work, setting deadlines and goals easily viewed by a calendar /work to do page.

There will be two versions of the app, a ‘free’ version for students and a ‘paid’ version for professionals in the industry. This business model will allow students, who may be limited in their budget to use this app and also pay for its development with the ‘paid’ version. This design will also draw in ‘paid’ users as once they leave education as the app will automatically ask you to upgrade to the professional version.

Each version will be tailored to its specific market audience I.E. the student version having teacher login accounts that are able to set deadlines and review work and the Professional version having client login accounts that are able to see the progress of the company/employee’s work.

 

Feature ideas:

  • Current Projects
  • Upcoming Projects
  • Project Pages
  • Media Libary for sharing content
  • Student and Professional version
  • A version of the app for clients so they can view the progress of work

 


Target Audiences

Student version (Free)

The first demographic the app will cater to will be students in coursework based education such as art and design/media. They will most likely be aged from 16-20 covering both college and university students.

What features will differ

This version of the app will have a ‘Teacher login’ that allows course leaders to set projects and deadlines for their students. Students will also be able to set their own goals alongside these deadlines or create their own projects and deadlines independently.

 

Professional version (Paid)

The second demographic will be aimed at professionals in the creative industry such as media production or graphic design. This version will act as a sort of ‘premium version’ as the Student version will require a user to register with a teacher before they can use the app.

What features will differ

As this version is more industry-focused, it will have a feature that allows the users’ clients to view their progress. This will improve communication between client and artist as they will easily be able to see and give feedback on work.

 


The visual style of the app

The visual style of both versions of the app will be professional and have a minimalist design. The colour palette will be made up of different shades of blues and turquoises which will reflect and compliment the name ‘BlueProject’.

 


Moodboards

Icon mood board

AppDesignMoodboard3

Colour palette mood board

AppDesignMoodboard4

App layout mood board

AppDesignMoodboard2

 


Citations

http://www.creativebloq.com/app-design/16-killer-design-tips-creating-mobile-apps-11513821

http://www.webdesignerdepot.com/2013/07/20-beautifully-designed-smartphone-apps/

The principles and processes of interactive design – Jamie Steane

https://gauss-development.com/mobile-app-design/

https://www.forbes.com/sites/amymorin/2014/02/04/how-to-use-color-psychology-to-give-your-business-an-edge/#2e5a9a0b170a

https://www.timeshighereducation.com/student/news/student-experience-survey-2016-methodology-what-do-students-care-abouthttps://www.collegechoice.net/top-15-study-apps-for-college-students/

Advertisements

Game Trailer Production Plan and Log

 

Week (Beginning) Planned Work Completed Work
1st Jan Pre-production

  • Initial Ideas outline
Pre-production

  • Came up with 2 ideas (Watchdogs and Pubg
8th Jan Pre-production

  • Discussion with group and decide on idea
Pre-production

  • Discussed ideas with the group and settled on animal crossing new leaf.
15th Jan Pre-production

  • Presentation of idea to Lewis
  • Pre-Production
  • Storyboards
  • Script
  • Costume Planning
  • Location Planning/recces
  • Prop Planning
Pre-production

  • Wrote script
  • Prepared presentation for Lewis
  • Presented the idea to Lewis
22nd Jan Production

  • Filming (Week 1)
Pre-production

  • Did location recces for the museum, antique centre, college, Canbury gardens.
  • Unable to film at museum and antique centre as need pass from the local council
29th Jan Production

  • Filming (Week 2)
Production

  • Jade filmed train test shots for the intro
  • Experimented with using GoPro to film scenes (tested with scenes 7 and 4) but decided to use handheld cannon camera instead.
  • Crew members ill so filming delayed
5th Feb Production

  • Filming (Week 3)
Production

  • Filming Week 1: Filmed scene 7 (Mabel and Sable)
12th Feb HOL Production

  • Log footage and start rough edit
Production

  • Crew members away so filming delayed
  • Logged filmed takes
19th Feb Post-production

  • Editing
Production

  • Crew members ill so filming delayed
26th Feb Post-production

  • Editing
Production

  • Filming Week 2: Filmed scene 8 (Harriet)
  • Logged takes
  • Started rough edit using scenes 7 and 8
5th Mar – DEADLINE 8th MAR Post-production

  • Editing (sound)
  • Colour grading
  • Complete paperwork
Production

  • Filming Week 3: Filmed scenes 10 and 11 (fishing scene and reality break)
  • Logged takes
(Overtime) 12th Mar Post-Production

  • Filming Week 4: Filmed scene 4/5
  • Logged and Edited footage
(Overtime) 19th Mar Post-Production

  • Sourced gameplay footage for train intro and edited into trailer
  • Created Animal Crossing New Leaf logo for intro
  • Added rough soundtrack and sound effects
(Overtime) 26th Mar

Post-Production

  • Finished edit (video and audio)
  • Added glitch effect to reality break
  • Colour graded film
  • Filled out paperwork
  • Handed in final edit to Lewis
  • Watched trailers back in class

Film Noir Trailer Ideas

Idea 1 – Watchdogs

  • Follows player around as they ‘hack’ various things
    • Traffic lights
    • Doors
    • ‘breaks into’ a building (possibly filmed in the college)
  • Only really needs main character (could have others as ‘bystanders’)
  • Design/themes would be modern/ urban (perhaps set in and around Kingston)

Idea 2 – Player Unknown’s Battlegrounds (PUBG)

  • Set in/around towns
  • have around 5 actors hunt each other down
  • Plane drop scene could be gameplay footage to cut down on special effects
  • Locations
    • Houses
    • College
    • Parks around Kingston
    • Town centre (need to be respectful to public)
  • Last player survives using a frying pan

Pixar Animation research

Partly Cloudy is a Pixar animated short directed by Peter Sohn

Animating the clouds

To create the cloud effect, the animators made a 200,000-particle suit around an invisible rig. Just that though wouldn’t be enough as clouds are made up of basically transparent droplets, the final lighting and shadows process is what really brought him to life.

The animation team were worried that they wouldn’t have enough time to render him as all the particles and lighting take ages to render.

 

References

https://www.awn.com/animationworld/partly-cloudy-according-sohn

Web Design Research

Examples of poor website design

Arngren

http://www.arngren.net/Screen Shot 2018-01-03 at 15.27.38

Overall, I think the design of this website is quite unorganised and hard to understand as lots of information has been crammed into one page. If I was going to improve this webpage, I would separate different items into categories and display them in more of a list or grid-like format with more negative space between each entry.

Ling’s Cars

https://www.lingscars.com/Screen Shot 2018-01-03 at 15.28.33

In my opinion, the design of this website- while better than the previous one as it is organised in a more visually easy to understand layout- is still overcrowded and perhaps uses too many colours that make it look messy and even unprofessional which is not good for a company selling cars. However, the logo and menu bar on the lefthand side is a good design choice as the viewer’s attention is naturally drawn toward the lefthand side first.

WMGH

http://www.wmgh.com/Screen Shot 2018-01-03 at 15.42.18

Personally, I dislike the layout of this website as I think a webpage should use as much screen space as possible as designers have to show a lot of information while not overcrowding the page and leaving large borders on the side is a waste of this valuable resource.

 

Examples of good website design

Evernote

https://evernote.com/Screen Shot 2018-01-03 at 15.48.49

I think this is a good example of web-design as it has lots of negative space, making the important elements such as the logo and tagline jump out more as they are not being overcrowded. The use of a logo as the home button is also a nice feature I would like to include in my own website as I think this gives the website a more professional feel.

Air BnB

https://www.airbnb.co.uk/Screen Shot 2018-01-03 at 15.46.23

Like the last example, this design also has a lot of negative space and uses a logo as a home button, however, the rest of the menu is positioned in the top right corner. This in a way balances the webpage as there is a similar amount of information on both sides of the screen. It is not immediately obvious however that a user has to scroll down to see more of the webpage and although this is an interesting feature that I would like to use in my own design I will have to take care to make this more apparent.

Common locations of elements in web design

The logo is usually in the top left as this is the first place the eye is drawn to when viewing a webpage. Menus tend to be either directly to the right of the logo or on the top righthand side of the page. Content is usually underneath with either a large bold heading or an image.


Origins of the internet / World Wide Web

Arpanet

The predecessor to the current Internet we know was called ARPANET (Advanced Research Projects Agency Network), it was initially designed to link computer at Pentagon-funded facilities so that they could share information between them. Although it was funded by ARPA, a branch of the US military department, it was more academically focused than military.

ARPANET was also responsible for the invention of packet switching – the system used to send information across networks. it consists of splitting information into small ‘packets’ that each takes their own route across a network. This allows the network to become more like a web of connected devices than having everything routed through one server or hub.

arpanet4

The transformation from ARPANET to Internet

The early network protocols had many limitations, they could only do three things- Log on to a remote computer or server – NCP (Network control protocol) printing to a remote printer and transferring files between different computers – FTP (File transfer protocol).

As ARPANET became more popular, other networks began to pop up around the world. However, It’s design required too much control and standardization to be able to connect to these new systems. So Vinton Cerf and Bob Kahn began considering ways of connecting the Networks together. The system they came up with would eventually be known as TCP/IP (Transmission-Control Protocol/Internet protocol). This protocol would eventually form the basis of the internet we know today.

The term ‘Internet’ became popular around 1983 when TCP/IP came into wide use. ARPANET was split into two parts, MILNET and a civilian version of ARPANET. The word internet was originally an easy way to refer to both of these networks that were ‘Interworking’.

As free and commercial internet services like Prodigy, FidoNet, Usenet, Gopher, and many others rose, and as NSFNET became the backbone of the internet, ARPANET’s relevance diminished – eventually being shut down and decommissioned permanently in 1990.

DNS (Domain Name Servers)

Originally, internet server addresses consisted of numbers called an IP (Internet Protocol) address. As more address nodes popped up, it became more difficult to keep track of them so a system called DNS was developed.

DNS basically maps IP addresses to a more human-readable domain name. A domain name is broken down into different levels. For http://www.google.com, the top level would be com, the middle google, and the subdomain www. This tree hierarchy allows each domain node to specify different subdomains e.g. for mail traffic or FTP traffic.

 

Tim Berners-Lee and the creation of the World Wide Web

dbdaa3676c2f185821f774d3cf1ca4ea7e55bffbBorn in June 1955, Tim was and is a computer scientist from London. From a young age, he was interested in electronics and whilst in college, he made a computer from an old television set.

After graduating from university, he then went on to become a software engineer at CERN. Tim noticed that scientists were having trouble sharing the information they had gathered, and so he realized they could solve this by using the fast-growing Internet and exploiting the developing technology known as Hypertext.

By October 1990, Tim had created three fundamental principles which he insisted must be kept royalty free: HTML (Hyper Text Markup Language), URI (Uniform Resource Identifier) and HTTP (Hyper Text Transfer Protocol), that we still use to this day. He also wrote the first webpage browser/editor WorldWideWeb.app and the first web server HTTPD. From here, the Web exploded, with thousands of web servers popping up all over the Internet.

Search engines

Initially, users would lookup webpages addresses on dedicated directories. As websites became more popular, it became necessary to have a tool to search and index these sites. One of the first examples of this was created by Matthew Gray. Called Wandex, it was the first indexing tool to ‘crawl’ the web, indexing and searching catalogued pages on the web.

Modern search engines, such as Google and Yahoo use complex algorithms to index and rank web pages based on keywords and network traffic.


Development of Web sites, Web protocols and Web pages

Responsive web design

Responsive web design has emerged as a range different devices and screen sizes become Web-Enabled such as smartphones and tablets. Web-designers will have to take this into consideration when creating web pages so that they work across all if not most resolutions. They can do this by creating ‘break-points’ in a page that will reshuffle and scale the content so that it is still easy to interpret.

Website Hosting

web hosting can be broken down into two categories- first party and third party. First party hosting is where you run and maintain a server yourself. This can be quite difficult and requires a decent competence in computers and debugging. Third Party is where someone else hosts and maintains a physical server that you run your website from. usually, a third party host will run many web servers simultaneously for multiple clients using virtual machines running off one physical server.

Browser

A browser is a program that is used to connect and receive content from web servers on the World Wide Web. An example of a popular browser is Google Chrome. Modern web browsers can interpret a number of different content types, such as standard HTML, Javascript, CSS and FTP. Many browsers also offer extensive plugins to do anything from spellchecking to video calls/conferencing.

Apache (HTTP Servers)

HTTP servers are what your browser connects and sends requests to when looking at a website. the server can connect to other server programs, such as SQL or PHP to further modify and customise the final webpage. the default webpage for a server is usually called index.html (or .php depending on what language is being used). Other web pages can then be linked to through this page.

HTML

Html is the base level programming language for web pages, consisting of different tags (e.g. <head> <body> <p>) that are used to layout information on a page.

CSS

CSS (cascade style sheet) is a programming language that allows the web designer to create classes and tags that an HTML document can use to standardise the design and layout of the website. Without CSS, it would be very difficult and time-consuming to layout a webpage visualy and so many would still be almost completely text-based.

An example of a CSS class:
#header {
color: green;
}

Javascript

Javascript is a scripting language that can be combined with HTML and CSS to create interactive elements and designs such as a slideshow or hamburger menu.

SQL

Structured Query Language (SQL) is a programming language for accessing and manipulating databases. an example of where this would be used is to store user login details or other variables/information.

FTP

File Transfer Protocol (FTP) is a filesharing protocol that allows users to log in to a central or ‘cloud’ server to access files. This can be useful when running a website from a remote location as it allows the client to modify and change it from pretty much anywhere.

 


Citations

https://www.britannica.com/topic/ARPANET
https://prowebtype.com
https://www.britannica.com/topic/World-Wide-Web
https://webfoundation.org/about/vision/history-of-the-web/
http://www.bbc.co.uk/history/historic_figures/berners_lee_tim.shtml
http://www.zytrax.com/books/dns/
https://www.britannica.com/topic/DNS
http://www.thehistoryofseo.com/The-Industry/Short_History_of_Early_Search_Engines.aspx
https://www.w3schools.com/sql/sql_intro.asp
https://www.webopedia.com/TERM/B/browser.html