Screencast shows the same web-dashboard displayed on three different devices – MacBook, iPad, and iPhone
The dashboard contains several distinct widgets:
1.) Multiple carousels (swiping of data) responds to both mouse and touch gestures to swipe the card to view additional sets of data.
2.) A slider to select the date and time range. The slider transforms into the standard iPhone time picker when the web-dashboard is viewed on an iPhone.
3.) Sophisticated charts embedded inside of other charts.
4.) Grids to display data
5.) Persistent Web Design techniques to retain user’s viewing settings
- Bryntum Scheduler and Gantt Charts
- Sencha EXTJS 4.0
- jQuery.ContentCarousel plugin
- Developr theming
- jQuery.blockUI plugin
View the Web Dashboard
In this month-long project, it was my task to come up with a new design to an existing website. The goal was the make the User Interface clear for users and the User Experience easier to use.
I conducted interviews of End Users to gather their pain points and requirements. The information from the interviews helped me to design a new UI for the website which I displayed in a comprehensive wireframe. I’m proud to say, my UI/UX designs were very well received by the end users.
VIEW DEMO (source code – display of tree nodes and child node expansion)
Normal people think of trees as those green living things with branches and leaves. Computer Programmers think of trees as something completely different. (although computer programmers should be considered normal people too).
I made this mult-tree webpage for using jQuery and the plugin treeTable. Using JSON data from a webservice, I generate a table using the old <table><tr><td> tags with their corresponding parent ids. Then I plug in the treeTable — and POOOOOF — the tree appears. It’s that easy.
(actual data has been removed and replaced with fake data)
VIEW DEMO (source code – duplicating form field values and DOM contents)
If you’re familiar with programming and doing a code-difference on the changes you’ve made to your code, you’ll probably notice some similarities to this web-based tool. This tool basically shows the difference between two sets of data and allows you to copy one set of data to the other. There’s more to it, but let’s not bore you too much.
And oh! If you resize your browser, the web app will resize itself to use the most space as possible… because I just hate white empty space.