| title | layout | option | category | tags | updated | drafted | unique_id | period | description | project | image_index | image | ||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Website for Jean Flanagan (2016) |
singel |
|
projects |
|
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 |
|
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[2] %} {% include block/image-srcset--small.html class="grid-figure screenshot" %}
{% capture ancillary %}
A shift in goals
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[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 %}