ta-lind
commented
4 years ago Posting a list of needed tweaks, this are for the most part rather minor but add up in the bigger picture: https://xd.adobe.com/view/d393abeb-3c02-432c-766c-2fd3dc7cdb10-a5a2/
-
On landing page, the Download button's center spacing between type and icon is slightly off, too large.
-
Landing page, spacing of the first card should slightly overlap into the header area in order to visually bridge the page. Right now aligned with sections.
-
Landing page, big cards: The active areas of the cards are not fully working. Idea was to allow for the title and copy to also work as a active area which upon clicking takes the user to the subpage. The css hover for this display a
→behind the title and reduce the opacity of the dark-blue gradient layer ontop of the image. -
Landing page, posts: bottom edge has noticeably large spacing.
-
Landing page: language picker seems to trigger the main nav, these should not affect one another.
-
History page: small one but the circles being 1px misaligned against the vertical line really stand out.
Follow-up after initial release: Motion assets: The idea with the landing page's cards was to use motion graphics as part of the hover effects. I did some quick renders, sizes seem still a bit larger to include 3 or 5 of those there, so would not pursue them right off. Possible way to solve this could be as a png sequence that should get quite heavily optimized https://ezgif.com/ … I'll need to test how much of a low quality hidden with a blur and transparency.
I think we can get to a reasonable size, but will address after initial release. So these can just be still images and perhaps with subtle scaling css transition (on hover, ie. ease-in-out 210ms + scale to 120%)
History page symbols actually have animated versions of them existing. @kyleFirethought can look into exporting the json (lottie) versions w/ the given color scheme, would also need some dev to see how to get those implemented.
There's a number of further visual design tweaks + css finessing, but i'll address those after the initial release in order not to block the workflow.
kyleFirethought
Preview: https://xd.adobe.com/view/b7c058f2-e6e2-486f-65b9-2ca91a14a95a-c1f1/ Specs: https://xd.adobe.com/view/e408f4c8-f66f-4129-7c04-aedfe07adc9d-9239/ XD: dcrweb - updates - 0120.zip
Assets Graphics (source + optimized): dcrweb - graphic assets - 0120.zip Subpage headers motion and source - https://github.com/decred/dcrdesign/issues/144 Explainer and subpage shorts: https://www.notion.so/eeter/Decred-Explainer-12-2019-2233a78c498c4224a5be29443856a435
The key visuals (landing page + subpage headers) as well motion bits should be all gathered up there. The content visuals in the newsubpages are done for the most part, besides History subpage, which will be followed up on shortly.
Two first images on sustainability may be re-addressed as a render for more consistency, though these are also ok as placeholders. The third image should be replaced down the line with ideally UI example of CMS, when that is present.
The short versions of the explainer are meant for each subpage and long version (whether with or without longer ending, @dustorf call on landing page).