Mocking up a mobile site - Any good tips / programs?
I'm currently mocking up a mobile site (to possibly be turned into an app) I have 0 HTML/app experience so my part is just to create a feel for it, I'm currently using Excel to do this but wondered if there are any good guides/tips/software that can help? Currently I have a grid & I have to create new tabs, obtain & shrink images, add links etc & it just feels like there must surely be a simpler way to do things!
The general idea is to have a homescreen of 9 tiles, each tile links to another page with further tiles (as many as needed) for that sub category, each of these tiles then links to a page, my idea is to keep it 3 clicks deep at the most to get whatever you need. Nothing out of the ordinary, I'm not trying to create the most amazing &original site ever!
Has anyone done anything similar & can give me any ideas?
Cheers folks!
Rob
Re: Mocking up a mobile site - Any good tips / programs?
Balsamiq mockups is very handy for this kind of thing:
http://balsamiq.com/
Re: Mocking up a mobile site - Any good tips / programs?
Quote:
Originally Posted by
kalniel
Chrome throws up: "balsamiq.com contains content from <snip>, a site known to distribute malware."
False positive?
Re: Mocking up a mobile site - Any good tips / programs?
Quote:
Originally Posted by
Rob_B
The general idea is to have a homescreen of 9 tiles, each tile links to another page with further tiles (as many as needed) for that sub category, each of these tiles then links to a page, my idea is to keep it 3 clicks deep at the most to get whatever you need. Nothing out of the ordinary, I'm not trying to create the most amazing &original site ever!
To follow on from this I would suggest actually aiming for 2 clicks at the most to do most things and 4 for other tasks
Also mock up on paper what you want to do scale wise for a device, you can't fit very much in 3.5" diagonal space
Re: Mocking up a mobile site - Any good tips / programs?
Quote:
Originally Posted by
pauldarkside
Chrome throws up: "balsamiq.com contains content from <snip>, a site known to distribute malware."
False positive?
Balsamiq are kosher - we use them at work.. as for the website I don't know. They were hacked a month ago and they might still have a warning based on that. Details:
http://news.ycombinator.com/item?id=3075405
http://pastebin.com/gvTgYEEd
Re: Mocking up a mobile site - Any good tips / programs?
Cheers guys, I'm not looking to spend anything yet as this is just a side project :)
Re: Mocking up a mobile site - Any good tips / programs?
As fin says, paper mock ups - even if it's just a very rough scribble of locations - will give you a feel for the space you're working in.
Decide what screen size and resolution you're targetting: if you're aiming for general smartphones you'll need to aim for ~ 3.2" @ 320x480 screens; for higher end smartphones you can head more to 4" @ 480x800.
Personally I'd use a paper scribble for the rough layout; drawing a box of the right size on the paper then filling in the spaces in pencil; then I'd use a graphics package like Paint.NET (or indeed you could just use paint!) to create a blank image of the appropriate resolution and set up the buttons etc,; that'll give you an idea how what size your fonts will have to be, how the colours work together, stuff like that.