Closed chloeatplay closed 10 years ago
Here is the starting point of concept studies of the pathway page
here is a link to a moodboard http://www.pinterest.com/zzzndr/openbadges-discovery-pathways-lookfeel/
@chloeatplay @stenington @threeqube
Last monday at the weekly meeting I understood the pathway section of the pathway page will be zoomable & pannable.
I’ve been pondering why as a user I would want to zoom the pathway page, but I can’t find a good reason to do so apart from zooming out to get a complete overview of the entire pathway.
Can somebody explain me why? (:
Also, that does imply there will be a fixed height of the page as well right?
Included is a screenshot of civilization which has a normal view and an overview mode, is that how it will work? (:
@zzzndr I think you pinpointed exactly what functionality would suit a zoom out function :) The idea of looking at your pathways' overview is a very powerful one. In the meantime, please keep in mind that for mobile this page should probably be 3 rows wide (ala duolingo) since otherwise it becomes crowded.
@chloeatplay aah, ty. so just to be sure, we're not talking about googlemaps style zooming right? more like 2 levels?
here are a few concept sketches for the desktop
• variation header with green / blue zelda landscape
dark background https://redpen.io/qot5fj
dark background, nodes instead of grid (would only be visible in rearrange mode) https://redpen.io/wbzoex
dark background, possible popup https://redpen.io/5e72du
dark background, another popup variation https://redpen.io/hm4aw6
• variation header with sand coloured landscape https://redpen.io/wyrefm
These screens are work in progress (:
These are super cool Sander! Added a couple comments directly via redpen. :tangerine:
Here are 2 new variations (:
• variation header with green / blue zelda landscape The header is now more detailed & refined + orange is here the colour for the icons https://redpen.io/vcs7xq
• variation header with sand coloured landscape Tried to make the overall atmosphere to be less like a treasure map + added arrows pointing downward on the dashed lines in the pathway background https://redpen.io/1735ab
@zzzndr The above screens are :top: !! I left some comments in the redpens, would also try a version with a white background to see how it looks. :white_circle: :white_large_square: :eyes:
here is the variation of the header with green / blue zelda landscape with a light background https://redpen.io/qzwk16
Here is the version with the white background https://redpen.io/v8kd3j
Here are 2 screens of how the pathway page might look like on mobile I didn’t have time yet to optimise the header illustration for mobile
mobile pathway page with 3 columns of badges https://redpen.io/u738y6
mobile pathway page with 2 columns of badges https://redpen.io/pbj26v
here are a few more options for the pledged ribbon in the header https://redpen.io/qv872h
Here is the actual screen for D4 desktop (: Later i will upload the corresponding pages for the mobile layout.
here are updated versions of the sandcoloured rpg map & refined header of the treasuremap
rpg map, sand coloured https://redpen.io/8zujwn
treasuremap https://redpen.io/ayswxp
Realised last night that we haven't tried the treasuremap with green colours, so here it is: https://redpen.io/bn29rd
Here is an update of the actual desktop screen https://redpen.io/89pdua
mobile screen https://redpen.io/7uz4po
@stenington Do you see potential technical issues with this design?
Here is the new navigation design for the pathway page. https://redpen.io/xkct39
Here is design rollover navigation button. https://redpen.io/rzj1of
Here is a proposal for the position of the navigation menu. https://redpen.io/re4t5j
Ooh, I like! I like how it feels more integrated with the pathway grid.
Here is a new screen with an updated navigation menu & larger pledged text in the header https://redpen.io/wv8hjz
here is a sample with a circular navigation menu https://redpen.io/aecw3k
here another possible sollution for the navigation menu I didn't think of before https://redpen.io/8n7vqp
here is the updated screen for mobile with the nodes visible https://redpen.io/spm67h
I really like the last one: https://redpen.io/8n7vqp but defer to @chloeatplay's expert thoughts. :koala:
updated screen for desktop & mobile!
desktop https://redpen.io/7sx8bv
mobile https://redpen.io/tmsu4w
Here are updated screens for desktop and mobile:
:thumbsup:
:+1: I think we're getting close to needing a wiki that curates all these screens so they're contextualized...
fab work, good to close :thumbsup: @threeqube next step is wikification :smile_cat: and #147
@zzzndr let's elaborate on your wonderful concept studies of a map :flags: and tackle first the pathway page :beers: :surfer: :+1: