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!

[badboy]

Please, feel free to share any feedback!

I can't seem to view those proposals. Both links require a login, and even if logged in with a figma account I don't seem to have permissions to view them.

[ergish]

@badboy apologies. Just updated the links.

[elioqoshi]

Just to clarify: you don't require Figma accounts to view anything (we forgot to update the permissions) but only to comment on Figma, which is optional and we can also just keep the conversation going on here.

[flaki]

Thanks @ergish @elioqoshi !

Overall: Playful is good! Playful is great! Yes please keep it all playful! I really appreciate that you have put effort into the dark/light duality. Both designs manage to reimagine the core logo shape exactly like we asked, A+, especially appreciate the deconstructions of underlying philosophy.
I think I'm personally leaning towards the neon-glowy design but let's see what the rest of the team says! In the meantime I'll share some comments inline.

Overall things that I am missing from these mockups that I think are important:

Globalness

Neither of the proposals really address the representation of "global"-ness and mixing of communities. I understand that it's hard to represent such a nebulous concept visually but I would appreciate if you added some mockups on how you would imagine this to either directions. Really, don't spend much time on polishing them up but some brainstorming style "here are some things this design lends itself to" ideas would go a long way.

3-in-1

Related to above, the logo differentiation across communities/regions/timezones/conference blocks is not addressed in either of the designs. What I'm thinking of is the notion that is mentioned in the intial specification: RustFest Global comes together as a collaboration of three worldwide teams, and this is a prominently featured across all our communication, as well as how the event itself is structured.

I would really appreciate if the design mockups addressed this at least to some extent. Again, like above, I'm not expecting polished proposals, but some mockups incorporating this would also go a long way.

Artwork direction

I understand there is no point in working out the artwork style (especially on such contracted schedule as ours) while there is still two wildly different design directions on the the table, but it feels to me that the neon design lends itself to more flexible and interesting brand direction and artworks than the second design. If you disagree, I'm happy to be proven wrong, but this feeling is at least in part responsible for why I'm actually leaning towards the neon design.

[rudolfburgaj]

Thank you @flaki for the detailed explanation about EVENTS PAGE.
I did a new iteration in a table style. Please see if the information hierarchy is correct. If you think this style is not the way to go, I will make a new version showing the information in a different style.

Link: https://www.figma.com/file/H0VQQktBBtevbCEJpD7emC/Website?node-id=418%3A2

[flaki]

Thank you @rudolfburgaj ! Yes this looks great, I don't think the more tabular design was a bad idea in this case at all. I shared some comments/nitpicks but this direction is great!

[rudolfburgaj]

That's great @flaki, happy to know we are finally in the right direction. I went through the comments you left on Figma, and made another iteration (v.4), where you will find all the changes. You will also find the mobile version showing the way the block collapses.

[RafaelaWetzel]

I'm very fond of the first proposal in dark mode. ❤️

[flaki]

This is looking great @rudolfburgaj ! The mobile view is spot on as well, great work!

Could you help me with cleaning the wireframes up by:

1. floating V4 and the mobile view to the top of the document;
2. discarding or move all the iterations below;
3. create two versions of the Event Page V4 for before-the-event and towards-the-end views (I'll explain further below)

I want to iterate on the above-the-fold content and header, see also below.

Two morphs of the event page

As explained in the comments and in the collapsing & highlights section above, with the passing of time the content of the Event page will change and I want to capture this so we can figure out the UX around providing direct access to the currently running or upcoming element of the schedule.

For this I'd like to ask for two versions of the Events page:

• The first version is largely unchanged, please just remove everything that would refer to sessions being hidden -- think of this as the "vanilla" event page weeks before any of the events have taken place.
• The second version would show the layout of the page once "String Theory for Baby Rustaceans" (the second to last session in the schedule) is currently ongoing. That means everything before it should be collapsed, with all buttons showing and nothing after. This will both show collapsed blocks and collapsed/hidden sessions, every other case is some permutation of this two.

Please also include the mobile versions.

Above the fold content and header

This is how V.4 looks above the fold:

As mentioned before in a comment I want the top navigation to be greatly simplified (cc @elioqoshi ):

• Currently this consists of:
  News | Speakers | Schedule | About | Tickets
• The Speakers link is completely unnecessary and can be removed.
• The first link should be Home, replacing News, as the home page prominently features news and subscription options anyway. This would be redundant with the RustFest logo also linking to the home page but this small redundancy is probably good for discovery.
• The Schedule link is practically pointing to the Events page we have been discussing here all along. I don't feel particularly to renaming this option to Events as it is probably something people would be looking for anyway. This link stays as the second icon.
• Tickets is interesting because in RustFest Global it doesn't really mean what it means in traditional events. It's definitely not as important to expose it in the header. This should be removed.
• The About link should be the more descriptive Information link and should be the last in the navigation. It links to this page on the website which contains links to all information pages.
• So the proposed new layout for the navigation is:
  Home | Schedule (or Events) | Information

This change of course affects all pages.

A note on tickets

We are planning to release "tickets" to the event in two weeks, we are currently working out the details. What is important from a design perspective is "tickets" in the RustFest Global sense means "full access" or "premium access" while the conference and talks can be followed on our conference stream page. This means that, if anything, a "Watch (now)" link might make sense in the navigation but since our Home and Schedule pages will both feature upcoming scheduling prominently this would be probably redundant.

Buying "full access" to the event will be featured on the home page, and on the individual talk pages (in the later case, as a sort of "upsell"), I'm happy to write more information on this next week when we have worked out all the details.

[rudolfburgaj]

Thank you @flaki! I added the new version 4 in place and made the changes. Everything else is cleaned up.

[elioqoshi]

Thanks @ergish @elioqoshi !

Overall: Playful is good! Playful is great! Yes please keep it all playful! I really appreciate that you have put effort into the dark/light duality. Both designs manage to reimagine the core logo shape exactly like we asked, A+, especially appreciate the deconstructions of underlying philosophy.
I think I'm personally leaning towards the neon-glowy design but let's see what the rest of the team says! In the meantime I'll share some comments inline.

Thanks! This is our preferred direction as well. That was led by @ergish while the 2nd proposal was led by me. Honestly, I think the 2nd proposal has a lot of potential, however it's very heavy on the graphical side and needs lots of effort and love to get right, which is harder under the current time constraints. The neon approach is more flexible and scalable and is more accessible for people to remix in case that is needed.

One thing to note however is that the dark mode is the true version which should be used though. Light and neon don't go along very well and would be an accessibility nightmare as well. It can be solved but it definitely won't look aesthetically as pleasing as the dark mode. I don't think that's a bad thing necessary when it comes to the event experience.

Overall things that I am missing from these mockups that I think are important:

Globalness

Neither of the proposals really address the representation of "global"-ness and mixing of communities. I understand that it's hard to represent such a nebulous concept visually but I would appreciate if you added some mockups on how you would imagine this to either directions. Really, don't spend much time on polishing them up but some brainstorming style "here are some things this design lends itself to" ideas would go a long way.

3-in-1

Related to above, the logo differentiation across communities/regions/timezones/conference blocks is not addressed in either of the designs. What I'm thinking of is the notion that is mentioned in the intial specification: RustFest Global comes together as a collaboration of three worldwide teams, and this is a prominently featured across all our communication, as well as how the event itself is structured.

I would really appreciate if the design mockups addressed this at least to some extent. Again, like above, I'm not expecting polished proposals, but some mockups incorporating this would also go a long way.

Yeah I get that. Not sure if your comments apply to the logo or the visuals generally though. Regarding the logo I'd hesitate to put too much into it as it would lose meaning over being overly complex. We however experimented with a few different tweaks to make the shape more connected and more recognizable. That includes also softening the wordmark to reflect the softer and friendlier tone of the brand. Please note that these are sketches and @ergish and me planned to do something more thorough soon, though I considered to post some updates so you can also include it in your next team planning call.

I understand that the logo itself won't solve the concerns about globalness and community diversity fully, though we plan to transport more of that via the artwork direction.

Artwork direction

I understand there is no point in working out the artwork style (especially on such contracted schedule as ours) while there is still two wildly different design directions on the the table, but it feels to me that the neon design lends itself to more flexible and interesting brand direction and artworks than the second design. If you disagree, I'm happy to be proven wrong, but this feeling is at least in part responsible for why I'm actually leaning towards the neon design.

I totally agree and I was hoping for this direction to be taken :)

[flaki]

@ergish @elioqoshi so I was messing around with 2B and this is kinda what I meant for "globalness", some ideas in showcasing that we are "truly global". Again not necessarily built into the brand at the deepest level but more... in an easter egg form?

I'd imagine an animation of this sort could be used on the stream, or even on the website/schedule. The "spinning globe" would stop over the Asia-Pacific for our APAC event block, and Europe over Europe, etc. Maybe at the end of the animation the logotype (RustFest Global) is extended with "Asia Pacific" in small type underneath. Or "Live from Tokyo" if we want to be more specific...

Does this make sense?

[elioqoshi]

@flaki That makes sense to include when interactiveness is possible. I'd likely make the map simpler to not oversaturate the logo. Here is a similar animation with FontAwesome using the globe-africa icon:

https://www.figma.com/proto/AASBr1VVJKCQE8vjL2iRB6/RustFest-Global-2020-Branding?node-id=362%3A132&viewport=-70%2C80%2C0.48564112186431885&scaling=min-zoom

(click on the frame to animate it back and forth)

We could create these for all regions and offer them as GIFs and ideally animated SVGs (have to check on the latter though)

[flaki]

I love it! Yes so let's try to keep globalness to things like these while we ensure the core experience is good.

We have discussed the branding and we have given time for feedback until tomorrow EoD, after which I'll share the team's feedback and final decision on direction.

[elioqoshi]

@flaki and co: I did a little bit of over the top experimenting and applied the branding and some animation effects on the landing page. I went a little bit intense here but thought it would be ideal to start from there and dial it down if needed :)

https://www.figma.com/proto/H0VQQktBBtevbCEJpD7emC/Website?node-id=678%3A1725&viewport=210%2C-1126%2C0.17583775520324707&scaling=min-zoom

What I had in mind is some lightweight glow animations on graphical elements, probably less disturbing than in the mockups. On top of that, we can have the logo in the hero section which would animate continuosly from the main logo into a regional logo as a loop, updating the location from Global to the region / continent.

We can discuss details of how the timing and subtlety would be, though I'd appreciate your comments for this approach.

(Needless to say that this will require a little bit of CSS and SVG wizardry from your side probably)

[badboy]

Scratch the social image above. I think a flyer/poster style is enough, we have individual social images for artists already

[ergishkelzeni]

Hi @RafaelaWetzel @badboy

The poster idea is great! I would love to work with that. I would need your help in providing the text that is going to be on the poster, from the header to the end, along with the list of artists you just provided.

[flaki]

RustFest Global Entertainment presents:
7 artists from 5(?) continents have prepared special shows and audiovisual entertainment to keep your brains fresh and attention sharp for when RustFest returns with a new talk
imagery / artwork / etc
ARTIST / NAMES / IN EQUAL / LARGE / FONT / SIZE
Tune in live on November 7-8 worldwide or get an all-access pass to watch anytime after the live show!
www.rustfest.global

---

@ergish I think we can go with the above copy for now and we can tweak the final one once we get it!

I imagine a more print-ish aspect ratio so something like an A5/A4-ish resolution for this! (even though it will be pretty much for digital distribution/social media only)

Let me know if you need anything else!

[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! 💖

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.