New design feedback

[jimaek]

Work in Progress. This is NOT the final product and this is only the homepage.
Leave your feedback on what we should change and I will link the designer this issue.

[jimaek]

@MartinKolarik @bebraw @megawac @pnommensen @tomByrer @as-com @GeorgeErickson
(sorry if I forgot anybody)

[jimaek]

My feedback for now:

1. The API link should be just some button or text. Not an actual link in the list of files.
2. I dont see the mainfile anywhere. We should add it.
3. Not sure what the keyboard icon next to each file link means

[pnommensen]

For the image to left of library name can we use the person's GitHub profile photo? API via avatar_url https://developer.github.com/v3/users/.

[jimaek]

We can but I dont think it would be very pretty.

[megawac]

• Is the /g builder still planned?
• Can we add copy URL to clipboard
• Whats does the menu on the right open
• How does this handle non github projects
• What's the point of that graph at the bottom of each project
• Whats that download? looking symbol do?
• I think the link to the project website should be placed under the github logo.

Like the design overall, very pleasing

[jimaek]

@megawac

• /g/ builder is planned and its the button on the far right with the + in it
• Good idea
• Its the /g/ builder
• For non github projects I guess we can simply remove the Github icon
• On hover it will show the stats for the project (hits per day)
• Download the zip

[megawac]

Also Submit should be Add/Update a project or smt

[djordjevanjek]

Hi I'm designer :)

Here is the answer to email from @jimaek

Little keyboard by every link is actually "copy to clipboard" button.
Sorry for the api, I thought it's a link like others, will be changed in next iteration.
I think that every main file will be the first one? Anyhow I added this little "!" icon and after user hovers it, it should have tooltip that says "Main File".

What do you say if we add another icon below download icon, that will stand for API? If yes, any idea how it could look?

Feel free to write feedback.

Cheers.

[jimaek]

This icon would be much better for copy to clipboard http://fontawesome.io/icon/files-o/
You can link the API link to the "API" world that is currently next to the links. So the people will click on there and it will open it up.
The mainfile should be more obvious I think. People will never find it in there.

[jimaek]

@kejnav
And yes no idea how the /g/ build works right now. It will appear somewhere above the search bar like currently beta does? http://goo.gl/IhT3SC

[megawac]

@jimaek this is a better one imo http://fontawesome.io/icon/clipboard/

Also are we going to start using real paths (jsdelivr.com/jquery instead of jsdelivr.com/#!jquery) when we ship this

[jimaek]

@kejnav Yes, this is better http://fontawesome.io/icon/clipboard/ Thanks @megawac

Paths and the backend will be discussed later. Right now we are working just on the design. HTML/CSS/JS/Backend all will come later. Right now we want to produce a final PSD

[tomByrer]

I like the simple & distinct overall layout & scheme.

The API link should be just some button or text. Not an actual link in the list of files.
Also Submit should be Add/Update a project or smt

Agreed

dont see the mainfile anywhere. We should add it.

Mark with icon or "mainfile" text next to the actual mainfile link, which should be listed first.

For non github projects I guess we can simply remove the Github icon

Switch to icon for that site.
IMHO the repo & download link-icons should be smaller & moved next to "Homepage" icon (which is globe I guess now). OR move the homepage to the left & make the same size as the others there.

On hover it [bargraph] will show the stats for the project (hits per day)

Too much screen space used. Just an icon or number is fine. I don't want to scroll for pages looking for a repo that I have a fuzzy match on please. (I suffer from mild Repetitive strain injuries.)
However, graphical readout (& more details) for a perfect match or direct link would be great.

My observations:

1. /g/ builder: Should be an icon next to each file... 'shopping cart'?
2. Overall too much vertical whitespace; I want to use my mouse little as possible to speed usage & reduce more wrist/shoulder injuries.
3. The red-band for sponsors should be labeled "Sponsors:", "Thanks to:"... also smaller sponsors should be listed, though perhaps in another line in smaller text-only links.
4. Version number should be larger; that is as important as the repo name when I search jsDelivr. Perhaps the drop-box should be a bit more obvious (don't assume people used the old jsDeivr or can read your mind ;) ).
5. Browsing function?
6. How will selecting & hovering work please? I'm thinking for better UX, perhaps the red icons & links should be lighter, then become darker/opaque when selected/hovered.

Additions:

• I like the idea of listing New, Trending, Popular, & Labels like here: https://sublime.wbond.net/

[tomByrer]

Also, is there a bottom & footer planned? I think the existing beta is fine: http://beta-jsdelivr-com.herokuapp.com/

[jimaek]

You are right. @kejnav We will need to add a footer to the design. Dont forget that we plan adding lots of pages. And footer can list less important sponsors too

I also agree on the point that too much space is wasted because of the stats. They could only appear when a user clicks on the project and opens its page.

[tomByrer]

* Though I do like the idea of stats on project-page; gives more of a 'dashboard' feel.

And footer can list less important sponsors too

Yes, better all sponsors listed on bottom in smaller text, while lager icon-links near top for major sponsors.

BTW @jimaek; plan to have a 'news item headline' &/or lattest twitter posts listed on the front page? Maybe a narrow banner on top? Like how CanIUse does it.

[jimaek]

@tomByrer I dont think twitter posts would be a good idea. We can simply add a link to our twitter account and thats it.

[megawac]

atom.io has a really lovely theme if you're seeking inspiration. Maybe we can have trending libraries as well as a later feature?

I'd also like to see github stars integration

[tomByrer]

Maybe we can have trending libraries as well as a later feature?

Sure, I was thinking of planning for it, then leave it out of final if not ready.

[megawac]

Yeah, we could just use Github trending, powered by https://github.com/ricburton/trending

http://githubtrending.herokuapp.com/trending?languages[]=javascript

[MartinKolarik]

You can link the API link to the "API" world that is currently next to the links. So the people will click on there and it will open it up.

I think "API" is next to the link because it's API link. If the link goes away, so should that text.

The mainfile should be more obvious I think. People will never find it in there.

I think the fact that it's always first and a little icon + tooltip are enough.

@jimaek this is a better one imo http://fontawesome.io/icon/clipboard/

Yep.

IMHO the repo & download link-icons should be smaller & moved next to "Homepage" icon (which is globe I guess now). OR move the homepage to the left & make the same size as the others there.

I'd move the homepage icon to the left.

I also agree on the point that too much space is wasted because of the stats. They could only appear when a user clicks on the project and opens its page.

So do we have a page-per-project now? If so, I agree that we don't need stats in search results. What else is on project page?

What about tags/labels? Do we want to remove these?

I agree with @tomByrer that there should be a pagination like in beta and that there is too much vertical whitespace.

[tomByrer]

The mainfile should be more obvious I think. People will never find it in there.

I think the fact that it's always first and a little icon + tooltip are enough.

Agreed; once people find the mainfile the first time, they'll easily find it again.

So do we have a page-per-project now? If so, I agree that we don't need stats in search results. What else is on project page?

Right now a per-project page is the same as a normal view, but isolated results for only that item. Eg: http://www.jsdelivr.com/#!lodash
I believe the project-page can have expanded functions. Feel free to use the extra room for extra stuff, like charts, pre-expanded full file results, etc.

[djordjevanjek]

Hi guys, here the updates, feel free ti write feedback or questions.

[megawac]

Looking better, the Use My Collection button looks misplaced. Should it not be on the bar above?

[djordjevanjek]

@megawac Thank you. Actually that's the right place, tried to use that Google Material style http://material-design.storage.googleapis.com/images/materialdesign-goals-landingimage_large_xhdpi.png

I can revisit that button if you don't like it :)

[jimaek]

@kejnav Can you try to see how the design looks like with some other projects? Some projects will have very long names and CDN links that will push your button and will make the page look a bit bad.
Same goes for description, it can be as little as 2 words or very large.
Do the same with the Github image. Not all projects will have it.

And try the wizard with 10+ projects too, things might start breaking there

I would prefer making the "mainfile" parameter more obvious like it is now but thats up to the rest of the guys. I trust the team :)

[MartinKolarik]

Some projects will have very long names and CDN links that will push your button and will make the page look a bit bad.
Same goes for description, it can be as little as 2 words or very large.
Do the same with the Github image. Not all projects will have it.

Also, some projects have only one file.

[megawac]

Some projects I would like to see rendered:

• ace (show all files)
• bootstrap.datepicker-fork
• sql-parser

[tomByrer]

Sorry we're a picky folks @kejnav ;)
FYI: here is all the projects on jsDelivr: http://api.jsdelivr.com/v1/jsdelivr/libraries
Here are some long project names:
http://www.jsdelivr.com/#!knockout.externaltemplateengine
http://www.jsdelivr.com/#!leaflet.groupedlayercontrol
Long file listing:
http://www.jsdelivr.com/#!ink
http://www.jsdelivr.com/#!tablesorter

@ALL: I'm thinking that long descriptions (like Ace) should either be not allowed or displayed fully. Over 2 sentences it begins to look like SEO or PR, not a 'description".

[tomByrer]

the Use My Collection button looks misplaced

I'm more partial to a shopping-cart analogy. Grab some stuff, get a total listing, then 'checkout', clearing your shopping cart. "My Collection" sounds like 'favorites' or bookmarking to follow.

[djordjevanjek]

[megawac]

@kejnav does Show All for a project work?

[djordjevanjek]

1st Old version of wizard, actually don't like it too much

2nd Various Description and Title length and one of these doesn't have github icon, I guess it looks totally fine. Also I wasn't able to do "show all" for that one that have lot of files because it's too much work in design process, but I guess that this one is really straight forward, if you click show all you'll have a bunch of links, there isn't some smart way to avoid that imo.

3rd New version of wizard. Really like the suggestion from @tomByrer
So if when you first time click on "Add to list" icon this button will be showed, and it will have fixed position, so it will always stay with you even when you scroll.

[djordjevanjek]

@megawac This is design, so I don't know how to make it work 😄
But as I said, it's a really straight forward when you click it

[megawac]

Ha, okay anyway I'm digging it for the most part. The search bar looks a little squished.

[jimaek]

I think the second wizard is better. What happens if you click on the button? Popup?
You should also try using longer CDN links.
The menu should change with the pages I sent you.

The coders will need ALL elements to code the HTML. This includes popup, open version dropdown, charts in the single project page.
Any hovers you personally want to do, otherwise we will set random ones :p
And any other element you can think of.

Thanks for the great designs!

[djordjevanjek]

@jimaek NP
I'll try to define everything of that (hovers, drop-downs, etc...) for you tomorrow, and after that I'll start to work on agreed feature page 😉

If you're in a rush I can send you PSD of homepage just after I finish it, so developers could work on it.

[jimaek]

Nah, dont worry. Once we are 100% ready you can send the PSD with all the elements and pages

[tomByrer]

@ALL I still don't like the "My Collection" analogy; not sure if it is for bookmarking, favorites, etc.

I think we should list all the sponsors in the footer, even if we have to use normal-sized font.

@kejnav Looking good. For testing, please use longest & shortest project names shuffled together in demos.

[jimaek]

@tomByrer Our deal with the sponsors was to keep them in the header. So their current positions are good.

[tomByrer]

@jimaek As I suggested before:

1. The red-band for sponsors should be labeled "Sponsors:", "Thanks to:"... also smaller sponsors should be listed, though perhaps in another line in smaller text-only links.

You replied:

And footer can list less important sponsors too

I replied:

Yes, better all sponsors listed on bottom in smaller text, while lager icon-links near top for major sponsors

So I was reminding the designer of prior conversation he missed.

This thread is a mess; should have separate issues for separate items please.

[jimaek]

Haha I guess you are right. @tomByrer we can discuss the footer problem in chat

@kejnav Please post any updates in the new topic #15

@ALL This topic is moved here #15