Designs for tag, source, and creator result pages

fcoveram commented 1 year ago

Project and issues related

Project #410 and Project Proposal document
562

Proposal

Single result page

The single result page allows users to land in results by tag, source, and creator. Mockups for each view are attached below.

`xl`	`xs`

As part of the design updates this project involves, the following changes were applied:

Tag pill changes to a button element. Button specs are described in Figma's inspect panel.
Spacing between tags is now 12px to ensure target area for a11y.

Results by tag

To land on this page, user needs to click on one of the tag components in the single result page.

`xl`	`xs`

Results by source

To land on this page, user needs to click on one of the following elements in the single result page:

Source link below the content title
Source link in content information section

`xl`	`xs`

Results by creator

To land on this page, user needs to click on one creator’s username in the single result page.

`xl`	`xs`

Mockups

Figma file

What do you think of this idea?

openverse-bot commented 1 year ago

Subscribe to Label Action

cc @WordPress/gutenberg-design, @WordPress/openverse

This issue or pull request has been labeled: "🖼️ aspect: design" Thus the following users have been cc'd because of the following labels: * WordPress/gutenberg-design: 🖼️ aspect: design * WordPress/openverse: 🖼️ aspect: design To subscribe or unsubscribe from this label, edit the .github/subscribe-to-label.json configuration file. [Learn more.](https://github.com/bytecodealliance/subscribe-to-label-action)

joedolson commented 1 year ago

Some accessibility notes from reviewing the accessibility of the search results page:

1) If content type filters are applied, the count of results is visible in the search field, but it was very difficult to retrieve that information in a screen reader. The process to find the number of search results is:

- Tab forward to the 'Content type filters'. 
- Arrow up to find the number of results.

This is only findable if you already know it's there. It's not findable using the down arrow because arrow interactions are taken over by the application when the search UX elements are active.

Recommendation: add the number of search results to the page element & to the H1 element with the search terms. This makes that information easily findable.</p> <p>2) The licensing for a given item is presented as icons visible on hover/focus. This information is not read to screen readers. Those SVG icons should have accessible names so screen readers get equivalent information to sighted users. </p> <p>3) Results are presented in divs, so there's no semantic count available of list position. This is particular important when loading more results, because there's no mechanism for finding any particular position in the results collection.</p> <p>4) Load more results button doesn't provide audible feedback to screen readers that new results have loaded. With this model, where focus stays on the load more button, there should be an audible notification e.g. "[number] results loaded above." It would be more helpful if there was a navigation tool to quickly jump to the first new item or if new items loaded below the button. Right now, a screen reader user must navigate through all items twice (reversing 20 steps, then forward 20 steps) to view all items and then load another set.</p> <p>5) External sources: opening in a new tab is not indicated audibly. There is a visible icon, but not accessible text label.</p> <p>6) Scroll to top only changes visual scroll position and does not move focus.</p> <p>7) Scroll to top does not have a visible focus state.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/obulat"><img src="https://avatars.githubusercontent.com/u/15233243?v=4" />obulat</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <p>Thank you for your detailed comment, @joedolson !</p> <p>I'd like to comment on the state of the identified problems.</p> <p>Point 1. I think we need to open a new issue for your first point, the accessibility of the search results count (title and h1). That problem was identified before in a larger accessibility issue (#448), and will probably require some design changes. Point 2, accessibility of SVG license icons - will open an issue for that. Point 3, the semantic count in the list, should be solved by #1979 that was deployed yesterday. Point 4, the Load more button, is on our to-do list. #2101 is the issue for it. Point 5, indication of the page opening a new tab. We have an issue for it: #496, and even had a really good community PR. However, there were problems with it adding unnecessary spacing to the links, so we could not merge it at the time. I'll prioritize it after the Core UI improvements project is finished. Points 6 and 7: I will open issues for the scroll to top problems.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/zackkrida"><img src="https://avatars.githubusercontent.com/u/6351754?v=4" />zackkrida</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <p>This looks nice and elegant. It seems like an excellent way to introduce this feature without too many changes. </p> <p>I have three questions related to the overall flow:</p> <ol> <li>Is it clear enough to users that they are in a "special" scoped view of Openverse, not the standard search flow?</li> <li>What is the best way for users to return to the standard search flow? Just the homepage link?</li> <li>Currently, we link to creator's external profiles on the sources. These profiles, depending on the source, allow the user to customize their profile details, contact information, or payment information. This is valuable to creators. How could we continue to link to these pages?</li> </ol> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/obulat"><img src="https://avatars.githubusercontent.com/u/15233243?v=4" />obulat</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <p>Really excited for these views! I have several comments:</p> <p>I think we should adjust the wording. "Results" seems to imply that those are the "search results". However, we are not searching here, but are displaying all items within the selected category. Is there a better word for these collections?</p> <p>For the tag pages, I would expect to see the tags that look like tags instead of headings. However, I looked at other sites, and they do not look like tags either. I realized that I'm more used to seeing several tags as a way of filtering results, for example, on ecommerce sites, and we only display results for a single selected tag. So, I'm undecided whether I'd prefer the tag to look like a tag or not :)</p> <p>What about providers that have several media types, such as Wikimedia and Europeana? Internally, we use separate names for them such as <code>wikimedia_image</code> and <code>wikimedia_audio</code>, but would the users expect to see both media types when they click on Wikimedia? </p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/AetherUnbound"><img src="https://avatars.githubusercontent.com/u/10214785?v=4" />AetherUnbound</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <p>These look great, I'm so excited for these!</p> <p>Presently the only restriction on our character name is that it can be no longer than 2000 character, meaning it can have any number of spaces in it. For example, we have creators like <a href="https://openverse.org/image/87cde4eb-960d-4ca8-9dc2-ba51c67a690d">I named my technique CONTEXTING</a> and <a href="https://openverse.org/image/0f40142a-3909-49d4-bafa-998a3156ec94">Department of Visual Arts, Western University</a> (we even have some with 'in' in it, like <a href="https://openverse.org/image/aea16b23-cdc9-4d9b-9225-d22cf19f5406">Michael in San Diego, California</a> and this <a href="https://openverse.org/image/87ce0ebd-b133-4bc1-920b-016611a4b812">absurdly long creator name I stumbled upon 😅</a>). That said, maybe it might make sense to visually distinguish the creator name from the provider in some way? Perhaps @zackkrida's suggestion about linking to the creator might be enough!</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/zackkrida"><img src="https://avatars.githubusercontent.com/u/6351754?v=4" />zackkrida</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <p>@fcoveram a thought I had for your consideration:</p> <p>Should these views live in a modal, once implement modals for single results? Since they are not filterable or searchable, putting them in a modal over could be a way to indicate to users that they are scoped views and not the full Openverse search experience.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/fcoveram"><img src="https://avatars.githubusercontent.com/u/895819?v=4" />fcoveram</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <p>Coming back here to share a new version based on all feedback shared. Thanks for all your fruitful thoughts, and thanks @obulat for addressing the a11y points shared by @joedolson.</p> <p>Before describing the changes and replying to comments, here is the new idea (i2).</p> <h2>Prototype</h2> <p><strong>Note:</strong> Some content displayed in the videos attached below are inconsistent as they were made for mockup and prototype purposes.</p> <h3><code>xl</code> flow</h3> <p><a href="https://github.com/WordPress/openverse/assets/895819/f9b027be-d010-4257-ba1d-b1148dcc625b">https://github.com/WordPress/openverse/assets/895819/f9b027be-d010-4257-ba1d-b1148dcc625b</a></p> <h3><code>xs</code> flow</h3> <p><a href="https://github.com/WordPress/openverse/assets/895819/ff14a4e7-ca71-4657-a2a6-1ee36b901a0a">https://github.com/WordPress/openverse/assets/895819/ff14a4e7-ca71-4657-a2a6-1ee36b901a0a</a></p> <h2>Mockups</h2> <table> <thead> <tr> <th></th> <th><code>xl</code></th> <th><code>xs</code></th> </tr> </thead> <tbody> <tr> <td>Single result page. Image</td> <td><img width="1440" alt="Single result page of image in XL breakpoint" src="https://github.com/WordPress/openverse/assets/895819/e1636d05-a389-4618-ae5f-710e2e3970f9"></td> <td><img width="375" alt="Single result page of image in XS breakpoint" src="https://github.com/WordPress/openverse/assets/895819/98bbedd9-cb50-40c4-94e3-e4b652b15f9c"></td> </tr> <tr> <td>Single result page. Audio</td> <td><img width="1440" alt="Single result page of audio in XL breakpoint" src="https://github.com/WordPress/openverse/assets/895819/52177e41-b329-4829-988e-6e27e235f552"></td> <td><img width="375" alt="Single result page of audio in XS breakpoint" src="https://github.com/WordPress/openverse/assets/895819/83346e7d-fe40-4da1-be36-2cd20a6da360"></td> </tr> <tr> <td>Creator content</td> <td><img width="1440" alt="Creator content page in XL breakpoint" src="https://github.com/WordPress/openverse/assets/895819/53a43257-99a5-4666-945f-e6b4c29cf10d"></td> <td><img width="375" alt="Creator content page in XS breakpoint" src="https://github.com/WordPress/openverse/assets/895819/647cdc1f-309c-412d-8214-eb49016977c6"></td> </tr> <tr> <td>Source content</td> <td><img width="1440" alt="Source content page in XL breakpoint" src="https://github.com/WordPress/openverse/assets/895819/307cb9d1-35b8-4f97-8939-269908add03e"></td> <td><img width="375" alt="Source content page in XS breakpoint" src="https://github.com/WordPress/openverse/assets/895819/95e624d6-9963-4d0a-9f1f-ce6a2b05b8ff"></td> </tr> <tr> <td>Tag results</td> <td><img width="1440" alt="Tag results in XL breakpoint" src="https://github.com/WordPress/openverse/assets/895819/6585683f-d88d-446f-9252-b399ac3134d7"></td> <td><img width="375" alt="Tag results in XS breakpoint" src="https://github.com/WordPress/openverse/assets/895819/0d4c4dc8-a6ed-42f1-b349-b3ba8a22d4c2"></td> </tr> </tbody> </table> <h2>Description</h2> <p>In this new version there are four main changes:</p> <ol> <li><strong>Creator and Source filters.</strong> In the single result page, creator and source are filters below the content title that allow users to land on the respective result view.</li> <li><strong>Icons for Creator and Source.</strong> This new iconography will be used in these and future cases where we need to mention and interact with this kind of content.</li> <li><strong>Source and Provider metadata.</strong> As pointed out in the comments, metadata distinguished between source and provider, if they differ, and it links to the original site.</li> <li><strong>New layout for CTA area in Single audio page.</strong> In sync with point one, the single audio page has a cleaned CTA area where audio control is now next to the primary button, and time was removed as this is visible in the audio area.</li> </ol> <p>For the creator's long labels pointed out by @AetherUnbound, I think we can do something like the following.</p> <img width="1311" alt="Single result page of audio in XL breakpoint" src="https://github.com/WordPress/openverse/assets/895819/6a5c682b-e3a1-40c5-9d21-1a994317a124"> <hr /> <h2>Response to comments</h2> <p>To @zackkrida's points</p> <blockquote> <p>Is it clear enough to users that they are in a "special" scoped view of Openverse, not the standard search flow?</p> </blockquote> <p>Based on the UX flow where first step is from the single result page, I would say yes. The page is intentionally similar to keep the search result essence. Nonetheless, I reinforce the page variant with an icon</p> <blockquote> <p>What is the best way for users to return to the standard search flow? Just the homepage link?</p> </blockquote> <p>For this release, we decided to keep the browsing simple and not provide search settings. That being said, the way to start a search is by going back to the homepage.</p> <blockquote> <p>Should these views live in a modal, once implement modals for single results? Since they are not filterable or searchable, putting them in a modal over could be a way to indicate to users that they are scoped views and not the full Openverse search experience.</p> </blockquote> <p>This view does behave like filtered results, it just this first release where we decided to restrict the header from searching. But in the future, we can include more tools to allow users filtering from the search bar directly. I have some ideas for this that are in line with what Lightroom does (image attached).</p> <img width="1125" alt="CleanShot 2023-06-20 at 15 30 00@2x" src="https://github.com/WordPress/openverse/assets/895819/efa36b22-6fcd-427d-9dbb-eb589211be5b"> <p>Because of the above, keeping the modal layout for content details and the white results grid for search results would keep the browsing simple.</p> <p>To @obulat’s points</p> <blockquote> <p>I think we should adjust the wording. "Results" seems to imply that those are the "search results". However, we are not searching here.</p> </blockquote> <p>I think it makes sense to keep “results” for tag views, but I agree could sound odd for Source and Creator. For the latter, I replaced it with “content”. This copy improvement is open to suggestions.</p> <blockquote> <p>What about providers that have several media types, such as Wikimedia and Europeana?</p> </blockquote> <p>Perhaps it wasn’t fully clear in the <a href="https://github.com/WordPress/openverse/blob/a3cdbe085c964820e31f03425b6e40d9d75a615e/documentation/projects/proposals/additional_search_views/20230424-project_proposal_additional_search_views.md#results-by-creator">Project Proposal</a>. The document describes the feature as “Results page shows the creator’s name and the source where the content comes from.” In that vein, and following the Wikimedia example, if the single result page is an image, then the results should be images only.</p> <p>Thanks @AetherUnbound for the input. It took me a while to figure out how to solve it, but it was nice having it now to stress out the interaction idea.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/sarayourfriend"><img src="https://avatars.githubusercontent.com/u/24264157?v=4" />sarayourfriend</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <blockquote> <p>I think it makes sense to keep “results” for tag views, but I agree could sound odd for Source and Creator. For the latter, I replaced it with “content”. This copy improvement is open to suggestions.</p> </blockquote> <p>Just my 2¢ (and this is totally a nit, only sharing because you asked!), "Works provided by this source" or "Works by this creator" sounds more natural than "Source content" and "Creator content" . <a href="https://openverse.org/about">Our about page uses both in similar places</a>, so "Content provided by this source" etc would also be an improvement.</p> <p>"Results tagged with <tag>" would also be more natural but then it would duplicate the queried tag unless the header was changed or combined with the contextual information, both of which would be big shifts in the page layout.</p> <blockquote> <p>In that vein, and following the Wikimedia example, if the single result page is an image, then the results should be images only.</p> </blockquote> <p>In light of that, rather than "works" or "content", the specific media type would be clearer: "Images provided by this source" etc. Would tags include mixed media or also be restricted to the content type of the result page they were clicked from? If restricted, then "Images tagged with <tag>" would help clarify that as well.</p> <p>I also want to say again how excited I am about this feature :slightly_smiling_face:. It's one I've felt we should have for as long as I've worked on the project.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/sarayourfriend"><img src="https://avatars.githubusercontent.com/u/24264157?v=4" />sarayourfriend</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <p>Oh, another thing from the technical side: "Images tagged with" or any "tagged with" could be read (in fact, I would read it this way) as an <em>exact</em> match on the tag, but that's not how we query them. The tags view might indeed need API work to change it to query the <code>tags.name.raw</code> field if we want it to be a true "exact" match. We probably want <em>some</em> kind of stemming though. It'd be weird to show tags for "bird" exactly and not include works tagged "birds".</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/obulat"><img src="https://avatars.githubusercontent.com/u/15233243?v=4" />obulat</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <blockquote> <p>Oh, another thing from the technical side: "Images tagged with" or any "tagged with" could be read (in fact, I would read it this way) as an <em>exact</em> match on the tag, but that's not how we query them. The tags view might indeed need API work to change it to query the <code>tags.name.raw</code> field if we want it to be a true "exact" match. We probably want <em>some</em> kind of stemming though. It'd be weird to show tags for "bird" exactly and not include works tagged "birds".</p> </blockquote> <p>This is an interesting point. At first, I was thinking that we should <strong>only</strong> include the exact match. Because that's what I expect, for example, from an ecommerce site. However, our tags are different in that they do not describe mutually exclusive categories (such as "dress" and "shoes", for instance), so I do agree that we can use stemming. So, if the user clicks on a "bird" tag, they would get all images tagged "bird", "birds" and "birding". Which should be Okay, but the text "images tagged with bird" would be a bit misleading. One thing I wonder about tag stemming is whether we stem the query, too. If the user searches for "birds", do we return only images tagged "birds"? Or do we stem the query to the singular "bird" and return items tagged "bird", "birds" and "birding"?</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/sarayourfriend"><img src="https://avatars.githubusercontent.com/u/24264157?v=4" />sarayourfriend</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <blockquote> <p>One thing I wonder about tag stemming is whether we stem the query</p> </blockquote> <p>Query strings are subject to text analysis @obulat, and are therefore stemmed as well, yes:</p> <blockquote> <p>The query string is processed using the same analyzer that was applied to the field during indexing.</p> <p>— <a href="https://www.elastic.co/guide/en/elasticsearch/reference/current/full-text-queries.html#full-text-queries">Elasticsearch Full Text Search documentation</a></p> </blockquote> <p>Even if part of the query is quoted, this only enables the <code>PHRASE</code> option of ES's query string parsing (<a href="https://www.elastic.co/guide/en/elasticsearch/reference/current/query-dsl-simple-query-string-query.html#supported-flags-values">see <code>PHRASE</code> here, which we have enabled through the default of <code>ALL</code></a>). Components of the phrase are still stemmed and searched for in sequence (as far as I understand how the phrase feature works).</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/zackkrida"><img src="https://avatars.githubusercontent.com/u/6351754?v=4" />zackkrida</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <p>My initial thinking is that stemming will be <em>okay</em> here. While they're currently tag pages, they'll be functioning more like "topic" or subject pages which is probably more useful to users in most cases anyway. Choosing to search by tag rather than an exact term inherently implies, to some extent, that the user is looking for generalized results on a particular subject.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/fcoveram"><img src="https://avatars.githubusercontent.com/u/895819?v=4" />fcoveram</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <p>Thanks for all the great replies. I tried different ideas based on the feedback shared and other suggestions I received internally.</p> <p>Before showing the new version, here is a list with the changes applied.</p> <ul> <li>New style and interaction in "Creator" and "Source" filter buttons in single result page.</li> <li>New layout for results header in results page. <ul> <li>New copy for results description</li> <li>Link to creator page in Creator results</li> <li>Link to source site in Source results</li> </ul></li> </ul> <h2>Mockups (i3)</h2> <p>I'm attaching <code>XL</code> and <code>XS</code> breakpoints in the same image to reduce the comment's length.</p> <table> <thead> <tr> <th style="text-align: left;">Page</th> <th style="text-align: left;">Mockup</th> </tr> </thead> <tbody> <tr> <td style="text-align: left;">Single result view. Image</td> <td style="text-align: left;"><img width="2195" alt="Single result page of image in XL and XS breakpoints" src="https://github.com/WordPress/openverse/assets/895819/fce70cd9-5b5e-4da1-aa4d-e07cc7ea43a8"></td> </tr> <tr> <td style="text-align: left;">Single result view. Audio</td> <td style="text-align: left;"><img width="2195" alt="Single result page of audio in XL and XS breakpoints" src="https://github.com/WordPress/openverse/assets/895819/01f403cb-9569-4a00-b919-2cb461e12c87"></td> </tr> <tr> <td style="text-align: left;">Creator results</td> <td style="text-align: left;"><img width="2190" alt="Creator results page in XL and XS breakpoints" src="https://github.com/WordPress/openverse/assets/895819/1651e97a-af35-4895-baf6-85f9b160cd1b"></td> </tr> <tr> <td style="text-align: left;">Source results</td> <td style="text-align: left;"><img width="2195" alt="Source results page in XL and XS breakpoints" src="https://github.com/WordPress/openverse/assets/895819/8178067a-aa90-45ae-b4a1-467e02ebf21f"></td> </tr> <tr> <td style="text-align: left;">Tag results</td> <td style="text-align: left;"><img width="2195" alt="Tag results page in XL and XS breakpoints" src="https://github.com/WordPress/openverse/assets/895819/158957bc-555e-43a3-8425-e97bdad93f4f"></td> </tr> </tbody> </table> <h3>Filters in single result page</h3> <p>To interact with Creator and Source filters in single result page, the area is now contained within the content wrapper and left and right arrows show up to move alongside the section. Buttons has the same style as "Tag" buttons to reinforce the filtering reference.</p> <img width="1505" alt="Scroll interaction of Filters area in single result page of audio" src="https://github.com/WordPress/openverse/assets/895819/860102a7-3f29-4cb9-a511-3674c0a11992"> <h3>Plausible future</h3> <p>In line with #424 and #425 projects, and in response to folks thoughts on the future of these pages, I think there is room for pushing Creator and Source pages to surface content more appealingly.</p> <img width="1720" alt="Source results page with new features" src="https://github.com/WordPress/openverse/assets/895819/c4171dd1-bda7-4a7c-8d46-222efd3a8117"> <p>The draft attached above has the following ideas:</p> <ul> <li><strong>Filter indicator in the search bar.</strong> Show the source or creator name in the search bar and disable searching within these results. Clicking on the search bar clears the filter and takes you to a normal search result after clicking on the "search" button.</li> <li><strong>Mutiple media views.</strong> If the source only has Images, the switcher is disabled to prevent trying to shift to other results. But when other media exist, the switcher allows you to jump between results. This includes the All content view.</li> <li><strong>Filter the Creator and Source results.</strong> Allow to filter these results and disable the ones not available.</li> <li><strong>Source and Creator info.</strong> Personalize this page by displaying relevant info.</li> <li><strong>Sort results.</strong> When there is no search term applied, sort by the last conent added or most popular.</li> </ul> <p>All these ideas need deep thought and several tests to pass a feasible check, but I envision big potential of these views to reinforce Source and Creator views, and to expand the search tools.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/zackkrida"><img src="https://avatars.githubusercontent.com/u/6351754?v=4" />zackkrida</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <p>This iteration looks like a great place to begin work on this functionality. It's a pragmatic and attractive "minimum viable product" for these views and establishes a great baseline for the future enhancements you've already mentioned. 👍 from me. </p> <p>@WordPress/openverse-frontend could someone else review and approve these designs, as if it were a project proposal?</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/sarayourfriend"><img src="https://avatars.githubusercontent.com/u/24264157?v=4" />sarayourfriend</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <p>I am in agreement with Zack.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/zackkrida"><img src="https://avatars.githubusercontent.com/u/6351754?v=4" />zackkrida</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <p>We've concluded these designs are ready for implementation! @fcoveram is going to share final assets here, close the issue, and update the project thread.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/fcoveram"><img src="https://avatars.githubusercontent.com/u/895819?v=4" />fcoveram</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <p>I updated the Figma file with the last changes and it is ready for development 🎉 </p> <p>A few days ago, Figma introduced a new feature, <a href="https://www.figma.com/blog/introducing-dev-mode/">Dev Mode</a>. It's a new workspace view that aims to provide dev needs, this <a href="https://www.figma.com/best-practices/tips-on-developer-handoff/an-overview-of-figma-for-developers/">doc page</a> gives more details.</p> <p>I started exploring the design features in the Design Library, and in this case, I applied spacing variables in all mockups.</p> <h2>Design assets</h2> <p><a href="https://www.figma.com/file/niWnCgB7K0Y4e4mgxMrnRC/Additional-search-views?type=design&node-id=22%3A13656&mode=dev">Here are</a> the mockups in dev mode.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/zackkrida"><img src="https://avatars.githubusercontent.com/u/6351754?v=4" />zackkrida</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <p>@fcoveram I'll close this so we can consider the design work done! Awesome job.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/AetherUnbound"><img src="https://avatars.githubusercontent.com/u/10214785?v=4" />AetherUnbound</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <p>I'm late with this but wanted to say that these look <em>fantastic</em> and I'm so excited for this feature! I'm also glad you were able to figure out a solution for the long creator names 😄 </p> </div> </div> <div class="page-bar-simple"> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>

WordPress / openverse