Saturday, September 29, 2012

Another PirateBox UI Design

I took my time and learned a little more about html5 and CSS3 web design and also after reading some comments on reddit for example, I have made yet another UI design for the PirateBox.

Features


  • A cleaner structure than before using html5 and CSS3 design elements
  • 4 pages only: Home, Download, Forum and Mobile, where chat is included on the main page
  • Compatible with Firefox, Chrome, Internet Exlorer plus I have an old Blackberry phone, even on that the layout remained the same and it was displayed just like in my browser
  • Mobile version is available from the menu, however as I said, even my old BlackBerry phone could display the standard site properly. (I could not get my script to work, I will keep on working on that)
  • Dark colour theme (as most people wanted)
  • I have implemented the upload feature in the main page, so no more pop-up (drawback: if someone refreshes the page manually, the upload is interrupted...)
  • Download/Browse opens up in a new browser tab, this does not interrupt the upload or trigger the main page to re-load
  • Site scales with your screen, so it won't case any issues with smaller screens
  • I will publish a slightly different version soon of the same design, which is almost identical, but the chat window is on a different page (more tabs on the top), upload comes still as a pop-up and loads in the background, uninterrupted and some more functions. I am even experimenting with some short html5 video clips on the main page.

Preview


Now initially I wanted to make some screenshots again, but I though it would be nice to put together a short video instead. I have recorded this on my Windows7 machine, because it has a wider screen and it will show and illustrate the features of the site much better than my Ubuntu machine's samaller screen.

Download from GitHub

Again feel free to modify anything on the design, basically any text can be re-written in the html documents (or the logo replaced with your favourite image) as the layout is done by the CSS file. If you don't need the mobile or forum menu elements (if you don't have a forum) simply delete those elements from the nav bar.

Any feedback is more than welcome and I am happy to take some tips of what kind of design YOU want for a PirateBox.

IMPORTANT (Edit)
There was a glitch with the chat as it did not refresh itself. I have fixed this, so please re-download the files from GitHub to apply the changes.
Please check the update of this post: UPDATE

5 comments:

  1. Good work. Please, advise what tools do i need to customize or design new web UI

    ReplyDelete
  2. Thank you.
    I wrote this in a simple text editor, in Windows you can use Notepad++ which is maybe the best and in Linux systems you can use e.g. gedit or geany, it is only personal preference. Also you can use any type of html editor like Frontpage (Win) or Kompozer (Linux)it is again what do you feel more comfortable with.
    It is basically standard html website design.

    ReplyDelete
  3. This comment has been removed by the author.

    ReplyDelete
  4. Thank you for the effort to creating this valuable source of information.

    ReplyDelete
  5. Excellent post.I want to thank you for this informative read, I really appreciate sharing this great post. Keep up your work…

    ReplyDelete