Category View
Here's the progress on illustrations for the categories:
Activity
@crwinfrey Indeed it looks very good but I have some questions:
- Are the apps clickable?
- Are the app lists scrollable and if yes, is there every app of the category in there?
@NicoAlt Yes, the apps are clickable.
RE: Are the app lists scrollable and if yes, is there every app of the category in there? They scroll horizontal within the category section. (*Note: We will remove the swiping between the main navigation views). It think we should put the top 10-15 most popular apps in that scroll, then link to more. But, we can discuss this. It seems that it would be pretty overloaded to put 142 apps in a horizontal scroll.
Lastly, clicking on the full width of the screen in the 'category title and more button' section, will take the user to the single category view, which displays all of the apps in a list with the search capability.
I agree that we want only 15 or so apps in the horizontal scroll. I think that having the whole "category title and more button" area clickable could get in the way of the vertical scrolling. My fingers would be drawn to those spaces as safe dragging handles, since so much of that screen is clickable. What if "View All XX" was more of a button, and that was the clickable region?
what should should be shown for categories that are not the part of the standard set? Like if a third party repo makes up their own custom one. I could see something blank or something generated.
I imagine it would be preferable to pick some sort of generated design. It was not particularly difficult to do so for the feature image of an app when there is no feature image present. Note how I've taken the primary colour of the apps icon and used it to procedurally generate artwork:
The only difference for the categories is that there will not be a base colour to start with. Nevertheless, if we pick a random colour and seed the randomness with the name of the category, then it will at least be deterministic.
-
@crwinfrey: could you please attach an .svg with the images you have so far so I can proceed with adding them to the client? Cheers.
@pserwylo Hans added me to the F-Droid artwork repo. It seems like a good place to add images and icons moving forward, so that we can keep good track of everything. Does that work for you? If so, I'll add a directory called 'Category Illustrations' for these.
Also, would you prefer to do the background color in code and have the image file with a transparent background? It seems like it would be easier to adapt to different screen sizes that way since the app cards will float on top.
-
@Carrie: Artwork repo sounds like a great place. If there are images highly specific to the android client, I'd put them in a subfolder called "Client" first. However category images probably make sense to go in the top level because in the future somebody may want to incorporate them into the website design.
As for background colour: I think it will be easiest to have the images with a transparent background when I'm implementing it in the client. However for sanities sake, I'd keep the background colour in the original .svg and I can remove it if required. As you eluded to, I don't know how else to stop it stretching on a bigger screen.
Finally, I'd also suggest that you keep the interesting parts of the artwork to the left-most X pixels. I've got an annotated version below, with two example cuttoffs (shown in green). This means that the bits I highlighted in red would get removed. I'm not particularly fussed about what your desired cuttoff is, it could be halfway across your current mockup, or only a third. But making it consistent may make laying out easier in situations with smaller screens.
-
Looking good so far. I've got it running with randomly chosen colours as backgrounds. This is what will happen when new categories without artwork are added:
Which I think is an improvement on the previous implemented version, even if only because of its nicer usage of vertical space:
The colours are chosen by picking a random hue based on the category name, then a saturation of 40% and lightness of 50% in HSV space. This was based on my averaging out the saturation and lightness values in your mockup above. I only averaged over the dark backgrounds because averaging over both the darker and lighter backgrounds would of gotten to a weird middle ground. We can tweak the lightness/saturation if it is ugly.
mentioned in issue #709 (closed)
@pserwylo I've put the category illustrations in a GitLab repo called OkthanksArtwork. I tried to add it to F-Droid artwork first, but ran into problems. So I just made my own repo to get them up. Background colors are specified for most categories right now in the readme file. There are 7 illustrations that I still need to finish up and add. Also, I've only added .png files. The drawings require more work to be .svg ready. So, if .png's work, let's just run with it.
-
Thanks @crwinfrey. Is that repo private? I get a "The page you're looking for could not be found" when I visit the link. Regarding .png files, they should be fine for now.
mentioned in merge request !448 (merged)
closed via merge request !448 (merged)
