Bottom’s Up: Web Application
Background
This project was assigned during the span of a semester for my Internet Studio 2 class. I was assigned to create a functioning web application hosted live on the class server. The application will be a rich, dynamic, and interactive web application using the technologies and techniques covered in class.
Throughout this assignment I was to…
- Code a web application with the use of HTML, CSS, and Javascript and no use of Word Press interface or framework grids.
- Create a case study of an original web application concept explaining the development of the app.
- Utilize flexbox to anticipate the use of the web application on both computers and phones and strengthen the responsiveness of the app.
My personal thoughts will be documented in this column! Hi (:
Research
While the application itself was in development, I was required to document the phases of development, so most of my research is actually in one concise place below.
My research is basically composed of standard marketing research, but a brief summary of what was documented goes as follows: in the beginning phases I chose a problem I sought to target. I knew for a fact I wanted to go a route I did not typically go in and go in a more fun direction considering it is far more interactive than anything I have previously worked on. That being said the most obvious plan of action was to go the game route, which is not something I would normally work on, but at the time of the development of the application my friends were (and still are) very into card games. They were particularly into drinking games so this was a very big inspiration. Personally, I hated drinking games and that is finally what got me to the problem I wanted to solve: why would I want to get drunk and think of games to play, remember the rules, and think of questions?
The solution for this was simple. Create an application that already has a library of games that are easy to find for intoxicated users, a designated rules page, and an interface that allows you to add custom prompts depending on the game. This interface would ease the aspect of thinking of more prompts during the game and put the burden of thinking of funny questions on the sober version of you and your friends versus thinking of it later on.
Once the problem and solution was ideated everything else fell into place very easily. The target market is self-explanatory, anyone over 21 who enjoys drinking as a means of entertainment within a social circle. This was important to find to base my design decisions upon.
I had so many ideas for webpage features, but I decided it was best to keep things simplistic considering the demographic that was mentioned.
PDF should load here, if not please refresh!
I wanted so badly to create a web application that was far different from everyone else’s, so while everyone made web applications based upon fake restaurants or fake shopping websites, I made it my goal to make anything except that. I wanted to challenge myself a little bit and have some fun and I was so excited when I decided to make an application for a drinking game instead of my initial idea of expanding upon an already established premise I had which is Reel Me (which you can check out here wink wink)
Ideation
I created a basic high-fidelity wireframe because I find that I have an easier time creating a prototype if I take the time to fledge out a good wireframe that simply takes designing once completed. I knew that I wanted a very simplistic interface so I wanted every game to have a brief summary on the home page. For the games I simply wanted two pages. One for the rules and the other for the actually gameplay.
For the design aspect, I knew I wanted something that looks immediately fun, and allowed the simplistic layout to pop. My biggest design inspiration is the early 2000’s MTV branding which you can revisit in the PDF above. I wanted that bright pop of color partnered with the nostalgia that is the early internet which would compliment the simplicity very well.
I was so excited to work on something so different from my usual art style!
With both the design inspiration made and the high-fidelity wireframe, I easily created a prototype of what I wanted it to look like on Photoshop as well as what the text would say. I utilized celebrity photography from clubs in the early 2000’s to build off of the nostalgia and bring in the motif of partying with your friends. With the game pages I simply assigned them with one color to create a sense of cohesivity and from there everything fell into place very simply.
This was my first time venturing out of my usual routine of making a low-fidelity wireframe, making a pinterest board, and hopping right into designing the website and I have to say I really loved this new system of creating a high-fidelity wireframe and prototype. It takes so much stress off of the creation part and makes the whole process so much more enjoyable to me and I was absolutely thrilled to be pushed out of my comfort zone!
Prototype
These are the final logo prototypes. I wanted something simple, fun, and funny with a sans serif font to emulate the MTV inspiration I was drawing from. The colors of the logos are the colors I used throughout the website.
I had never created a style tile before, but I found that this made finding all my resources such as icons, buttons, and colors very easy and put together. This also allowed me to reflect upon whether everything fit together as a piece of work and made sense with the brand. I will also be implementing this into my process from now on.
But beyond this, its really pretty to look at lol
Reflection
This was the first web application I have ever made. I usually make websites, but never anything that needed coding outside of HTML and CSS and I genuinely thought that I would hate the experience because of that. My preemptive judgement was far off because I absolutely loved working on this and it made me want to start making more web applications and strengthen my Javascript knowledge and also gave me the courage to utilize my PHP and SQL knowledge in the future.
The key takeaways from this project are that..
I fell in love with this website and I was immediately so excited to show people my work which was very surprising to me because I fully anticipated it to be a mess because of how daunting everything seemed in the beginning. So far, this is one of favorite projects I have ever worked on and I hope you like it too!