Well, to be honest I’ve actually been pretty busy. I started the “104 Designs for 2010″ project in the hope that building a solid portfolio would net me more work, and that’s exactly what happened. Word to the wise: the new secret to business success, as Gary Vaynerchuk eloquently put it, is working your a** off. I’m doing some (hopefully long-term) freelance work with a local agency and loving it.

Is this the end for 104/2010? No, certainly not, but it’s definitely been put on the back burner. I think what I most enjoy about 104/2010 is the way it lets me experiment with new web technologies, so as I find new techniques and tools, I’ll be sure to put them to use here. (I’ve been thinking a lot lately about the Pure CSS3 AT-AT Walker demo…)

I’m still writing articles as usual, and I’ll have another post up soon about Information Architecture.

Thanks for reading!

To solve the advertising problem, I created a vertical column on the right side of the design to hold 125×125 pixel ads. This size is smaller than the ads the site currently offers, but I feel this is offset by the positioning of the ads directly next to the content, rather than at the very bottom of the site. The redesign has space for five of these ads.

To solve the readability problem, I changed the central content area into a photo index of the issue’s ten top stories. The featured story gets a wider display area, and the remaining nine form a grid underneath. Furthermore, the “Community News” section, generally found in the middle of the paper, gets a sidebar on the left for excerpts from the first few stories, with a link to the full community news section.

The site’s original horizontal navigation at the top of the site was transformed into three lists of links each in the header. This groups the links by type, and also echoes the grid structure of the article photos underneath.

Finally, I kept the grid layout for the paper’s eight columnists below the main content area, but tweaked the layout a bit to give it a more open look. There is slightly more spacing between each columnist’s grid space, and I got rid of the large borders around each grid space as well.

So, that’s Design 006. Stay tuned for the License to Kill, Design 007.

The site’s title in the upper-left is positioned using CSS3 Transforms, rotating the headers -5 degrees and giving them 20 pixels of top margin to keep them legible. This solution degrades nicely in browsers that don’t support (all of) CSS3, appearing as standard, horizontal headers. The headers are also given a transparent background with RGBA color. The site uses the excellent Museo font for its headers thanks to Cufón.

The site navigation in the upper right has rounded corners thanks to border-radius, and the same transparent background as the headers.

The current film section is set to a fixed height with overflow: auto to get vertical scrolling. I chose this setup because it allows visitors not as interested in the current film to see that there is additional content underneath without scrolling, while allowing interested readers to learn more about the film without clicking to a new page. Upcoming films are presented with their film posters and the dates of their showings below the current film.

The background image for the site comes from the 1923 Harold Lloyd film “Safety Last!“, chosen because I feel it evokes a sense of whimsy and a connection to film history. The original image from the film was given a color overlay layer and some artistic filters in Photoshop to help it blend into the background.

Only 99 designs left to go for the year. Next, I’ll be taking a look at the world of online magazines.

On to the technology. The main feature of this site is the combined vertical and horizontal scroll box featuring photos of each condo complex. This was achieved using the jQuery Tools library from FlowPlayer and its “scrollable” plugin. The vertical column on the left is a single scrollable which acts as the navigation for the “pages”, and each “page” is a horizontal scrollable. This setup could be expanded for additional properties by allowing the vertical scrollable to work in the same way as the horizontal scrollables – displaying four properties at a time, and having “next” and “previous” buttons to show additional properties. This site also uses Cufón to show headings and links in Futura. I am certainly interested in CSS3′s @font-face property, but I’m waiting for the dust to settle before embracing it wholeheartedly.

As always, you can interact with this new design on my separate portfolio site. I’m working on integrating the portfolio site into the current site’s “Portfolio” page. Be sure to check out the keyboard navigation – up/down to change pages, and left/right to change photos.

Well, we’re 21 days into January and I have four designs to show for it. I think the year is off to a great start, and I look forward to bringing you more designs as I finish them.

Visually, the design emphasizes the cars themselves, with additional emphasis on dealership specials (on the left, in a dark grey box) and a simple contact form to let the dealership’s sales professionals follow up with interested customers. The central area provides a convenient place for the dealership to announce news items and sales on the site’s front page.

The site makes great use of manufacturer stock photography. It is common practice for auto manufacturers to provide large portions of their associated dealerships’ websites, but my intent here was to fully integrate those portions into the site as a whole. Too many dealership websites look like a mish-mash of professional and amateur work, with little attention paid to information architecture or overall design.

What’s most interesting about this design is the underlying techniques. This is the first site I’ve built using HTML5. The site uses HTML5′s simplified doctype; new semantic elements like <header>, <article>, and <hgroup>; and CSS3 styles like border-radius, box-shadow, and text-shadow. As usual, I used Cufón for font replacement in the navigation section and the header at the top of the page.

The design seeks to be light but professional, with a color scheme that fits with South Florida. I also wrote the site’s copy, which is based on an amalgamation of other psychologist websites.

As before, you can find the interactive version of this site design on my separate portfolio site.

So, that’s two designs done. Only 102 left to go!

On to the design itself. For my first design, I re-did the website for the Florida Grand Opera. The original FGO site was quite good, but it didn’t do much to inform interested ticket buyers about what was currently being performed or how to buy tickets. My re-worked design moves the side navigation to a horizontal bar across the top of the site, using the freed-up space to display news items instead and leaving the main content area for displaying information about the currently-scheduled performance. Click the image to interact with the new design; you can also see the original site.

Is this design perfect? Hardly. There are a large number of items from the original site that I left out in creating this new design which would have to be added back – sponsor logos across the bottom, links to Facebook and other social media sites, and the PDF brochure (which, compared to the original website, is simply stunning – I was very surprised that more of the PDF’s assets were not used to create their website). But for a week of on-and-off effort, I’m pleased with the result.

I’m also launching a new subdomain to host all of the designs to come this year: portfolio.arborwebsolutions.com. Each design will be available in a numbered subdirectory; you can find the current design under “001″.

Thanks for reading, and I’ll be back again in a few days with my next design.