Closed jordanmccullough closed 10 years ago
Speaking of keeping PRs small... :trollface:
Ugh! I was so excited to get this out to everyone, forgot a rebase -i
. Let me clean this up and use The --force
. Hang on!
Ok, used the --force
but a much cleaner history for the redesign effort.
@jglovier Want to lend your :eyes: on this and work some of your design magic on it when you have time?
@jordanmccullough yes sir! I'm on it first thing this morning. :thumbsup:
@jordanmccullough I decided to give design feedback first (so you know what I'm thinking and why I'm making the changes I'm making so that you have the chance to argue with my perspective if you like, and also so that there is a historical record of our design process) and then I'll work on addressing as much of it after ward as you'd like me to. This is as much a checklist of things for us to address as anything else. DAT COLLABORATION BABY!! :boom:
So I like the general concept and feel here, but I think we really need to rethink some things.
font-weight: 300
Overview
nav item for the home pageThe footer really needs some help. The footer on the current Training site feels like it's useful and intentional, the current iteration of the footer in the redesign just feels unfinished. Some suggestions:
<h1>
is left aligned but the <p>
below it is center aligned, which feels awkward; also the <h1>
line height is off, and the text-weight doesn't match our branding (should be font-weight: 300;
)<p>
. The whole words should be colored to avoid any user confusion as to whether it's a link or not. Also, the chosen colors for the underlines - while they match the corresponding on the landing page below - don't match any of our actual brand colors. Finally, on :hover
text underline is being triggered by default, which results in what ends up looking like 2 bottom borders.A few things really stand out to me about the subpages in general.
/attend
page for example has Our Classes
as the nav link, and Education from the Experts
as the page heading, all of which leave plenty of room for user confusion. At a minimum the url structure and nav links should be identical, and headings should at least contain that word or phrase in them too.
share
, nav title is Learning Materials
, and heading is Resources for Education
. What do you think about just using Resources
everywhere?team
, nav title is The Team
, and heading is Meet your trainers
. What do you think about using Trainers
everywhere? The term "team" is more a description of what we are from an internal perspective, and "trainers" is what we are from an external perspective. I think the latter is more appropriate for the external audience.Talk to Us
is very casual and disarming, the title of the page should be more direct (for sake of ease of recognition in the navigation). This should either become Contact Us
or Book a Training
. Remember, people read words as an entire shape (which is why all caps is so terrible for legibility), and users browse navigational systems by their recognizable wording. Talk to Us
is going to get glanced over far more often than Contact Us
because it requires the user to interpret it, whereas Contact Us
or Book a Training` will be instantly recognizable as a familiar action.font-weight:300
); greater line height on list items; fix twitter follow button so not floating off to left side (centered); pleez too b changing iPhone photo :-pIt's not, and it really should be. Especially since the existing site is responsive it would be a huge step backward to redesign without including styles for lower resolutions. Regardless it's the right thing to do for an information site, so we should really address that prior to shipping.
I know this was a lot and I swear I'm not just trying to be verbose. :smile: I think there really are a lot of areas that require a fair amount of fine tuning before we can ship this as something we are proud to say is replacing the existing site.
Let's figure out some of the solutions here and bang them out in short order and get this rolling along. I'm happy to address any/all of the things I'm bringing up here, but want to make sure you have a chance to give any pushback or further input since you're the man putting this ball in motion and I don't want to step on/over you in any way. :thumbsup:
First, :+1: to @jordanmccullough for jumping in and getting right on this and getting out a first draft that we can iterate from. It's always easier to keep the ball rolling than to get it started in the first place.
Second, :+1: to @jglovier for spending the time to do a design review and articulate some great suggestions for getting the design of this new version of the site to the highest design standard GitHub is known for. Joel has suggested some great improvements that once implemented, will make the site both more aesthetically pleasing, but also, most importantly, make it easier for users to use and thus increase the odds they find it helpful.
Reviewing today, so just letting you all know I haven't dropped off the map.
Thanks to you all!
Last night @jglovier asked me to take a look at this and see if I had any feedback, so here’s my thoughts.
First, a few visual and design-level comments:
I don’t believe the answers to these questions are favourable right now, at least compared to the current site. Here’s a crappy example of both of the landing pages blurred compared side by side:
I’m not at all attached to keeping the design of the current site. If it needs to go it needs to go—I’ll be the first to admit that its shitty in a number of ways, but right now I do genuinely think that the way key information is presented throughout the redesign is a regression from the current one.
If we don’t have images of our own that are relevant and deserve to be there (even if blurred as background images), I firmly believe that going with simple, clear headers are infinitely better. Here’s an example:
Remember: Everything added dilutes everything else.
There’s a number of specific small bugs, visual inconsistencies, layout choices and so forth that I’d call into question too, but I’m not going to bring them up here because I don’t think it’s really productive to do so, for reasons I’ll explain in the next section.
The biggest concern I have is that this redesign seems more focused on new visuals at the expense of the underlying information architecture and content. If we’re merging a number of sites together, some serious thought needs to go into how everything is going to be structured now that the site encompasses a much larger scope. The workflows are going to change, the goals are going to change, and the audience viewing the site is likely going to change too. Do we have a shared understanding of the implications of these things yet? If not, starting to work on the visual design of individual pages is going to be very difficult, as nobody will know what criteria to measure against to decide if a change is going to suit the site’s audience and IA needs.
This redesign is changing a large number of variables at once, so it’s going to invite a very wide range of potentially very confusing feedback. If you try and make changes on all of these levels (IA content) simultaneously, it’s going to make it difficult for people to articulate feedback, and difficult for you as a designer to know how to take feedback and act upon it.
Here’s some things I think would be actionable to make this site merger happen such that everyone feels great about the result:
All of this is said with :heart:, and as I mentioned above I’m not at all attached to the current site design I did a while back—it’s definitely far from optimal. If people have the time and motivation to move to a new design to suit this multi-site merger then that’s definitely a good thing, but I just think it needs a bit more higher level attention to the structure.
Thanks to everyone for the insights and observations.
This redesign effort has brought to light that before any redesign effort wraps around the existing data, what should be done is a re-building of the data itself in a more logical, structural aspect.
I'll be opening a new PR, which will cross reference this one, that addresses improved information structure rather than design. That includes re-thinking the templating (such as cleaner ways of event list insertion), page/directory naming (/classes
, /resources
, etc.), microdata (itemscope
, itemtype
, itemprop
) for better SEO, and more reusable semantic markup (<time>
, <article>
, <blockquote>
).
From there, I'll leave it in the capable hands of designers to freshen up the layout/design once we're satisfied with the data redesign aspect.
Closing this PR for now. Onwards and upwards!
This redesign effort has brought to light that before any redesign effort wraps around the existing data, what should be done is a re-building of the data itself in a more logical, structural aspect.
@jordanmccullough sounds good. :thumbsup: to moving forward at the structural level. Let me know if I can be of any assistance with UX/IA brainstorming. My markerboard is getting dusty. :smile:
@jordanmccullough Let's just make sure to not take on too much at once! E.g. not worry about SEO stuff until after the duplicate files are removed.
@afeld with the constant reminder to ship fast and ship often. Love it
Now that all resources from https://teach.github.com have been migrated and merged into https://training.github.com, the redesign can begin. This effort includes making the teaching resources—outlines, class notes, presentation decks—all available within a unified design in addition to the existing training service event page(s).