The Brothas and Sistas Guide to Using Grid-Based Toolkits for Web Interfaces

To quickly create an effective user interface for the upcoming Shop Wall Star, I decided to go with Twitter Bootstrap with Microsoft Metro UI design guidelines to quickly generate something to work on. The main reason why I decided to do this because traditional HTML development is an outdated skill and will need to have an user interface that is compatible with both tablets as well as desktop and laptop computers. Grid-based toolkits like Twitter Bootstrap are excellent tools and we going to discuss why we using it for the Shop Wall Star project. One of the biggest UI redesign I’m impressed with is the Metro UI from Microsoft for their Windows 8 rollout. What makes the Metro UI design powerful is the ability to use on touch screen as well as a desktop and creates a perfect balance to develop one UI that can work on both. In addition, Metro UI focus on embedding data at the top level instead of doing the old HTML style of drill-down navigation to get to detailed data. A very good resource for understanding how to create Metro UI or grid-based layouts is the Microsoft UX guideline at http://msdn.microsoft.com/en-us/library/windows/apps/hh779072.aspx and I recommend you read and add this to your collection. When you read it, you will see how it makes sense in creating simple and functional web design that works for both touch interfaces and desktop computers. And the HTML is not as hard as it used to be back in the day, you can use toolkits to make these kinds of interfaces. This is actually a quick prototype we have created for the Shop Wall Star QR shopping application and we used Twitter Bootstrap which I found very easy to use. In fact, if you do not know a lot of HTML, just download the Twitter Bootstrap at http://twitter.github.com/bootstrap/index.html and read the instructions which I found to be easy to follow and was quickly up and running. Look at the profile page of a member that looks more like a dashboard instead of the boring set of links to shops, account management. Notice how I was able to present data on the front screen as well as provide commands such as change password. Notice how we have support on this page for the Facebook group or contact us. This is how Swagg-Scientific UIs for all of our upcoming projects will look like because we tested this raw design on both desktops and touch screen and it works out well. Now look at our registration form mockup above, this is a grid based layout but notice how we are using columns to organize forms by categories. We will set up our form input just like Windows Metro UI where you scroll left to right in a panoramic fashion to enter data instead of scrolling up and down. This works better on tablet devices and for desktops, it is just a nice clean and different interface than that vertical scrollbar that I always hated with it comes to HTML design. If you haven’t notice, this is a mockup that show the validation error message and the follow up message that an activation email was sent – this is how you should mock up your presentation to get an ideal how your web site will look before coding. Our next steps is to get the UI nice and smooth and then attach the UI to the “engine” that drives the code. But many of you brothas and sistas out there want to apply some of the hustles but you don’t know how to create web pages or user interfaces. I think for you cats, just play around with Twitter bootstrap and follow the instructions. You should notice in all of my screen shots that you do not need fancy design and instead see real functionality that will let us do business and get our money up and provide a real service. Note: Wonder why I put up a Chinese site using a grid interface? Because this grid design is simple enough to create international based sites in multiple languages quickly with little text and more focus on visualization. We got to think global....

5 thoughts on “The Brothas and Sistas Guide to Using Grid-Based Toolkits for Web Interfaces

  1. Thanks for the info. I was building up my own websites for clients and users but I will research on this as well. I want to start my workflow this week.

    Keep it coming with the knowledge

  2. Tight!!! I see the direction y’all headin in…when you wrote about this before I saw the opportunity to design smart posters on behalf of local retailers for flat fee or commission. This layout looks smooth and is on that “jugad” level!!!

    I’m going to dig deeper, but how has the registration and sign up worked for somthing like this. I see the importance of tracking ,offering deals, even using geolocation…my thought is that some of your locations I might be just trying to scan and buy so I can get to my destination. Will you have a ‘sign up later’ option or an attachment in an invoice? From the evidence of the hustle up here in bmore there is a higher conversion rate for easy transactions…(that could just be the market and the product, still collecting data).

    1. The Ninja,

      Invoicing will be sent via email and it will operate like any small traditional business accepting checks or credit card payments in 30 days. The reason why is this is a business-to-business operation and we are hosting on a $5/month shared hosting account – I do not want our billing process on those servers. We will just show bills but will not hold any credit card/payment data there, just provide the service.

Comments are closed.