Uploaded image for project: 'Planet4'
  1. Planet4
  2. PLANET-5480

Take Action covers block - create a carousel layout style (frontend)

XMLWordPrintable

    • Icon: UI task UI task
    • Resolution: Unresolved
    • Icon: Should have Should have
    • None

      Based on the TA covers usability testing results, provide design specs for the final version of the new Take Action covers block with a new Carousel layout:

      • The block should include a title, a description. A "view all" link, a page controller & navigation arrows for the carousel layout.
      • Set a rule for characters limit (for the title & the description considering the smallest screens)
      • Consider all the screen versions (XL, L, M, S)
      • Consider right to left version for Arabic countries
      • Provide animation specifications for the carousel slides.
      • Provide specifications for interactions states (hover, on click, etc.)

      Once the UI has been approved:

      • Upload the Sketch file of the component on the P4 Sketch cloud library
      • Provide design specs (including interactions) for the devs (using Inspect, the Invision plugin)
      • Upload the component on the Design System Library (ZeroHeight)  

       

       

        1. Screen Shot 2020-10-13 at 10.39.14 AM.png
          973 kB
          Magali Fatome
        2. Screen Shot 2020-10-13 at 10.39.14 AM.png
          973 kB
          Magali Fatome
        3. Screen Shot 2020-10-13 at 10.44.36 AM.png
          208 kB
          Magali Fatome
        4. TA_covers_carousel--L-XL@2x.jpg
          1.15 MB
          Matthew Hinders-Anderson
        5. TA_covers_carousel--L-XL-description@2x.jpg
          1.17 MB
          Matthew Hinders-Anderson
        6. TA_covers_carousel--M--description.png
          440 kB
          Matthew Hinders-Anderson
        7. TA_covers_carousel--S--description@2x.png
          438 kB
          Matthew Hinders-Anderson

            mhinders Matthew Hinders-Anderson
            mfatome Magali Fatome (Inactive)
            Votes:
            0 Vote for this issue
            Watchers:
            1 Start watching this issue

              Created:
              Updated: