Developer Portal - Designer Edits

ceolson01 commented 5 years ago

This issue is a blank canvas for @reneegranillo

reneegranillo commented 5 years ago

Overall

[x] Header style: I notice the bold version of the type is extra heavy (most noticeable on c and e's) is it possible to lighten it up like in the Figma? If this can't be thinned to how it is on figma i think changing it to this would help: font-weight: 500 letter-spacing: .2px

Navigation

[x] Increase letter-spacing of the small type for "get started" and "colony core" and "open source tools" letter-spacing: .2px
[x] Scale magnifying glass: Looks like it is cropped?
[x] Slow down animation of search bar. It animates out a little too fast. Can we add an ease

Landing

[x] For headers "Get started" "contribute"... add letter-spacing: .2px
[x] Colony Core header should be smaller than "Build with Colony"

Colony Core

[x] Title should be same as Open Source Tools

CTA

[x] "Questions...etc" Increase line-height: 1.4px
[x] Is there anyway we can avoid the pattern from going Behind the footer background?
[x] Something is up with the social icons. Look in the negative spaces. It looks much tighter than the actual svg.
[x] can we scale each down by 10%?

ceolson01 commented 5 years ago

@reneegranillo I've moved the NTH items to a new issue (#34) where we can track all NTH issues together. Feel free to keep adding to both issues 👍

reneegranillo commented 5 years ago

Overall

[x] Are the arrows at the top (in landing area) different than the arrows below (in Colony Core and below). If so, can we make them all the shorter length?

Navigation

[x] Increase letter-spacing of the small type for "get started" and "colony core" and "open source tools" letter-spacing: .2px This edit may have been done but I can't see the difference. Perhaps we do it with an additional .2px?
[x] fix search box spacing

On the hover box

[x] Center content in box
[x] Fix columns/grid of list items?
[x] Reduce side margins

[x] Reduce scale of icon and try to adjust margins to match
[x] It's hard for me to adjust and see for myself on CSS but in the Figma, the "Start building with Colony" is a bit thicker. Could the weight be adjusted slightly or does it go immediately to bold?

CTA

[x] Something is up with the social icons. Look in the negative spaces. It looks much tighter than the actual svg. This one doesn't seem resolved. Anything I can do to help?
[x] Move social icons up by 20px
[x] Pattern is looking too bright. Can you decrease opacity through CSS or do i need to do this on SVG? I would guess 80% opacity would be better.

Footer

[x] Scale down social icons down by 20%, I want to make sure they look much smaller than the colony logo
[x] Widen the columns under Open Source Tools

ceolson01 commented 5 years ago

@reneegranillo

Pattern is looking too bright. Can you decrease opacity through CSS or do i need to do this on SVG? I would guess 80% opacity would be better.

Yeah, looks like I'll need a new image with reduced opacity 👍

reneegranillo commented 5 years ago

Desktop

[x] change hover for icons to #0D4E7B

Mobile only See new design in figma https://www.figma.com/file/oyTTQQZ61iWFwmmhlZVW1d/Main?node-id=415%3A0

If it's not defined, its fine as is. Some things were made quickly to save time to show idea of spacing (ie. repeating same logomark/content for tools). There is no background image for banner because what is currently there looks fine.

[x] in general it looks like the line spacing for headers is too big
[x] make stroke for X and hamburger menu slightly thinner

reneegranillo commented 5 years ago

Doc page would be best if we do some of these live but here are notes.

[x] functionality of sidebar
[x] when i'm on specific doc page, hit box for docs hover CTA in nav is off
[x] in side nav, tighten spacing with subtitle to copy as 30px and copy to link 30px, tighten line-height of list items to be same as line height of body copy (looks like 20px?)
[x] L/F feedback on this idea... the product header seems to take up a lot of real estate for each subsection. i wonder if it should ONLY be present on the overview page? its still clear which product you are on because the name is on the left sidebar
[x] increase height of nav bar for a little more spacing. try 20px top and bottom?

type best to check all this on colonyStarter overview page

[x] it looks like H2 and H3 are same size 20px. Make H2 22px and H3 18px
[x] body copy color #2E4153, any Header #00284b
[x] increase margin above H3 to match H2
[x] tighten H2, H3 bottom padding to be 30px
[ ] ~in colonyNetwork i think The Colony Protocol and The Colony Network and like titles need to be H2 instead of H3~ To be handled via repo's docs markdown

For support and improve this doc:

[x] change support and improve this doc to #2E4153 as i see it here, it looks like it is clickable being blue
[x] tighten spacing with subtitle to copy as 30px and copy to link 30px

Other:

[ ] keep top and bottom margins for images and code boxes to be 30px
[x] do u find it confusing that the same blue used for links is used in code boxes and its not clickable? perhaps code box blue should be slightly different #1B75AC

Mobile menu See figma

reneegranillo commented 5 years ago

General

[ ] Hover states for products on main page
[x] Can the main titles be the bold type with logo on left (instead of logomark)? I think we chatted about this on a call?
[x] Body copy and list items are #2e4153
[x] Headers are #00284b (sidebar, support/improve)
[ ] https://wet-news.surge.sh/docs/purser/docs-overview This is good example of needing to fix up docs in source. H5? Think we need a margin-top above an H3
[x] NTH... chat button style on Support/Improve
[x] Titles for tables: Type size .8rem ##5E6687

Footer

[x] Get Started, Colony Core, Open Source = 16px

On Mobile:

[x] Reduce space between list items and bottom items
[x] Reduce line height of list items
[x] Possible to put Terms & Service, Privacy Policy, Media Kit on 1 line
[x] Possible to put social icons Above terms & Service et al. ?
[x] Chat future: rearranging Colony Core and Open source if open source can be 2 columns

Sidebar

[x] Let's fix up spacing of type

[x] https://wet-news.surge.sh/docs/tailor/docs-loaders Decrease line-height of list items
[x] https://wet-news.surge.sh/docs/colonyjs/api-colonynetworkclient Increase padding

Animation

[x] Possible to speed it up? @reneegranillo check this after update has been deployed
[x] Can the top level navigation stay stagnant (Home) See: squarespace

https://wet-news.surge.sh/docs/colonynetwork/whitepaper-tldr-reputation-mining#submissions This is different navigation structure with header as a link what can we do to change so its consistent?

Mobile nav

[ ] Possible to have menu shift to right/left in same way it does for desktop
[x] Remove arrows when there is no sub nav
[x] Reduce line height of list items
[x] Remove vertical arrow when there is no subnav (ie. Releases)
[ ] Thoughts on vertical arrow
[ ] Reputation (something up with spacing)
[x] The Meta Colony and CLNY too big, how fix?

JoinColony / JoinColony.github.io

Developer Portal - Designer Edits #33