Basic branding/visual review about ipfs-blog HOT 10 CLOSED

Sweet! I hope to put an 👁️ on this tomorrow and offer some feedback 🙌

@jessicaschilling

from ipfs-blog.

@ericronne just adding my 2 cents here about something I noticed.

Some cards have images with white background (left card on the image below) and it's hard to notice the boundaries of the card. We might want to add some kind of visual affordance to the cards (right card on the image below). I tried with box-shadow but we could use something else.

from ipfs-blog.

Index cont.

• IPFS "Teal" #378085 works over white, but is just shy of the small-text accessibility contrast mark (at 4.1:1) if we fill the page background with #F1F3F2 (#34797D works, but isn't in your set). Works fine for buttons with white labels, tho.
• Aileron and source serif pro are lovely fonts (winkwink). For the sake of consistency with the rest of the site, i'd be interested to see how Brandon works. Also if we're addressing the bigger branding question soon (🤞), typography is one of the items we'd look at, natch. Your call!
• Typographical hierarchy is pretty solid here, but the text abstract could drop from 1.125 rem to 1 rem or so (especially if we redo the tag design along the lines of my notes*). That would give us nice breathing space, and room for longer blurbs.
• The background shading seems like too much visually. If blogs need to be special, the "Blog" tag could get a light-green chicklet (with dark green text), while all of the other content types get a simple gray-bg/gray text treatment.

Footer

• Looks good (other than the contrast issue already noted)
• Why is there a checkbox to "Please send me the newsletter," when the button says "Subscribe"?
• Perhaps align the signup utility with the top of the subscription body text …

Card/Header artwork

• On the whole, the art looks great!

• Most of the art has no words. I'd encourage you to continue to avoid words in the header art (often dupes html text just below it, eg), except for special cases such as logos where there is no symbol-only version. For events like ETHDenver, try to trim down the amount of text.
  
  
  

• For newsletter art, swapping out the IPFS cube for the newsletter logo would create a nice consistency (we can create a bg for it if you like).
  

• Re tag designs: be sure to thoroughly test the mobile experience. Small, unbounded text buttons could give users trouble. Space accordingly.

Articles

• I see the utility of the "Blog & News" eyebrow here, which gives it reason to exist on the index page 😅. Do we need anything more than that as the eyebrow, tho? 🤔
• If we're insetting the header art, i would shrink it, both for the sake of balance (so the headline dominates), and to give more room for the title text.
• Additionally, a small corner radius on the artwork will make it look more intentional/neat
  

Hope that helps for now! 🙌

from ipfs-blog.

Note from @ericronne in a side-channel chat: he'd like to flush the card images straight to the edges like the screenshot below. @jdiogopeixoto -- up to you whether you want to tidy that now, or as part of a larger visual effort. Thanks!

from ipfs-blog.

@ericronne, this is solidified enough for you to look over when you have the chance! Some notes:

• Build preview link and password is in the "About" section at top left of main repo page ... sorry for not listing here, just subject to change and don't want to leave a password out when this repo goes public later
• The biggest visual pain point overall might be font hierarchy, particularly considering that many of these posts have long titles (and the PL blog from which much of this code originates doesn't have that consideration). I'm personally torn over whether we need to use Montserrat for titles for consistency with exisitng brand materials if there's a chance we might rework that soon. Your opinion more than welcome on that.
• Related: We're looking to make this visually something that doesn't clash with existing brand materials, but at the moment I'm not sure how perfect we want to make brand consistency given the possibility of impending band refinement overall. Again, looking for your guidance on that.

If this turns into something that's best discussed in a sync session with me and @jdiogopeixoto rather than writing everything out in a first pass, we can definitely set that up.

Thanks!

from ipfs-blog.

Hello! The blog is definitely coming along. This is a nice evolution. I haven't had time yet to analyze the footer or the design of the blog post itself. The blog-post template is rather wide, which gives us a good deal more characters per line than is recommended for readability.

Here's a few thoughts about the index page. A hard-fought simplicity is always worth the effort. Hopefully some of these suggestions will move us in that direction.

I've mocked up some of my suggestions, and pasted that at the bottom here.

Hero area

• The “Home | Blog & news” eyebrow feels superfluous, since the logo is the home button, and Blog & news is repeated as the headline.
• Also the meaning of the teal and the white is ambiguous there. In the eyebrow, white indicates “you are here,” but the opposite is true for the language selector.
• At about 3.91:1, the contrast between the green text and the dark blue background is a little low (should be 4.5:1+). #6bc4ce is a brighter tint of IPFS green that contrasts much more dramatically.
• The language toggle should read “中文” (i think) rather than “zn-CH”
• And instead of showing both language options (“en-US | zh-CN”), you could simply have a 中文 button when english is active, and en-US when Chinese is active.
• If you do this, the feature becomes easier to miss (despite the brighter green). You could bump it up to about 16, and turn it into a little rectangle button with a 1-pixel border (perhaps filled with the same green at only 30% opacity or so, which could go to 100% on hover). Or you could test it without making it a button, to see if Chinese users are able to find it easily.
• I’d also add 24 pixels or so of padding above the button, to push it further away from the page description.

Body

• The green used for text links and button fill is just a bit too light.
• If we change page the page background from white to a very light gray-green such as #f1f3f2, that opens the door for some visual improvements: outlines can be removed from the form fields, and card backgrounds can be white, so they pop nicely (no need for an outer shadow).
• The bright-pink that highlights “All content” in the drop down is a nice accent color. It seems out of place there since it’s nowhere else, though.
• “Press enter to select” seems like an unnecessary label, since users will click. Am i missing something?
• Why are some cards green and others gray?
• Stacking dates and the byline pushes the content pretty far from the header. One thought is to put the date above everything, and when we have a name, still put that below the header. (Not a perfect solve imo, still thinking 🤔)
• The mix of dark and light tags confuses me, because my mind wants to interpret dark as selected/on, and white as inactive, but it’s not that simple. Are the distinctions necessary, or is it enough that the primary category comes first in the list (and has no hashtag)?
• To me, the tags overpower the design and distract from the content. Instead we could run these labels as tiny text — not buttons — along the bottom of each card, in a subtle color such as light gray. A button could appear when hovered (see mockup below).
• I’d edit the “Blog post” tag to simply “Blog”
• The cards don’t offer much space for the text description. Could the page expand to better fit wider viewports? The PL and Filecoin blogs are a good reference.

from ipfs-blog.

Thanks so much, @ericronne! Looking forward to your comments on the footer and individual post pages, and this is a great start in the meantime.

Two questions on your notes above:

The green used for text links and button fill is just a bit too light

Can you please specify a color you'd prefer? Ideally it'd be in the ipfs-css color set, but if that's not possible, a variant on that set would be great too.

Why are some cards green and others gray?

We want to delineate between blog posts and everything else. Clearly that didn't work on first impression. Can you please recommend an alternative?

from ipfs-blog.

@ericronne -- one other question. Do you have feedback on font sizes and font relationship overall? Do you feel we need to use Montserrat for IPFS brand consistency?

from ipfs-blog.

Thanks @ericronne - will likely have a few questions, but wanted to explain the checkbox for newsletter subscribe in the footer: GDPR regs.

from ipfs-blog.

@jdiogopeixoto - Consolidated everything from the conversation thread into a checklist in the first comment. Once #49 is merged to replace fonts overall, this should be ready to work within your existing priorities (no need to change them) 😊

from ipfs-blog.