New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

2017 redesign #70

Merged
merged 486 commits into from Aug 19, 2018

Conversation

Projects
None yet
3 participants
@jglovier
Owner

jglovier commented Jul 5, 2017

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 jglovier self-assigned this Jul 5, 2017

@jglovier

This comment has been minimized.

Show comment
Hide comment
@jglovier

jglovier Jul 25, 2017

Owner

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:

image image image
image image image

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

image

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

image

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

image

Owner

jglovier commented Jul 25, 2017

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:

image image image
image image image

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

image

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

image

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

image

@jglovier

This comment has been minimized.

Show comment
Hide comment
@jglovier

jglovier Jul 25, 2017

Owner

Got the sidebar and intro spiked out.

image

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
Owner

jglovier commented Jul 25, 2017

Got the sidebar and intro spiked out.

image

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

This comment has been minimized.

Show comment
Hide comment
@jglovier

jglovier Jul 25, 2017

Owner

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

image

Owner

jglovier commented Jul 25, 2017

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

image

@jglovier

This comment has been minimized.

Show comment
Hide comment
@jglovier

jglovier Jul 25, 2017

Owner

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:

image

Owner

jglovier commented Jul 25, 2017

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:

image

@jglovier

This comment has been minimized.

Show comment
Hide comment
@jglovier

jglovier Jul 25, 2017

Owner

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

image

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

in comp:

image

Owner

jglovier commented Jul 25, 2017

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

image

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

in comp:

image

@chejazi

This comment has been minimized.

Show comment
Hide comment
@chejazi

chejazi Jul 25, 2017

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 commented Jul 25, 2017

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

This comment has been minimized.

Show comment
Hide comment
@chejazi

chejazi Jul 25, 2017

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

chejazi commented Jul 25, 2017

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

@jglovier

This comment has been minimized.

Show comment
Hide comment
@jglovier

jglovier Jul 25, 2017

Owner

"content, copy, design and code"

@chejazi good catch!

Owner

jglovier commented Jul 25, 2017

"content, copy, design and code"

@chejazi good catch!

@jglovier

This comment has been minimized.

Show comment
Hide comment
@jglovier

jglovier Jul 25, 2017

Owner

The wave lines are similar in color to water.

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

image

Owner

jglovier commented Jul 25, 2017

The wave lines are similar in color to water.

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

image

@jglovier

This comment has been minimized.

Show comment
Hide comment
@jglovier

jglovier Jul 25, 2017

Owner

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. 🙇 🎨

Owner

jglovier commented Jul 25, 2017

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

This comment has been minimized.

Show comment
Hide comment
@jglovier

jglovier Jul 25, 2017

Owner

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

Owner

jglovier commented Jul 25, 2017

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

@andrewpthorp

This comment has been minimized.

Show comment
Hide comment
@andrewpthorp

andrewpthorp Jul 25, 2017

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

Neat concept!

andrewpthorp commented Jul 25, 2017

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

Neat concept!

@jglovier

This comment has been minimized.

Show comment
Hide comment
@jglovier
Owner

jglovier commented Jul 25, 2017

image

@andrewpthorp

This comment has been minimized.

Show comment
Hide comment
@andrewpthorp

andrewpthorp Jul 25, 2017

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

andrewpthorp commented Jul 25, 2017

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

@jglovier

This comment has been minimized.

Show comment
Hide comment
@jglovier

jglovier Aug 13, 2017

Owner

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

image

image

Owner

jglovier commented Aug 13, 2017

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

image

image

@jglovier

This comment has been minimized.

Show comment
Hide comment
@jglovier

jglovier Aug 19, 2017

Owner

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
Owner

jglovier commented Aug 19, 2017

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

This comment has been minimized.

Show comment
Hide comment
@jglovier

jglovier Oct 21, 2017

Owner

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:

image

...and a loose comp:

joelglovier-com-mock-2017-10-21

Owner

jglovier commented Oct 21, 2017

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:

image

...and a loose comp:

joelglovier-com-mock-2017-10-21

jglovier added some commits May 10, 2018

get rid of about page template
it's just a page, actually

@jglovier jglovier merged commit 32a5c17 into master Aug 19, 2018

2 checks passed

continuous-integration/travis-ci/pr The Travis CI build passed
Details
continuous-integration/travis-ci/push The Travis CI build passed
Details

@jglovier jglovier deleted the 2017-redesign branch Aug 19, 2018

@TedGoas TedGoas referenced this pull request Sep 5, 2018

Open

2018 Refresh #67

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment