Interactive App Design I
CASE STUDY

Overview

Interactive web apps are a way to allow users to see what an online website would look like as a native applications. It is a great way to create prototypes for native applications that can work offline and store previously entered information. Once the user adds this application to their device, the web app will function online and offline.

My project "DICE GAME", demonstrates an interctove web application that can be added to the home screen of a device.

Context & Challenge

BACKGROUND

In my major, Interactive Digital Media at Drexel University, I was taught the fundemenatls of different coding and scripting languages before this class. This course allows for students to build web app pages that can be added to the home screen and function like a native app.

The problem

Some websites do not function correctly when a user sadds it to their homescreen. This project demonstartes how to prompt users to add the web app to their home screen, have the UI of a native app, work online and offline, and store information.

goals & Objectives

My ultimate goal was to create a stand alone web app that could be downloaded and operate as a native app. I created a dice rolling game that involves two players and tw dice. Whichever die lands one the highest face, wins.

Throughout this course, I was able to learn knowledge for coding iOS applications using Apple supported meta tags.

Process & Insight

Wireframes

My first steps was brainstorming what I wanted my app to be. I thought of simple games that could be digitalized through my app and I came up with the idea to do a dice game because it was simple.

I then created quick simple wireframes in order to capture what I would want to build for my web app.

Prototype

With a style tile and wireframes to guide me, I wanted to create a responsive wirefreame. Instead of sticking to my original wireframe, I tried to add CSS animations into my project and that distracted me from fully building out my responsive wireframe.

Click here to see my CSS animation.

Code / Dev

The code that I had put together form different sources came in handy and I was able to get my dice game wokring.

My code inculdes, HTML, CSS, and JavaScript. I created the colors and layout of the web app with HTML and CSS, and I created the actual game play with JavaScript.

The bulk of the coding was using meta tags in HTML to make the app look like a native iOS app. It also included JavaScript to create a cache manfiest, "add to homescreen" pop up, and store data.

Click here to see all of my code for this project.

Solution

Click here to see my final design for Dice Game.

As a final website, I believe that all elements came together nicely. The wireframes I first planned came together to work well as the graphics for my app. Although I did have some trouble with JavaScript, I was still able to impliment all the needed elements for the web app.

Results

This project was a success. My Dice Game works as a native mobile app. It can be added to the homescreen and strores the information of the user. In the future I would like to integrate different game modes tro my app.