All Design Recommendations 20210402

[sherrieguan]

Navigation:

• Center header nav items relative to the full width.
• Global footer UI fix. For reference:

Home Page:

• Live stats swapped with "Capital Efficient Staking" section.
• Indicate Live stats are Live.
• "Capital Efficient Staking" section body copy has a widow. Expand width of the text box so "market" is on the second line.
• Remove Icon from "Learn More" buttons
• Remove pink circle from "Roadmap" - Usability issue
• Change "Stake!" outline CTA button to "STAKE" solid CTA button. Try black type in Medium or Bold on top of a SharedStake pink button)

Stake:

• CTAs should match the CTAs on the home page and throughout the site (i.e. black type in Medium or Bold on top of a SharedStake pink button)
• Header color is too dark. Try using the blue from the arrow and selectors on the page
• "ETH staked" color is too dark. Try using the blue from the arrow and selectors on the page.
• Change copy from "XXXXX/XXXXX ETH staked" to "XX,XXX of XX,XXX ETH staked"

Earn:

• Make the text form the same width as buttons or rows of buttons
• Add padding between two buttons (try 4px)

Responsive Web:

• Looking long term refine breaking point to avoid progressively line-breaking text

Asset Improvements:

• Change CertiK badge to CertiK logo

[sherrieguan]

Generally try to follow the typography, assets, colors, and spacing and alignment from the Figma mockup *Note: Mock is placeholder text only. Do NOT change the copy of the live site to match the mock.

Visual Improvements:

• Fix visual bug: a white line appears below the header whenever I scroll

  

• Make main CTA color match this radial gradient, or a linear gradient with the colors #E20050 and #850260 if this radial gradient is too complex to achieve

  

• Social Media icons should be SVGs from the Figma mockup Attaching all 5 SVGs in this zip: SS Social Media Icons.zip

Typography Improvements:

• Use Public Sans, Open Sans, or a similar font, instead of Roboto. These fonts will match the logo and look and feel of the brand more

• Follow typography (font sizes, weight, spacing) from the Figma mockup

• Content and icons should not pass the edge of the "Connect Wallet" button. If possible, align the edge of the text boxes and icons to the edge of the "Connect Wallet" button For example, could look like this:

  

[exitonoff]

Two PRs are done regarding these.

Things left to do

Home page

• Live stats to be swapped with "Capital Efficient Staking" section.
• Indicate Live stats are Live.

  Responsive design

• Refine break points to avoid progressively line-breaking text

Visual improvements

• Make main CTA (call to action -button) colour match radial gradient in earlier comments, or use a linear gradient with the colors #E20050 and #850260 if that radial gradient is too complex to achieve

Typography Improvements

• Use Public Sans, Open Sans, or a similar font, instead of Roboto. These fonts will match the logo and look and feel of the brand more
• Follow typography (font sizes, weight, spacing) from the Figma mockup
• Content and icons should not pass the edge of the "Connect Wallet" button. If possible, align the edge of the text boxes and icons to the edge of the "Connect Wallet" button

[exitonoff]

Some of the changes require major rewrites for the styling. For the most part the styles are scoped to the component / page level which currently isn't maintainable.

Todo:

Create master css which includes all the typography and styling presets (like component spacing) to achieve consistent style. This master style sheet makes it easier to create new pages etc. when the basic styles are standard.

[sherrieguan]

Makes sense, it would be best practice to create a master CSS. Here is a style tile I created for the site that might help Feel free to let me know if you have any questions or need me to define more styles (think there are some that aren't covered, like the use of blue

[0knxwledge]

What do y'all think about getting rid of the roadmap and audit sections on the landing page and adding them to the docs instead? I think it might make the landing page less cluttered

[sharedStake-main]

Audit and Roadmap should stay.

[sharedStake-main]

Thanks for the recommendations @sherrieguan And thanks for the implementations @exitonoff Remaining issues will be addresses in another issue, which is probably creating a master css:

• Use Public Sans, Open Sans, or a similar font, instead of Roboto. These fonts will match the logo and look and feel of the brand more.
• Follow typography (font sizes, weight, spacing)