Historical Site Designs

2000 design, Splash PageIn order be able to fully understand where we are today, one has to explore where we’ve been.  The Schumin Web was launched on March 23, 1996, and in more than a decade of presence on the Internet, the design has continuously evolved as I’ve learned new techniques, changed styles, expanded the site, and periodically redesigned in order to incorporate a new look and make changes.

I first started paying attention to site design as an element of the site’s history in 1999.  Before that, site redesigns were done every few months, and considered kind of throwaway – pictures of site designs were not retained.  From 1999 to 2004, the site was fully redesigned annually.  From 2004 to 2012, the site maintained a similar design, while changes came more incrementally, tweaking the style and introducing smaller improvements over time.  In 2012, the site was again fully redesigned.

On this page, my intention is to display some of the various historical site designs that Schumin Web has used, and comment on what each design brought.

March 23, 1996
Site Launch

1996, main page

The Schumin Web launched on March 23, 1996 as Ben Schumin’s Home on the Internet.  It launched with four pages, consisting of the home page, a “News of the Week” page, an “Information About Me” page, and a page of links.

For all that people say about quality-of-content vs. quality-of-design, the original design focused entirely on content, with next to no emphasis on style.  The design looked very crude, but outside of an AOL “My Home Page” generator, this was my first attempt at making a Web site.  And it seemed to work for the most part.

Fall 1996 – September 1999
“Frames” era

Main page, circa late 1998

In the fall of 1996, I implemented framesets.  The site design depended on a frameset to work, with the design usually involving a frame for navigation and another frame for content, and sometimes a third frame for a header.  Several designs came and went during this period, with varying colors and arrangements.  The design shown here is from fall 1998, not long after the transition to the name The Schumin Web.

During this period, the site carried several names.  From September 1996 to September 1997, the site was called Ben Schumin’s Internet Command Center.  Several site designs were used during this period.  From September 1997 to July 1998, the site was called The Great American Road of Ben Schumin, and was accompanied by a highway-themed design.  From July to October 1998, the site was called The User-Friendly World of Ben Schumin, and incorporated a predominantly blue design.  The site became The Schumin Web in October 1998, as part of a redesign to correct what I perceived as a bad design with the “User-Friendly World” design.

This period introduced the quote article in the fall of 1998, and the current rainbow logo was added in July 1999, replacing the oddly-angled block letters used previously.

September 1999 – September 2000
First “frameless” design

1999 design main page, with tan background  1999 design main page, blue background

In September 1999, the site broke free of frames for the first time.  The site was originally a very light brown color, and later changed to a blue-and-white clouds background.  Navigation was accomplished via a single menu on the right-hand side of the page.  During this period, I got my first digital camera, and pages that would later form the original Photography and College Life sections were introduced.  This period also introduced a Web Cam feature to the site, since discontinued.

I first became serious about archiving content during this period, establishing the Quote Archives, and posting site updates.  These would later form the Archives section.

September 2000 – June 2001
Introduction of sections

2000 design, decorated for Christmas in December  2000 design, later in the design's lifecycle in early 2001

By September 2000, the navigation structure had reached its limit.  It had become too long, extending beyond the bottom of the content panel of many pages.  To rectify this, the site was organized into sections for the first time, and a number of older pages were retired.  The original sections created were Archives, College Life, Main Event (now Odds and Ends), Major Areas, Web Cam, and Writings.  The site took on a yellow appearance with green hyperlinks, and the www.schuminweb.com domain was introduced with the launch of the redesigned site.  Additionally, the Online Store was introduced shortly after this design premiered.

Midway through this design’s lifecycle, two significant changes happened.  First, I began to wear glasses, which triggered a change in the photo of me (the introductory photo of me was not changed monthly at that time).  Secondly, the site’s URL was added beneath the logo in large type to advertise the domain name, as my host (SimpleNet at that time)

June 2001 – August 2002
“Circles” design

2001 design, main page  2001 design, Archives section

In the summer of 2001, the annual site redesign focused on refining the 2000 design.  This led to a design similar to the previous one, but it refined a number of elements.  Visually, the darker yellow color now defined the navigation bar, and a gray header bar was introduced, carrying the site’s logo and URL.  All of the section graphics were now in circles.  Section navigation was directly beneath the header bar, with the exception of the main page, where the section headers were in the navigation bar.  The sections themselves were also revised, as the Online Store and Photography (then “Photo Essays”) were split from Main Event.  This design was later retrofitted for database-provided content in certain areas, which greatly simplified the way the site was edited.

Design for this version was done on paper, and then designed for the Web based on the paper design.  This is the only design to date where the original concept work was not done by designing a mock-up page for the concept, and then porting it over to a production model.  In this case, the mock-up was built based on the paper illustration, and then the production model was created from that.

Of all the various historical Schumin Web designs, this one was my favorite, as it was clean, cheery, and made good use of the screen.

August 2002 – July 2003
“Minimalist” design

2002 design, Splash Page  2002 design, Main Page

In August 2002, Schumin Web underwent another redesign.  This design went for a minimalist approach, and was designed with the assistance of an impromptu online focus group (the first and last time I will use a focus group for design).  The header bar was light blue, the main background was white, and links were blue.  Site navigation was initially accomplished by two drop-down menus, with one for navigating between sections, and a second for navigating within sections.  Days after the design launched, this navigation structure was significantly revised due to complaints about usability.  The revision restored the section bar as a single line of text links, and enlarged the intra-section menu, changing it from a drop-down menu to a scroll box.  Site content was not significantly revised at the time of the redesign, aside from a number of new photo sets that were released at the same time as this new design.  These new photo sets were designed to take advantage of the wider format introduced in the Minimalist design.  The section structure remained the same.  This design also revised the splash page for the first time since its introduction in early 2001, reducing the logo’s size and adding a photo of me which changed monthly.

I adopted this design, replacing the “Circles” design, due to a desire to have a wider content panel.  At the time, I was still designing the site assuming that the user had an 800×600 screen resolution, and I felt that having the navigation bar on the side of the screen with a wider content panel would make the site too wide and cause a horizontal scroll bar to appear.

July 2003 – October 2004
“Blue Cream Fade” design

2003 design, Main Page  2003 design, College Life

2003 design, Quote Archives  2003 design, Web Cam section

The “Blue Cream Fade” design was a refinement of the earlier “Minimalist” design.  This design responded to various complaints about the earlier design.  A number of people complained that the site was “too white”, and that the navigation box was too small.  These were addressed and corrected by adding color, and splitting the section bar across two lines to make more room for an enlarged navigation box.  The Writings section was dropped at this time.

This design also introduced Life and Times to the site, designed to eventually replace the College Life section, as my time at JMU would soon come to an end.  The idea was to have photo sets typical of College Life-style photo sets, but outside the college environment.

Life and Times, however, had a bit of an identity problem early on.  The Journal was introduced as a feature of Life and Times in place of a formal introduction page in keeping with the “life and times” idea, and the original photo sets for Life and Times were sets that had been transferred from the newly-renamed Photography section.  The Journal as first implemented in Life and Times displayed the five most recent posts.  This was later changed to 20, and then scaled back to 15.  While it seemed like a good idea at first to combine a blog with photo sets, the Journal quickly outpaced the photo sets, and the juxtaposition of the two was somewhat awkward.  Additionally, Journal entries beyond the cutoff point for display on the main Life and Times page were displayed in the Archives section, rather than within Life and Times.  This scattered the Journal across different sections of the site, and made things more confusing than they needed to be, leading to a major revision in 2004.

October 2004 – June 2008
“Faded Blue” design

2004 design, Main Page showing quote  2004 design, Archives section

2004 design, Online Store  2004 design, Million Worker March photo set in Life and Times

By October 2004, the Journal’s design had become frustrating enough that change was needed.  It had become painfully clear that the Journal was not arranged in a way that worked to its own advantage, and navigating the site via a scroll box was just a touch weird.  Thus when I redesigned in 2004, I went for a back-to-basics approach, which ultimately produced a site that had more in common with the 2001 “Circles” design than the previous two designs.

In creating this new design, I finally made the determination that I would be safe in designing for 1024×768.  That determination meant that I had more horizontal space to work with.  That new space would once again be filled with a navigation bar, doing away with the scroll-box design once and for all.  I also reworked the header, and streamlined it into something smaller and more elegant.  The color scheme went to all-blue, with a fade from a darker blue in the header.  The section configuration was once again changed, with the addition of a dedicated Journal section.  Additionally, the Web Cam section was dropped, and College Life was moved from a section on the main site to a separate subsidiary site.

The Faded Blue design was launched over a period of two weeks.  Unlike previous redesigns where I was working with a high-speed connection and could launch the entire redesign in one sweep, I did this one in phases, thus operating a site with two designs at the same time.  The first changes took the Journal out of Life and Times and placed it in its own section, on the new template.  The Web Cam section was dropped at this time.  Then each remaining section was redesigned, with College Life being spun out about midway through.  The process was complete on November 1.

Following this redesign, changes began to be introduced incrementally, rather than in annual redesigns.  The quote article was retired in early 2005, which led to a main page redesign that introduced the Photo Feature for the first time.  The main page was further modified in 2006 when accommodations were made in order to allow the Photo Feature to display horizontal photos as well as vertical photos.  Thus by the time the “Faded Blue” era ended in 2008, the site looked very different than it did in 2004.

From March 2006 to March 2007, the URL beneath the logo was replaced with “Celebrating ten years online” in commemoration of The Schumin Web‘s ten years on the Internet.

In 2007, while this design was active, the site was ported from a Windows host to a Linux host.  Due to the extensive use of ASP, the entire site had to be rebuilt, since the existing site would be unable to operate correctly on a Linux server.  However, I still liked the existing design, despite having used it for three years by that time.  Thus the new site was designed to look exactly like the old, with only minor tweaks, and rewrites of some older pages.  The 2007 redesign also was soon known for being a little “kludgy“, due to my having done the redesign work in a hurry, as the site had been completely down for several days when the redesign work began.  Because I was in a hurry to get the site back up and running, I ended up cutting a few corners when building the new templates.  This meant that the site didn’t work quite as well as I would have liked, though it still got the job done.

June 2008 – September 2012
“Blue Squares” design

  2008 design, Photography main page

2008 design, Journal  2008 design, March on Crystal City photo set

In 2008, I refreshed the site’s appearance while maintaining the basic layout.  To this end, I changed the background of the site from the fade to a blue “squares in squares” pattern, and tweaked a number of features throughout to better integrate this new look with the site’s identity.

2010 design, Main Page  2010 design, Photo Feature Archives

In 2010, the site was once again rebuilt to the same specifications as then existed, with only minor tweaks on the basic design.  The main thrust behind the 2010 redesign was to make a long-overdue change from a layout driven by HTML tables to CSS style sheets, as well as slightly widening the content panel.  This was done to make future redesigns much easier, requiring the modification of only a few files to make big changes.  With the site’s already being somewhat taken apart for the creation of this new build, many pages were again updated or otherwise reworked in order to improve writing and appearance.  Additionally, unlike in 2007, as the site as it then existed was still running without issue while this build was being done, there was no hurry to get this design live, piecemeal or otherwise.  To this end, great effort was put forth to do the job the right way, without cutting corners or otherwise “cheating” on design elements.

WordPress conversion, Main Page  WordPress conversion, Journal

WordPress conversion, Plungefest 2011 Photography set  WordPress conversion, Splash Photo Archives

With my mastering of CSS that came over the course of creating the 2010 design, it helped set the stage for Schumin Web‘s most ambitious redesign and reworking of the site to date, a project codenamed “Falcon”.  This redesign converted the site from a mostly-static site to a site running on the WordPress content management platform.  During an extended development period that would literally touch every corner of the site, I took advantage of WordPress’s built-in features to streamline a number of areas of the site and generally make things run more smoothly.  In addition, every image that could be restored from the original masters was restored, with higher-resolution images made available in many places where they previously were unavailable.  This provided an added advantage of bringing older material up to current design specifications.  However, despite all of the enhancements, the site under WordPress was designed to the same specifications as the 2010 site, with many elements from the 2010 design’s style sheet carried directly over to the new WordPress site.  While my original intention was to also do a full redesign of the site’s appearance along with the WordPress conversion, a new design proved to be a stumbling block, and I decided that it was a better idea to “split the baby”, and build to the existing specifications once again, and then change the site’s outward appearance at a later date.  WordPress theme development, which made WordPress look like Schumin Web, occurred from June 2011 to August 2011.  Content porting began in August 2011 and lasted through May 2012, with work on new material, cleanup, and beta testing occurring in May and June 2012.  The Schumin Web under WordPress launched on July 1, 2012.

September 2012 – August 2013
“Modern Blue” design

Main Page  Photography main page

"Childhood Days" from Odds and Ends  Journal, April 2013

Chicago 2013 from Life and Times, bottom of page  Photo Feature Archives

With Modern Blue, introduced September 30, 2012, Schumin Web finally broke free of the design that it had carried for nearly eight years, introduced in October 2004 with Faded Blue and continued with Blue Squares.  With Modern Blue, the site took on a modular appearance, as the header, content panel, sidebars, and footer were in separate boxes, with visual space between each element.  The splash photo moved from the Welcome page (where it had been relocated following the elimination of the splash page during the WordPress conversion) to the top of every page as part of a new full-width masthead.  This marked the first time that my photo would be on the Main Page on a regular basis since the Circles design of 2001-2002.  The Journal was redesigned for the first time with Modern Blue, making better use of space and making features introduced in the WordPress conversion appear natural (as compared to their being retrofitted into an older design).  The site also got a specific print stylesheet for the first time with Modern Blue, providing a version of the site optimized for hardcopy and PDF distribution.

Certain legacy design elements were retained in Modern Blue.  While Journal entries got a new, modern header, most other pages retained the earlier header style consisting of centered text.  Additionally, multipart photo sets retained the dashed part numbers and white navigation boxes.

August 2013 – Present
“Modern Blue 2.0” design

Main Page  Store

"Shrouded in Scaffolding" set in Photography  Journal

"New York City" set in Life and Times  Photo Feature Archive

Modern Blue 2.0 was a major refinement of the earlier Modern Blue concept.  The most visible change was the restyling of legacy design elements to match the Modern Blue design language.  This meant no more centered headers, and no more white navigation boxes.  These were restyled to match styles previously introduced earlier in the Journal, providing a unified appearance for all header items.  Additionally, in Octrober 2015, the Modern Blue 2.0 era marked the first change in site sections since the launch of the Faded Blue design in late 2004.  At that time, the “Major Areas” section was eliminated, and the “Online Store” section was renamed “Store” and turned into a launch page for multiple e-commerce sites.

Comments are closed.