Skip to content
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
Merged

2017 redesign #70

merged 486 commits into from Aug 19, 2018

Conversation

@jglovier
Copy link
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
Copy link
Owner Author

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
Copy link
Owner Author

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
Copy link
Owner Author

jglovier commented Jul 25, 2017

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

image

@jglovier
Copy link
Owner Author

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
Copy link
Owner Author

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
Copy link

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
Copy link

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
Copy link
Owner Author

jglovier commented Jul 25, 2017

"content, copy, design and code"

@chejazi good catch!

@jglovier
Copy link
Owner Author

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
Copy link
Owner Author

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
Copy link
Owner Author

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
Copy link

andrewpthorp commented Jul 25, 2017

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

Neat concept!

@jglovier
Copy link
Owner Author

jglovier commented Jul 25, 2017

image

@andrewpthorp
Copy link

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
Copy link
Owner Author

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
Copy link
Owner Author

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
Copy link
Owner Author

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 2 commits May 10, 2018
it's just a page, actually
@jglovier jglovier merged commit 32a5c17 into master Aug 19, 2018
4 checks passed
4 checks passed
Travis CI - Branch Build Passed
Details
Travis CI - Pull Request Build Passed
Details
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 mentioned this pull request Sep 5, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked issues

Successfully merging this pull request may close these issues.

None yet

3 participants
You can’t perform that action at this time.