arik Savage

Elisco Design Architects

Elisco homepage: a large photo of a two-story living room with stone columns and tall windows, under the logo and navigation, with the trail of red squares running down the right side. Elisco project page for Adler Weiner Research: a short project description beside a slideshow of office interiors, with thumbnails of related projects below. Elisco Areas of Practice page: three columns of practice areas, from offices and healthcare to custom cabinetry, beside an architecture quote.

Elisco Design Architects is a Chicago-area architecture and construction-management firm. This was one of the first sites I both designed and built, and it’s still one of my favorites! It was my chance to play with bolder colors and more varied layouts. Fun fact: it’s still live today, completely unchanged since launch.

Site remains live in its original form as of 2026, unchanged since launch.

The design

The design borrows from Elisco’s logo: overlapping blocks in strong colors and a playful little trail of dots. My favorite touch is the trail of red squares running the full height of the site. It adds a bit of fun to an otherwise clean layout. Everything else steps back so the photography, and the client’s work, can shine.

How the trail of squares works

Old-school CSS, and proud of it. The squares are a single SVG (one square, plus an equal amount of empty space above it) used as a background image that repeats down the page. The trick is the container: it’s absolutely positioned to line up with the logo, and it holds a second element that actually paints the repeating background.

HTML
<div id="dotscontainer"><div id="dots"></div></div>

<style>
  #dotscontainer {
    width: 7px;
    height: 100%;
    position: absolute;
    right: 171px;
    top: 0;
    overflow: hidden;
    z-index: 999;
    pointer-events: none;
  }

  #dots {
    margin-top: 72px;
    float: left;
    width: 7px;
    height: 100%;
    background: url('/images/elisco-squares.svg');
    background-repeat: repeat-y;
    background-size: 100% auto;
  }
</style>
The original markup and CSS, lightly tidied.

Saving the portfolio from Flash

The portfolio was the real challenge. The client’s galleries and albums lived in SlideShowPro, a photo manager that was already defunct, with slideshows based in Flash. A native HTML/JavaScript slideshow was the obvious way forward.

So I reverse-engineered SlideShowPro’s MySQL database (images, albums, tags and categories) and built a custom Wolf CMS plugin that reads the existing data directly. No re-uploading, no lost photos. New PHP templates power a variable-width slider for each album, and “galleries” (groups of related albums) fill in the related-project thumbnails under each slideshow.

Source on GitHub

Looking back

This site is more than ten years old, and it shows. I’ve picked up a million little techniques since then, and the standards have moved on too. The code for the squares isn’t anything groundbreaking, either. It earns its place for what it does for the design, and for teaching me to color outside the lines.

If I built it today, I’d give performance and accessibility a lot more love, and those squares would be a single pseudo-element hanging off the logo instead of two extra divs. But the design? Still holds up.

Stack & skills

  • PHP
  • MySQL
  • Wolf CMS
  • JavaScript
  • CSS
  • SVG
  • UI/UX

See my resume

Related