Page MenuHomePhabricator

Illustrations and design building blocks for Structured Data on Commons and GLAM documentation
Closed, ResolvedPublicJun 28 2019

Description

What is the problem?

Documentation on Wikimedia projects usually looks a bit dull and boring, and is sometimes difficult to distinguish from other content and policy pages.
In the upcoming quarters, I will write new documentation about StructuredDataOnCommons, specifically for audiences of staff members from cultural institutions and GLAM-Wiki volunteers. These are audiences that are used to well-designed websites, and they usually have a high visual and design sensitivity. So for these audiences I think it would be very good to create documentation that is designed well and pleasantly.
The documentation will cover complex processes, and it will benefit a lot from design elements that help to make it more understandable and digestible.
And in general, I would like GLAM documentation to have its own very specific and recognizable 'style' - fitting within general Wikimedia style guidelines, but definitely with a character of its own, so that users have a sense of recognition, identity and unity when they encounter and use it.

How can we help you?

In April-May 2019, I would like to request help from CommRel's Associate designer to come up with

  1. a set of recognizable, fun and pleasant illustrations to highlight documentation about GLAM work; preferably designed according to some basic principles upon which volunteers can build their own new illustrations as well
  2. and an easy-to-apply, pleasant-looking set of page design templates and design building blocks (color scheme, title formatting, other layout elements…) for structuring that documentation.

For reference, the first set of illustrations should include the steps outlined in this workflow:
https://outreach.wikimedia.org/wiki/GLAM/Resources/Data_and_media_partnerships_workflow

What does success look like?

This specific assignment will be successful when, by June 2019, we have a package of illustrations on Wikimedia Commons, and a set of page templates on meta.wikimedia.org, that can easily be used as building blocks for GLAM and Wikimedia Commons documentation.

What is your deadline?

Ideally 31 May 2019, so that the designs can be put to use immediately when I start working on documentation in June.

More information

Produced designs (so far)

Documentation:

Illustrations:

  • Google Drive
  • Commons gallery link to follow
  • notes for illustrations to follow

Details

Due Date
Jun 28 2019, 7:00 PM

Event Timeline

Restricted Application added a project: Wikidata. · View Herald TranscriptApr 1 2019, 4:12 PM

I will be happy to help finding inspirational GLAM images for these illustrations :-) and I'm sure the broader GLAM-Wiki community will have ideas too.

Thank you for this request and the detailed design brief!
It sounds quite fun. I can't start immediately on this, but I want to get more details on it while I work on some other tasks.

I have to admit that making vector-based illustrations from scratch would be very hard for me to achieve in a reasonable time frame. And it looks like we will produce a lot.
I am much better with manipulating/working with existing content and remixing it - and that seems to also fit into the whole mission of GLAM. Can you for example imagine the requested illustrations/visual aides to be in the style of the Gif it up for example? It seems like you really dislike the usage of icons, otherwise I think using icons to mask images (like the GLAM logo) could work, too (if the cons don't outweigh the pros).

For the design template, do you have example documentation already written that will also use the template? Or will only new documentation use it?

I might just add more questions in the design brief.

I am much better with manipulating/working with existing content and remixing it - and that seems to also fit into the whole mission of GLAM. Can you for example imagine the requested illustrations/visual aides to be in the style of the Gif it up for example? It seems like you really dislike the usage of icons, otherwise I think using icons to mask images (like the GLAM logo) could work, too (if the cons don't outweigh the pros).

Thank you for replying! I indeed hope this is going to be a fun bit of work :-)

Yes, I personally love the style of Gif it up a lot. Collages of existing bits of GLAM images was what I was thinking about too! I don't dislike icons so much; I just have the (very personal) impression that we see so many of them today that they don't always work so well - especially when they are very uniformly designed. I would be all for experimenting with masking too, so let's definitely try that as well. I'm happy to hear other ideas from your side too.

I do think collecting 'source images' is going to be quite a bit of work (looking at the large amount of time I usually spend looking up suitable images on Wikimedia Commons, for instance when I prepare a presentation), so I will already start creating a folder of inspiration images and will ping our GLAM-Wiki community for inspiration too.

For the design template, do you have example documentation already written that will also use the template? Or will only new documentation use it?

I can imagine that we can start with this one, and redesign it in the 'new style': https://outreach.wikimedia.org/wiki/GLAM/Resources/Data_and_media_partnerships_workflow
I have no other draft documentation yet (at least not that I have written). Entirely new documentation will use this. I actually still need to think more about the general structure and elements that will be needed. I will add more of these in the design brief too.

Some existing community documentation that will NOT be put in this design, but I expect that the StructuredDataOnCommons GLAM documentation will contain very similar elements:

I might just add more questions in the design brief.

Looking forward!

hdothiduc triaged this task as Normal priority.Apr 8 2019, 1:25 PM
hdothiduc moved this task from Inbox to Needs Discussion on the CommRel-Design board.
hdothiduc set Due Date to May 31 2019, 10:00 AM.
Restricted Application changed the subtype of this task from "Task" to "Deadline". · View Herald TranscriptApr 21 2019, 9:30 AM
hdothiduc raised the priority of this task from Normal to High.May 14 2019, 8:32 AM
hdothiduc moved this task from To-Do to Started on the CommRel-Design board.
mcruzWMF updated the task description. (Show Details)May 31 2019, 4:24 PM

Hi @hdothiduc , I added a link on the task description to the communications plan we created with @SandraF_WMF some months ago. As part of the distribution plan, there is an explainer video. Since this task is connected to that, I thought it was good to share this document as well.

hdothiduc added a comment.EditedJun 4 2019, 4:46 AM

Thank you, María for the document link, Sandra gave me the heads up already.

Here are some drafts of templates for the documentation:

https://meta.wikimedia.org/wiki/User:HDothiduc_(WMF)/GLAM_documentation_template
https://meta.wikimedia.org/wiki/User:HDothiduc_(WMF)/GLAM_data_and_media_partnerships_workflow

We can still talk about colors (I took the GLAM logo as basis for the colors I used). Main principles are lots of white space and clear differences in style for different kind of content (see for example different div boxes).

Still under development are the illustrations. Please have a first look at this folder with some drafts.

I think all of this still needs work! I added notes here. The process (image research and the template design) so far has been more time consuming than I thought (though definitely fun!).
We should discuss next steps and the timeline (since we are now past the deadline - sorry!).

Let me know what you think!

The drafts looks absolutely awesome ... with some small modifications (colors of headers, strips of color and backgrounds delineating specific paragraphs, extra whitespace) you have been able to insert so much more clarity! I'll reach out to you to have a more in depth 1:1 run through them and discuss next steps.

Hi @hdothiduc thank you for working on this. I'm providing some feedback below.

Partnerships workflow

  • If you have time, improve this graphic with the following adjustments:
    • remove shadow (too late 90s web)
    • find icons for partner data and partner media files
    • make text of stages a higher contrast
    • find a better way of representing Wikidata and Commons communities
    • standardize text label. All text should be black Montserrat; the only text that can be Source Serif pro black is the graphic description (below the title)
  • Title sections (Introduction, Pre-upload... anything wrapped in a <h1> tag) should be black. While GLAM has it's own visual identity, we need to follow the Wikimedia brand guidelines for consistency.
  • In section "Introduction", "partner data" and "partner media files" are not steps in a process. We need to find a different way of labeling this. We can call them assets.
  • Steps in workflow, Tips, and Tools are a dark shade of blue. I can see why you made this decision, as you are labeling the information on that double entry table. This can be confusing, though, because blue links on a wiki usually indicate a hyperlink. I would recommend making these headers more obvious, maybe with a highlighted background for the words? Or maybe fill the background for those cells? Some workaround is needed here. That will also help make more sense of the color block on the left.

GLAM documentation template

  • Title sections (<h1>) should be black
  • Text in <h3> needs a workaround (see last bullet above). Consider using a background color.
  • I like the callout boxes! (these are good elements to have a special color, as you add here).
SandraF_WMF added a comment.EditedJun 12 2019, 11:14 AM

Thanks for your feedback, María! Hang and I are checking in later today to go through feedback in person. Please note that I am the one who created the workflow graphic last year - that image is not Hang's work! That said, guidelines on how to create and improve such graphics in the future are very welcome.

Thoughts on next steps

While writing first bits of (dispersed) documentation, for instance in the This Month in GLAM newsletter (example), I have discovered that, in addition to the designs you created up till now, we may need template-based solutions and procedures for the following:

Menus for, and navigation inside, longer pieces of documentation

I think a lot of the documentation will consist of multiple steps, or will in general benefit from being cut into smaller chunks. Some readers will want to skip some of these steps because they are not relevant to their use case or they already know how to do that specific thing. So I think it may be good to have

  • A system/template to create a 'menu' (similar to the tab system used by many WikiProjects on Wikidata, for instance - example)
  • A system/template for pagination (when documentation has e.g. dozens of consecutive subpages)
  • A system/template for skipping to a previous/next bit of documentation

Integration of screenshots, gifs, explanatory videos

The documentation will likely include many screenshots and short explanation videos. Perhaps also animated gifs - I welcome your opinion on experiments like this one (you can also see it in use in this story in This Month in GLAM newsletter).
It would be nice to have guidelines and/or templates to integrate these into documentation as elegantly as possible. I can imagine they can be put in the callout boxes you've already designed, but maybe they can benefit from their own place/design (bordered? width? alignment?).

Curious what you think, and if these additional design frameworks would fit into your upcoming planning.

Thanks for your feedback, María! Hang and I are checking in later today to go through feedback in person. Please note that I am the one who created the workflow graphic last year - that image is not Hang's work! That said, guidelines on how to create and improve such graphics in the future are very welcome.

Yes, I figured it was your creation, Sandra =)

Thoughts on next steps

While writing first bits of (dispersed) documentation, for instance in the This Month in GLAM newsletter (example), I have discovered that, in addition to the designs you created up till now, we may need template-based solutions and procedures for the following:

Menus for, and navigation inside, longer pieces of documentation

I think a lot of the documentation will consist of multiple steps, or will in general benefit from being cut into smaller chunks. Some readers will want to skip some of these steps because they are not relevant to their use case or they already know how to do that specific thing. So I think it may be good to have

  • A system/template to create a 'menu' (similar to the tab system used by many WikiProjects on Wikidata, for instance - example)
  • A system/template for pagination (when documentation has e.g. dozens of consecutive subpages)
  • A system/template for skipping to a previous/next bit of documentation

We have some really good navigation templates that we developed for the Wikimedia Resource Center. Consider reviewing:

before developing anything new.
These templates work really well on mobile, are versatile and you can add your own formatting, too! If you'd like to improve them in any way, that is also welcome. The module to edit the template is here.

Integration of screenshots, gifs, explanatory videos

The documentation will likely include many screenshots and short explanation videos. Perhaps also animated gifs - I welcome your opinion on experiments like this one (you can also see it in use in this story in This Month in GLAM newsletter).
It would be nice to have guidelines and/or templates to integrate these into documentation as elegantly as possible. I can imagine they can be put in the callout boxes you've already designed, but maybe they can benefit from their own place/design (bordered? width? alignment?).

This ^^ we don't currently have, and it would be good to develop resources for this need. I think @hdothiduc was doing a good job in this area with the callout boxes.

Curious what you think, and if these additional design frameworks would fit into your upcoming planning.

@hdothiduc and I checked in yesterday and went through her designs. I'm extremely happy with what Hang has produced; I understand how to apply the designs and have even learned a bit about CSS in the process :-) At this moment, in my current planning, I can get started with what we have at this moment. As for next steps, we talked about the following:

Short term (finishing this assignment)

  • Hang will upload the illustrations she made to Wikimedia Commons, in svg format, so that community members can download and edit them, and translate the lines of text as needed. She will also send me brief guidelines on how anyone (I, and other community members) can create their own illustrations in the same style. I will then organize the illustrations on Commons and will create a gallery page there with explanations on their background, usage and application, and will start experimenting with integrating them into draft documentation.
  • @mcruzWMF: thank you so much for pointing to those templates developed for the Wikimedia Resource Center. They indeed look excellent and extremely useful for my purposes. I will start to play around with them on draft documentation so that I get a better idea of where improvements and additions may be needed.
    • One detail @hdothiduc mentioned: it would be good to also have hover styling for the Portal Navigation template. This may be something to look at later this year, see below.

Longer term (September-December 2019)

I expect that the bulk of documentation work for GLAM and StructuredDataOnCommons will happen in September-December 2019. Hang and I discussed that it would be great if I can ask for her ongoing design input and help again during that period, for more detailed fine-tuning of the exact elements and additions we need at that point, building upon the first elements she has designed now.

  1. There is currently no need (yet) to rework the workflow graphic IMO. It is very much work in progress and it is likely to change a lot - and perhaps be applied in different ways - in those upcoming months. I suggest we revisit it in September-December 2019 in that context, unless @mcruzWMF has strong opinions on restyling the current version :-)
  2. I will submit new work requests for September-December for two areas of design work:
    • Continued improvements and support for designs for the documentation that will be actually written in that period
    • Production of the explainer video about StructuredDataOnCommons that we also planned in the communications plan.

Comments welcome!

This sounds great, @SandraF_WMF! Thank you for the summary! I am really looking forward to working further on the documentation and on the video later this year!

@mcruzWMF, definitely thank you very very much for your feedback and suggestions. I agree with what you said!

I reverted the h1 colors now and don't use the dark blue anymore. I will do the rest of what is listed under "Short term" by the end of the month.
Whenever I have time, I would also like to dig deeper into the template and improve it (e.g. hover effect) if possible.

hdothiduc changed Due Date from May 31 2019, 10:00 AM to Jul 31 2019, 7:00 PM.Jun 13 2019, 5:51 PM
hdothiduc updated the task description. (Show Details)
hdothiduc changed Due Date from Jul 31 2019, 7:00 PM to Jun 28 2019, 7:00 PM.
mcruzWMF added a comment.EditedJun 13 2019, 6:47 PM

@hdothiduc and I checked in yesterday and went through her designs. I'm extremely happy with what Hang has produced; I understand how to apply the designs and have even learned a bit about CSS in the process :-) At this moment, in my current planning, I can get started with what we have at this moment. As for next steps, we talked about the following:

  1. Short term (finishing this assignment)
  2. Hang will upload the illustrations she made to Wikimedia Commons, in svg format, so that community members can download and edit them, and translate the lines of text as needed. She will also send me brief guidelines on how anyone (I, and other community members) can create their own illustrations in the same style. I will then organize the illustrations on Commons and will create a gallery page there with explanations on their background, usage and application, and will start experimenting with integrating them into draft documentation.
  3. @mcruzWMF: thank you so much for pointing to those templates developed for the Wikimedia Resource Center. They indeed look excellent and extremely useful for my purposes. I will start to play around with them on draft documentation so that I get a better idea of where improvements and additions may be needed.
    • One detail @hdothiduc mentioned: it would be good to also have hover styling for the Portal Navigation template. This may be something to look at later this year, see below.
  4. Longer term (September-December 2019)

I expect that the bulk of documentation work for GLAM and StructuredDataOnCommons will happen in September-December 2019. Hang and I discussed that it would be great if I can ask for her ongoing design input and help again during that period, for more detailed fine-tuning of the exact elements and additions we need at that point, building upon the first elements she has designed now.

  1. There is currently no need (yet) to rework the workflow graphic IMO. It is very much work in progress and it is likely to change a lot - and perhaps be applied in different ways - in those upcoming months. I suggest we revisit it in September-December 2019 in that context, unless @mcruzWMF has strong opinions on restyling the current version :-)

I do have strong feelings about the graphic, but it's not an opinion, it's a fact =)
As it is, the graphic has accessibility issues. People who only see part of the spectrum of color will not be able to read the text in grey over the pastel colors, even over white. It's not high contrast enough.

There is a link that can help you determine how high contrast your color combination is, but I can't find it right now.
Here is the link I mentioned before

If you are going to use this graphic for advocacy / educational purposes, or at all, I highly recommend changing that grey to black. If you can make this change, I'll let you keep the 1998 drop shadow =P

  1. I will submit new work requests for September-December for two areas of design work:
    • Continued improvements and support for designs for the documentation that will be actually written in that period
    • Production of the explainer video about StructuredDataOnCommons that we also planned in the communications plan.

Comments welcome!

Thank you for the very detailed description and next steps!! Very helpful to keep track of this workflow <3

This sounds great, @SandraF_WMF! Thank you for the summary! I am really looking forward to working further on the documentation and on the video later this year!
@mcruzWMF, definitely thank you very very much for your feedback and suggestions. I agree with what you said!
I reverted the h1 colors now and don't use the dark blue anymore. I will do the rest of what is listed under "Short term" by the end of the month.

This is great, @hdothiduc, thanks for your work!

Whenever I have time, I would also like to dig deeper into the template and improve it (e.g. hover effect) if possible.

This is one of those things that are nice to have, but not a priority (as both of you state). Consider that the template already has a visual cue to indicate what tab the user is on.

Looking forward to more developments!! Exciting times <3

> workflow graphic
I agree with María that there are some improvements to me made if this graphic will be used for educational purposes.
Sandra and I talked about it yesterday, too. First, it needs to be clear who this is for and what they should get out of it.
I am definitely up for reworking it in the fall, if Sandra is not using the graphic with a wide audience at the moment.

> navigation template
You are right, for sure! I want to make it my priority^^ (I hope my schedule allows)

hdothiduc added a comment.EditedJul 2 2019, 11:51 PM

Hi @SandraF_WMF , just an update I am a bit behind with the deadline I set of myself, but I am confident to have everything ready by next week.

Quick questions under which category should upload the illustrations for now?

Hello @hdothiduc - no problem! I would upload them in this category: https://commons.wikimedia.org/wiki/Category:GLAMWiki_workflows - I can help polishing their metadata, so please ping me when you've uploaded them! It will be good to mention the source images, for instance, but I can help with that.

Hi Sandra!

I was just about to upload all the illustrations as svg with the text labels, when I realized that there might be a more user friendly way to create new illustrations with labels and also have them translated.

I also had prepared instructions, as well, but also felt it's not super straight forward.

So, when you look at the bottom of this: https://meta.wikimedia.org/wiki/User:HDothiduc_(WMF)/GLAM_data_and_media_partnerships_workflow
You see 2 examples that I created with html. I think we could create a Wiki template for this that would take as parameters:

  • commons file name (just an image needed that has the same style as we established in the examples)
  • 1,2,3,4,5 for the colors (Blue: #3366cc, Grey: #54595d, Orange: #ff9400, Red: #dd3333, Green: #00af89)

And that's it.
This has another advantage, if we change the style of the labels in the future, then we would only change the template and it would update it everywhere.

So for now I have uploaded only the cut out illustrations (png) to the category you mentioned.

In my notes I have linked to this, as well, a spreadsheet of the images I considered in the research. This includes all the images that I used in the end (with their Commons link).

hdothiduc closed this task as Resolved.Jul 22 2019, 4:38 PM
hdothiduc lowered the priority of this task from High to Low.

I will close this for now - but feel free to reopen or like discussed open a new task for us to expand on this work!
Looking forward to it!