Now I am by no means a graphic designer. In fact, I'd argue that my understanding of colors, patterns, and other design principles is on par with most grade schoolers. However, in about three hours of work on a lazy Sunday afternoon, I was able to turn this:
Into this:
As you can see, not a ton has changed; my goal was not to completely design a new site. However, as I'll show in the next screenshots, I've tried to unify the interface a bit, get rid of the overzealous use of shadows, gradients, and rounded borders, as well as add a bit of white space to spread things out a bit. I also tried to flatten some of the progress bars to get rid of the outdated "Web 2.0" gloss effect.
For the transactions page, I've simply added white space to make things seem less cramped (pardon the gray box, I had to box out some of my own personal info):
Within the budgets page, I've gotten rid of all sorts of rounded glossy boxes and replaced them with whitespace and flat progress bars.
Not much has changed in the "Trends" page, but I did get rid of a lot of the cramped feeling and spread the content out a bit.
Finally, the "Investments" page was given more whitespace as well and a wider width for content:
Here is a list of other little changes I've made:
- Increased the overall width to 1200px from the original 900. This gives us more room to work and added whitespace.
- Changed all the popups to have sharp edges rather than rounded corners
- Replaced the shadows with clean lines
- Made all the menus square with straight hover edges rather than rounded corners
- All the progress bars are flat now
- Removed the bulky hover effects on the budgets page
- Removed ads on the homepage and investments page
- Removed the annoying Norton Certified seal in the footer
- Widened the transactions and their details
- A bunch of other small touches
I did not:
- Get rid of the "Ways to Save" page. This is how Mint makes money and I don't want to destroy their revenue stream.
- Modify the "Goals" page. It is so poorly designed right now with background images and borders and popups I wasn't brave enough to touch it.
- Change the chart or graph styles for trends
Now, for a disclaimer: I do not guarantee that this will work for everyone's account. I tried to test it as much as possible, but there are a lot of hidden pieces of functionality within Mint that I may have missed. Finally, this code is all written out below. It's entirely CSS, so you can decide which parts you want to use. This code will not steal your account info or do anything else malicious.
I also don't make any guarantees about supporting this in the future. Mint could change their site tomorrow and break all of this. Fortunately, it's very easy to undo (just erase the user styles).
So how can you get this?
It's all CSS! I use an extension called "StyleBot" for Chrome (download link), but Firefox has similar extensions as well. Simply copy and paste the following styles into the extension by opening the extension while on mint.com, then clicking "Edit CSS" at the bottom, and then pasting it in.
#brokerage-link {
display: none;
}
#filters-wrapper {
border-radius: 0px;
box-shadow: none;
margin-left: 40px;
}
#filters-wrapper.closed {
border: 0px;
border-bottom: 0px solid lightgray;
margin-bottom: 25px;
}
#filters-wrapper.open {
border: 0px;
border-bottom: 1px solid lightgray;
}
#graphSelectionNav {
width: 100%;
}
#graphSelectionNav ul li {
}
#ira-link {
display: none;
}
#menu-category li.active, #menu-categoryTypeFilter li.active {
border-radius: 0px;
}
#menu-category ul {
border-radius: 0px;
}
#menu-compare ul {
border-radius: 0px;
}
#menu-compare ul li.active {
border-radius: 0px;
}
#module-accounts ul li h3 {
background: none;
border: none;
border-bottom: 1px solid #DFDFDF;
box-shadow: none;
}
#module-advice {
display: none;
}
#module-budget table div.bar {
background: none;
background-color: #ededed;
border-radius: 0px;
height: 20px;
}
#module-budget table div.bar span {
background: none;
background-color: #3FAF3B;
border: none;
border-radius: 0px;
font-weight: normal;
padding-bottom: 4px;
padding-top: 3px;
text-shadow: none;
}
#module-budget table tr {
height: 40px;
}
#module-budget table tr.overbudget div.bar span {
background: none;
background-color: #ED5D51;
}
#module-budget table tr.warning div.bar span {
background: none;
background-color: #EFBE2E;
}
#module-budget thead th.bar {
width: 70%;
}
#module-budget.module table thead th.budget {
padding: 0 11px;
}
#module-goals table th.name {
width: 40%;
}
#module-goals table th.next-step {
width: 40%;
}
#module-investments table tr {
height: 40px;
}
#module-offers {
display: none;
}
#month-line {
display: none;
height: 500px;
}
#overview-left-column {
margin: 0px;
width: 302px;
}
#planning_group {
padding: 5px 0 10px 250px;
}
#pop-categories, #pop-rules, #pop-tags, #pop-hotspot-overlay {
border-radius: 0px;
}
#rollover-link {
display: none;
}
#search-filters small {
border-radius: 0px;
}
#transaction-ad {
display: none;
}
#trust {
display: none;
}
#txn-column-accounts {
min-width: 240px;
width: 20%;
}
#txn-detail {
background: none;
}
#txnEdit #actions {
left: 698px;
}
#txnEdit-basic tbody td.date, #txnEdit-basic-multi tbody td.date {
max-width: 12%;
}
#txnEdit-form fieldset, #txnEdit-form-multi fieldset {
width: 726px;
}
#txnEdit-form, #txnEdit-form-multi {
top: 48px;
width: 765px;
}
#txnEdit-mt-account label.txn-edit-labels.checknumber {
width: 90px;
}
#txnEdit-note, #txnEdit-note-multi {
width: 588px;
}
#txnEdit-split-icon {
margin-left: -9px;
}
#txnEdit-toggle.noattachcol, #txnEdit-toggleP {
left: 350px;
width: 765px;
}
#ways_to_invest_control {
display: none;
}
#wrapper {
width: 1200px;
}
.custom-filters-action-wrapper {
left: -130px;
top: 10px;
}
.filters-top-line {
display: none;
}
.module .module-menu .menu-wrapper {
border-radius: 0px;
}
.module-reminders-content .timeline .chart .date {
width: 25px;
}
.module-reminders-content .timeline .chart .dates {
width: 810px;
}
.module-reminders-content .timeline .chart .divider-line {
width: 830px;
}
.module-reminders-content .timeline .chart .graph {
background: none;
background-color: #3FAF3B;
border-radius: 0px;
}
.nav #activeMenuItemGreenBar {
width: 238px;
}
.overview {
width: 100%;
}
.overviewPage .column-left {
box-shadow: none;
}
.overviewPage .column-main {
width: 95%;
}
.overviewPage .module .module-menu {
left: 823px;
}
.pageContents > div {
width: 100%;
}
.planningPage #incomeEE-list ul.ee_header {
padding-bottom: 0px;
}
.planningPage #timeline {
padding: 15px 0 5px 260px;
}
.planningPage .allocate_to_goals a.button {
background: none;
border-radius: 0px;
}
.planningPage .budget-summary {
border-radius: 0px;
box-shadow: none;
}
.planningPage .budget_group {
padding: 5px 0 10px 260px;
}
.planningPage .right_col {
width: 310px;
}
.planningPage div.ee_list ul.ee_header {
padding-bottom: 0px;
}
.planningPage div.leftcolumn {
width: 240px;
}
.planningPage ul.planning_items .edit-details {
padding: 8px 0 0 1px;
}
.planningPage ul.planning_items .over-under-budget-text {
margin: 6px 4px 0 0;
}
.planningPage ul.planning_items div.status span.progress_bar {
background: none ;
background-color: #3FAF3B ;
border: none ;
border-radius: 0px ;
font-weight: normal ;
padding-bottom: 4px ;
padding-top: 3px ;
text-shadow: none ;
}
.planningPage ul.planning_items div.status span.total_bar {
background: none ;
background-color: #ededed ;
border-radius: 0px ;
height: 20px ;
}
.planningPage ul.planning_items li {
height: 70px;
}
.planningPage ul.planning_items li div.status span.progress_bar.full, .planningPage #incomeBudget-list-body li.overbudget div.status span.progress_bar.full {
background-color: #ED5D51 ;
}
.planningPage ul.planning_items li.hover {
background: none;
padding: 7px 35px 0px 12px;
}
.planningPage ul.planning_items li.warning div.status span.progress_bar {
background-color: #EFBE2E ;
}
.productPageContent {
width: 100%;
}
.txnEdit-btn {
border-radius: 2px;
}
a#txnEdit-category_picker.noattachcol, a#txnEdit-category_picker-multi.noattachcol, a#txnEdit-category_picker, a#txnEdit-category_picker-multi {
left: 600px;
top: 15px;
}
a.find_all span.find_all_wrapper {
background: none;
}
a.find_all, a.split {
background: none;
border: 1px solid #D8D8D8;
margin-bottom: 5px;
margin-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
a.find_all:hover, a.split:hover {
background-color: #D8D8D8;
}
body div#graph-container {
padding-left: 80px;
}
div#column-accounts.column {
width: 100%;
}
div#column-accounts.column ul li div.result-number {
border-radius: 0px;
left: 227px;
}
div#column-accounts.column ul li li {
padding: 10px 10px;
}
div#column-transactions div.controls#controls-top a.button {
border-radius: 0px;
}
div#flash-container {
margin-left: 10px;
padding-left: 90px;
}
div#main {
width: 1200px;
}
div#main.trends-main {
width: 100%;
}
div.column#column-accounts ul li, div.column#column-accounts ul li li {
}
div.column#column-content {
width: 900px;
}
div.column#column-transactions {
width: 98%;
}
div.inspector {
border-radius: 0px;
}
div.left-nav {
width: 240px;
}
div.pop.newpop {
border-radius: 0px;
}
div.premium-filters {
width: 850px;
}
div.right-column {
box-shadow: none;
width: 945px;
}
div.txn-edit-group {
width: 598px;
}
table.account {
width: 100%;
}
table.transactions {
width: 766px
;
}
table.transactions tbody td {
padding: 12px 4px 12px 3px;
}
td.column.accounts {
border-right: 1px solid #E1E6DD;
box-shadow: none;
width: 240px;
}
td.column.details {
background: none;
}
td.column.details-budgets {
background: none;
}
td.column.transactions {
width: 70%;
}
ul.horizontal-bar li {
background: none;
background-color: #3FAF3B;
border-radius: 0px;
}
ul.horizontal-bar li.debt {
background: none;
background-color: #ED5D51;
border-radius: 0px;
}
ul.vertical-bar li a {
background: none;
background-color: #3FAF3B;
border-radius: 0px;
}
ul.vertical-bar li a.debt {
background: none;
background-color: #ED5D51;
border-radius: 0px;
}
No comments:
Post a Comment