[BLOG] Recent design changes on Icrontic
The staff talked up rebooting Life @ Icrontic this past week, and our advertising partner sent us all new ad code that needed to be implemented on a short timeframe. It was time to dive back into Icrontic's code, and I took the opportunity to tighten up a few design elements on the site.
First and foremost are the main tabs at the top of the page. As a vestige of the old banner position, there was a gap between the tab bar and the start of the white content page. This broke the tab illusion and, I think, minimized the tabs. Obviously, the main navigation element on a site this packed with content shouldn't be lost in the shuffle. By closing the gap and matching the selected tab color to the page background, the tab illusion is now in full effect.
We renamed the "Home" tab to "Tech" to clear up the focus of the site to casual readers and to even that focus out between our major channels. Clicking on other tabs shouldn't give the impression of digging down, but of seeing more parallel content.
I've long felt that the separation between the main content and sidebar wasn't all it could be. The dotted line wasn't enough; it needed a minor color shift, so I've implemented that throughout the site as well.
One of my frequent beefs with the front page is that headlines sometimes got lost in the bevy of ads and images. Our authors are big fans of adding graphics to most stories, so we needed headlines that could stand up to that sort of visual weight. I bumped up the text size of the headlines 30% and increased the space above each headline by another 6 pixels. The difference is pretty profound; the focus immediately returned to the headlines and made skimming the index pages much easier.
Not in the latest revision but not long ago, I moved the banner ad up next to the logo and moved the 3-Features images to the top of the home page only. We were getting alot of feedback that readers were confusing the 3-Features with further ads, and we felt that tightening up the non-index pages by over 100 vertical pixels would be well worth it. In hindsight, I wish we'd done it sooner.
Last, I made a major technical change. All three Wordpress installs (Tech, Gaming, and now Life) run off of the same theme. The subtle differences (header color and sidebar content) are now accomplished through conditionals rather than entirely separate themes. This really streamlines things for me. For instance, to increase the headline size across all three channels was a single edit. Previously, I would've had to find that property and change it in three different places. The result of this was nagging inconsistencies even between just Tech and Gaming.
One of the keys to getting work done promptly is to make it easy on yourself and minimize obstacles. Hopefully I'll be far less reticent do template work on the site now that I've simplified all future changes.
First and foremost are the main tabs at the top of the page. As a vestige of the old banner position, there was a gap between the tab bar and the start of the white content page. This broke the tab illusion and, I think, minimized the tabs. Obviously, the main navigation element on a site this packed with content shouldn't be lost in the shuffle. By closing the gap and matching the selected tab color to the page background, the tab illusion is now in full effect.
We renamed the "Home" tab to "Tech" to clear up the focus of the site to casual readers and to even that focus out between our major channels. Clicking on other tabs shouldn't give the impression of digging down, but of seeing more parallel content.
I've long felt that the separation between the main content and sidebar wasn't all it could be. The dotted line wasn't enough; it needed a minor color shift, so I've implemented that throughout the site as well.
One of my frequent beefs with the front page is that headlines sometimes got lost in the bevy of ads and images. Our authors are big fans of adding graphics to most stories, so we needed headlines that could stand up to that sort of visual weight. I bumped up the text size of the headlines 30% and increased the space above each headline by another 6 pixels. The difference is pretty profound; the focus immediately returned to the headlines and made skimming the index pages much easier.
Not in the latest revision but not long ago, I moved the banner ad up next to the logo and moved the 3-Features images to the top of the home page only. We were getting alot of feedback that readers were confusing the 3-Features with further ads, and we felt that tightening up the non-index pages by over 100 vertical pixels would be well worth it. In hindsight, I wish we'd done it sooner.
Last, I made a major technical change. All three Wordpress installs (Tech, Gaming, and now Life) run off of the same theme. The subtle differences (header color and sidebar content) are now accomplished through conditionals rather than entirely separate themes. This really streamlines things for me. For instance, to increase the headline size across all three channels was a single edit. Previously, I would've had to find that property and change it in three different places. The result of this was nagging inconsistencies even between just Tech and Gaming.
One of the keys to getting work done promptly is to make it easy on yourself and minimize obstacles. Hopefully I'll be far less reticent do template work on the site now that I've simplified all future changes.
0