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:
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;
}