Results 1 to 7 of 7

Thread: Mocking up a mobile site - Any good tips / programs?

  1. #1
    ALT0153™ Rob_B's Avatar
    Join Date
    Jul 2006
    Posts
    5,876
    Thanks
    301
    Thanked
    645 times in 439 posts

    Question 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

  2. #2
    Banhammer in peace PeterB kalniel's Avatar
    Join Date
    Aug 2005
    Posts
    29,282
    Thanks
    1,549
    Thanked
    2,954 times in 2,394 posts
    • kalniel's system
      • Motherboard:
      • Gigabyte X58A UD3R rev 2
      • CPU:
      • Intel Xeon X5680
      • Memory:
      • 12gb DDR3 2000
      • Graphics card(s):
      • nVidia GTX 1060 6GB
      • PSU:
      • Seasonic 600W
      • Case:
      • Cooler Master HAF 912
      • Operating System:
      • Win 10 Pro x64
      • Monitor(s):
      • Dell U2311H
      • Internet:
      • O2 8mbps

    Re: Mocking up a mobile site - Any good tips / programs?

    Balsamiq mockups is very handy for this kind of thing:

    http://balsamiq.com/

  3. #3
    It's good to be bad pauldarkside's Avatar
    Join Date
    Oct 2006
    Location
    Cornwall
    Posts
    2,930
    Thanks
    295
    Thanked
    378 times in 259 posts
    • pauldarkside's system
      • Motherboard:
      • ASUS Maximus VI Hero
      • CPU:
      • Intel Core i7-4770K & Corsair Hydro H80i
      • Memory:
      • Corsair Vengeance 32GB (4x8GB) 1600MHz DDR3
      • Storage:
      • Corsair Force GS 128GB, Crucial M500 480GB, WD Black 4TB
      • Graphics card(s):
      • EVGA GeForce GTX 780 Ti Superclocked
      • PSU:
      • Corsair Professional HX850W
      • Case:
      • Corsair Graphite 780T (White)
      • Operating System:
      • Windows 8.1 Pro 64bit
      • Monitor(s):
      • Asus ROG Swift PG278Q
      • Internet:
      • BT Infinity @ 78Mbps

    Re: Mocking up a mobile site - Any good tips / programs?

    Quote Originally Posted by kalniel View Post
    Balsamiq mockups is very handy for this kind of thing:

    http://balsamiq.com/
    Chrome throws up: "balsamiq.com contains content from <snip>, a site known to distribute malware."

    False positive?
    My only concern is should I hide my true identity? A costume maybe?

    0iD: Plus weeing in it every now & again does it good
    scaryjim: 10" is just a little large to hold comfortably in one hand, which makes it a lot harder to tap, swipe and generally interact with.

  4. #4
    HEXUS.social member finlay666's Avatar
    Join Date
    Aug 2006
    Location
    Newcastle
    Posts
    8,546
    Thanks
    297
    Thanked
    894 times in 535 posts
    • finlay666's system
      • CPU:
      • 3570k
      • Memory:
      • 16gb
      • Graphics card(s):
      • 6950 2gb
      • Case:
      • Fractal R3
      • Operating System:
      • Windows 8
      • Monitor(s):
      • U2713HM and V222H
      • Internet:
      • cable

    Re: Mocking up a mobile site - Any good tips / programs?

    Quote Originally Posted by Rob_B View Post
    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
    H3XU5 Social FAQ
    Quote Originally Posted by tiggerai View Post
    I do like a bit of hot crumpet

  5. #5
    Banhammer in peace PeterB kalniel's Avatar
    Join Date
    Aug 2005
    Posts
    29,282
    Thanks
    1,549
    Thanked
    2,954 times in 2,394 posts
    • kalniel's system
      • Motherboard:
      • Gigabyte X58A UD3R rev 2
      • CPU:
      • Intel Xeon X5680
      • Memory:
      • 12gb DDR3 2000
      • Graphics card(s):
      • nVidia GTX 1060 6GB
      • PSU:
      • Seasonic 600W
      • Case:
      • Cooler Master HAF 912
      • Operating System:
      • Win 10 Pro x64
      • Monitor(s):
      • Dell U2311H
      • Internet:
      • O2 8mbps

    Re: Mocking up a mobile site - Any good tips / programs?

    Quote Originally Posted by pauldarkside View Post
    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

  6. Received thanks from:

    pauldarkside (07-11-2011)

  7. #6
    ALT0153™ Rob_B's Avatar
    Join Date
    Jul 2006
    Posts
    5,876
    Thanks
    301
    Thanked
    645 times in 439 posts

    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

  8. #7
    Not a good person scaryjim's Avatar
    Join Date
    Jan 2009
    Location
    Manchester
    Posts
    15,097
    Thanks
    1,209
    Thanked
    2,252 times in 1,853 posts
    • scaryjim's system
      • Motherboard:
      • Dell Inspiron
      • CPU:
      • Core i5 8250U
      • Memory:
      • 1x 8GB DDR4 2400
      • Storage:
      • 128GB M.2 SSD + 1TB HDD
      • Graphics card(s):
      • Radeon R5 230
      • PSU:
      • Battery/Dell brick
      • Case:
      • Dell Inspiron 5570
      • Operating System:
      • Windows 10
      • Monitor(s):
      • 15" 1080p laptop panel

    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.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •