Home Depot: HTML prototype

Today, I made my first HTML prototype. Well, at least the start of it. The rest is just linking pages and adding content. I’m working with a project I did in school 3 months ago. I made an After Effects mockup. Perhaps it was the deadline, my lack of familiarity with the tool or some other factor, but I felt like it didn’t do my idea of how the app should work justice.

Last weekend, I went to InfoCamp 2013 where Phannipha Arunyaangkul, UX Designer in Seattle talked about different ways to prototype. That’s when I found out about Ratchet, a tool specifically for html app prototypes for iPhones. So, no this hasn’t been updated for iOS7’s “chic” flat design (which I dislike a bit). But, you can dig into the CSS and make it look like whatever you want, so that’s cool. How can I summarize what rachet gives you: It’s a website template that is stalked with some styles that are conventional for iPhone apps. Buttons, entry fields, transitions, etc. It has some javascript you have to hook up and copy a lot of text from the website, but that’s easy enough. Here you see what the code looks like on desktop.

Desktop View: It looks hilarious, I know. I just had to include it!

Changes to Rachet

Left: first iteration Right: Second Iteration

To get this view where it looks like an app, there are a few ways to do it. For this, I put it on my website, Home Depot App. With your iPhone, view the site, then click the  button and “Add to Home Screen”. I made some apple-icons (Free Online Favicon and Apple Icons Generator – iconifier.net.) so it looks really legit on my phone. Anyways, Rachet was recently updated two months ago, but during my first iteration, I noted that they have pngs for buttons. I think that’s good and all, but… SVG vs PNG. Scalable Vector Graphics are a lot easier to use and they look so crisp. So, for the bottom nav (see right image), you can see the image filling the space better. I made white .svg’s with no background and labeled them so I could control the spacing more effectively. I recommend that you outline your type, otherwise some fonts might get lost, but if you don’t… hmmm, something happens. I am not sure what.

(Here’s results from that question “svg outline text”)

“Text can also be styled with CSS properties such as font-weight, font-style, and text-decoration which can be implemented either through inline-style, internal-style or external-style like we have discussed in the previous post about Styling SVG with CSS”

via Scalable Vector Graphics: Working with Text.

I spent a good long while figuring out the slider. It’s not bad, but I was wondering how to make my images fit. It had a hard-coded height of 200px. Ended up using Amazium‘s max-img code. I know there’s a dozen ways to make images responsive, but maybe I just wanted to plug Amazium as being a really nice framework to use. I like their website. It’s got lots of readable code. Speaking of readable, my slider is not. It’s got pictures of text. I might spend a lot more time with the slideshow to make it text readable, but prototyping is all about maximizing your time.

I started looking into Rachet without wireframing. I just wanted to see all of my options and dive in to see that I could navigate through the code and such. Now, I got to go back and polish up some wireframes and get this app prototyped. I’m excited to see how things progress.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s