Responsive Web

Jessica Hullman, a data visualization researcher at UW, hired me to design and develop her responsive website. I had previously worked with her lab before as a design consultant on their Chrome plugin “Atlas of Me”. She wanted a clean site that featured a sidebar with a portrait, vivid colors, and worked across devices. My core challenge in building Jessica's website was to balance a clear academic site identity with contmeporary design practices.

My Role

As the sole designer and developer, I started with a series of quick mockups in Sketch. Then, I hand coded the CSS and HTML, and adjusted for breakpoints. In Photoshop, I created a palette and arrived at the body text color by muting a mixture of the blue and magenta key colors. Google’s material design served as a reference point during this stage. After several iterations, it became clear that the high contrast of the original portrait was affecting the typography by forcing the need for darker text. To balance this, I reduced the contrast of the photo and toned it with the same hue as the body text. I also created two different aspect ratio’s of the photo to adaptively resolve the composition change at the first breakpoint.

In keeping with a contemporary yet academic aesthetic, I used Proxima Nova for the title fonts and sidebar, and Freight Text Pro, a serif font, for the body. For a display font on Jessica’s name, I used Petersburg Web, which matches the structure of Freight Text, but adds a delicate touch at scale. For user-selected text, I used the "selection" pseudo element to add a custom yellow highlight as a design detail.

Outcome

As a designer, it was difficult to combine the requested sidebar with responsive design and contempory aesthetics. It was an interesting challenge. After looking through similar sites, I understand that academic sites share a common visual language, and the sidebar is often an identifier. One of the potential problems with using the sidebar is that, on mobile devices, every page would look the exact same above the fold. To get around this, we chose to only display the news feed on only the index page for mobile devices. This is a workable solution, but it’s not ideal for users that may have experienced the site on a desktop before viewing it on a mobile device.

[unex_ce_button id="content_8xpdwfnlp,column_content_66tilmjdv" button_text_color="#ffffff" button_font="semibold" button_font_size="15px" button_width="auto" button_alignment="center" button_text_spacing="2px" button_bg_color="#3c76c4" button_padding="15px 45px 15px 45px" button_border_width="0px" button_border_color="#000000" button_border_radius="2px" button_text_hover_color="#ffffff" button_text_spacing_hover="2px" button_bg_hover_color="#1b5ab3" button_border_hover_color="#000000" button_link="http://faculty.washington.edu/jhullman/index.html" button_link_type="url" button_link_target="_blank" has_container="" in_column="1"]VIEW SITE[/ce_button]