Grid Crazy

WEB DESIGN                JAN - JUL 2016

WEB DESIGN                JAN - JUL 2016

WEB DESIGN               

JAN - JUL 2016

WEB DESIGN                JAN - JUL 2016

WEB DESIGN                JAN - JUL 2016

After numerous iterations, some leaning more towards my minimalistic and understated aesthetic and some striving to satisfy the brand-heavy and more colorful requests of the company executives, our team came up with a happy medium that incorporated both aesthetics in this redesign of the SideMark website

We decided to elevate the underlying building blocks (grids) to the visual surface – through the application of select borders to divs. Struggling with the idea of using stock images to show process or team work, we opted to have one big beautiful image for each page, at 100% width and height. These images are mostly of architecture and space, thus implying that SideMark is in the business of designing space.

We were responsible for information architecture, copywriting, wireframing, and light prototyping (using Webflow).

The small print

The entire marketing department - Jennifer Herald, Wan Choi, and myself - contributed to this project.

To be safe, I opted to replace a big portion of the copy with some bacon ipsum.

Due to budgetary reasons, the project is on hold until 2017. Furthermore, budgetary and time constraints have now dictated that we use Squarespace. 


We simplified the site map by combining related content. The connect page holds leadersihp bios, employee spotlights, as well as a contact form.

Grid crazy site map


Keeping to responsive tradition, we decided to have 4 columns for desktop, 3 columns for tablet, and 1 column for mobile. For the grid-heavy pages, we took into consideration how the information would stack up. 

Desktop layout framework
Mobile layout framework


The final design features a large background image for each of the main pages. On the home page, each grid box features two visible borders. We opted to go for a haphazard look in selecting which borders are visible. When the screen goes to a mobile size, the visible borders are always the top and left borders.

Home page - mobile
Process / Services - tablet
Produts - desktop
Portfolio - mobile
Leadershi- tablet
Connect - desktop
Portfolio - tablet


Our solution for dealing with hover on the mobile state proved problematic. It created a two-step interaction for what is traditionally a step click or tap. When users clicked or tapped on a thumbnail, they expect to be taken to the linked page.

Instead, they are greeted some a hover state and then they have to click or tap on the + sign to get to the linked page. Our attempt to preserve the hover state on mobile made the user experience across all devices more complicated.

On a brighter note, someone pointed out that the use of the QR tag in this project was perhaps the only instance he did not hate.

And on an even brighter note, working on this project not only allowed me to practice the basic tenets of user experience design, but it afforded me the chance to really see the human element behind any design endeavor, no matter how mundane the subject matter.