Redesign
olav opened this issue · comments
Ideas
- Increase information density.
- Improved use of graphics, typography, grid.
- A single tiered numbered list (1.1, 1.2, ...).
- Less space used for intro/toc before actual content.
- Projections (difficulty, chronology, topics)
- Logo (stickable, shirtable).
Rejected
- Scroll jacking.
- Sticky elements.
- Fixed elements.
- Parallaxisms.
- Checkboxes (localStorage).
Future
- Checkboxes (persistent).
Very cool. I agree with the rejected parts - all horrible experiences, and it's hard to get parallax-effects right (and it's way over used).
I think it's important to maintain the "stylistic coolness" that the site have now. Yes, it might be somewhat long distance from top to content, but the welcoming section is pretty awesome.
I think being able to group the content on different facetting would be pretty cool and useful. Grouping by type, topic or "difficulty level".
Checkboxes might be hard without login, though. People now a days are poly-device™. You might use either your iPad to read articles, but doing tutorials/videos on your desktop - without sharing your localstorage.
Grouping by "difficulty level" would be great.
I'm not sure about the checkboxes. I read across a lot of different devices, so it wouldn't help me at all. Of course, unless we implement some kind of login. Maybe with badges?
With a redesign we should also think about a logo. I need stickers, and maybe also a t-shirt or something. It would be awesome to use that on stage at a conference!
I also enjoy the intro the way it is now. It's important to set a context, not just throw a bunch of links at people. I might even prefer more text. Describe each topic? Each link?
I like the idea of having "projections". E.g. "sort by latest added", "group by difficulty", etc.
With a redesign we should also think about a logo. I need stickers, and maybe also a t-shirt or something. It would be awesome to use that on stage at a conference!
I think the Twitter avatar character is pretty fitting as sticker "as is"? It can also be used on the back or front of a T-shirt (with better graphics and colors than this, obviously):
I'm not sure about the checkboxes. I read across a lot of different devices, so it wouldn't help me at all. Of course, unless we implement some kind of login. Maybe with badges?
Seconded. It's probably better to have no feature than a half-assed feature?
I'm heading to JFokus in Stockholm (JavaZone-ish kind of conference) in early February. Would love to have stickers! Should we get something ordered within a couple of weeks? @olav
I'm also heading to SF in March! I needs me some stickers ;)
We should print a lot of stickers. @mollerse and me are going to JSConf next year as well. And hopefully other places.
Sounds cool, we should definitely try getting stickers in time for those conferences.
I was planning on looking at the design during the holidays. 🎄
In the meantime, if you guys see any inspirational designs, logos or stickers, or have any specific ideas or mockups, post them here. :)
Awesome!
Inspiration: http://www.unixstickers.com/stickers/coding_stickers
A lot of random stuff:
Some important aspects: size, recognisability, ...?
Haha, superhero.js decal for my mac would be awesome (inspiration: http://www.droold.com/i/509-15-MacBook-Decals-For-Superhero-Fanatics)
That would be utterly amazing. One thing I'd love seeing for the new design is really more superhero-y style, rather than Agent-stuff.
(Click for full size.)
Here's one possible direction that would be really easy to work with, based on the popular JS logo. We would have a main logo (the one on the left), and logos for topics (which would make a nice set of stickers). A bit plain, but there are other ways of adding excitement (animations, illustrations, images).
I think the first row is the best alternative. The illustrations are part of a set where some fit our categories. The scalings/fonts/colors need refinement, but I'll either go for this direction, or try something different.
Thoughts?
This has been a long time comming. But thinking we should try to re-ignite this thread and Superhero.js as a hole. We can't in good conscience have a good concept like this and leave it to dust.
I was unsure of the logos and icons when you first posted them, @olav. But apparently it has really grown on me the last year, and now I really like it. It's simplistic, and has a great concept. Usable and reusable icons in different settings. We should do a redesign and re-concept in a simpler style.
Tried my best to summerize what I think the redesign should bring:
- Resources as data (some JSON structure?). Easier to add new ones, and ability to group/filter/sort etc. Sort on difficulty, topic?
- Add section for server side javascript.
- New graphical profile (as seen #59 (comment))
- No way to mark as read except maybe more clear "visited" style.
- Maybe rating? Or even a label with "top pick"? Or maybe the entire page really is that.
- Contribution guide?
Also some other ideas:
- Maybe some way to add comments on resources? Take advantage our user base to create a community? Doesn't need to involve much programming, just add some existing comment-system or even hashtags on twitter?
- Expose our data (ref 1. from above) as an "API" (just accessible JSON), in case someone want to use it for something.
Thoughts, anyone?
@olav Is this something you are still interested in? A new page design? I can do programming, but know my limitations when it comes to design.
@mikaelbr I agree! Thanks for pushing this! I've been thinking about re-igniting for way too long. Got a couple of good resources laying around — I'll take a look tomorrow or this weekend and create PRs.
Re 5, I think everything should be "top pick". If it isn't (e.g. getting too old), let's throw it away. I think there is some stuff getting too old.
Re 6, absolutely agree.
I'm not sure about comments. It's difficult finding a way that works. What are valuable comments for these resources? Not sure. It might be that it'll just work out. I'm open to trying — let's see if we can get a design example showing how it could work.
I like the API idea — plain JSON with all the resources.
@mollerse @mobmad @olav Are you guys still in? Should we try to put a date on a re-release of the site with updated content? (We can of course still merge PRs for new content, just have a date where we push a "New release" to all email and twitter subscribers). Thoughts?
@mikaelbr I think one thing that isn't solved right now is how we handle contributions. I think anybody on the team should just merge in they like the article and they think it works given the existing resources. All resources should be read or watched by at least one on the team, of course, so we ensure the resources match with what we want the site to be.
(And the same thing for rejections: I've anyone on the team has read it and don't think it fits, reject the contribution with a short explanation. If there is a discussion, e.g. from someone on the team, we can just re-open and re-consider.)
Re 5, I think everything should be "top pick". If it isn't (e.g. getting too old), let's throw it away. I think there is some stuff getting too old.
I agree. Thinking more about it, that's the real goal of the page, really.
I'm not sure about comments. It's difficult finding a way that works. What are valuable comments for these resources? Not sure. It might be that it'll just work out. I'm open to trying — let's see if we can get a design example showing how it could work.
Yeah, I'm unsure as well. My thought is that it could be easier to recommend stuff. At least, maybe have a share/tweet button?
Should we try to put a date on a re-release of the site with updated content?
That is a good plan. Make it somewhat formal to have something to work towards.
@mikaelbr I think one thing that isn't solved right now is how we handle contributions. I think anybody on the team should just merge in they like the article and they think it works given the existing resources. All resources should be read or watched by at least one on the team, of course, so we ensure the resources match with what we want the site to be.
Was just thinking the same earlier! There are two possible ways: Have at least X saying LGTM or similar, or just merge if one like. But I think it might be better to be a "living site" and be able to do continuous reconsidering/evaluation.
At least, maybe have a share/tweet button?
Agreed! We should definitely have an easy way of sharing.
But I think it might be better to be a "living site" and be able to do continuous reconsidering/evaluation.
Agreed. Let's just go with merging or rejecting. Don't need LGTMs, better to actually get stuff done right now.
Yep. But I'm really pumped for a rebrand/remake/modernization. And for that we need a smashing new identifiable design. Hopefully I'll get some stickers to share at confs.
Yep, let's see what @olav says. I'm meeting him on Friday, so can chat with him then too. Would be awesome to have stickers.
Absolutely, it would be cool to pick this back up.
I think a simple design using today's content could be a good start, before expanding the functionality.
But yeah, let's talk on Friday. :)
I'm up for some revitalization, use some of that amazing shampoo they keep telling me about on TV.
The cool thing about github is that a PR or an issue can always be reopened if previously closed, don't need to put so much effort into process ^^
Might be worth migrating it off jekyll/gh-pages aswell, if want to add the kinds of features discussed here.
I was thinking you can still have a static file based system to avoid having to pay for a server. Do all logic on the client side. With, you know, javascript.
Persisting stuff (like a "Have read/watched"-thingy) across devices and sessions
I'm voting that we don't do watched label. Cross device watched would require some login, which I think might be unnecessary.
@kjbekkelund Sorry for the late reply. It is great to see initiative to wipe the dust of superhero.js! For my part however, I'll have to say I'm out due to competing priorities :-/
We can try to keep some of the imagery (since that seems to work), while improving the layout and fonts.
I'll put something together over the next few days, just to see what works.
I'm wondering if we should go for a light theme, a dark theme, or use a splash of colors (like today). We could probably combine a dark theme with images of outer space/superheroes to good effect.
Let me know if you have a preference. Some WIP examples below.
This looks really really good
Yeah, this is turning out really cool! Don't know which I prefer though. One of the bottom two I think looks the best.
Another WIP. This color scheme is pretty cool, but it's easy to change or tone up/down.
The font smoothing didn't come out right in that screenshot, here's how it'd look:
@olav This is awesome! Love the last look! Super smooth
(On that note, I'll try to get some time today or tomorrow to look over more resources)
Sounds great, it's all about the content. :)
Here's the current version: http://olav.io/files/shjs/
Terrific work, @olav! I love the colors. I'm still not totally sold, though more "on the fence" no, on dark themed sites, though. It might work, but I tend to prefer light ones. I love the icons more and more, and like how you captured the essence of each topic.
Also, I'd like to see how different groupings might work (if we want that). Groupings like on difficulty, topic, type (video, book, article), etc.
Agreed that we should look over some of the resources. Preferable remove some out dated ones, and generally do some reviewing. I'll try to do make time for it.
Great! Overall, I'm pretty happy with what we have so far: http://olav.io/files/shjs/
I've tried a light version, but I think the dark theme is the way to go – it's sharper, more interesting, and the icon and background colors work well together. We can keep working on the grouping and layout of content, but since this is already an improvement, we should ship it. :)
@olav I really like it! Let's wait until monday or tuesday at least to ship it. I want to do some content updates during the weekend before we start spreading a new design.
💯
@kjbekkelund Thanks! Yeah, it makes sense to wait for the content updates.
If you want to make changes in the updated markup, check out the redesign branch.