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.

[elioqoshi]

As discussed with @flaki we agreed on taking the design and UI work on with a few changes in timing, resulting in completing all deliverables by the 2nd part of October. How the timeline would look like is along these lines:

Sep 18 - Sep 25: First UI Wireframes ready for the web pages. Revisions and feedback cycle following.
Sep 25 - Oct 2: First logo and brand directions, including color and typography. Feedback cycle afterwards.
Oct 9 - Oct 16: Final branding decisions taken. Branding applied on the UI mockups and handed over to developers for implementing the CSS changes.
Oct 16-Oct 23: Deliverables with new branding are produced (stickers, social media templates, video graphics etc)

The people involved will be @ergishkelzeni leading branding and me leading UI updates for the website.

We will be working on Figma to create the new designs and everyone will be able to give comments in real-time and inspect progress there.

What we might still need is a sitemap of all these pages to understand the information hierarchy. It's enough to post a comment here already.

Let me know if that makes sense!

[elioqoshi]

Folks, we started creating wireframes for the pages on Figma:
https://www.figma.com/file/H0VQQktBBtevbCEJpD7emC/RustFest-Global-2020?node-id=1%3A964

@flaki and me went a bit back and forth on some specs. I will continue creating the necessary layouts with the briefing from this issue here, but you can feel free to comment on Figma at any time regarding layout and information flow:
https://www.figma.com/file/H0VQQktBBtevbCEJpD7emC/RustFest-Global-2020?node-id=1%3A964

Of course please note this is very raw visual design wise and we will polish it later on.

[flaki]

Looking good so far!

I'll write up some more info on:

• The dynamic above-the-fold content (and the versions as it changes throughout the event milestones)
• The content structure / sitemap so we can better allocate UI space for the navigation
• Responsive considerations and collapsing

We also now have an initial deploy of the frontend framework, especially relevant for the localization-related considerations. I'll be moving content over from our previous events and writing more for the new site over the coming days which should also help with distilling the final contentmap.

[badboy]

Folks, we started creating wireframes for the pages on Figma:
figma.com/file/H0VQQktBBtevbCEJpD7emC/RustFest-Global-2020?node-id=1%3A964

I am so excited for this. I already like the direction this is going.

[flaki]

Navigation:

Primary thing in the top navigation will be the homepage (accessed by the logo) and the "Information" item. The information page is a separate landing page that groups all information on the conference into sections and makes them accessible at all times.
This is important for persisting pages and access to them. The Barcelona policies page is a good example of this (although I want better sectioning/separation of topics in the new site).

I imagine, that similar to the main page, the top navigation will be changing constantly (currently only has a Call for Proposals link). Later as the event progresses Call for Proposals is replaced by Tickets, later joined by Schedule. Frankly, as this is what I want for the homepage (over the fold) to do itself I can imagine that the top nav will only contain a single "Information" item to reduce redundancy. This would make collapsing the navigation into mobile sizes trivial too.

There will be a bottom navigation, the links of which are going to be static. I imagine primarily it will contain a Code of Conduct and Imprint links. The Barcelona page is an example of this (a bad example, in fact, as it's overcrowded).

Most of these pages are content pages generated from markdown, so they only require basic typography as outlined in the spec above. As mentioned the content pages need to be able to be grouped and listed together in the information page, but there is no navigation for cross linking (the user clicks on an info page, reads, goes back to the previous page and selects another page).

The only navigation we want on these content pages is the language selection section. All content pages, individually, can have a translation in any number of languages. The CFP page is available in a total of 6 languages. Each version of the article displays the available languages/versions minus the currently shown one. See the linked page for an example.

There are two other kinds of pages that require further design work: the "people" pages and the "event" or schedule pages. I'll talk about them separately.

[flaki]

People/team listings:

Historically we had two kinds of "people" listings at RustFest:

1. team listings and
2. speaker/session host listings

The team page and the cfp (program) committee pages are of the first kind, basically contain a listing of organizers and some contacts in the form of icon links to other services.

The second kind of listing (speaker) has appeared almost exclusively besides talk descriptions (and an infinitely reduced version in the schedule).

The difference between these two kinds of people listings is that one (the speaker listing) includes a short bio, while the other doesn't, so conceivably these could be the same component (and in fact in our CMS they are backed by the same data structure).

Furthermore, it is possible that we will "tag" and list our team as grouped by the region (~timezone) they work in (Europe/Africa, APAC, Americas), and we are thinking of folding the program committee into the same page in their own group, instead of a separate page.

[flaki]

Event/schedule listing

Previous events often had 4 separate pages for what we are collapsing into a single listing for RustFest Global:

• a Talks page
• a Workshops page
• a Schedule page
• a Pre/Post-Events page

Here is how this will work at RustFest Global, backed by the same model in our content management system:

No Talks or workshops page, not even for pre-post events listing, "everything is the schedule".

The Events or Schedule page (name TBD) is the only page we have for every session on any day of the event. There will be two large groups of sessions within this listing:

• Events around the main conference event
• Talks at the day of the main conference event

"Talks at the day of the main conference event" refers to the three blocks of conference talks that are live streamed in the three timezones the event takes place in. These blocks are like "days" in traditional events, they group several sessions and breaks. Important: there are no concurrent events (e.g. parallel tracks) at RustFest Global. This applies to all blocks, as the blocks themselves might overlap in timing (e.g. two workshops), in these cases these blocks are just listed sequentially one after the other.

"Events around the main conference event" all have their own "blocks" and may include one or more event before or after the main conference event. These can be pre-conference meetups (several are planned leading up to the main event), or workshops and similar collaborative events.

As for what information is listed in the event page, the Barcelona schedule is instructive:

• Session start time (auto-adjusted, see below) and session length
• Session name
• One or more "hosts" (presenters, panelists, etc.) - selected from the "people" taxonomy, see above
• Tags

Sessions may or may not link to their own session description page. Talks, workshops and other similar sessions will all have these for SEO/social media/etc. reasons and to include important session information (session description is a content page, hosts show up in full inc. bio & contact links). Sessions that do not link to their unique pages can be various "filler" schedule items like breaks and such with their own label.

Sessions may have zero or more tags: we currently have beginner/intermediate/advanced classification planned for at least the main conference sessions. We haven't planned filtering or highlighting features around these tags but are generally open to suggestions as implementing this as a "stretch goal".

This event/schedule page will automatically:

• Scroll, using anchors & JavaScript, to the section of the schedule which is active given the current date & time
• Adjust all displayed dates and times (again, using JavaScript) to the timezone of the user who is browsing the page

As a stretch goal we have plans to allow ticket holders to ⭐ sessions to receive reminders about them, but this may or may not happen given if we have enough time for implementing the feature or not.

[rudolfburgaj]

Hello everyone, hope you are doing great!
So we made quite some progress on the wireframes. I have been working on this, and hopefully, I got it right from the briefing... The one page that concerns me is the Events Page. It would be quite helpful if you could add some comments directly on Figma. Some feedback would help at this stage. Thank you!

Figma link: https://www.figma.com/file/H0VQQktBBtevbCEJpD7emC/Website

[flaki]

Thanks @rudolfburgaj! I've sent it to the team to discuss, I had a quick look and loving these so far, will drop some comments on the Figma file tomorrow!

[flaki]

@rudolfburgaj I'll post the description of the Events page here so it's preserved better and not lost on the comments section of Figma:

[flaki]

The structure of the Events page:

• 1 or more blocks of Events;
• grouping together 1 or more Sessions
• For pre-conference events these will likely be only 1-2 sessions, for the main conference event (which itself is split across 3 continental blocks of sessions) this will be a list of several sessions.
• See above in this issue for more details.

The topmost & most important thing on the Events page is the "Current or upcoming event" block -- showcasing the next upcoming event or the upcoming session of a currently live event.

All previous sessions will be visually collapsed into a button above the upcoming event saying "show previous events" or similar. The one edge case here is obviously when there are no such events, in this case the the button is hidden and all events and sessions show on the page, with the first one highlighted as "upcoming".

All events and sessions that are still in the future are always visible as usual.

[flaki]

I also shared a bunch more comments inline in Figma, let me know if you want me to elaborate on anything else! So far this is looking great!

We are still working on our CMS bits, but by next week we should have some of these contents (e.g. team members, speakers, sessions) on the website and will be able to better elaborate on the information models once we have finalized the layout of the CMS data.

[rudolfburgaj]

Thank you @flaki for the feedback. I did another iteration underneath the EVENTS page. Please see and leave some comments on the specific places where it needs changes or something. Thank you!

[flaki]

@rudolfburgaj v2 seems to be going into the wrong direction :(

I will try to outline the events page structure again below, apologies if I was imprecise above!

Events page layout

• Event page
  • Event 1 (first "block")
    • Session 1_1 (a "thing" within the first block)
    • Session 1_2 (another "thing")
  • Event 2 (second "block")
    • Session 2_1 (a "thing", within the second block this time)
    • Break (things within blocks can be special, like breaks and other programming)
    • Session 2_2 (another thing)
    • Session 2_3 (...)

Events

Also called "blocks"

These wrap several sessions of consecutive programming. The closest thing to them in a more traditional "in-person conference" context is "a day" of an event (or even more precisely a track within a day). In our case it doesn't make sense to separate them by "day" because we are a global conference, and a "day" is relative depending on where one is tuning in from. Thus, these blocks are separated by the name of the block. Pre-events or conference blocks are such "blocks" as they contain closely related, consecutive sessions. The main event's three "blocks" are separated because they are separated by a large time gap (several hours, with no programming) and are organized/managed by different teams.

Sessions

Talks, panel discussions, workshops or other filler programming such as breaks and breakout sessions

Blocks consist of several hours of back-to-back programming: talks, panel discussions etc, occasionally separated by non-content programming such as breaks, musical performances, chat hangouts etc.

Example

Here is an outline of a event page with one pre-event and 2 main conference blocks (we expect 4+ pre-events, 3 main conference blocks and potentially even some after-conference events for the actual conference).

• RustFest Tokyo Community meetup
  2020. November 3., Tuesday
  • 18:00-18:30 Chat with the RustFest organizers
  • 18:30-19:00 Jin Takada - CJK in Rust (in Japanese, no subtitles)
  • 19:00-19:00 Musical break with DJ Poke-man
  • 19:10-19:30 Break: hang out and chat with attendees in GatherTown!
  • 19:30-20:00 Joe Turner - Rust FFI secrets (in English, no subtitles)
  • 20:00- Wrap-up
• ..{more pre-events}..
• RustFest Global Conference Block 1 - APAC
  2020. November 7., Saturday
  • 10:00-10:20 Opening, Introducing the RustFest APAC Team
  • 10:20-11:00 HIGHLIGHT! Steve Klabnik - Everything You Need to Know about Bottom Types Advanced!
  • 11:00-11:20 Break
  • 11:20-11:50 Esteban Kuber - String Theory for Baby Rustaceans Beginner!
  • 12:00-13:00 Lunch break, Audiovisual experience by DJ Poke-man & Swifty Crab
  • 13:00-13:30 ..{more talks, sessions, etc}..
  • 14:15-14:45 Panel discussion: Automotive Rust with/ Foo Bar, Jin Yang, Joe Jameson. Moderating: Kim Slabnik
  • 14:45- Wrapup, closing the RustFest Global APAC conference block
• ..{more conference blocks}..
• RustFest Global Conference Block 3 - LATAM
  2020. November 7., Saturday
  • 23:00-23:20 Opening, Introducing the RustFest LATAM Team
  • 23:20-00:00 HIGHLIGHT! Florian Gilcher - DevRel Is Flailing: Common Pities... Beginner!
  • +1 00:00-00:20 Break, audio & visuals by Vanti Solanova & the Kandinsky Experience
  • +1 00:20-00:50 Lan-Erik Redis Jr. - How to Glean the Most of Your Compiler Output? Intermediate!
  • ..{more sessions}..
  • +1 04:45- Wrapup, closing the RustFest Global APAC conference block (THE END!)

Note: highight! talks are basically longer, featured talks ("keynotes"), often by invited speakers, but can show up anywhere in the schedule.

Note: because of time zones, some sessions may slide over to the following day (past midnight), the +1 marks these in the above example.

Note: for simplicity I only noted one speaker for the talks but in the wireframe we probably want to separate the session title and the presenter(s) as there could be multiple presenters, even for talks. Same goes for panel discussions. The speakers should show up in all of these, but as noted in Figma, there should be a compact display of speakers here in the schedule and a more expanded one with all details on the session's own page.

Highlights & collapsing blocks and sessions

Events are always listed sequentially (chronologically), with past events automatically hidden. Thus, the Events page will always show the currently running or next upcoming event and session on the top of the page. Users can click a "show previous events" link above the first session to show all past events (when there are no past events this button is hidden).

Because within events we might need to hide past sessions as time goes by (but we always want to display the block header as that contains the name of the block and the date), we might want to have another button ("show all previous sessions in currently running event" or similar) to do that. Alternatively we could just not hide them but scroll these out of view? In this case discovery of past events become an issue. I'm open to ideas how to solve this well.

I could imagine that instead of hiding content we just scroll to the correct part of the page, or just highlight the currently running session separately on top of the page and allow the user to jump to it in the sequential schedule below it.

All future sessions are listed normally in all blocks, so the user just needs to scroll down to see them. When the user clicks the "show previous events" link they navigate to the "Full" schedule view. In this nothing is hidden and they are able to scroll through the entire scheduling (all events (blocks) with all sessions) in the same way as it would show up before any events have taken place.

Mockup

Below is a mockup to further explain the above relationships:

[ergish]

Hi everyone,

It's nice to be part of another RustFest helping with the design! @flaki thanks for the detailed brief you have provided.

@elioqoshi and I have been working on two visual identity directions for RustFest Global 2020. The proposals are presented using interactive Figma prototypes.

Proposal 1: https://www.figma.com/proto/AASBr1VVJKCQE8vjL2iRB6/RustFest-Global-2020-Branding?node-id=206%3A263&scaling=contain

Proposal 2: https://www.figma.com/proto/AASBr1VVJKCQE8vjL2iRB6/RustFest-Global-2020-Branding?node-id=210%3A898&scaling=contain

The proposals have a lot of differences regarding the style, but they both are in the playful side of the spectrum, also simple and approachable.

Please, feel free to share any feedback!