Hi everybody :)
A project I'm working on is converting the cloud edition page of getfedora.org to be the "Atomic" edition, and mocking up a new "cloud images" site (similar to the ARM site) for the cloud stuff. This is something the Cloud WG has been talking about for a few months.
Anyway, since I was mocking up the changes to the getfedora.org front page, I thought maybe it could use a little revamp / tidying up / whatnot. Here is the mockup I came up with, although note there's a few effects I'd like to see:
- the white bar on top is fixed - clicking on the arrows or scrolling down could activate some nice animation kinds of scrolling with the backgrounds - hovering over each edition has a little animation where the download link is revealed
What do you think? Any feedback / suggestions / critique?
https://raw.githubusercontent.com/fedoradesign/nextweb-assets/master/Mockups...
Source is in the nextweb-assets repo on github under fedoradesign.
Thanks, ~m
Hi, my opinions about your issue:
- need to put buttons for all , not just for ATOMIC; - add another icon for READ THE DOCS - is too... edged; - scalabe/ rotate icons loop effect or put "press to take" - message : Want more Fedora options; - is need to add some additional notes for each of this with how can help users; - short intro videos for each steps into fedora distro and community teams;
2016-06-23 21:41 GMT+03:00 Máirín Duffy duffy@redhat.com:
Hi everybody :)
A project I'm working on is converting the cloud edition page of getfedora.org to be the "Atomic" edition, and mocking up a new "cloud images" site (similar to the ARM site) for the cloud stuff. This is something the Cloud WG has been talking about for a few months.
Anyway, since I was mocking up the changes to the getfedora.org front page, I thought maybe it could use a little revamp / tidying up / whatnot. Here is the mockup I came up with, although note there's a few effects I'd like to see:
- the white bar on top is fixed
- clicking on the arrows or scrolling down could activate some nice
animation kinds of scrolling with the backgrounds
- hovering over each edition has a little animation where the download
link is revealed
What do you think? Any feedback / suggestions / critique?
https://raw.githubusercontent.com/fedoradesign/nextweb-assets/master/Mockups...
Source is in the nextweb-assets repo on github under fedoradesign.
Thanks, ~m _______________________________________________ design-team mailing list design-team@lists.fedoraproject.org
https://lists.fedoraproject.org/admin/lists/design-team@lists.fedoraproject....
Hi Catalin! Thanks for the feedback!
- need to put buttons for all , not just for ATOMIC;
Yep, definitely! The thought there is that the button would appear when you hover; only Atomic's button is shown just as an example of what it'd look like on hover (I know it's unclear without reading the explanation.)
- add another icon for READ THE DOCS - is too... edged;
It's the same one we use today; i thought maybe the sharpness of it went well with the points on the Fedora Mag bookmark icon but I will try rounding the corners and see if it works better!
- scalabe/ rotate icons loop effect or put "press to take" - message : Want
more Fedora options;
Ohhh! Great idea / good catch! I can't believe I missed that. Will add in a more options area.
- is need to add some additional notes for each of this with how can help
users;
Is the text under each edition not sufficient or unclear?
- short intro videos for each steps into fedora distro and community teams;
This is a good idea! We don't have videos right now though so we'd have to get together and make a project of creating them. If we had some that existed though I agree they'd be a great addition to the website!
Thank you very much for the critique, I really appreciate it!
~m
Thank you for replay. about last points of view: - aditional tech description and infos: minimal hardware / distro like a intro for users , maybe a new page - not point to https://ask.fedoraproject.org/en/questions and docs. - a video intro made by a member of development team - example : https://getfedora.org/en/cloud/ when can be used with some example; - also, one good example (4 min intro) https://www.youtube.com/watch?v=t2DIFdFtWPU - this can make also for any issue: like the colors of fedora icon for design-team or maybe - messaging that "Freedom is a Feature" icons ... - videos can be play with subtitle into any language - I don't have videos make for getfedora issue - my english is not so good :) Have a great day.
- is need to add some additional notes for each of this with how can help
users;
Is the text under each edition not sufficient or unclear?
- short intro videos for each steps into fedora distro and community
teams;
This is a good idea! We don't have videos right now though so we'd have to get together and make a project of creating them. If we had some that existed though I agree they'd be a great addition to the website!
2016-06-29 18:55 GMT+03:00 Máirín Duffy duffy@redhat.com:
Hi Catalin! Thanks for the feedback!
- need to put buttons for all , not just for ATOMIC;
Yep, definitely! The thought there is that the button would appear when you hover; only Atomic's button is shown just as an example of what it'd look like on hover (I know it's unclear without reading the explanation.)
- add another icon for READ THE DOCS - is too... edged;
It's the same one we use today; i thought maybe the sharpness of it went well with the points on the Fedora Mag bookmark icon but I will try rounding the corners and see if it works better!
- scalabe/ rotate icons loop effect or put "press to take" - message :
Want
more Fedora options;
Ohhh! Great idea / good catch! I can't believe I missed that. Will add in a more options area.
- is need to add some additional notes for each of this with how can help
users;
Is the text under each edition not sufficient or unclear?
- short intro videos for each steps into fedora distro and community
teams;
This is a good idea! We don't have videos right now though so we'd have to get together and make a project of creating them. If we had some that existed though I agree they'd be a great addition to the website!
Thank you very much for the critique, I really appreciate it!
~m _______________________________________________ design-team mailing list design-team@lists.fedoraproject.org
https://lists.fedoraproject.org/admin/lists/design-team@lists.fedoraproject....
- need to put buttons for all , not just for ATOMIC;
Yep, definitely! The thought there is that the button would appear when you hover; only Atomic's button is shown just as an example of what it'd look like on hover (I know it's unclear without reading the explanation.)
I put together a jquery mockup of this - it's rough but hopefully shows what I was thinking: http://run.plnkr.co/46D3mtlXGqEZasLB/
~m
Plunker is finicky to share - the run.plnkr.co link only works while the plunk itself is running in your browser (assuming you're looking at the edit screen), and even then the run stops after a couple of minutes of no editing to the files.
I've had some success by freezing the plunk and then sharing the edit URL. I use the github integration though to store versions, and I'm not sure if this approach would work without that enabled.
Kirk
On 30/06/16 09:55 AM, Máirín Duffy wrote:
- need to put buttons for all , not just for ATOMIC;
Yep, definitely! The thought there is that the button would appear when you hover; only Atomic's button is shown just as an example of what it'd look like on hover (I know it's unclear without reading the explanation.)
I put together a jquery mockup of this - it's rough but hopefully shows what I was thinking: http://run.plnkr.co/46D3mtlXGqEZasLB/
~m _______________________________________________ design-team mailing list design-team@lists.fedoraproject.org https://lists.fedoraproject.org/admin/lists/design-team@lists.fedoraproject....
On 06/30/2016 01:22 PM, Kirk Bridger wrote:
Plunker is finicky to share - the run.plnkr.co link only works while the plunk itself is running in your browser (assuming you're looking at the edit screen), and even then the run stops after a couple of minutes of no editing to the files.
I've had some success by freezing the plunk and then sharing the edit URL. I use the github integration though to store versions, and I'm not sure if this approach would work without that enabled.
Damn, maybe I should have just used jsfiddle? Is there a good open source one you know of?
~m
On 06/30/2016 12:55 PM, Máirín Duffy wrote:
- need to put buttons for all , not just for ATOMIC;
Yep, definitely! The thought there is that the button would appear when you hover; only Atomic's button is shown just as an example of what it'd look like on hover (I know it's unclear without reading the explanation.)
I put together a jquery mockup of this - it's rough but hopefully shows what I was thinking: http://run.plnkr.co/46D3mtlXGqEZasLB/
Sigh, let's try that again: http://run.plnkr.co/plunks/X5HMPdUBvJL3Yjoi9ekm/
~m
Hey Mo, is the Atomic icon final? It's kind of in a different style than Workstation and Server. Maybe we can simplify it more?
Otherwise, I really like the subtle animations!
Elio Qoshi
Open Source Designer Board Member at Open Labs Representative at Mozilla E: ping@elioqoshi.me W: www.elioqoshi.me
On 6/30/2016 19:24, Máirín Duffy wrote:
On 06/30/2016 12:55 PM, Máirín Duffy wrote:
- need to put buttons for all , not just for ATOMIC;
Yep, definitely! The thought there is that the button would appear when you hover; only Atomic's button is shown just as an example of what it'd look like on hover (I know it's unclear without reading the explanation.)
I put together a jquery mockup of this - it's rough but hopefully shows what I was thinking: http://run.plnkr.co/46D3mtlXGqEZasLB/
Sigh, let's try that again: http://run.plnkr.co/plunks/X5HMPdUBvJL3Yjoi9ekm/
~m _______________________________________________ design-team mailing list design-team@lists.fedoraproject.org https://lists.fedoraproject.org/admin/lists/design-team@lists.fedoraproject....
On 06/30/2016 01:28 PM, Elio Qoshi wrote:
Hey Mo, is the Atomic icon final? It's kind of in a different style than Workstation and Server. Maybe we can simplify it more?
Yep, that's the final. It's derived from the upstream Atomic Project logo. See
http://blog.linuxgrrl.com/2015/09/15/fedora-atomic-logo-idea/
https://lists.fedoraproject.org/archives/list/cloud@lists.fedoraproject.org/...
:)
~m
On 30/06/16 10:24 AM, Máirín Duffy wrote:
On 06/30/2016 12:55 PM, Máirín Duffy wrote:
Yep, definitely! The thought there is that the button would appear when you hover; only Atomic's button is shown just as an example of what it'd look like on hover (I know it's unclear without reading the explanation.)
Sigh, let's try that again: http://run.plnkr.co/plunks/X5HMPdUBvJL3Yjoi9ekm/
~m _______
This one is working!
Feedback: I'm not sure why the Download button would be hidden. The logos don't really have any affordances for exposing actions on hover, and there seems to be plenty of space for hints or even action buttons (above, below, or on the right). If you want to stick to a minimalist approach, consider having a small hint of possible actions that, on hover, expand to show more. For example a small icon that, when hovered or clicked, shows the full word "Download".
I worry that the Download, when hidden like this, isn't discover-able enough.
As for plunker itself, it is Open Source: https://github.com/filearts/plunker_www I'm using it because I don't know of a better alternative. I've just embraced sharing the edit link rather than the run link.
Kirk
Hi Kirk!
On 06/30/2016 02:07 PM, Kirk Bridger wrote:
Feedback: I'm not sure why the Download button would be hidden. The logos don't really have any affordances for exposing actions on hover, and there seems to be plenty of space for hints or even action buttons (above, below, or on the right). If you want to stick to a minimalist approach, consider having a small hint of possible actions that, on hover, expand to show more. For example a small icon that, when hovered or clicked, shows the full word "Download".
I worry that the Download, when hidden like this, isn't discover-able enough.
Thank you!!! These are good points - I ended up in this rathole by trying to address this discussion:
https://twitter.com/nurhussein/status/746054636273016833
But yeh, this went off the rails a bit.
I think maybe what I should do is just have "More Info" and "Download Links" beside each other under each edition name / description without the animation... or maybe put a nice animation on the buttons on hover.
The tension I'm working with here: - I don't want to drive ppl to download before they even know what it is that they're downloading, because I think that's just obnoxious. - I don't want to hide the download link for people who know what they want and are already familiar with the options.
I think I played with having both buttons and it looked cluttered, but I'll keep pushing it and see if I can remedy that.
As for plunker itself, it is Open Source: https://github.com/filearts/plunker_www I'm using it because I don't know of a better alternative. I've just embraced sharing the edit link rather than the run link.
Oh I know it's FLOSS, I just didn't think sharing a preview of the work would be so hard! I ended up doing plnkr.com/plunks/ and manually appending the hash of my plunk to the end, I guess if you could see it, then it worked??
~m
how about http://www.bypeople.com/javascript-animation-library-anime/ i saw some example here : http://www.bypeople.com/javascript-animation-library-anime/
2016-06-30 21:38 GMT+03:00 Máirín Duffy duffy@fedoraproject.org:
Hi Kirk!
On 06/30/2016 02:07 PM, Kirk Bridger wrote:
Feedback: I'm not sure why the Download button would be hidden. The logos don't really have any affordances for exposing actions on hover, and there seems to be plenty of space for hints or even action buttons (above, below, or on the right). If you want to stick to a minimalist approach, consider having a small hint of possible actions that, on hover, expand to show more. For example a small icon that, when hovered or clicked, shows the full word "Download".
I worry that the Download, when hidden like this, isn't discover-able enough.
Thank you!!! These are good points - I ended up in this rathole by trying to address this discussion:
https://twitter.com/nurhussein/status/746054636273016833
But yeh, this went off the rails a bit.
I think maybe what I should do is just have "More Info" and "Download Links" beside each other under each edition name / description without the animation... or maybe put a nice animation on the buttons on hover.
The tension I'm working with here:
- I don't want to drive ppl to download before they even know what it is
that they're downloading, because I think that's just obnoxious.
- I don't want to hide the download link for people who know what they
want and are already familiar with the options.
I think I played with having both buttons and it looked cluttered, but I'll keep pushing it and see if I can remedy that.
As for plunker itself, it is Open Source:
https://github.com/filearts/plunker_www I'm using it because I don't know of a better alternative. I've just embraced sharing the edit link rather than the run link.
Oh I know it's FLOSS, I just didn't think sharing a preview of the work would be so hard! I ended up doing plnkr.com/plunks/ and manually appending the hash of my plunk to the end, I guess if you could see it, then it worked??
~m
design-team mailing list design-team@lists.fedoraproject.org
https://lists.fedoraproject.org/admin/lists/design-team@lists.fedoraproject....
design-team@lists.fedoraproject.org
-
Catalin -
Elio Qoshi -
Kirk Bridger -
Máirín Duffy -
Máirín Duffy