Adding graphic to spark discussion on page redesign.

[uiuc-cse]

So I was bored during a meeting today and doodled up the attached layout concept for a website redesign. But I think the modules are out there to do this without too much trouble (and it's a skill set orthogonal to my own that I'm seriously interested in developing).

I think we can make criticisms of the current graphical layout for the site, but it's more interesting to address how we can make the site very user-friendly. In particular, I think the website should look reasonably flashy, whatever compatibility arguments can be made for sticking with Web 1.0. It should make working with SWC look and feel attractive and tech-savvy.

• This layout is based on a parallax-scrolling view with a navigation bar.
  • skrollr layout (particularly classic)
  • navigation bar (Twitter Bootstrap)
  • fixed top navigation bar (also Bootstrap)
• The typeface is Gill Sans.
• I have no idea what the particular license is for that image, as it's only a concept.

What I'd like to discuss here is both aesthetic desiderata and practical considerations for a redesign (i.e., does the current site map make sense still?). I'm willing to spearhead an effort (albeit sporadically) based on feedback here.

[LJWilliams]

I like it. I'm designing new print materials for SWC. Can I steal some of your ideas?

[uiuc-cse]

Sure. We may actually be stumbling into a broader issue as well—a consistent pleasant visual style guide for print and web materials. (Later we can CSS the lesson notebooks to match, but that's many months off if we decide it's desirable.)

[bkatiemills]

I like the direction this is going a lot - I imagine better design may also help the web offering appeal to a wider array of clients. +1 on the tech choices so far too.

I would bootstrap yourself some buttons on the landing splash instead of the text 'I want tos' - clearer usage that way (but maybe I'm picking on details too early, sorry if so :) Great work so far!

[swaldman3]

@uiuc-cse As more people get involved, we definitely do need a style guide. There's already an issue for that over here: swcarpentry/communications#24. Input welcome :-)

On a related note, I think that discussion about improving the website should probably be on the Communications mailing list or repo.

[swaldman3]

I'm all for modernising (although I don't find the current site especially old-fashioned), but - and this is purely one guy's opinion - I'm against the parallax-scrolling concept for SWC. While that is a very trendy look at the moment, in my mind it's associated with blogs, magazines, and other things that one sits down to read, rather than to participate in. Things that impart opinion, rather than evidenced best practice. It somehow gives the wrong feel for something like SWC. On a more practical and objective note, to make it work site-wide one needs to have a lot of relevant, high-quality images. Given that what we do is not terribly photogenic, I suspect we'd end up struggling and using and reusing a lot of rather bland generic stock images of classrooms, smiling students, and "code on a computer screen".

I've no particular comment on the image; it feels very busy - as though there's a lot of stuff competing for my attention - but that might partly be down to the choice of image near the top (the one with the blackboard), as well as a density and lack of white space that could be fairly easily tweaked.

[wking]

On Thu, Apr 02, 2015 at 10:49:30AM -0700, Computational Science & Engineering wrote:

I'm willing to spearhead an effort (albeit sporadically) based on
feedback here.

The more time that gets spent polishing this up, the better :). I'm
not a design guru, but I'd suggest using a more carpentry-esque
graphic to emphasize the carpentry vs. engineering distinction that we
build into our name. Someone knocking together a shed in their yard
would be good, but it may be harder to find something that's
interesting enough to be cool, but spatially consistent enough to
avoid being distracting. Your blackboard ticks the right boxes for
cool and spatially consistent (if you swapped squares of chalkboard
space, I probably wouldn't notice ;), and it does hit the the
“scientific” angle, but I think we can find something that also
emphasizes our focus on a few best practices, and not on the esoteric
details this fellow seems to be grappling with ;).

[uiuc-cse]

@swaldman3 re modernizing: for me, it's less that the SWC site isn't modern, and more that it's busy and confusing to someone coming in from the outside. I think this is a function of it trying to serve all masters, which is why my proposal breaks the further elements of the site into three tasks, for learners, hosts, and instructors/developers. Even if we keep the current aesthetic, I think that we can clarify for someone coming in what they need to do based on who they are.

In any case, I'm not committed to the blackboard image over any other—it's just a high-res broadly adequate conveyor. We could always make our own blackboard, right? Or shed...

[wking]

On Thu, Apr 02, 2015 at 12:18:28PM -0700, Computational Science & Engineering wrote:

… I think that we can clarify for someone coming in what they need
to do based on who they are.

+1 to sorting material (or at least the overview of that material) by
role. We can always link from multiple roles (e.g. learners and
instructors) to the same internal content (e.g. a list of lessons
1). We do some of this in the “Get Involved” section on the main
page, but we could certainly do a better job.

We could always make our own blackboard, right?

Good point.

[jiffyclub]

For the homepage, I'm personally a fan of the scrolling style that has ~1 screen per section, for example the Bootstrap homepage: http://getbootstrap.com/. I'm not much of a fan of background images, definitely not more than one.

I definitely like the idea of getting the blog posts off the homepage.

One thing to keep in mind is that the blue of the SWC logo is kind of signature. I don't if we'd change it without a lot of convincing.

[swaldman3]

@uiuc-cse I definitely agree with you about breaking it up by audience, with some careful consideration of what's on the front page (you need to remember that some people will arrive with no idea at all what SWC does).

[josePhoenix]

• The prominent placement of the SWC logo is a good idea. It's fighting with the background, but as you say, that's just a placeholder. I'm not sure I like the multiple backgrounds, so +1 to @jiffyclub's comment
• Wrapping all of the text in the 'bubbles' is... weird. It's a mental gear shift to parse "start the \n process", "operations \n guide", and so on, instead of reading left to right. What are these buttons supposed to do? Are they section headings? It makes it hard to scan the list of subtopics, because most people (using western writing systems) parse information left to right / top to bottom.

I happen to think the current SWC site is pretty tasteful. It makes good use of visual hierarchy and a 4 color palette to organize information. I think it would be an excellent starting point for incremental improvements. For example, the top menu looks like it has accreted items over time... "Foundation Supporters Workshops Lessons" seem like they all go together, "Blog Join FAQ More..." seems a little more miscellaneous. Also, a more prominent display of the workshops map wouldn't be amiss.

[licaroli]

Instead of a blackboard image, maybe a wood grain image, in keeping with the "carpentry" theme. Even fancier, maybe a wood grain image that transitions into an image of flowing bits and bytes.

I liked how @uiuc-cse included the map with upcoming workshops on the home page. It's useful and adds visual interest and excitement.

For the blue elements on the page, maybe use "Software Carpentry blue" instead: R=43, G=57, B=144

• https://github.com/swcarpentry/communications/blob/master/misc/logo/logo-source.svg

[josePhoenix]

There's a tendency (I do it too) for designers to want to throw out everything and start over. The reasoning being, "This time around I'll do it better, and I won't make any of the same mistakes." Unfortunately, the same rules as rewriting software from scratch apply. There will be new, different mistakes. Every use-case considered in the current design will have to be revisited, and one or two might get missed. People who knew how to find something they needed a week ago will suddenly find themselves adrift. Links may break, unless you're very careful. That's why I favor an incremental approach. It's not appropriate in every case, but I think what's there now is a good enough starting point that it's worth considering.

Another benefit of the incremental approach is that individual PRs can contain a single, easily-discussed change, rather than a "yea" or "nay" on an entire concept design. (And after a dozen or so easily discussed changes, you get to a nicely updated look for the site!)

[uiuc-cse]

@josePhoenix: I agree about throwing everything out. The immediate scope of my suggestion is to revamp the landing pad with total outsiders in mind instead of existing instructors. This can of course be done incrementally, but there will be some large steps (reorganizing into roles is a discrete step, for instance). The idea behind the buttons was that these would then link to the current pages for that material (making everything visually consistent, certainly).

@jiffyclub: I do like the clean and simple full-page look of the Bootstrap homepage. It's sort of what I was thinking before I became dazzled by parallax.

[jiffyclub]

Another point: I don't worry about the visual look and feel of the site nearly so much as the accessibility of content on it. I'd be perfectly happy to keep the look we have now but reorganize how information is presented and linked so that it's apparent how to get from the homepage to, say, the workshop operations description.

[uiuc-cse]

What I gauge the response to be:

• don't bother with a dramatic reformat
• do rework landing page based on roles and user friendliness
  • put map on front page
  • remove blog feed from front page
  • clean up navbar

Fair enough?

[gvwilson]

On 2015-04-03 11:56 AM, Computational Science & Engineering wrote:

What I gauge the response to be:

• don't bother with a dramatic reformat

"Yet" - we need this, and I like your layout, but let's rearrange then
beautify.

• do rework landing page based on roles and user friendliness
  o put map on front page
  o remove blog feed from front page
  o clean up navbar

Fair enough?

• I'd like titles of recent blog posts on the home page under a "News"
  heading (but not excerpts).
• Links to SCF material, and to our workshop checklists, need to be a
  lot more prominent.

Other than that, fire away.
Thanks,
Greg

[uiuc-cse]

OK, great. I'll try to work on this directly sometime next week. I'll leave this PR open for a while for any further feedback, then submit changes based on the second bullet point in my last comment.

[gvwilson]

@uiuc-cse Checking in on this again - we're ready for changes when you're ready to give 'em.

[gvwilson]

@uiuc-cse interested in pushing ahead with this?

[uiuc-cse]

Interested, yes. Will try to find time. Am designing and teaching two new courses in fall term and that's eating my lunch right now.