2017 redesign

[jglovier]

Redesigning the site for a fresh take on my work that is more focused on presenting interesting content, but still showcases my work history and projects.

I've learned a lot of really interesting things over the years working at GitHub, appendTo, and CURE, and I think forcing myself to write about it more intentionally and with a specific audience in mind would help me solidify those lessons internally as well, and give me space for reflection to discover new insights.

So that's my goal for this work.

I'm also going to force myself to do more process writing by posting regular shots of my progress to dribbble along with a thoughtful write up about the work which will help me to think more intentionally about my design choices, keep me in the habbit of writing about design work, and give me a good article as a final product that I can post as a case study on redesigning my own website.

[jglovier]

Been dorking around with some various styles lately. I realized my current iteration is just too busy and graphically distracting.

As much as I want the site to be really interesting and fun, the design has to be really clear and simple to support the content.

The content reigns on this site. Everything else is just to help keep your interest long enough to care about the content.

Here were my initial mocks:

I did some further exploration on the previous style...

But ended up really simplifying for the direction I'm currently exploring:

...which is funny because it really takes me back to the Tumblr precursor to my 2011 site:

[jglovier]

Got the sidebar and intro spiked out.

Sidebar TODO:

• tweak the mid border to possibly extend into the parent padding
  • would need to use an hr element instead b/c the current border is just a border-top on the site-nav element
• add blue background animation to site-nav links
  • make them animate in from the left on hover, and on active
• wire up the nav to auto-highlight the links when the section is in page view
  • use a class that I can hook to the link background animation
• add css theme picker
  • use a body class that gets applied with JS to toggle the styles

Intro TODO:

• make arrow at the bottom
• create hand waving animation
  • use css animations and transforms (rotate and scale)
• center content but keep left aligned

[jglovier]

Tweaking the design for the intro section a bit...

[jglovier]

Fleshing out the custom one a bit more...the fingers still need some work on proportions, but the this shows the general concept pretty well:

[jglovier]

...tidied up a bit, and added a filled option:

I feel like the filled option looks less like a dove after staring at it for a long time 😆

in comp:

[chejazi]

FWIW, when I glanced over the text "content, copy, design and code" my brain instinctively read "copy design and code" which is quite bad :P - might be worth rewording that bit.

[chejazi]

I think part of the "dove" effect is the colors. The wave lines are similar in color to water.

[jglovier]

"content, copy, design and code"

@chejazi good catch!

[jglovier]

The wave lines are similar in color to water.

@chejazi Interesting idea...here it is with switched out colors:

[jglovier]

Great tip re: the colors. I think this makes a lot of sense given the use of the red color over black is very strong, the blue color (as primary color) on the white area is stronger. 🙇 ✨ 🎨

[jglovier]

Also the red hand could be perceived as culturally insensitive, so I like using blue for that reason too. ⚡

[andrewpthorp]

I really like the new hand, (wasn't a huge fan of the old custom one).

Neat concept!

[jglovier]

[andrewpthorp]

Also, I just realized, the hand in ^ kind of looks like a dove. Not sure if intentional but I like it.

[jglovier]

Made some tweaks to the color pallette, and some other layout improvements, include a toggle function to the sidebar nav.

[jglovier]

Did the following today:

• refactored the home page articles and work section to use a _data file and single template
• added a collection for case studies and spiked out the case studies template
• ongoing design tweaks
• sidebar is only open on homepage now

[jglovier]

Headed a more interesting direction. What I had felt really sterile. Leaning toward a direction with a more published feel (i.e. more traditional marketing site style design).

A sketch:

...and a loose comp: