CCDN 331

MDDN 352

Tuesday, 24 June 2014

Parkemon Reveal Trailer

All I will say is to watch it in 1080p on full screen. The quality is real. Don't forget the popcorn!


Making the Film

So luckily, it was the most beautiful day we could ever wish for. Josh, Marina, my friend Wayne and myself, all went down to the Abel Tasman National Park..no I'm joking we went to Mt. Vic. But no one needs to know that. We made a day trip there where we thought we could capture the most gorgeous shots of our app, along with the views and surroundings. It was actually my first time up there, and in fact my first time in that part of Wellington, so this experience was entirely new to me. With the app on Josh's phone, I put my hand up to do all the videoing and all the video editing since I had good experience with the camera and video. My 2 designers were a little camera shy so my friend ended up being the actor, which he didn't mind at all. He'd been in my previous projects anyway back from first year. So we wanted to create a commercial like video, kind of like a reveal trailer for this awesome award winning app. I shot different angles, directed the crap out of everyone (I actually felt like a true director, all I needed was a clapboard to say cut!), and took some amazing shots of the park while we were up there. But the thing that was my favourite that I had managed to capture, was the lighting. Pay close attention when you watch the video over and over again to the lighting please, and the views they were truly amazing. 

The editing side, was somewhat painful. I had to get it perfect. The intro wasn't too hard to make but compiling all our clips together took time. I ended up editing the video first on Adobe Premiere Pro, which is my favourite program to use for it. Then once it was all compiled, I rendered it in 1080p (hence the 2.32GB file we had) and further edited it through Adobe After Effects. I added the song in which I have credited in the video description, and Josh added the text in the video which wasn't too hard to do surprisingly..although it was 3am in the morning by this point. But never mind, we were still trucking along. So once everything was done and sorted with the final rendering, we viewed it, and it's safe to say we're surprised with what we came up with. This was truly a great experience. I have also, for fun purposes added a couple of photos we documented whilst we were up there, just to show that during these dark times of hand ins, we still can find time to ourselves and enjoy reality a little bit more. 





Individual Report: The Prologue

Team Parkemon. What an experience. I haven’t had many great experiences with group assignments in the past but this one surely proved me wrong. So it was pitch day at our design room. I had an original idea that I’d wanted to present in front of both my MDDN 352 class and the NWEN 304 class as well, but never got the chance to do it. So when it came to finding a group, I knew I’d had to start from scratch. Since Josh and Marina are friend’s of mine, we decided to group up and find some NWEN guys to help us out, which is when Scott and Damo came to us. This was a good looking group so far, we’re all capable of finishing this assignment and we all got along with each other. So we had discussions on what kind of app we could create. One thing we didn’t want to do was to create an app similar to what everyone else had already presented and pitched. We wanted to create an app that was educational, but fun to use at the same time. Thus where Parkemon was born. 

We discussed the app a little bit and decided on how we were going to approach things. The main idea was that the app was going to be targeted towards the younger audience. An audience that could recognise and relate to the original game pokemon, and maybe some young adults too that wanted to feel a sense of nostalgia. 

So we planned our meetings, decided we would meet up at least once a week to see the progress that everyone has made. Me not knowing too much about the coding side of it, entrusted the NWEN team to create us our foundation which they delivered with amazing results. 

I also took leadership at the start of the app and tried to organise everything, but over the course of time the team itself grew stronger together and had taken on their individual leadership roles on what they’re doing. I was very pleased to see this. 

I spoke to my design team and first off asked if anyone had any experience in character design. I did have some experience but thought I’d be more useful working on the front end stuff and the user interface design. Thankfully, Marina had done some work overseas with companies that did character design, so this was a bonus. I gave her the big task of creating the animals or “parkemon” Which left me and Josh with everything else.

The first step that I discussed with the group was that we needed to make the app appealing to our younger audience, we needed it to be visually recognisable. So I said we needed a colour scheme that would work well with the app. After trial and error on different types of colour schemes, we had found the perfect one. It was a mixture of blue and shades of orange along with the standard black and white and grey. This can all be found on my blog, which I have noted down at the bottom of the page, where I get into more specific and deeper detail about everything I had worked on. 

So after the colour scheme was decided and finalised, I went on and created concepts for our app logo. One discussion we had about this was deciding on the name of the app. We had jotted down the name Parkemon originally as our team name, but also added a “name in progress”. This didn’t help when it came to logo designing. So after further thought about what the app was called, I just said hang on. Why not just name it after what it is. Keep it simple, no messing around and just name it Parkemon. You have to admit it does have some ring to it. Plus it’s easily recognisable as well. So with the name being set, finally I can get onto designing the logo. I tried a bunch of fonts out, added images to some, but there was one that stood out to me. I had a look at certain existing logos like Facebook, where in the app icon the “F” was definitive and stood out. So I took this idea and created the same for parkemon, where the “P” would be our grand stamp on the app market place. I kept it plain and simple, white text with a small paw in the P. This really looked good on our colour scheme, it was very vibrant but bold at the same time. 

After finalising the logo, I then went on and designed all the icons we’ll be using in the app. We had wanted to use icons originally instead of text, to make it more fun and appealing. So i designed all the icons from the logo, to the animal icons to even the smaller stuff like weight and height icons. These can all be viewed on my blog however, as I mentioned before. One thing I noticed whilst designing these icons is that like the logo, the white really does stand out better than black on the app. So I went on and made all the U.I. icons white, not including the animal ones. The animal icons ranged in different types of screens that we were using them in. This was one of the difficult ones to make simply because of time. Marina had originally completed a fews animals for me to work with, but hadn’t completed them all to it’s final product. This was quite a hassle and no, I am not blaming anyone for it since we all had separate hand ins throughout the whole project. So I understood the time constraint that everyone was working with. Anyways, I had created the animal icons for the parkedex, the map, and the leaderboard which all had different designs. It sounds like I made the job harder for myself but I really didn’t, these icon designs suited these pages. So as you could guess I had to create these icons over and over again to get the right sizes when the app was getting built, and also to created more professional versions of them once all the animals have been given to me. Originally I had put the icons through photoshop, just because it was my place to be and my home. But I changed over and out them through Adobe Illustrator since it didn’t look as pixelated. When it came to putting the final all together the icons looked fantastic. 

So enough about icons. Moving on, it was actually really hard to keep track of everything that I had done for the group, and everyone feels the same way. We had met up quite a few times and shared files between each other like there was no tomorrow, so I probably will miss out some things that had happened. I created most of our presentations both on pitch day and on interim day, created the slides and images within them as well. I had researched the real life animals that were in our Parkedex, added the information about them and found all the interesting facts about them as well. I then had to create questions within these, which will be used in our rescue scene. Also one thing about the rescue scene..

Originally our idea was similar to Pokemon, but we had discussions about how the battling and capturing would go within our app. We all had agreed that the battling and capturing really didn’t sound good at all when it comes to the native wildlife and endangered species of the park. This was a conservation app. So we wanted to flip it around entirely and came up with the brilliant idea of rescuing the animals, instead of battling them. This way, you rescue an animal and it joins your team! Your parkemon team of course. 

Moving on from that, I had also helped out a bit with the CSS and a little JS, that just needed styling and tweaking. Also the information for the parked needed to be added so that took some time. My icons looked pretty swell in the app while I was doing this too. Just a random thought I had at the time. 

Our team kept in contact regularly as well, mainly through emails and occasionally facebook. This way we had always been updated on how everyone is going especially if someone didn’t make it to a meeting. Us designers did not however end up using github, as we did not know how to use it and found that it was more easier and efficient to just use the standard USB. This was the way we transferred our files, along with emailing them too. It was just a lot easier and convenient for us. 

I think I’ve rambled on long enough about Parkemon and our life story, The rest of my content is on my blog which can be found at: http://jaytapp.blogspot.co.nz

Please check it out it has some cool content. 

But all in all, this project was a great learning curve. I have nothing negative at all to say about my team and it was a great pleasure to work with them. We all got along fine, and worked together not as a group, but a family. Because we here at Parkemon, are a family. 

Jay Tapp, Founder and Senior Lead Designer of Parkemon Studios

Interim Presentation

For our interim presentation, we initially had 2 applications to show. Since we hadn't had time to meet up together between us designers and the NWEN guys, we decided to just stick with what we had and presented our progress so far. Josh and I worked on the front end side of the app and created a prototype that showed off the design side and the aesthetic side of our app. The NWEN guys had the functionality side of the app. Here below is also the link to the app we created for the interim, and also the slides that I had created for the presentation.

http://jaytappdesign.com/Parkemon/index.html





Icons, icons and more ICONS!

So I pretty much put myself in charge of all the icon designing. This probably rubbed off the logo designs. But never mind, someone had to do it. We discussed what different pages/screens we had and what icons we needed for each one. So there I go working away creating all these icons. I was actually happy with most of them since I wasn't really used to designing icons that much, but I have compiled them in the images below. I didn't realise how long it takes to actually create icons, it was very time consuming especially with the time frame we had for this assignment. Most of them were used for our final too, however some of them just didn't match up to our theme in the end so we had to cut a few of them out eventually. The animal ones were the most annoying to design. Only because I had to do many of them. During this time when I was designing the animal icons that we needed, we were still waiting on the final images for the animals as well. Which meant I'd had to design mock up or prototype icons that we could use for the interim so we at least have something there. The 2 pages at the bottom is a clear view of this. Notice the difference in quality when you compare the 2, kind of like a before and after. A prototype and finish. The finished product was the one we used in the very final version of our app and I must say, it looked sweet on the phone.






Sunday, 22 June 2014

Battle Design v1

With the logo design done, I can then go ahead and concentrate on other things that need designing. I skipped up to the battle scene, and created a couple of concepts where I could brainstorm around the functionality of that certain part of the app. Since our game was similar to the game pokemon, we wanted to create something like it with a parkemon twist. We had all decided that the "battling" part of pokemon just wouldn't fit into our game, simply because our app was about conservation and we didn't want to give the idea of user animal cruelty. So we decided instead of battling the parkemon, you rescue them. What simply happens is when you encounter a parkemon, you are given the option of rescuing it or not. You are then brought to a screen similar to the one below, where you are then asked questions about the certain animal. Obviously it's fairly easy to figure it all out, once you've answered the given questions you either rescue it or you don't. And if you were wondering, no it doesn't die if you fail to answer the questions, you simply exit out of the rescue screen and are given another chance later on in further encounters. Once parkemon are rescued, they are added to your "Parkedex". 




Logo

With the colour scheme having decided between the group, I could finally make the logo. Although I made a lot of sophisticated designs on my concepts page, I went with what looked right, what suited our app. Plain and simple. I went with our most vibrant colour in our colour scheme so it makes the white logo stand out, plus it looks amazing on the log in screen. Happy with it yes yes I am.


Color Scheme

Before we could start on the user interface, I said we had to figure out the colour scheme. So Josh and I went on https://kuler.adobe.com/create/color-wheel/ and played around with different colour samples that would suit our app the most. With the help of our tutor, we had come up and finalised what colours we will be using for the app. I created this colour scheme page below.



The Name/Logo Design

The team and I had multiple discussions on the name of the app and we were nameless for awhile, sticking with the name Parkemon until we had found something else or could think of something better. But I thought the name was perfect. Why not name the app what it really is? I was worried it'd be a problem for copyright purposes but figured we're only doing this for a university assignment, so we stuck with it. With the name being down on paper with pen, I could furthermore go on and start the logo design. Since the app was for the younger audience, I had to make it look fun, easy to recognise, but professional at the same time. These were the concepts I had come up with.


Powerpoint 1: Pitch/The Team