Resumé
Details
» Work samples
Contact form

Mike Elek: Resumé / Work Samples
  1. The Royal Wedding. This is what I refer to as a TV event. That is, if you were going to follow it, you probably would watch it on television and not the Web. However, we did provide as much coverage as possible, including a reporter in London, who was filing updates to the blog. For this, I separated the home page into three publishing processes. One person handled the news portion. Another person updated the Royal Wedding section. A third person updated the blogs. I did this through a series of <!-- includes -->. In fact, we had three people building this day's home page from three separate locations -- a first for the Post-Gazette Web operation. I also used a random script to load a different photo. The sample shows just the Royal Wedding section, which sat at the top of the home page.
    » See HTML file
    [ If you reload the popup window, it should display a different photo through the use of javascript. This allowed me to keep it at the top of the page without it becoming stale. ]
  2. These are three home page promos for Barack Obama's inauguration. These ran at the top of the home page over the weekend and into Monday. To keep it fresh, I found three images and made cutouts of each. It was time-consuming but it was more visually interesting to have a different photo for three of the four days. I added the red and blue border to alert the reader to this very special and historic event in a subtle manner. The photos are background images, which allows for more precise placement and wrapping of the accompanying text. I added extra space (leading) between the lines so that it didn't appear cramped. An italic line promoted coverage in print and online.
    » See screenshots
  3. This was a home page setup that I did for a package on green homes. My goal was to draw attention to the centerpiece in a non-traditional manner. I added extra space between the italicized lines of text to highlight it in a subtle manner. I wanted this to be very simple, clean and uncluttered.
    » See screenshot
  4. Everyone expects their newspaper to deliver big on Election night. The key is to do it in a manner that makes it visually exciting for what is a television event. Our art staff created the banner, and I designed everything else for this package. We still had news that day, but I decided to limit the display to just three other news items near the bottom of our news region. While I built the basic framework days in advance, much of it had to be restructured and rebuilt as the news evolved. I selected and processed all photos (close to real time), as well as wrote the headlines, summaries and headline links, all while maintaining an accurate electoral vote count at the top of the page. This was the 31st and final update of the home page.
    » See screenshot
  5. In the second redesign, we had what was known as the "tab box," which was a region in the middle of the page that let us spotlight stories in other sections. I began to use background images and odd-shaped text wraps to make them more visually interesting. I handled all image selection, image crops and text.
    » See screenshots
  6. The Pirates home opener. Pittsburgh is a sports town. Steelers, Penguins, Pirates, Pitt, Penn State, etc., etc. For the home opener, I wanted to try something different, so I added a live box score on the home page and updated it inning-by-inning. I'm not sure that I would do it again, but it was worth a shot. Plus, we then had additional material: staff videos, a 360-degree panoramic QuickTime video, sidebars and more. I also swapped out our usual icons with small baseballs. Some ideas I use again. Some I don't. This is one that was a one-time effort, and I would make major changes if I were to do this again.
    » See screenshot
  7. Here are three ideas to promote a rock video contest held by the site. The image is an animated GIF that started downsized versions of seven screen captures from the Flash video. I used a GIF animation program to create the transitions between the original seven images. In all, the animated GIF contains 43 layers. The gray-green background image is from the microsite created for the contest and allows for a nice visual tie-in between the promo and the microsite. We ended up using the second and third promos for the site.
    » See HTML file
  8. When I have the time, I sometimes like to ask, "What if ...?" One thing that I thought would be interesting would be to allow the reader to see several different main photos on the home page. It requires some javascript, as well as an understanding of how <DIV> layers work. It takes a bit of time to set up, but it's different and worth the effort.
    » See HTML file
  9. Super Bowl, 2008 season. It's the Holy Grail of Pittsburgh sports when it's the Steelers in a Super Bowl. Side note: I was asked to build the promo for the mobile site at 6 p.m. on a Friday afternoon. I then had to incorporate it into a package that had been built several days before. The sample with the swappable photos was taking idea No. 7 one step further.
    » Screenshot: Super Bowl Sunday
    » Screenshot: Super Bowl Monday
    » HTML file: Super Bowl Monday with swappable photos
    » HTML file: Promo for a "season in review" special section
  10. For the Best of 2009, the photo staff had assembled a Flash multimedia stage that highlighted the work of the photographers. This changed several times from the first design to the final. The idea was to offer a bold display. I created the background image to replicate the look of corrugated steel (always a favorite with the hometown audience). I also created and added a rollover image, so that you knew that the image was linkable. I used a bit of color to the title, and I pushed the title to the far left. We read from left to right. I wanted this to be fun for the reader, so I added the asterisk to the main title with a short italicized line under the title.
    » HTML file: A home page promo for the 'Best of 2009'
  11. Motivation and learning. Learn from your successes, and more importantly learn from your failures. I built a prototype site that offered a radically different approach in 2006 to a new home page. It wasn't selected, but I learned much from that exercise and continue to apply those lessons today. Not all designs work with every site. Each site's design must reflect the audience, as well as the site's goals and targets. I do a post-mortem on most project pages and think about what worked and what didn't work. I would rethink my approach to the two items below.
    » Interactive dinosaur map
    » Festival map (2008)
    » Festival map (2007)