Page Layouts exploration
ericsoderberghp opened this issue · 5 comments
Artifacts - what should be delivered
- publish 3-10 screenshots or URLs showing existing page layout variations on existing sites
- create 2-3 initial design direction alternatives, rough, <1day per
- add notes in this issue about findings and recommendations
- conduct a review meeting with design system team
- create additional backlog items
Aspects - what should be considered
Coarse, page-wide layouts that describe how the overall page is laid out and responds at various resolutions. The coarseness refers to how the building blocks of Header, Sidebar, Footer, and Main can be combined, probably using Grid. Some examples:
left Sidebar, right Header + Main + Footer
mobile Sidebar moving to bottom?
Footer optional
no Sidebar, Header + Main + Footer
mobile no change
Footer optional
In addition to mobile resolutions, address wide screens. For instance, is there a maximum width?
correlation to how Navigation patterns work
related: Navigation, Main
Any required Figma work.
Design system site examples and guidance.
Expecting no grommet or theme work.
In addition to Header, Main, Footer, Sidebar, I've been thinking/wondering about Layer/Drawer/Slideout which can serve as "configuration panel" such as this: https://www.figma.com/file/GaCLRPpcAngpDJprnFoAVg/HPE-Server-App?node-id=0%3A6922
Also when addressing Sidebar, we have Sidebar in narrow mode, plus expanded mode states.
Lastly, are Modals a Page Layout variant we want to consider?
I the use of Layer components could be referenced from Page Layouts but I don't think they need to be included in the details of the Page Layouts. I think they are their own topic.
Here are a few designer screens showing various means of layout, especially with regard to where scrolling happens. https://designer.grommet.io/?id=page-layouts-eric-soderberg-hpe-com&mode=edit