search

ampproject / amp-wp

Enable AMP on your WordPress site, the WordPress way.
https://wordpress.org/plugins/amp/
GNU General Public License v2.0
1.79k stars 382 forks source link

Page horizontal viewing #1903

Closed ThierryA closed 5 years ago

ThierryA commented 5 years ago
dawidmlynarz commented 5 years ago

👋 Hello! I have been exploring possibilities for the horizontal navigation between AMP Stories. For now, I called each of the items Slides as it somehow fitted more than a Page.

Given the fact that this is a highly interactive project, I have produced Principle prototype to show you more interactions and flows instead of a static screen that may cause a lot of questions. Please take a look at the video attached and share your thoughts.

amp stories - horizontal

Besides that, I have also created Invision prototype holding some static screens so you can leave comments inside. Please have a look at the link below and check your emails as you should get the invitations.

Looking forward to your feedback!

ThierryA commented 5 years ago

Heya @dawidmlynarz, overall I really like it, awesome work 💥 I left a few comments on Invision.

One additional comment since it applies globally throughout the design is to increase contrast overall for accessibility purposes.

Looking forward to the round of reviews.

PS: from an engineering perspective, we will have to dig a little be deeper to find out if it is feasible to implement the design.

dawidmlynarz commented 5 years ago

Thanks for the input @ThierryA - all the comments on Invision are addressed. Really good point about accessibility, I ave increased the contrast of the cards and some elements. I was mainly using colors according to the WordPress palette from Sketch UI Kit so let me know if they need to be optimized even more.

Please find the revised prototype below with the fading and slightly revised bottom navigation. Now indicators are positioned in the center below the active slide.

amp stories - horizontal browsing - v2

If you think (from engineering perspective) that we need to refine the design, please also let me know and we will work until the feasible version. I'm open to iterate!

🙌 Looking forward to your feedback!

ThierryA commented 5 years ago

Great, round of reviews is great.

I called each of the items Slides as it somehow fitted more than a Page

Coming back to the comment above, AMP Stories have the concept of "Book Pages" and are referred as pages throughout the AMP Stories docs so I would suggest to stick to it.

Will take a other pass at the review with @albertomedina before it moves to engineering 😉

dawidmlynarz commented 5 years ago

Thanks!

Coming back to the comment above, AMP Stories have the concept of "Book Pages" and are referred as pages throughout the AMP Stories docs so I would suggest to stick to it.

In that case, I couldn't agree more! That makes total sense to keep the Pages name. I will update Invision so everything is consistent.

swissspidy commented 5 years ago

Currently working on this in #1922.