Another PirateBox UI Design

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 wont 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 machines 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 dont need the mobile or forum menu elements (if you dont 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

Read full post »

Android UI Design

Android UI Design

Android UI DesignKey Features

• Take an initial idea for an Android app and develop it into a detailed plan, supported by sketches and wireframes
• Provide a better experience for your users by following best practices and the new material design principles
• Work more efficiently and save time by testing your ideas at an early stage by building a prototype

Book Description
Great design is one of the key drivers in the adoption of new applications, yet unfortunately design considerations are often neglected in the face of "will it work," "can we make it quicker," or "can we get more people using it"?

This book seeks to redress this balance by showing you how to get your PM to start treating the design phase of your project seriously. This book is focused entirely on the development of UI features, and youll be able to practically implementing the design practices that we extol throughout the book.

Starting by briefly outlining some of the factors you need to keep in mind when building a UI, youll learn the concepts of Android User Interface from scratch. We then move on to formulate a plan on how to implement these concepts in various applications. We will deep dive into how UI features are implemented in real-world applications where UIs are complex and dynamic.

This book offers near complete coverage of UI-specific content including, views, fragments, the wireframing process, and how to add in splash screens-everything you need to make professional standard UIs for modern applications. It will then cover material design and show you how to implement Googles design aesthetic in a practical manner. Finally, it ensures the best possible user experience by analyzing the UI using various tools, and then addressing any problems they uncover.

By the end of the book, youll be able to leverage the concepts of Android User Interface in your applications in order to attract new customers.

What you will learn

• Develop a user interface that adheres to all the core material design principles
• Transform your initial app idea into a concrete and detailed plan
• Add Views, ViewGroups, layouts, and common UI components to your own Android projects
• Use fragments and various strategies to gather user input
• Create a new Android Studio project and develop it into a prototype
• Identify and solve problems with your apps UI to deliver a better user experience

About the Author
Jessica Thornsby studied poetry, prose, and script writing at Bolton University before discovering the world of open source and technical writing, and has never looked back since. Today, she is a technical writer and full-time Android enthusiast residing in sunny Sheffield, England.

She enjoys writing about rooting and flashing mobile devices, Java, Eclipse, and all things Android and Google. When not wordsmithing about technology and obsessing about the latest Android developments, she keeps a blog about her local food scene, and writes about looking after exotic pets. On the rare occasions that shes dragged away from her computer, she enjoys beer gardens, curry houses, the Great British seaside, scary movies, and spending lots of time with her house rabbits and chinchillas.

Read full post »