community icon indicating copy to clipboard operation
community copied to clipboard

Improving how Dask looks on the web

Open jacobtomlinson opened this issue 3 years ago • 61 comments

Hey all. I just wanted to provide an update on the progress made by the working group thinking about Dask's branding, websites, visual identity, etc. We will add more updates to this issue as things progress.

Coiled has provided some design resources for taking a high level look at Dask's websites, logos, colour schemes, etc. To make the best use of this resource @adireske, @jsignell, @mrocklin, @jrbourbeau and I have been meeting with Adi's team to talk about how we can improve things.

This effort started with a look at how Dask's various websites are performing in terms of getting the right information in front of folks. We have a bunch of different "foo.dask.org" Sphinx sites for the various subprojects under Dask. We also have a landing page at dask.org, a blog at blog.dask.org and the Dask dashboard. All of these web pages exist for different reason, are built in different ways and are often maintained by different folks. One big goal of the working group is to try and improve how Dask performs on search engines when folks are looking for ways to scale Pandas, NumPy and the PyData ecosystem. The way things are today aren't doing us many favours. We had an expert deliver some updates at the last Dask Community meeting which you can find summarised in these slides.

image

To improve this we are looking at building a new website for Dask which will hold non-documentation content as well as refreshing the documentation as a whole (#170).

The other task we've been working on is thinking about Dask's branding. This was started in #135 and #140 where we looked into things like colour schemes, diagrams, charts, etc.

The working group has rebooted those efforts as part of the holistic look at Dask's identity on the web and we are now exploring things like a logo refresh, colour pallettes, etc. Ideally we want to get to a point where the designers can give us enough structure that those of us (including me) who work on things like the Dask dashboard can apply colours and layouts that fit with the rest of Dask.

The first step on this activity has been to explore updating the Dask logo and I wanted to share some options that we are considering here. Ultimately the decision will be down to the working group but feedback is always welcome. These logos represent incremental change, evolutionary change and revolutionary change. You can read more about the thought process behind this here.

image image

Once we've made some decisions here we will move on to addressing the goals of #135 where we can explore colours that we can use throughout Dask and iconography that members of the Dask community can use to build new diagrams that fit with our style.

jacobtomlinson avatar Feb 15 '22 16:02 jacobtomlinson

Thanks for putting this up @jacobtomlinson, I'm adding here some extra options that were brought up in one of the meetings.

  • For the case of the Parallel logo, make it fit in a hexagon shape.
  • Other possible combinations

Screen Shot 2022-02-15 at 2 26 23 PM

Screen Shot 2022-02-15 at 2 24 16 PM

Screen Shot 2022-02-15 at 2 24 37 PM

ncclementi avatar Feb 15 '22 19:02 ncclementi

I really like the parallel computing logo. I have mixed feelings on the lowercase vs uppercase.

From the recording, there was some interesting conversation about upper vs lowercase. I have a preference for the upper case. Thoughts?

hayesgb avatar Feb 16 '22 19:02 hayesgb

One of my biggest pet peeves is people that write dask in all caps, so my preference is for the lowercase (or title case like "Dask").

jcrist avatar Feb 16 '22 21:02 jcrist

I share the pet peave about people upper-casing DASK in communication, however I think that we shouldn't use the logo in order to solve that problem. That feels like the tail wagging the dog a little. Aesthetically I like the upper-case. The letters fill out the space a bit better to my eye. That's totally subjective though.

mrocklin avatar Feb 17 '22 14:02 mrocklin

The only reason why I mention this is that everytime I correct the spelling of Dask to someone, they mention that the logo is all uppercase and that's why they spell it that way. Seems like an easy thing to get right now if we're thinking of changing the logo.

jcrist avatar Feb 17 '22 15:02 jcrist

I tend to agree with Jim that the logo being all caps leads people to think it's an acronym. This is definitely subjective, but I also think the lowercase feels more approachable and friendly.

I have been thinking about it and I really do like the simplified/single color wings. If it's not too much, I was wondering if we could see an all lower-case dask with the single color wings?

In my mind some of the good things about the wings are:

  1. They don't look like any other logos
  2. They work really well in single color on tshirts with dark or light backgrounds
  3. The color goes well with a black "dask" word for cases where the style of the word is out of our control (I'm mostly thinking of github)
  4. People already associate the logo with Dask. (I know this is kind of unfair to the other logos, but it is a real pro)

jsignell avatar Feb 17 '22 15:02 jsignell

I agree it would be nice to see mockups of the other logos with the lowercase. I also wonder if we could have a titlecase mockup too, perhaps with the "as" in "Dask" stylized a little more.

I'm not a huge fan of the "evolution" logo, for me it is a close call between the "wings" and "parallel computing".

I agree with all of @jsignell's points about why the wings would be good to keep.

Things I like about the "parallel computing" one are:

  • It more symbolically represents what Dask does
  • It fits neatly into a hexagon, and hexagonal stickers on laptops are HUGE
  • It is fresh and represents a new chapter for Dask
  • It is more colourful

A couple of negatives might be:

  • It looks a little generic
  • It is visually similar to the AWS EC2 logo

As I say I'm very on the fence about which I like best.

jacobtomlinson avatar Feb 17 '22 15:02 jacobtomlinson

I also think any of the options here are an improvement over what we have today. This is exciting!

jacobtomlinson avatar Feb 17 '22 15:02 jacobtomlinson

Hi, Thank you for all the feedback. I've asked the designers to do another revision as per @jsignell . It feels like most people are happier with the lower case option and the rectangles icon. https://www.dropbox.com/sh/35iykmtyiz7qf1t/AACHr60Ssl2NwdCccGjD8FCYa?dl=0

AdiReske avatar Feb 17 '22 17:02 AdiReske

I would also vote for keeping the sails/wings, sorry. I find the rectangles generic, especially in the coding world. I think having something does that not fit a typical hexagon is a good thing!

martindurant avatar Feb 17 '22 17:02 martindurant

I love this one!!

image

jsignell avatar Feb 17 '22 19:02 jsignell

I like both the evolution and parallel computing logos. I think that Dask could use a more modern image. I also want to give a +1 to this comment from @jacobtomlinson

It is fresh and represents a new chapter for Dask

I'd like for us to think about Dask as dynamic and changing, and not as static with past decisions. This applies to technology choices (I've been urging people to revisit old decisions/constraints) and I think that it should apply visually as well. We're all going to have a bias for the familiar. I think that we should prioritize not for existing users, but for future users who aren't yet bought in to the old design.

mrocklin avatar Feb 17 '22 22:02 mrocklin

It feels like most people are happier with the lower case option and the rectangles icon

FWIW I'm seeing two in favor of lower case, two in favor of upper case, and one asking to see title case.

mrocklin avatar Feb 17 '22 22:02 mrocklin

We're all going to have a bias for the familiar.

I'm not sure that's fair! Some might have a bias for "new" even when it's not warranted.

martindurant avatar Feb 17 '22 22:02 martindurant

You're right, I shouldn't have said "all". But in general people have a strong bias for the familiar.

Changing logos has a long history of pretty much everyone not liking the change because it's familiar, and then once it happens people connect pretty strongly to the new logo.

So yeah, I didn't mean to say anything about folks here in particular, just about humans and this process in general.

mrocklin avatar Feb 17 '22 22:02 mrocklin

My two cents: I like the "evolution" logo. It rhymes with the older logo, but does look fresher. I also agree with @jsignell that the lower-case text looks friendliest and is least likely to be confused for an acronym.

The "parallel squares" looks a touch generic to me, and is perhaps a bit too similar to xarray: image

ian-r-rose avatar Feb 17 '22 22:02 ian-r-rose

If folks like podcasts, I recommend listening to this 99 Percent Invisible podcast on making marks and logos

https://99percentinvisible.org/episode/making-mark-visual-identity-tom-geismar/

mrocklin avatar Feb 17 '22 23:02 mrocklin

Oh wait, no, I think that it was this episode: https://99percentinvisible.org/episode/negative-space-logo-design-michael-bierut/

mrocklin avatar Feb 17 '22 23:02 mrocklin

I just showed the slide decks to a friend who is not in our space for neutral feedback. General takeaways:

  • Doesn't like the combination of the uppercase DASK with the block font, specifically when combined with the rectangles logo because it feels too industrial. "Looks like Maersk or some other large logistics mega-company"
  • Likes the wings, "feels tech and modern" especially with the newer futura font combination
  • Rectangles seems approachable. Wings seems "elevated" / "silicon valley looking"
  • Evolutionary logo looks like "retail tech", interpret it as "paper flipping"
  • Curious about lower-case with the futura font and with other logo options

Don't ask me to interpret most of that (I don't know what paper flipping means :) ). I did find it interesting to ask people outside of our space their opinion. I wouldn't over-rotate on these views. I do recommend that folks present this presentation to other folks to get their opinion. It's a fun ride 😄

mrocklin avatar Feb 17 '22 23:02 mrocklin

Agree with what Ian said above ( https://github.com/dask/community/issues/220#issuecomment-1043549109 ).

Evolution is a nice touch up.

Too many things in the ecosystem with squares/cubes/etc.. Would rather skip this.

Also ok with wings (either as-is now or touched up).

Have we taken into account color blindness when deciding colors?

jakirkham avatar Feb 17 '22 23:02 jakirkham

Very cool!

I like both Wings and Evolution a lot. I really like the colour scheme in Evolution, that's a nice one. I don't feel any different emotions based on which way "up" the shapes go, although perhaps other people might.

I don't like Parallel. The shapes feel very generic to me, like they could apply to many different companies. The shapes in the other options feel more dynamic to me, and more recognizably unique for branding purposes.

It's always fun to see parts of what the designers are doing, thanks for sharing a peek into the process.

GenevieveBuckley avatar Feb 18 '22 06:02 GenevieveBuckley

Have we taken into account color blindness when deciding colors?

Yeah in one of the follow ups above there is an "accessibility colours" option that the designer put together when we raised colour blindness as an issue.

jacobtomlinson avatar Feb 18 '22 09:02 jacobtomlinson

Hey folks! I thought I’d share the latest from the Dask web presence working group.

A quick reminder of our goals:

  • Make Dask easier to find on the web
  • Rank better on Google for important keywords like “scaling python”
  • Grow our user community by attracting more folks to use Dask
  • Give Dask a consistent and beautiful look/feel across websites, blogs, documentation, dashboard, etc

To achieve these goals we are starting with the foundations of Dask’s branding, the logo. Then the overall brand/look/feel for Dask. Then mock up websites and things.

At this point, we have a recommendation for the logo and also a stylescape.

Logo

Let’s start with the logo. As we shared earlier in this thread we experimented with iterating a little on the logo, evolving it into something else and transforming things in another direction completely.

After much discussion in the working group, we’ve decided to recommend we go with the more transformative logo.

image

Let me unpack why we are recommending this. For many of us who have been around Dask for a while, the current logo will be evocative. I personally was hesitant to move away from the wings logo because it is meaningful to me. However a key goal here is to grow Dask, and new users do not have that same attachment, so we should try and put those feelings to one side.

The new logo gives us a simpler design, some more shapes to work with and more colours in our palette. Moving to an all-lowercase logo also helps with folks mistaking DASK for an acronym. It also fits more nicely with the rest of the community, many projects have all lowercase wordmarks because the project is not a company or an entity, it is a community.

Here are some notes from Jeromy/Chat, the visual designers that we’re working with on why this logo is compelling from a design perspective

When Ashandelle and the Dask Working Group looked into the Dask website and brand, we thought about how to best represent the Dask project and community. We wanted our rebrand to better embody Dask and appeal to its core audience: data professionals.

While we didn’t intend to redesign the logo, we needed a revamp to create a cohesive design language. What story did the original logo tell? What did people see when they looked at it? How did that fit into the story of what Dask is and what it does? Through those lenses, we believed a new logo could help tell a fuller story.

We didn’t enter the design process lightly. When we design (or redesign) a logo, we make it resonate with the audience, align with the project's brand attributes, fit within the product space, and look distinct from competitors.

To communicate Dask’s personality, the logo needed mass appeal, while remaining serious and credible. It needed to feel both authoritative and young, which led us to balance many design elements thoughtfully. After we and the working group collaborated, we designed a logo with repeating shapes to better represent parallel computing and community. The lowercase word mark connects the viewer to Dask’s community traits and references the history of many open source projects using all lowercase logos.

By switching to a logo like this it enables us to build a stronger design on top of it.

Stylescape

The next thing to show you is our recommendation for a stylescape. Before we started this process I had never heard of a stylescape, so I’m going to assume this term is new to others and unpack it a little. A stylescape is an example of an overall look/feel for a project’s branding. It isn’t a website, document, slide or anything so formal. Rather it’s a collection of text, images, colours, headings, diagrams, etc to show how elements look together. It is also not a final branding guide and can continue to evolve, but it helps us to converge on some shared ideas before we start investing a lot in a new website, where iteration is harder.

Dask-stylescapes-Final 76

This is the working group's recommendation for the stylescape we should progress with.

We can see font recommendations and a colour palette on the left, both created to compliment the logo. Then some examples of headings, diagrams, callouts, icons, etc.

We are trying to hit two marks with this. First is an authoritative and technical voice, a group that is listened to in the PyData and Scientific Computing ecosystem. We went with a grid that feels like graph paper, technical line drawings and stark black, grey, and white backgrounds. Elements that would suit the branding of a news outlet, textbook or election campaign.

The second is a welcoming voice where new users feel at ease and excited to explore Dask. For this, we went with primary colours and chunkier lines in some diagrams. This allows us to be a little more playful and not intimidating.

When discussing who else hits this mark we thought of a well-liked elementary school teacher. Someone you are pleased to see and can have fun with, but there is no doubt that they are the authority in the room and should be listened to in more serious moments. This is the feeling we are aiming for.

To get to this place the designers took the logo and expanded it in three different directions to see what voices we could achieve with it.

image

The first option was inspired by outlets such as the New York Times and Tesla. It leans heavily into the authoritative voice but was perhaps too stark and clinical for my taste.

To me, the second option was an easy yes, it was warm, welcoming and fun. I often try and steer the Dask community in this direction, while other maintainers strive towards that authoritative voice. But I could appreciate that perhaps it was too warm and not serious enough.

The third option had a different feel to me. That was exciting, but also made me nervous. It had a little bit of a startup vibe, which in my mind can mean flashy with no substance. But it also felt the strongest in terms of having its own identity. However, I had some concerns about how well those of us could reproduce that look/feel due to the complexity of the elements.

After a few iterations on top of those three, we worked with the designers to amplify the feelings we liked, and reduce the ones we didn’t. This has evolved into the recommendation we put forwards today.

Here are some notes from Jeromy/Chat, the visual designers that we’re working with on their thinking about this stylescape, and what it accomplishes

We extended the visual language of the logo into a cohesive style for the Dask project. The boxes now represent branching processing tasks, hold iconography, create blocks of content, and more. The updated style combines a technical, structured layout with welcoming, friendly properties.

The grid acts as a unifying tool, which breaks up negative space and can be used to anchor design components on. Where we desire authority and expertise, we often use the structured alignment of this composition. We soften the authoritative tone with rounded corners on lines, fluid placement of elements on the grid, and cheerful colors to balance the brand’s personality successfully.

What next?

As we’ve already discovered in this issue, finding consensus is impossible, especially when it comes to subjective things like design. I am hoping to see some discussion here about what we have put forward and for folks to raise any red flags that they see to ensure we are going in a good direction. However, we’re also at a point where it would be good to move on. The recommendations made above weren’t easy and took into account a variety of different perspectives.

Once we have decided on a stylescape to move forward with, the designers will begin figuring out how we want to structure our content online and mock up what our new website could look like. We need to decide what should be moved to the website (the more content we have there the more SEO type stuff we can do to improve our rankings), the blog may be a good candidate for consolidation. We also need to figure out a plan for content that can not be consolidated such as the documentation, this needs to remain a sphinx site for technical reasons and so we need it to look and feel like part of the Dask website as a whole. There are technical conversations to be had, but we are keen to save those for another issue on another day and focus on the design here.

We are confident that the recommendations put forward here will move us to a stronger place as a community.

jacobtomlinson avatar Mar 16 '22 14:03 jacobtomlinson

At the start of the conversation, I was a little unsure of the switch to lower case, but I really like this coupled with the new logo.

hayesgb avatar Mar 17 '22 00:03 hayesgb

Just so that people are aware of timing constraints, I think that the web team is planning to move forward with this. If folks have thoughts on these deisgns that they'd like considered, now is a much better time to bring up these thoughts than later down the line.

mrocklin avatar Mar 19 '22 15:03 mrocklin

Hi,

On Monday next week (the 6th) we are finally going live with the new Dask website and visual look. We are also refreshing the Youtube look to match as well as the docs and other channels.

As you may or may not know, a new website is a little bit like a new beta launch. We may need some hot fixes in the first few days. Things may break or appear in the wrong place. Please be patient with us as we are trying to make this transition as smooth as possible.

Here is a link to the draft site https://dask-2-0.webflow.io

As you are reviewing, I'd like you all to look for major structural issues that would be roadblocks to going live. By this I mean core content missing, or links improperly working. We currently have mobile responsive comments noted on an internal list as well as logo updates for the home page.

Blogs: We’re working on integrating the current posts & will have them included before going live. These are placeholders.

Brand Guide: is still being build for mobile devices.

I also want to share that this website is V1 and just like any other software there will be sprints and V2 and V3 etc. We hope that makes sense.

AdiReske avatar Jun 01 '22 20:06 AdiReske

Site looks great, messaging is on point.

Perhaps we can update the page title from DASK => Dask, so it matches the logo.

Screen Shot 2022-06-01 at 4 09 09 PM

Great work!

MrPowers avatar Jun 01 '22 21:06 MrPowers

Seeing "Community" twice in the header. One appears to show a dropdown menu. Other doesn't have a link. Guessing one of these should be dropped?

Also on Safari 15.3 on macOS 12.2.1.

Screen Shot 2022-06-01 at 6 09 14 PM

jakirkham avatar Jun 02 '22 01:06 jakirkham

Thanks for sharing, @AdiReske! The site looks great!

Some notes:

  • In https://dask-2-0.webflow.io/
    • At the very end of the page, the conda install dask gif is covering the footer for me, and
    • some links in the footer seem to not be connected, specifically: all social icons, privacy policy, and terms of service
      Screenshot 2022-06-02 at 6 17 36 PM
  • In https://dask-2-0.webflow.io/get-started,
    • I think the description for "Dask Tutorial" needs to be updated? Screenshot 2022-06-02 at 5 48 12 PM
  • In https://dask-2-0.webflow.io/news-events (I believe this is still being built),
    • I couldn't close the "Subscribe to the calendar" pop up by clicking on the cross here: Screenshot 2022-06-02 at 6 01 30 PM
  • Minor comment -- In https://dask-2-0.webflow.io/get-help,
    • Under "create a minimal example", the "see also" link isn't connected: Screenshot 2022-06-02 at 5 56 16 PM

I'm on Chrome 102.0.5005.61 (arm64), macOS 12.1

pavithraes avatar Jun 02 '22 12:06 pavithraes

I'm assuming these blog entries are some sort of lorum ipsum generator? See https://dask-2-0.webflow.io/blog unless we are trying to link some existing blogs and it's not working. Maybe we can pull the blogs from https://blog.dask.org Screen Shot 2022-06-02 at 11 41 24 AM /

ncclementi avatar Jun 02 '22 15:06 ncclementi