A Prototype in HTML+CSS

Step 02 of 07: Goal

So far you have some PhotoShop mock-ups that might look kinda like this fellow from our Axure tute;

homepage screen

And you're wondering how you're ever going to make all the elements into a HTML page using CSS, let alone add Js to make it a smooth experience. Right? ... Take a deep breath, light a candle, slap yourself in the face and pull yourself together.
Maybe slap yourself one more time for good measure.

If you're worried you won't have time to build all the parts and make them look finished, you don't have to. What you should focus on is making the interactions (process of using your application to actually accomplish something, hint:adding a bookmark) rather than the pixel-perfect layout required of a finished CSS'ed professional offering.

Reality check

Remember when we were using Axure and everything was easy 'cos there were images, like the one above, as backgrounds and we were just creating "hotspots" or active-areas (essentially links) where you could click to get to another screen? Yes? well that is dead easy to do and that is pretty much how you can get a finished-looking application in, but still build it in HTML, CSS and Js yourself. In a perfect setting you would make it all in HTML and CSS, but I know you don't have time for that.

So let's think about this... To make the image above look like it's working, all we have to do is;

  1. use the image as a background, and...
  2. create anchor tags (links) whereever we want clickable areas

That doesn't sound so hard does it?



← Back Not at all, Niko →