Third pass: Design Homepage/Make gallery

RESOLVED FIXED

Status

Webmaker
webmaker.org
RESOLVED FIXED
5 years ago
5 years ago

People

(Reporter: cassiemc, Assigned: cassiemc)

Tracking

Details

(Whiteboard: uxdesign, uidesign)

Attachments

(4 attachments)

(Assignee)

Description

5 years ago
Next iteration, based on comments and designs in Second pass, bug 865262.
(Assignee)

Comment 1

5 years ago
We are currently figuring out updates on image dimensions for thumbnails, how that works with breakpoints/responsiveness, and figuring out a dynamic way to load content using Packery that will leave minimal gaps in the layouts, particularly once content is loaded in dynamically, and the gallery loads additional non-featured content.

Re. stamped content (content fixed within the page):  
ednapiranha says:
10:17 it doesnt matter if you dont care about the gaps that packery will create
10:17 if you do care
10:17 we have to have restrictions 

So that may limit the number of tailored messaging boxes to one.

Cc'ing Humph to be aware of potential thumbnail changes; cc'ing Brett and Erica to be aware of potential content restrictions.
So it makes better sense to have two breakpoints for the layout - 1020px wide (desktop) and 640 wide (for retina mobile).

In most cases we're looking at:
1. mobile is for scanning/viewing
2. desktop is for actually signing in and working on projects

Chances are nobody is going to work on projects in mobile and are likely to be on desktop so there is no reason to try and hit every width possible.

This also allows us to control the grid for the gallery to avoid gaps.
(Assignee)

Updated

5 years ago
Blocks: 870475
(Assignee)

Updated

5 years ago
Blocks: 869204
(Assignee)

Updated

5 years ago
Blocks: 873607
(Assignee)

Updated

5 years ago
Blocks: 873608
(Assignee)

Comment 3

5 years ago
Created attachment 751876 [details]
Homepage v4

Adding another iteration of the homepage. Updates include:

* default (robot) thumbnail as signed in view
* thumbnails at 16:9 ratio
* updated copy and new look in the "Stamp" ("make history. Or, um, cat videos")
* "More makes" button now positioned at the top of the ctas box, so content should scroll underneath it. Ideally, would like this button to appear only once the user has scrolled down the page, similar to Pinterests "scroll to top" button
* updated CTAs copy. Images are placeholders for now but these can go ahead and be cut as I'm not sure we'll have time to return them.
* Updated footer design that now includes partners. This functionality is described (and ongoing process will be recorded) here: bug 873532
* In the psd, I've highlight a folder yellow, which is the on-state for the backside of the small thumbnail (an arrow with "make details") Will file this into bug 870475

Think that's it for now. Jen/Dale, let me know if there are any questions!
(Assignee)

Comment 4

5 years ago
Created attachment 754148 [details]
Homepage v6

This is a redesigned homepage giving more space at the top of the page for an intro headline and a bit of text. Filter is also visible from first load. The previous search functionality that popped down the search/filter bar is no longer going to happen; instead we'll have a separate page for Search (as per conversation with Brett, Kate and Jen).

This page also has a slight colour change; the teal is working much better for me than the red, which seemed too much like a warning. So the current thinking is that all text links should be blue/cyan, and all button links should be white on a teal block. Kate/Chris, feel free to play with this decision, but we should make this consistent throughout the site, whatever is decided. (We'll need to follow up with Amoeba who is building the Events section).

You'll also notice a new icon on each thumbnail. So the two there are "Details" and "Remix" – Details will take you to the make detail page, and remix will load the make into the appropriate tool so it can be remixed. The tutorial banner should also appear when a tutorial is available. The frontend for the thumbnails is being implemented in bug 876160.
(Assignee)

Comment 5

5 years ago
Created attachment 754149 [details]
Homepage v6 thumbnail backs

This shows the reverse sides of the thumbnails. This is being implemented in bug 876160.
(Assignee)

Comment 6

5 years ago
Created attachment 754150 [details]
Homepage v6 Load More and back to tops button

This shows what the page might look like when the user "loads more" makes into the gallery. Speaking with Jen, when this action is taken we may need to move from varied width columns to 4 equal columns, hence the more uniform look of the content below those that were in the initial page load.

I think it would be cooler if this was actually more consistent; either always 4 column equal, or always varied, but I realized we may have to make do for MVP. Kate, if you want to figure something else out please do!

Also notice the "Back to Top" button appears once the other content has been loaded to make the page a bit longer. Would be nice for this to pop up as the user scrolls down, so they actually notice it. Am thinking it should work funcationally very similar to Pinterest.com.

Comment 7

5 years ago
Commit pushed to master at https://github.com/mozilla/webmaker.org

https://github.com/mozilla/webmaker.org/commit/7931cc88b639c0cab43022654ac3baa27d214539
Merge pull request #33 from ednapiranha/bug868591

[bug 868591] css updates on homepage

Comment 8

5 years ago
Just reviewed the revised layout above with Jen.
Seems to strike a nice balance between resizing well and avoiding gaps, while still maintaining a sense of randomness on initial view.

Comment 10

5 years ago
Implemented
Status: ASSIGNED → RESOLVED
Last Resolved: 5 years ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.