This week I got the chance to put together a REAAAAAAALLY fun layout.

We found a wire story from the Associated Press on their picks for the “Top Overlooked Albums of 2011″ – nothing really mainstream about the list (unless you count Deep Purple as mainstream), though I had heard of most of the list from my typical indie music immersion through The Indie Machine.

It was kind of a last-minute thing, as deputy editor Mike asked me to see what I could do with it; keeping in mind that there was a possibility that it wouldn’t end up running based on whether or not Metro would run it the next day…

This iTunes-inspired beauty was my Thursday afternoon at work, so Luckily for me they didn’t end up running it.

I lifted most of the colours off a screenshot of the iTunes interface, though the majority of the design work was just eyeballing the design and laying out the document to match (subsequently swapping the iTunes title & Apple logo with the t.o.nighTunes label & moon logo) – leaving me quite happy with the way this one turned out.

Like last year in t.o.night, we decided this December that we would continue on as a tradition of running a creative commons/public domain abridged version of Charles Dickens’ A Christmas Carol.

The design I put together last year was retro-novella inspired, though this year we decided to go a little more Christmas-traditional by stringing up a festive lights border around the whole thing.

Run in 14 parts, the story concluded with our final publication date of December on the 22nd, just in time for the holidays.

If there’s one thing t.o.night Newspaper loves to do above all else, it’s creative advertising – everyone in the office gets really excited whenever we can integrate a client’s advertising right into our typical day-to-day editorial.

One of our latest ad clients, CTS, decided they wanted to do an integrated ad in t.o.night’s “Around Town” section to promote their upcoming special Journey To Christmas: a documentary following people retracing the biblical path to Bethlehem.

Ultimately what we came up with was to make the typical Toronto subway map into a desert themed expedition map, replacing all the subway stop names with those of biblical locations (I tried positioning some of these near prominent spots; such as how “Mt. Sinai” ended up replacing “Queen’s Park” on the map – where the notable Toronto hospital of the same name is located).

The daily weather, gas prices, and recipe were styled to match, as though they were carved into the stone of the era.

I’ve been working on the new website for t.o.night Newspaper for the past several months; going back and forth with publisher John Cameron and VP Tom Hyde to make sure we got everything included that we needed (with future foresight in mind, of course)

Man did that thing need a re-work (see below).

I’m not entirely clear on the building process for the original website – since it existed before I was brought on as t.o.night’s Art Director – but based on the formatting of the code itself and the fact that there was no back-end structure (so all the pages were all individual HTML files) I was willing to lay bets that the guy that built v.1.0 did so in Microsoft Frontpage.

…which I didn’t even realize existed beyond the early 2000s… let alone was still used to make websites.

This was especially annoying whenever we wanted to add something new to the website, as the custom graphics (let alone the layout structure itself) were not conducive to being tweaked very easily, and often led to a great many headaches when trying to figure out how to integrate new video boxes or side pages.

What we ultimately came up with for this new version (seen above) was to emulate the basic look of the daily publication with a prominent white esthetic and thick black-bordered framing to reflect the cover of the newspaper.

Other than the typical blog-style article posting features, I set up a triple-twitter feed pull across the main page for the three prominent transit services in Toronto to accommodate our primarily commuter-based readership: the Toronto Transit Commission, GO (for the greater-Toronto outskirts areas), and VIVA (the prominent transit line north of the core Toronto area).

Separate contact pages were setup for each individual email submission type – general contact, shout outs, events, advertising, and newsie job applications. We also had some great photography on the side pages from one of our newsies – herself, a budding photographer – which really helped bring everything together.

I also maintained the front-end login feature for advertisers to upload material to our server, though I updated it into a jQuery drop-down strip that hides behind the menu bar for just a tinge of playfulness to the design.

Click here to view the completed website.

This was a secret project being kept under wraps at t.o.night Newspaper for probably close to two months now, and only a select few of us on staff had any inkling of what was going on. It was kind of funny how I had to hide my screen whenever I was working on it so no one else in the office knew about it prematurely – kind of spy-like.

I’ve been keeping tabs on the twitter feeds, so I’ve seen this kicking around amongst the business, marketing and journalism blogs – most of which were content to regurgitate press releases earlier this week when this first launched… but since I’m not a press release machine, let’s get down to the nitty-gritty: conception and design!

We’d been running our classy brown-styled business section since the publication redesign in February 2010 to knock out the 1.5″ headers on the pages.

Classy… yes… to the level of prestigious…. well… probably not.

With this latest content partnership – following BlogTO, The Score, and OpenFile – I was looking to really capture the essence of Financial Post’s stylization while maintaining consistency with our template system’s already established page element format.

This ultimately came down to two different sides – first I tried to match FP’s font style and header-dek-body-credit-caption breakdown as best I could with the fonts we already had at hand. The blue colour for the section was also lifted directly off the blue of the .EPS logo file that FP’s creative department supplied us to work with for our creative executions.

This first batch of mockups was inspired by Financial Post’s vertical identity strip with prominent logo adorning the page, though when the FP team came back with revisions they were actually more interested in seeing what the page would look like leaning more towards our sectional top-banner style.

The market number/data concept was something our publisher John Cameron was eager to reproduce as well from their print and web editions, though we needed to find a nightly spin on it so the numbers wouldn’t seem untimely from market-opening numbers (and since the markets are still in full swing when we hit our print deadline at 11AM) – this ultimately fell to quarterly gain and losses numbers by default, though other options exist for future insertions – these were also styled similar to the data arrows in the print version of Financial Post.

Because of FP’s keen interest in promoting the ongoing news on their website, I also tried to emulate a few of their web elements through the use of the red “tomorrow” arrow that could highlight upcoming online stories, and the section breadcrumb arrows jutting onto story photos.

I also did a mockup with the FP logo in black on a white popup box (like our recurring Tuesday OpenFile section), though we ultimately didn’t feel it had enough visual punch. (SEE ABOVE IMAGE)

From the t.o.night design side, we maintained a fair number of elements: after dropping the vertical strip design scheme, the date bar in the upper right remained the same, and it led to my instituting white space separations between some of the page elements to create better sight-lines; the 0.25pt advertising dividers were left intact.

The story brief format also stayed the same with the section-coloured headline, grey locale and credits, and the stock summary box/graph simply changed over to the FP colour scheme.

John and Tom decided they wanted to go “all out” with the ad campaign on this one so I put together a 45-degree decal to slap on all the distribution boxes, as well as a redesigned billboard for our popular underground PATH distribution network.

We’ve been running it for a week now, and the feedback has been fantastic! I wonder what crazy content partnership I’ll get to design next…. :\

The client was looking for something sleek, that would feature a fall leaf border motif. I ended up going with the prominent black and thin white lines to make it punch a little more off the page; I felt the thick black footer on the bottom would help offset the brightly-coloured leaves across the top, as well as act like a solid eye-anchoring brick when readers first look at the page.

The “50% off circle” concept was based off a few menus I’ve seen recently around town – ironically enough I even just saw the concept this evening on television in red for a McDonald’s commercial…. weird.

This week’s Fun Friday contest in t.o.night is sponsored by M&M Meat Shops – I might add; a staple of my childhood was to join my mother when she frequented the store, and with my younger brother in tow progress to the back of the store to the drink the taste-test juice fountain dry.

I had a couple different photos of chicken wing platters to work with, though I settled on this one because of the prominent blue and red tones that I felt would jump off the glossy page of the publication better. In order to make it functional, I copy-pasted a strip of the blue textured background back-to-front-to-back-to-front repeatedly to fill out the space behind the “contest details” text portion of the ad.

… it’s only now that it dawns on me that perhaps this is where my Saturday afternoon wing craving came from.

side note: I adequately quashed that craving Saturday night.

Back in the fall of 2008, while still attending Carleton University and acting as Production Manager at the student newspaper The Charlatan, I took it upon myself to clean out the production computer in preparation for the impending publication redesign and changeover to Adobe InDesign. I ended up tossing mounds of documents into the trash bin, though one piece I did find of interest was a low-res image capture of The Charlatan’s mural in the student-frequented tunnels beneath Carleton’s campus grounds.

I’m still not entirely sure when the piece was designed, though it features the Charlatan’s late 90s logo update to the font “Impact”, and I really liked the 1920s “newsie” esthetic to the piece, so I decided to recreate it for use in our own contemporary publication, web, and marketing.

First off, I took a digital photo of the mural itself – fairly crude, especially with the dirt and custy food smears on it, but it gave me a jumping-off point.

Next, I duplicated the photo in Photoshop and multiplied the layers with different darkening effects in order to clean up all the dark lines that outlined the characters – I recall having particular trouble with the paperboy in the background as his facial features hadn’t aged well and I had to curve it really dark initially to make out the appropriate lines I needed to restore through slight colour and shading variations.

After cleaning up the food smears and the discolourations with a clone tool and healing brush I rebuilt the lettering that had chipped away and it gave me a fairly solid image to work with.

Finally I once again duplicated the layers, but curved things in the opposite direction to really bring the white background back into focus – there may have also been some use of the magic eraser tool here at this point and some readjustment of black lines afterwards. The text was fairly easy to fix with a red-on-black shadow effect after all of this simply because I happened to know that the font used was “impact” because we still used it in the print version of the newspaper at the time.

All in all, it turned out super crisp, and we were able to print at 300DPI and use it once again on the website.

After 5 different versions of this website (7 if you count the reconstructions of previous builds), I was – up until the end of last week – still managing to operate off of a free web hosting service; which I think after 8 years kinda says something.

I started this site in 2003 when I was still in high school working in a music store selling instruments – all that money I made at work went into paying for university, thus I was faced with the ultimate decision of cheaping out on a good number of endeavours I was – and still currently am – trying to undertake. So when I first discovered Byethost in fall 2008 it seemed too good to be true. I eventually discovered that IT WAS, but it took two years for that to really come to the forefront.

On the outside, my fourth free web hosting service Byethost had a fair amount of storage and bandwidth for a free setup; two things that are usually fairly low offerings for free hosting services. But ultimately the thing that drew me to Byethost was its PHP offerings server-side that would allow me to implement a custom WordPress build.

My previous (third) free web host, the now-defunct iTrello, wasn’t operating off of the newest version of PHP and while using content management system Drupal for Stratasfear v.4.0 I often found myself restricted by what sorts of plugins and widgets I could implement on the site as iTrello‘s server couldn’t run a large number of the newer ones. Drupal itself was designed much more for people with a really strong grasp of code, quite beyond my mere HTML and CSS abilities, so I found myself restricted in a great many cases just by that content management operation.

With Byethost though it was kind of like meeting this really cool girl who shared all your interests and made your ex-girlfriend look like a train wreck… it was going to be awesome… so awesome that I became intimately tangled in her web… and then she tried to choke the life out of me.

Right off the bat back in 2008 Byethost wouldn’t allow me to implement WordPress‘ proprietary spam filter plugin Akismet, though with all of the other bells and whistles at start-up I was willing to overlook this issue and manually manage my spam comments.

Over the past 2 years though I’d begun to notice Byethost slowly choking down on its free hosting offerings to new account signups. Until finally about two months ago I started to notice that my own site was starting to receive some of these… issues. Pages wouldn’t load and I’d receive error messages that I was over-taxing the server with too many page loads…. I’d say that’s a little hard to do when the page I’m loading is my WordPress Dashboard…. and I’m the only one with the access information. I had moved in with this girl, given her all of my stuff, and now I wasn’t allowed to use the kitchen, the shower, and in most cases even the electricity.

I tried getting in touch with their help center but that eventually just spiraled into a cyclical series of emails where I’d explain the problem, Byethost Help would tell me that because I was on a free account I wasn’t able to perform those functions (even though I USE TO BE ABLE TO previously), and then they would try to up-sell me to a paid account.

Last Friday I tried to post an update on the site and was completely unable to access my WordPress Dashboard from the moment I turned on my computer in the morning… so later that day, out of pure spite, I signed up for a paid account at one of their competitors: Bluehost.

I’ve worked on websites before that were hosted on Bluehost, so I knew enough about it research-wise to know they’re reliable…. and thus far Bluehost has been TOTALLY AWESOME. Their services dwarf Byethost‘s offerings, and their help desk even walked me through the site migration process step-by-step over live chat.

My new web host and I totally “get” each other…. To all of you still reading this; first: thanks for sticking through the nerd code babble, second: take this as a warning: “Stay away from Byethost, she’s a fickle bitch… and she won’t give back that sick t-shirt you really like either”

Bluehost, I know we just met, but I think I love you….