Shell App - Mobile UI - Dashboard

Trying out some random dashboard mobile UI for Shell Petroleum mobile app.

Comments

Post a Comment

Popular posts from this blog

Harry Potter - Marauder Map Application - UI Design

Image
Introduction: The Marauder Map is a magical map in Harry Potter series. At any given time, the map shows the location of the person in the castle. This quick design proposal captures the idea of porting the Marauder Map into a software application with the following primary and secondary goals. Primary Goals: - Ability to locate a person - Ability to track the location history of the person in a time line Secondary Goals: - Ability to see the location history across various calendar dates. - Ability to load / choose different maps Description of Idea: The Marauder Map application uses Search functionality as the main function, along with Time Line scroll. Like a typical map application (Google Maps) this app has the ability to zoom-in, zoom-out, drag-across-navigation. By default the user must Sign-in, to access the app. The sign-in is a security measure, to show only the user's friends' locations and time-line history. The Screens (The background pencil sketch art court...
Read more

Positioning DIV to the Center of Browser Viewport

Image
Positioning DIV to the center of Browser Viewport Sometimes I write some JS code to prepare my HTML mockups. In this post I am describing the step-by-step approach on how to position a DIV to the center of browser's viewport. Case Assume that you have a DIV and you want to show it upon clicking a link or button. And that DIV must appear exactly on the center of the browser's window. Technically browser's display area is called "View Port". So our aim is to display a DIV to the center (origin) of the view port. How to do this? 1. Create the DIV. 2. Specify CSS properties 3. Write a few lines of Javascript code to position the DIV 4. Insert an action "onClick" to a button or link in the HTML. Step 1 Write the HTML code for the UI and enclose the code chunk with a DIV. Specify some valid ID for the DIV. For example "AddUserDialog". Step 2 A DIV element, by default will be displayed inline. A dialog box or some other "windowed" UI require...
Read more