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.
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”
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.