Self Destruct App single page website

In order to have some direction for this project, I decided to create a fictional application to build the webpage around. The style of Ryan's landing page design seems to lend itself well to advertising for new apps. I have a ton of apps on my phone that seemed useful when I downloaded them, but then I used them once or twice and never opened them again. I thought it would be fun to create an app that uninstalls your un-used apps for you after you haven't used them for a set period of time.

My main goal for this project is minimalism. Most of my work focuses on highly detailed illustration, so I figured this class would be a great opportunity to try my hand at working with simple shapes and lots of bright colors to get the message across.

Here's my header design so far. I can't tell you how many times I wanted to add shading or texture to the little phone illustration, but again...minimalism. 

At this point I'm trying to think about interaction; scrolling effects, rollover states, etc. The last time I attempted to design a website was in school, and it was a disaster, so if anyone has any advice, I'm all ears.

I came up with these icons for the "Features" section. I'm pretty happy with the consistency between the three so far. I'm not quite sure about the center-aligned type. It seems like that's really hot right now, but I keep wanting to move everything to the left.

For my next update I'm hoping to have everything a little more cohesive, along with a few more little illustrations.

UPDATE 2/8/14

I decided it would be a good idea to show some of the different screens for the app on the website, so I started sketching out ideas for that and got a little carried away. This is all very new and exciting for me, and I figure what better place to explore this type of design (UX...UI...? I'm not sure of the difference) than the classroom. 

I watched this very informative video about designing for mobile and then sketched out a wireframe for the app:

I hope to have a little more work done tomorrow.

Update 2/11/14

Before designing the individual screens for the app I knew that I would need an image of a phone to display them on, and I found this really cool HTC First template on Dribbble from Cole Townsend. I chose it because it is very stylistically similar to what I'm going for, and thought it would fit in nicely on the webpage. I realize this is a backwards way of doing things, as I should have had a device chosen before starting to design, but I have no clue what I'm doing, so...lesson learned! Here are a few of the screens:

I ended up changing the background color of the middle screen and made a sweet-ass gif for you guys. Also something new I learned, from this tutorial on Photoshop gifs. There are a million different ways to create a gif in Photoshop, but this one did what I needed to do.

I'm really trying hard to show restraint on this design, but I decided to give the destruct button some depth. This way, it's the only element of the design that's different from everything else. Hopefully this will make it even more obvious that this is the button that there is no turning back from, whereas everything else can be negotiated.

I'm looking at some After Effects tutorials on animating things like this with smoother effects, like easing in and out, so the final website design will feature a smoother, more comprehensive animation of the interface.

Update 2/15/2014

I'm getting really distracted from the website and plan to get back to it soon, but in the mean time this is a little animation I made showing what happens when an app is uninstalled.


Please sign in or sign up to comment.