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.

Changes to Rachet

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.