search

carbon-design-system / carbon-website-archive

The old website for the Carbon Design System. This repo is archived.
https://www.carbondesignsystem.com
238 stars 115 forks source link

[Pages] Homepage Design - Carbon X Website #292

Closed alisonjoseph closed 5 years ago

alisonjoseph commented 6 years ago

Designs for home page improvements for v10

Steps to complete:

Current feedback: Surface articles and news. Examples of carbon applied. Feature new components. Reference back to language?

designertyler commented 5 years ago

Feedback based on Ben Hansen's research for Digital. Some insights apply directly to Carbon and some don't. Great to keep in mind for the redesign. https://ibm.ent.box.com/s/wqz7rsweau3bzcz1dfudv93qbh7zkq01

  • Clearly state the site purpose in a couple of sentences above the fold. It needs to include “standards” and code-base relationships/roadmap.

  • Separate “What’s new” from “Getting started”, clearly include #1 above in What’s new, and add a Getting started page that begins with templates and step-by-step instructions.

  • 3.Update IA and content for supporting sections.

  • The message of the home page, introducing the site, is missed or poorly understood from the beginning, and doesn’t really improve with reading. "Most users never see the introductory note at the top..."

  • Add a phrase like “formerly the Northstar design system” to the leadspace and define migration paths.

  • Address the need for a “getting started” page, consider rewriting “What’s new” to focus on system migration (and it may be a temporary page), and consider moving releases to a focused page, perhaps with the lower nav options.

  • Eliminate “fluffy” language – everywhere.

  • Reduce the height of all lead spaces, reduce scrolling, and reconsider the dark black background.

designertyler commented 5 years ago

IN PROGRESS - NOT FINAL Here are some sketches and notes on the homepage progress. These are option I explored based on Ben's research from digital, Carbon feedback, new functionality, new shell and language. @jeanservaas was also going to push the design to explore other options.

I started with the base layout similar to what Digital has today and how our component pages are laid out. This made the component and home pages too similar and didn't give a compelling home page.

screen shot 2018-11-13 at 9 45 08 am

The /design and Language pages use the lead space for the main calls to action or feature rather than simply labeling the page. I pushed forward with this approach since it's also what the current Carbon site does with this space and Ben's research recommends addressing the first question that pops into people's heads when visiting the redesigned site, "what happened to the old thing I knew?"

Here's the lead space with the CTA to learn about what happened to the carbon name and how it's an implementation of the new IBM design language. Link would go to this page

screen shot 2018-11-13 at 9 46 09 am

I had a quick chat with Ryan and the work he was doing for /design and how it incorporates a lot of large images. Language also does this.

That approach didn't seem to work when applied to the system site. We do have a visual style that is unique to system and that is the redlines and grid used to markup our component examples.

I explored some options abstracting components in this style and applying them to a dot grid texture in the lead space.

screen shot 2018-11-13 at 9 50 11 am

It seemed to fight for priority with the main CTA and needs more exploration.

screen shot 2018-11-13 at 9 59 13 am screen shot 2018-11-13 at 9 59 19 am screen shot 2018-11-13 at 9 59 27 am

screen shot 2018-11-13 at 9 59 56 am

I've been sketching with the black dot grid in the meantime and it's actually growing on me...

screen shot 2018-11-13 at 10 00 41 am

One thing that stands out from this layout compared to Language and /design is the use of gutters. I went with this direction to make the jump to the new language less jarring to people familiar with the current Carbon site and to keep the "practical, daily use, documentation" feel that get's lost with the more expressive layouts. Feedback welcome around that.

There are a couple instances of the markup/redline used as visuals.

Compared to current homepage:

homepage_sketch

designertyler commented 5 years ago

Updates based on feedback from design session

homepage_sketch homepage_sketch_measure

claycrenshaw commented 5 years ago

Looking good! I would still love to see the actual substantive content (e.g. getting started tiles) start a little higher up on the page, above the "fold." Also would be great to see what other types of content would fill that top space once the "Carbon is now called _____" content is no longer relevant.

Any thoughts on how we might dynamically integrate the latest "what's new" content into this page? Maybe it can take the place of one of the "Latest" tiles?

The width of the text columns (like under the "Component Libraries" header feels oddly narrow to me. . . Seems like a couple more grid columns of width for that text block might make the page feel a little less choppy.

IMHO this page is already miles ahead of what we currently have. :)

jeanservaas commented 5 years ago

Carbon X Homepage designs (Need to finalize ASAP)

Sketch File https://ibm.box.com/s/589knwzwuxkuj850ev137f2fka0p7taf

I also took a pass at the homepage based on what Tyler had started and collaborated with Mike and Chiu. Here is the feedback from yesterday's design session:

home_desktop dark

home_desktop_light_2

home_desktop_light_3

alisonjoseph commented 5 years ago

~just a heads up that anything divided by 3 like that won't be on the grid. (I can set to 33% width if needed)~ ignore me, it seems designs are offset by one so 15 is divisible by 3.

claycrenshaw commented 5 years ago

To me, this layout is starting to feel a lot like a marketing page, with the big hero image and big intro paragraph. It's a nice looking marketing page, but I'm not sure that's the approach we should be taking with our homepage. We are requiring the user to scroll before getting to any utility within the page, which is not ideal. Our users come to Carbon to get their job done, and I think that putting so much "fluff" on the page is not serving them well. I'd consider exploring some more abstract, graphical stuff instead of the photo, and think about how we can shift more of the "meat" above the fold. Also, per our convo with Daniel yesterday, I think we can still prominently call it "Carbon" on the landing page (rather than a small "formerly known as. . ." treatment.

I think we should also be sure to account for how this page will scale to different widths. What does it look like at 640 and 1440?

We had discussed including some kind of space for "what's new?" content on the homepage as well. Kind of a peek at the latest updates, with a link to the changelog.

I wonder if the Getting Started callouts really need to span the whole width of the page, or if they might sit better side by side (like in Tyler's earlier explorations). Having what is essentially a link take up this much space on the page feels a little out of scale to me.

I'd also consider adding a line of supporting text to each of the tiles in "Other Resources" to help clarify what that link actually is. It's a little obscure with just the title, and we have the space to clear that up a bit for the user.

alisonjoseph commented 5 years ago

+1 on needing to know how it scales down

jeanservaas commented 5 years ago

OK just so everyone knows that we've been shopping this around to other teams... this one is Mike Abbink approved at least design wise (link's been updated in box):

home_desktop dark_v2

image

alisonjoseph commented 5 years ago

The grid should not include the nav, discussed w/ @designertyler, @joshblack and referenced the documentation we have on grid and grid influencers.

FYI The IDL website is incorrect in how they are using the grid. We don't want to copy them from my understanding.

Can also discuss in website meeting later today.

It also shouldn't really affect the designs too much to update the grid.

designertyler commented 5 years ago

I'd still prefer finding an alternative to the photo and agree with Chris about featuring a UI that cannot be built with the current components.

The simplified components in the latest mockups are moving in the right direction. I really think that could evolve into something of a system visual language.

I agree with Clay's comments, but not sure this layout crosses the line of being too expressive for productive daily use. I think we can have a little leniency on the homepage for that if the rest of the site is focused on productivity.

Ben Hanson did a usability study with the Digital site and even though it's focused on their site, a lot of the insights apply to us. https://ibm.ent.box.com/s/wqz7rsweau3bzcz1dfudv93qbh7zkq01

edit* I'd like to see the "start contributing" link get it's own line and the arrow treatment like this. It seems pretty large.

screen shot 2018-11-28 at 12 32 38 pm
shinytoyrobots commented 5 years ago

What is the purpose of these dots (including the highlighted one)? It implies a slider. image

Also - we are saying "IBM Product Design" in top left, and "IBM Produce Design System" in main content. Do we want to match these?

claycrenshaw commented 5 years ago

I was wondering that too :) Is this a carousel?

aagonzales commented 5 years ago

Sprint 25: Finalize homepage design. @jeanservaas or @designertyler set up meeting for final review and decision. Include dev for scope and any other stakeholders (ie Mike?)

ASAP DECISION NEEDED

jeanservaas commented 5 years ago

FINAL HOMEPAGE

https://ibm.box.com/s/589knwzwuxkuj850ev137f2fka0p7taf

Sat with @designertyler and weighed all of the actionable feedback:

homepage_final

claycrenshaw commented 5 years ago

Revised homepage copy. Thinking less is more in this case, since we cover all the IDL, etc. stuff in "Getting Started".

image

claycrenshaw commented 5 years ago

@alisonjoseph @jeanservaas ^

jeanservaas commented 5 years ago

Could we get a little more here? @chrisconnors-ibm If that's the max content we can get here we'd need to rethink the design, which I'd really like to avoid at this point. If I'd known content would be that minimal I'd have considered folding it into the header or something... the idea is to visually match the top band with the bottom band.

I also don't think it's a problem if we surface some of the getting started content on the homepage too.

aagonzales commented 5 years ago

Can we not say "digital" products as that could be confused with the digital design system (ie Erica's team).

@claycrenshaw I see that your just pulling the content from the about page. Can we just pull that whole paragraph to help it fit to Jeannie designs. We could also kill that paragraph on the about page if we bring it onto the home page.

image

claycrenshaw commented 5 years ago

I am definitely not clear whose call this is. . . probably not mine! I'm just suggesting what seems like the appropriate amount of messaging to me for that space. If you guys want to use my whole paragraph from About Carbon, I'm sure that would work fine. Might be a little heavy for the returning user, but I guess that's just a tradeoff.

jeanservaas commented 5 years ago

Cool I will try we that and see where we land. For now that should work fine!