RustFest Global website & brand refresh

[flaki]

About the event

RustFest Global is the online edition of the RustFest conference series that was founded in 2016 to promote the Rust programming language and bring together the community (in cybrspace) for a few days of talks, workshops and joint collaboration.

This sections below expand on some of the values and constraints/trade-offs that may be relevant to framing the website's visual design, structure or design language.

How global exactly?

We believe that an online conference can be more inclusive than in-person events due to the different limitations and constraints that apply to the internet vs physical events. For us to truly be globally inclusive & able to cater for an international audience extra care & effort is required, such as:

• the event is split into 3 separate conference blocks, all aimed to suit asia/europe+africa/americas timezones
• we build our own custom streaming platform so people in different timezones could still enjoy the talks no matter when they get aired first
• conference proposals are also accepted in languages other than english, and talks may be presented in one's native language in which case we provide english subtitles
• we have globally accessible ticket pricing & a completely free public conference stream
• we are collaborating with organizers of regional events from around the globe (Rust Tokyo, Rust LATAM) to make sure RustFest Global is not just an event organized mostly by europeans, "pretending" to be global

Being truly "global" of course, is nigh impossible and this will always be a balancing act in resources and time on the organizing team's hands -- but we will try our best to do as well as possible given our constraints.

Which brings us to...

Localization

While localizing the conference website is an important aspect of providing a truly globally inclusive experience, the team's resources and the shortness of time limits us in being able to "get this right".

Currently the event is still strongly biased towards "international, but English-speaking" audiences, and tackling this bias on the long term will require experience that we hope to gain from our first RustFest Global event. Improving this will mandate devising a complex strategy, part of which will be localization of the website and other linked online properties.

All that said, we do plan to make certain key content and documentation available on the website in localized versions, such as our call for proposals, or documentation to speakers, etc. We expect translations in CJK (Chinese, Japanese, Korean) and Latin American languages (Spanish, Portuguese) for some of this content.

This means that the design should avoid choices that would make it detrimental/hostile to these content pages.

Licensing

RustFest organizers believe in the principles of open design. The branding is discussed in the open, and all our brand assets are published under open licenses on our Branding repo after the conference.

The RustFest Global brand assets will also be published on our Branding repo. Assets are published under CC or a similar open license (the specifics of which can be discussed, we are open to feedback).

The brand asset repo may be accompanied by one README.MD document describing the author, assets provided in the repo and the design process. In case a detailed branding document like this is provided we would be more than happy to include parts of it also in the announcement blog post on the release of these brand assets on our RustFest Blog, to be published after the event.

Logo

We want to keep some continuity with previous events, while absorbing traits and showcasing the transformation due to having global teams joined the ranks of the event. For specifics, see below:

• Rather flexible, open for proposals with large amount of creative liberty afforded during initial ideation
• See previous editions' branding for inspiration/reference
• We probably would want to keep the general shape of the logo -- see this comment from the Rome edition visual refresh, which still applies
• We want to meld some of the traits of the Tokyo & LATAM event teams
  • this could be subtle
  • all this does not need to be crammed into a single logo
  • can imagine this manifest in equally-valid & canonical logo variations that all coalesce in one, reduced complexity (simple shape, looks good on small sizes, probably 1-2 colors max) "umbrella" logo

General branding & colors

No exact preference, it's probably a good idea to avoid very strong and specific colors with connotations to any one country.

RustFest is generally on the "playful" side of the spectrum (as is the Rust community in general), so more warm and playful than cold, strict and stoic. More Ferris than apple.com/mac-pro.

Artworks & print

Most artwork will be used digitally, primarily on the website. Some artwork may be reused for the stream (e.g. stream background or various skits, break screens, animations). We are still evaluating the design needs of the stream and will be handling that process separately.

Being an online event, much of the physical production (lanyards, t-shirts, badges) will not apply, but we still want some sticker designs that we may produce or make available for local production.

See published branding of previous events for sticker examples.

Website

The website will be statically generated, most content will be edited in Markdown collaboratively, HTML output will be generated by tooling during publishing of website updates.

Some content (including certain content pages) will be sourced from a CMS, this primarily applies to schedule content (Events, Sessions and people (session hosts etc.)).

Technical requirements

The website needs to be responsive, tablet and mobile phone friendly & touchscreen-friendly. We are targeting modern browsers (SVG, responsive images, CSS Grid etc.).

Accessibility is a prime concern at RustFest events and this applies to the website, doubly so given the online nature of the event. This means clean, prominent navigation, good color contrast etc. is a must.

Website contents

1. Homepage
2. Sponsors page
3. Events page
4. Session detail pages
5. Person pages
6. Generic listing, content and blog post pages
7. News page (blog post listing)
8. Past events page
9. About page (team page)

Homepage

Prominent display of upcoming events: list of upcoming pre-conference meetups, or next scheduled talks on the conference day, see events page details below.

Similarly prominent display of latest news: blog post listing. Newsletter subscription and Twitter channel link will move here. Probably will include the RSS link too.

These are followed by a list of top sponsors.

Sponsors page

In Barcelona we had sponsors listed by their sponsorship tiers.

At RustFest Global there are no explicit sponsor tiers, but sponsors can pay more to secure extra perks, so ordering will be based on "how much they have contributed".

Perks could include special distinctions such as "diversity sponsor" and similar, which we could showcase on the sponsor listing as tags or extra badges next to the sponsor.

Another idea is to show how many times the sponsor have supported our previous events (as a badge).

Events page

The Events page collects the Talks, Workshops, Impl Days and Pre/Post-conference events pages from the previous events.

We won't have explicit "days" distinction anywhere in the conference (due to our "Global" nature and timezones making such a distinction weird), but we'll have separate blocks in the main conference, as well as all kinds of side events that we want to list separately. Currently these are the things that are being discussed:

• Pre-conference meetup style events in the weeks before the conference (supported by our organizing team)
• Workshops and other hands-on activities globally closer to/surrounding the conference dates (this includes impl-days-style events)
• The conference day, separated into 3, roughly 5-hour blocks happening couple hours apart in 3 different timezones: Asia, Europe, Americas
• Potentially post-conference events (same as above)

The events page will list all these Session-s. The dates/times of the sessions will be changed by a client-side script to the timezone of the current visitor's browser (or selected timezone) so the Sessions listing shouldn't rely on separators based on dates/time, but should display dates and times of the event prominently.

Hosts of the sessions (speakers, workshop hosts, impl days mentors etc.) should be listed with the short description of the session (can be none or multiple people with up to 4 displayed in the listing).

Session detail & person pages

Example from Barcelona.

The RustFest Global session detail pages will prominently feature

• the session name
• type, e.g. talk, workshop, panel discussion etc.
• date/time & length of session (localized in the visitor's timezone, e.g. concievably span two days, e.g.: Nov 5. 23:00-Nov 6. 1:00 CEST (UTC+2))
• Session description (see content pages below)
• List of session hosts (presenters/moderators/panelists/mentors etc.)

List of session hosts should have name & short information of the people involved with the session. Some people may have attached titles (e.g. to differentiate between Moderators & Panelists of a panel discussion). These also include a profile picture (thumbnail) and contact links (e.g. Twitter), preferably in an icon form.

For presenters who opt out of having their profile picture published we will need a placeholder image (see the barcelona placeholder for example). This will also be used temporarily for people from whom we haven't yet received their chosen profile picture.

All people have their individual linkable pages with the longer, untruncated form of their bio and a list of all the sessions these people are involved in. Session thumbnails are similar to people thumbnails but sessions don't have attached images (no "avatar" picture).

Blog posts, content pages & content listings

Content pages have to support the standard Markdown-fare:

• Various heading sizes and inline formatting/links
• Ordered/unordered lists
• Images (mostly block level & full-width, maybe floated/inline)
• Blockquotes
• Small tabular data (max 4 column tables)
• Inline monospaced code elements
  • Maybe also code blocks (with syntax highlighting) but these are not a priority currently

These pages will be mostly handled through GitHub (not the CMS), we will be able to add custom HTML content where needed (e.g. embeds).

News page

The new website will integrate the blog back into the main site. Whether technologically and process-wise they will be still separate, we will see, but as far as the design & UI are concerned, they will be matched.

blog.rustfest.eu will redirect to blog.rustfest.global and the past events page will move under rustfest.global proper.

We are building a website that we hope can be used by future rustfest.global events as well as forked/reused by other events.

Past events page

A visual refresh of the existing page, with the same functionality and content.

About page

Similar to previous years this page contains a couple sentences about the conference and a listing of organizers. The organizers are listed with their picture, names & contact links. The organizers may be listed in groups.

[RafaelaWetzel]

That will be 4 continents - America, Europe, Africa and Asia. :)

[RafaelaWetzel]

Updated the HackMD. 11 artists from 4 continents. ✌️ @ergishkelzeni

[ergishkelzeni]

@RafaelaWetzel @flaki

Here's the poster me and @elioqoshi designed for Artists Line Up.

The poster is designed in Figma. So if changes are required, the project file project can be found here.

[RafaelaWetzel]

That looks amazing! Thank you ❤️

[RafaelaWetzel]

I received a feedback from my team:

Love the flyer, but my mild OCD is kicking in -> my wishes:

1. The spacing on the right is not even, maybe mirror the one from the left side?
2. The "all access pass" is split over two lines

[ergishkelzeni]

Oh yeah, I am sorry I didn't notice these!

Here's the updated poster:

A4 - Line Up Poster - Update

Also on Figma.

[ergishkelzeni]

@flaki

In the Figma Page below I have designed some template variations for the social media posts and also added a set of icons that can be used as SVGs in the generated images as you mentioned.

https://www.figma.com/file/AASBr1VVJKCQE8vjL2iRB6/RustFest-Global-2020-Branding?node-id=461%3A0

Let me know if you need my help with anything else regarding the social media images.

[flaki]

Hey @ergish thanks for the amazing work! I'm in love with the poster! :sparkling_heart:

Just one note on the social media images: the variations look great! Could you add an example or two of how you would imagine the icons to be used on the social media pictures? Where would they go, which element would they replace, would they just go inside the "wheel" like the speakers? Thanks!

And I'll add a note below on the conference intro:

[flaki]

TL;DR our artist didn't have the time for creating the intro animation that we asked for and we learned about this super late so we need to find a fallback. There are many ways this can go, and depending on what you could squeeze into the limited time until the conference, we welcome all approaches. This would be paid above the design that we requested, again, depending on complexity I'm sure we can agree on the sum on top.

There are two ways we can go with this, one is an animated intro delivered either in a rendered video form or a customizable SVG animation (or similar) and rendered by us. The other is a semi-transparent stream overlay that can be customized with speaker details. The reason for this separation is because our streaming system cannot handle animated (video) content overlays, only static overlays so we either go with a fullscreen clip, or a semi-transparent static image overlay.

The clips(for short I'll be referring to both of the above by "clip") will be shown at the beginning of every conference talk, they will contain:

• Speaker name(s), up to two
• Talk title
• Optionally speaker picture(s)
• Two sponsor logos (see on www.rustfest.global, the Mux and Embark Studios logos).
• Some text along the sponsor logos (e.g. for Mux it's "Powered by", as they are the conference's streaming provider)

The clips will show for 15 seconds at the beginning of the talk (in case of the static overlay they will be overlaid with the speaker's slides, otherwise there is a switch to the speaker at the end of the animated clip). For the animated clip we have a music choice which will play during the clip (first 15 seconds, animations could be synchronized to the music/beats). There will be no music during the static overlay showing.

This is as much a "RustFest" animation as a talk animation so animating the logo, or Ferris etc is also fine. Any new artwork is also appreciated and rewarded if fits the timeline. The only limitation here is that both sponsor logos need to be displayed for the majority of the time (15s minus some fade in/out time).

Some more nice to haves if they fit the schedule:

• 3 timezones reference: Elio proposed 3 color schemes for the talks in the 3 blocks, but in any small way this could be represented it would be appreciated.
• Overlay symmetry/mirror possibility: live speakers will use the layouts and backgrounds that were created above, but we have quite a few pre-recorded talks which can be different so if there's an alternate overlay that is e.g mirrored (because the speaker placed themselves differently and would be covered otherwise) that would be useful. This only really applies for the static overlays.
• Note that we will have published videos in December, so if only a delivery of a static overlay is possible by the conference but we could have an animated one for final publication that is also a possibility.

Delivery would be needed by Friday morning the latest.

[ergishkelzeni]

Hi @flaki

Just one note on the social media images: the variations look great! Could you add an example or two of how you would imagine the icons to be used on the social media pictures? Where would they go, which element would they replace, would they just go inside the "wheel" like the speakers? Thanks!

Yes, the icon can go inside the wheel/globe so it's still the same concept. I added another example with the icon included. Figma link here. I would suggest using the icons with the outline and not the filled ones. Also. the icons should have the same glow effect that will be applied on the wheel/globe. I am not sure if the icon set I found is enough for your posts. If there's any specific icon you need and I can assist, let me know.

About the intros, I am working on them and I'll let you know when I have something for both options.

[ergishkelzeni]

@flaki

I was thinking of producing all the intro videos, and provide them all from my side. But due to the short time, the most logical and doable option would be having the solid overlays for the conference and the intro videos for the publications, so we have enough time to work, experiment, and do it right.

I and @elioqoshi worked on 3 design options for the overlays and also 2 concepts for the video animations (just a static image for the moment). We did not include the photos of the speakers in the static images because the speaker will be also in the video meantime.

The Figma link here.

Let us know what you think of them.

[flaki]

Excellent, love the direction! @ergish @elioqoshi left some comments on Figma.

[elioqoshi]

We somehow thought that these would be overlaid for the whole video and hence squished the overlays into the corner :) The fact that they will be shown only for 15 seconds changes everything of course and we should be able to accommodate to these requirements. Thanks for clarifying, I don't know how we misunderstood the requirements.

[flaki]

To be perfectly honest I love the idea of having talk/speaker info overlaid either all throughout the talk, or periodically, but the amount of complexity that introduces (both for the team and speakers) just doesn't make it feasible (and especially so on such truncated time frames).

That's just an aside, and no worries! Thanks!

[RafaelaWetzel]

@ergishkelzeni I would like to ask for another update on the artist flyer: Can you add a third category below called "BARD" and add the artist "ʟʟoɢiq"?

[RafaelaWetzel]

& exchange the artist name "Diego Suarez" by "&& !ME"

"LINA LAB && !ME"

[ergishkelzeni]

@RafaelaWetzel here's the new poster in two versions. I was not sure if keeping "ʟʟoɢiq" with this letter styling was a good idea for the poster design because we have used uppercase only. So I am adding here both versions.

[RafaelaWetzel]

Thanks a ton! 💜

[ergishkelzeni]

@flaki I worked with the static design for the intros, based on your requirements/comments.

Figma link here.

Let me know if you have any other comments. If this is the direction we are going, please give me the list of the speakers, topics, and colors that we are using for each one based on the location, so I can make these images ready for tomorrow.

[ergishkelzeni]

Also, the Sticker folder updated here.

[ergishkelzeni]

@flaki The static images for all the talks (21) are ready to be exported from Figma here.

[flaki]

@ergish oh sorry, too many things! Yes these are perfect, please export them as transparent PNG-s and send us a link, Jan-Erik will import them into the streaming system. @badboy

Another (hopefully last thing) for tomorrow: could you create a full-size background that goes well with these images?

I was thinking of leaving these on for a minute or two before the live stream starts (note: this happens before every talk!), and it would be great to have a backdrop while the studio is not live. I would imagine to put a countdown on the background or some text so it doesn't need to be super busy (it can also be one or two background variations that go well with all three colors, no need to have separate backgrounds if that's aesthetically feasible).

I would imagine we could use them also in the streaming experience for the backrounds of in-break announcements. I hacked together an image for this for now from the Matrix backgrounds, you can see it on the conference experience page:

https://watch.rustfest.global/

[ergishkelzeni]

@flaki @badboy

The PNGs should appear shortly in this folder:

About the image in the background, I will figure it out tomorrow.

[flaki]

One more thing we are seeking feedback on.

Embark will be allowed to temporarily "brand" the streaming page to their style for some of the talks/breaks.

Their designer has put together a package for watch.rustfest.global:

link to assets

The naive version looks a bit too green: (note the footer "buttons" will be updated to match the proposed design, I just haven't gotten around to it)

I tried a quick shift for a more purplish hue: Which looks much better.

If you have any feedback or comments please share, @arirawr can help us with getting them consulted and I'll implement them. :)

[elioqoshi]

@flaki ugh sorry, I prepared a reply here and it seems that I forgot to send it...

It's probably too late now to change anything, but your proposed layout works well I'd say and you should go for it if embark liked it as well

[flaki]

@ergish from my earlier comment:

So basically this is what I am looking for: a modular way to render icons onto SVG that would allow us this a low-effort way to add great and relevant graphics onto the social media badges.

I applied your proposed framework and icons in this social image for one of our website pages:

Please let me know what you think. I intend to generalize this method of social image artwork generation for our usecase and make our generator be able to spit out the desired icon based on a few preset parameters, this will be especially useful for the blog rebrand that is upcoming now that the conference is over and we have time for making it happen. /cc @elioqoshi if there is still work needed there on the wireframes side please let me know, otherwise if you could get them implemented in the new branding that would be great.

The plan is to take the existing content (https://blog.rustfest.eu/) and re-host it under blog.rustfest.global, with rustfest.eu redirecting to the new URL.

[ergishkelzeni]

Hi @flaki ,

I like how it looks! I didn't try any gradients for the icons because it is not part of the visual identity we set for this RustFest edition, but this looks great and the icon here gets a lot of attention in this style.