Project Browser: Create a logo for Sitemap

Move to project's queue per @leslieg.

Awesome, thanks! This is super-useful, because i don't have the design skills to come up with a logo myself! 🙃

Here is some high-level information to hopefully provide some design direction…

Of the examples provided, i dont have any particular preference.

Sitemap is a module that displays one or more lists of links on the site - i.e.: all menu items in a menu, top taxonomy terms in a vocabulary, and/or book pages in books.

It is not a backend module, so it doesn’t aim to produce machine-readable output, rather, it provides an alternative way to navigate the site, a “directory” of pages, in a sense.

Sitemaps tend to be useful for sites with large amounts of lightly-organized content, e.g.: colleges and universities, governments, or organizations with many lines of business.

Thanks for the great info 🙏

Hi @mparker17,
Thanks for the info. I'm working on it!

Hi @mparker17 and @Kristen Pol,
This is what I managed to come up with. Pls have a look!

@sourojeetpaul, thank you for your contribution.

I’m still learning how to give good design feedback, but I will do my best! Here are some of my thoughts:

1. I like the use of the computer monitor in the design: sitemaps tend to be large lists of links, and thus better viewed on a monitor. Also, because sitemaps were more common in the early days of the Internet, the computer monitor invokes a bit of nostalgia, which I think helps to set people’s expectations about what the module provides.
2. I am curious to know the insight behind your use of check-marks on the computer monitor in the design… I had not previously associated my experience of sitemaps with check-marks, so the idea is new to me, and I am curious to hear your perspective!
3. I like the 3 distinct lists floating to the right of the computer monitor, because I feel a strong association between the concept of a sitemap, and the concept of lists (the Sitemap module groups lists of links from different data-sources onto one page — I sitemap is a list of lists, in a way). Is there a way to make the association between the web-page and the lists stronger?

I agree with the feedback provided… also curious if one more level of nesting for one of them would convey more structure? Not sure. Another approach would be to use a more traditional IA diagram but perhaps that’s not as visually appealing

Hi @mparker17,
Thanks for your detailed feedback and minute observation. This feedback will surely help me improve the designing skill and the thought process behind it. Highly appreciate!
Now to address all your points:
1. You got me right, the use of monitor is to evoke a sense of nostalgia, also for legacy sites and applications the user is preferably to visit site map from a traditional desktop rather than some mobile devices. I've rarely seen people visiting sitemaps from mobile these days!
2. The use of check-list is basically incorporated as bullet pointers, apart from that, though you've mentioned

it doesn’t aim to produce machine-readable output

, I thought incorporating a checklist kind of bullet will broaden the future scopes. As there're different types of sitemaps out there, some of them like XML Sitemap/RSS Sitemap something like that also enable a way for search engines to crawl through the page and get them indexed! So in case if in future if you want to extend that functionality on this module as an additional configurable feature, then the checklist will also serve the purpose by giving a sense that those pages are getting indexed and easily crawlable by search engines.
3. Sharing the similar thought on this as well, it was meant to decipher a strong connection b/w web pages and the list. The list is basically of different pages of the site, hence I thought it might add an easy to understand visual clue on this!

I just got to know about "Emoji Code Review" from the comment. Thanks for sharing the article. Maybe I was living under the rock till now :)

Well @Kristen Pol,
1. On adding further level of nesting, I'm afraid that it'll look a bit messy and cluttered, lacking breathing space on the design. The primarily goal of a logo as it seems to me, is to provide a comprehensive idea about the working of the module, and what purpose it serves. So by using a single level of nesting we can establish the idea of hierarchy and different sorts of relationships among those pages (parent-child, sibling...), with that our design will look clean by properly utilising negative space in our favour!
2. The IA diagram won't look visually appealing as a logo as you've correctly mentioned, it might suit well with a documentation imo.

Understood re my feedback.

One thought on the checkboxes... what about replacing the checkmark with just a filled in circle with the light blue used? Or maybe it would look odd and need the same blue.

@sourojeetpaul, I am happy to hear that we were both thinking the same things for points #1 and #3.

Regarding your comment on the check-marks...

I thought incorporating a checklist kind of bullet will broaden the future scopes. As there're different types of sitemaps out there, some of them like XML Sitemap/RSS Sitemap something like that also enable a way for search engines to crawl through the page and get them indexed! So in case if in future if you want to extend that functionality on this module as an additional configurable feature, then the checklist will also serve the purpose by giving a sense that those pages are getting indexed and easily crawlable by search engines.

I appreciate your forward-thinking, but to be safe, I think we should try to choose a design that describes what this module does right now instead of features that we might add sometime in the future.

I want to take the safer option because people are going to see this logo in the Project Browser when they are searching for a module to solve their problem, so it is more important that we set their expectations appropriately in the context of the Project Browser, and not confuse or disappoint them by hinting at features that do not exist. (also — selfishly — I seem to be this module's only active maintainer right now, so I will likely be the person answering all the issues saying "I expected this functionality, but I couldn't find it!" — and I'm already very busy!).

(to some extent, we can always update the logo if we decide to add that functionality!)

Regarding showing nesting/hierarchy in the logo as suggested by @Kristen Pol in #8 — I have no strong preferences on this matter, but I do have a weak preference in favor of showing nesting/hierarchy, because the usability use-case for a sitemap becomes stronger when you have a highly-nested main menu, and the sitemap module is already capable of showing nesting/hierarchy.

However, I defer to your expertise in managing your contribution time, as well your expertise as a designer in balancing the simplicity and amount of information in the logo.

I don't know if this will be helpful, but here is an example of a simple sitemap generated by this module: https://bradysmeats.com/sitemap

The Nielsen Norman Group (a famous user-experience consultancy) also has some screenshots of sitemaps that this module would be capable of displaying (if the sites had been written in Drupal, and given a bit of theming)...

• a complex example from their 2002 study on Site Map usability — which shows a sitemap taking the role of a directory on a large website
• a less-complex example from their 2023 article titled Information Architecture vs. Sitemaps: What’s the Difference? — which demonstrates a sitemap's use as a secondary navigation feature when compared with the main menu in the header at the top of the screenshot

... they also have a great article from 2008 on Site Map Usability that explains when to choose a sitemap, and outlines when/how you might use a sitemap effectively.

Moving back to "Needs work"

Hi @mparker17 @Kristen Pol,
Now I"ve incorporated the suggested changes. I think this time, its depicting the nesting thing more prominently!

I have reviewed #13 Image as per the Review steps in issue.
requirements for Logo Image file:-
-> 512px by 512px square - ✔
-> PNG format - ✔
-> no animations - ✔
-> 10k file size or less - ✔
-> reasonable image quality - ✔
-> visually represents the project - ✔

I have Attached the Screenshot for a Review.
RTBC +1

@sourojeetpaul, thank you very much! That looks fine to me.

I'm going to create a merge request and then merge it.

Tests pass; merging

I can see the new logo has appeared on the project page: looking good!

Thanks 🙏

Automatically closed - issue fixed for 2 weeks with no activity.

Thanks :)