Permalink
Fetching contributors…
Cannot retrieve contributors at this time
126 lines (92 sloc) 8.04 KB
title layout option category tags updated drafted unique_id period description project image_index image
Website for Jean Flanagan (2016)
singel
featured-home
projects
design
jekyll
process
responsive
web
2016-10-09 00:57
2016-10-03 12:34
2016-10-03:jean-flanagan
2016-07 to present
A redesigned professional website for a science education specialist, writer, and editor.
2016-10-05-jeancflanagan-home.png
src alt
2016-10-05-jeancflanagan-banner.jpg
Banner and home page for jeancflanagan.com
src alt caption quality
2016-10-05-jeancflanagan-small-old.jpg
A small-screen view of Jean’s old website designed in 2014
<span class="text-before">Before:</span> The 2014 design.
75
src alt caption quality
2016-10-05-jeancflanagan-small-new.jpg
A small-screen view of Jean’s new website designed in 2016
<span class="text-after">After:</span> The new design.
75
src alt caption
2016-10-05-jeancflanagan-home.png
Grid view of home page for Jean Flanagan
Redesigned home page layout for Jean’s site.
src alt caption
2016-10-05-olivermakes-hire-home.png
Grid view of hire page for Oliver Pattison
My hire page that served as an initial design inspiration.
src alt caption
2016-10-05-jeancflanagan-progressive-disclosure.png
Progressive disclosure pattern – list items with expanded or contracted summaries.
A common pattern for progressive disclosure.

A couple of years ago Jean and I collaborated on the design and development of her personal website. Recently we decided to revisit the design. Like [the previous version]({% post_url 2014-02-16-jean-flanagan %}) the site is responsive, built with Jekyll, and hand-designed. But we had some new goals and approaches. We iterated: we kept what already worked and enhanced other aspects of the design.

{% assign image = page.image[1] %} {% include block/image-srcset--small.html class="grid-figure screenshot" %}

{% assign image = page.image[2] %} {% include block/image-srcset--small.html class="grid-figure screenshot" %}

{% capture ancillary %}

A shift in goals

by Jean Flanagan

Writing and photography are only two parts of what I do. The home page should introduce who I am and emphasize the bigger picture of what I do professionally.

A chronological list of content is better suited to a frequently updated blog. However, to create an effective portfolio of writing samples, the best and most relevant articles should be hand selected and featured. {% endcapture %}

{% include block/ancillary.html %}

Improvements over the 2014 design

  • Re-worked home page design
  • New section and archive layouts
  • Updated typography, layout, and visual design
  • Lower maintenance authoring
  • Improved responsive handling of content (images, video embeds)
  • [Secured with TLS]({% post_url 2016-01-24-aws-tls-certificate-with-jekyll %}) and hosted on Amazon Cloudfront

Highlighted features

A focused home page

Having collaborated recently on an “available for hire” page for me, Jean and I initially planned to create a similar page for her. After sketching and planning, we realized that this approach would be better suited as a replacement for the home page on her site. We borrowed a few ideas from my hire page, but otherwise started with a clean slate.

We shifted away from featuring articles and photography on the home page, and towards better explaining Jean’s work. This allowed us to do away with a separate “about” page, letting the content on the main page serve that purpose. While the existing articles and photos are still indexed and available to browse, the focus is on presenting Jean’s professional background. The fluid layout allows for future blocks of content, like featured writing or introductory text.

{% assign image = page.image[3] %} {% include block/image-srcset--small.html class="grid-figure screenshot" %}

{% assign image = page.image[4] %} {% include block/image-srcset--small.html class="grid-figure screenshot" %}

Color and typography

Our goal was a professional, restrained visual design. This time around, we took a more subtle approach to color and typography. The design needed to be highly legible and organized.

The previous iteration relied heavily on washes of green and did not use contrast effectively enough. The new approach is monochrome with slight blue color accents that call attention to points of interaction. A single hue of blue is the basis for all of the colors and shades for the design (except for hover and focus states). We use higher contrast font weights and colors, with body text set at a smaller scale, but thicker and more legible.

After auditioning a couple dozen typefaces, we decided to seek a flexible, modern, geometric sans-serif typeface with a variety of weights and OpenType features. That led us to select the typeface Soleil, which offers a bit more personality than a typical geometric typeface. Soleil suited equally well to body text and headings. For performance reasons, we limited the design to only two weights, adjusting letter spacing and using small caps in some places.

Progressive disclosure

With dense content on the home page, we needed a pattern to selectively show and hide sections of writing. A common pattern that can be seen everywhere from e-commerce sites to search engine results is a progressive disclosure pattern with an indicator arrow. I had recently been using a similar style for pattern blocks in my pattern library for my own website, and it made a lot of sense in an expandable (that is, progressively disclosed) list of skills on Jean’s home page. These are sections of content with more text than can be comfortably displayed on a single page, but not so much that we wanted inner pages describing each item.

{% assign image = page.image[5] %} {% include block/image-srcset.html class="image screenshot" %}

Process notes

I have been incorporating pattern libraries into all of my projects recently. Pattern libraries are highly useful methods to communicate and maintain a design. In my process for designing this site, I used a pattern library as a design tool to develop modular patterns and establish baseline typographic styles before working on layout and structure for the site. Even before I knew the shape of the site, I had a sense of what some of the components would look like. Now that the site is mostly complete, I have a living library where those visual forms, CSS styles, and HTML markup are displayed and documented. Pattern libraries form a point of reference for future design iterations to branch from, and to ensure that the design is doing what it is supposed to be doing.

It was an interesting challenge to start completely fresh on this project. We reused barely any code from the earlier iteration, but improvements in our process helped us to work much more efficiently. At the same time, we improved every aspect of the site, leaving both of us much happier with the implementation and design.


Related project

{% include block/project--satellite.html id="2014-02-16:jean-flanagan" %}

{% capture endnote %} [View Jean’s website live]({{ page.project.url }}) or [check out the source on GitHub]({{ page.project.source }}).

Note: this website is continually being updated and developed, so the information on this page is only a snapshot of it as it existed on 2016-10-05. Compare [the new design]({{ page.project.url }}) to the old design. {% endcapture %}

{% include block/ancillary--endnotes.html %}