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. 

0.1 SITE MAP

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

0.2 WIREFRAMES

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. 

0.3 MOCKUPS

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. 

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.

[unex_ce_button id="content_tlu0h76f3,column_content_u3crrqe86" button_text_color="#000000" button_font="light" button_font_size="14px" button_width="full_width" button_alignment="left" button_text_spacing="2px" button_bg_color="#ffffff" button_padding="10px" button_border_width="1px" button_border_color="#ed5650" button_border_radius="0px" button_text_hover_color="#ffffff" button_text_spacing_hover="2px" button_bg_hover_color="#ed5650" button_border_hover_color="#ed5650" button_link="/project-banana/" button_link_type="url" button_link_target="_self" has_container="" in_column="1"]PREVIOUS[/ce_button]
[unex_ce_button id="content_tlu0h76f3,column_content_2zkscy89k" button_text_color="#000000" button_font="light" button_font_size="14px" button_width="full_width" button_alignment="right" button_text_spacing="2px" button_bg_color="#ffffff" button_padding="10px" button_border_width="1px" button_border_color="#ed5650" button_border_radius="0px" button_text_hover_color="#ffffff" button_text_spacing_hover="2px" button_bg_hover_color="#ed5650" button_border_hover_color="#ed5650" button_link="/lets-get-our-training-on/" button_link_type="url" button_link_target="_self" has_container="" in_column="1"]NEXT[/ce_button]