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 :star: 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)

[flaki]

Disclaimer: I have shared the two proposed designs on our internal channels under the "Cyber Neon RustFest" and "RustFest Nintendo Blues" monikers to make it easier to refer to the individual proposals, so people might refer to them under this names (or variations) in the feedback.

Collected internal feedback from the RustFest Zulip

The neon design has received the most positive feedback:

Prefer the dark neon design. :heart:

+1 to the Cyber Neon design. :sparkling_heart: Lovely colours.

+1 I prefer Cyber Neon :heart:

+1 neon :ok:

There were few whe appreciated the blue pastel design too, though:

Those are both awesome! I personally love the Cyber vibe although the compositional Figma screen for the Nintendo blues version is really cool as well <3

Love the color of Dark Neon though, the shadow of Nintendo Blues look more adorable to me :P
So, +1 for Nintendo Blues here :raising_hand:‍

Many have shared their thoughts on the updated logo/logotype as well. Generally the A column and 2A/2B got the most feedback.

I like 1A best, but 2A is also fine. I think the A row with frames only looks cooler than the B row circles with filled-in colors. The 3 row is too much IMO.

Logos in B column are too vivid for me to see it. My best is 2A. Circle border implies the unity of global Rust community. 1A seems a sort of loading gif to me.

The animated logo concept has especially bolstered 2B's approval ratings. :)

hmm...it's difficult to choose one from them, but first I liked 2A, but...after watching a logo on figma, I'm fascinated with 2B. Anyway, I'm attracted by any style of white solid border circle that reminds me of a gear (as an iconic of Rust).

I prefere 2A. If you want to add animation, 2B might be a better choice.

I think it's safe to say that 2A/2B has the most support. Given the positive feedback for 2B and the later conversation with regard to the landing page design it seem to be clear that the outline designs (whether for logo or logotype) are not suitable for small sizes but might be worth exploring keeping both designs, if only for something like sticker assets or stream backdrops where representing them in sufficiently large sizes is possible.

---

Based on the incoming feedback we have chosen to continue with the "Cyber Neon" design, that is, the first of the two brand directions shared by @ergish & @elioqoshi.

Elio has already went ahead to prepare the skinned website wireframes so we can start applying the styles onto the website and be able to release the new design alongside the planned announcements for next week.

Thanks everyone for contributing and sharing your feedback, please be sure to share any further feedback in this GitHub issue.

[ergishkelzeni]

@flaki Thank you for the organized feedback! I'm happy to proceed with the design based on your decisions. Personally, I was hoping for that.

Regarding the Artworks & Print, I wanted to know, is there's a list of needed deliverables so I can proceed while the website is getting built.

Also, I will be designing the stickers. Please let me know if there are any guidelines about the size or any specific information.

An idea I wanted to share with you, would be using Holographic Stickers for this edition of RustFest. It would be a detail that would help in the persistence of the style and visual identity.

[RafaelaWetzel]

Love the holographic sticker idea. @ergishkelzeni

[flaki]

Hey @ergish!

Regarding stickers, nothing have changed since Italy so we are looking for logo or logo-derived stickers and potentially other stickers from the artwork created for the conf branding. We are aiming for small (2inch/5cm diameter stickers) as always.

A note on holographic sticker proposal The idea sounds great, and I'd love to have this but unfortunately the only provider I know of doing holographic stickers is StickerMule. We don't work with StickerMule for reasons that are beyond the scope of this work, but if we can find another manufacturer we are open to producing holographic stickers. For this reason, the sticker designs produced (or most of the sticker designs, at least) should work without the holographic requirement.

Regarding Artwork we don't really need print artwork but need a lot of digital stuff, primarily in 1920x1080 (or larger, for retina screens) resolution. Here are a few things we are looking for:

• Background for the login screen of the conference chat at rustch.at
• Stream background for our StreamYard conference studio.
• Artwork and backgrounds for the Stream experience of the conference website
• Artwork and backdrops suitable for inclusion in a short (aiming at 45 seconds) "Conference Intro" animation
• Artwork and backdrops suitable for inclusion in a the "Speaker Intro" animation (~15s)

For the intro animations we plan to work with another designer, I'll cc Elio on our conversation with them and I'll have them join us here once they are onboard.

[flaki]

Oh something I completely forgot to mention is the RustFest Twitter.

I would like to update the twitter header image and profile picture on the RustFest account for the website launch (this coming Monday). If it can't be done by then, no worries, I can whip something up in the interim while you work on these two.

Still, related to Twitter, but relevant for the blog. We won't be able to skin the blog to the new design due to shortness of time before the conference but it would be great to have the "share images" show up skinned to the current brand, since these are baked into the post they are released with.

You can see how they show up on the pinned post, the images are simple 2:1 ratio images with a slight padding (Twitter sometimes cuts off the edges of these images on some platforms 🤷). The important content is a title+some flowing-text short description, an image (by default this is simply the RustFest logo) and a "footer" that mentions some details about the conference like the name & date of the event:

We also use these images for the main website, they are great for engagement. We used to generate them from a "template" using this tool. Here's how the Barcelona keynote looked when shared on Twitter:

Here is the source image that is set in the page metadata. This is a really great way to drive engagement as the image is not posted as part of the tweet, but retrieved using the page metadata by Twitter for generating this "Twitter Card", the most notable difference being that the image itself is clickable and leads to the website (instead of opening the image in a larger view).

So these "templates" would be another useful thing to include in the digital design asset bundle @ergish !

[ergishkelzeni]

Thank you @flaki for the help provided. I did design some variations for the Twitter images. There are also some adaptations of the blog posts templates in the new identity.

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

Regarding Artwork we don't really need print artwork but need a lot of digital stuff, primarily in 1920x1080 (or larger, for retina screens) resolution. Here are a few things we are looking for:

• Background for the login screen of the conference chat at rustch.at
• Stream background for our StreamYard conference studio.
• Artwork and backgrounds for the Stream experience of the conference website
• Artwork and backdrops suitable for inclusion in a short (aiming at 45 seconds) "Conference Intro" animation
• Artwork and backdrops suitable for inclusion in a the "Speaker Intro" animation (~15s)

So regarding the artworks, it would be helpful if you could provide some text/content/previous material so I can design the background based on the materials that will take place in the image.

Also, Ferris has the glasses on.

[badboy]

• The login screen background can probably be a variant of "Proposal 1.3" (under "Brand Updated")
• for StreamYard you'll find the 5 screen layouts we can have in our stream in the details below. Here we need a background (1920x1080px) that's not distracting, especially for when the speaker and their slides are visible. Probably a reduced version of that "Proposal 1.3"? We're also able to add an overlay (you can see the small white logo on the top right). Here we might just use the logo and properly align it on the top right.

2 people visible, full webcam width:  2 people visible, zoomed in  1 person visible, slide deck visible  2 people visible, slide deck visible  1 person visible, focused, with smaller slide deck on the right 

[badboy]

3 more streamyard screenshots, showing a banner (in the small and big variant) and a ticker message on the bottom (it scrolls through). The color can be freely chosen by us ("brand color"). We can't change the shape of the banner though.

  

[badboy]

I peaked at the new background images for the stream and the chat. These work really well, thank you!

[badboy]

Are there already sticker designs? (I'm getting a bit excited right now with all this perfectly matching branding)

[ergishkelzeni]

@badboy Great! Yeah, we are excited too about the outcome so far!

So regarding the backgrounds, let me know if you need anything else.

About the artworks of the animations, it would be better I think to discuss it with the person in charge of the animations. The composition of the elements, in this case, will be based on the animation content.

Also, sticker designs are ready. PNG and SVG files here: https://cloud.ura.design/s/eZzyaf5HggPFtAp

[flaki]

Thank you @flaki for the help provided. I did design some variations for the Twitter images. There are also some adaptations of the blog posts templates in the new identity.

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

Thank you @ergish these look great! these are now deployed on both our latest blog posts and our speaker pages! The speaker pages might be particularly interesting here as, similarly to previous years we have automated this process, although, in contrast to previous years this process of generating social images is now completely automated.

You can see all social images rendered as SVG on this page. If you inspect the page you will see these are proper SVG images, generated using a template I put together based on the Figma designs you have posted. There were some hurdles as Figma doesn't really generate the cleanest SVG output so this process took a while but now the images work quite reliably. You can click "Generate" to get the image sent off to our backend service which returns a rendered PNG version of the original SVG, like this:

This is exactly what happens, automatically, when we publish website updates and the social media images are automatically generated for the talk page in question using details coming from our content management system.

Now this works for talk pages, but not for others. The reason being, of course, that we don't have relevant artwork for the rest of the pages (we could just keep using the logo like we do for the main/schedule pages but that will get boring too soon), and we can't just keep having you draw custom artwork for every blog post and website page all the time (I wish we could afford that haha!), but maybe we could make this modular?

My idea was to take something like Font Awesome or a similar library, and come up with a fun way to style the icons to be included in the generated social image. This means that we could pick any of the icon library's icon by their name when publishing a new page on the website or blog and a matching social media image with the page title, details and hand-picked icon would be rendered for social media image.

Now I would imagine we can just simply place the icon inside the wheel, or without the wheel just on the left hand side, but having it a single color would be a bit boring so I was thinking something more creative, like masking a background color gradient with (some of?) the main brand colors, or even coloring the paths and parts of the image procedurally (since we are generating SVG we can alter the icon with the full power of SVG at our disposal).

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.

Would this be something you could give a go/experiment with?

Also, Ferris has the glasses on.

Excellent, thank you! this change is now live on rustfest.global!

[ergishkelzeni]

Hi @flaki , about the automated process of generating images, that is good news, and I'm glad I could help!

I can experiment and work on creating some alternate styles for the other posts, finding a set of icons maybe, and personalizing them. Also, I can provide some templates with different backgrounds. I'll check it out and see what I can do.

The new Ferris looks great on the webpage. Speaking of the webpage I have been working on a simplified version of the spinning globe on the web. The earth map is simplified, also the colored shapes of the logo are in their short form just like the graphics provided for social media. The animated SVGs are exported in Javascript.

SVG Animation.zip

Please, let me know if this works for you guys!

[flaki]

@ergish thanks for the logo animation update! I have it on my list to replace it as part of the next upcoming bugfixes.

Stickers!

Jan-Erik has received some stickers from Diginate! They are far from perfect but we can work on that, he will post more high-res pictures later but here's what we got and some notes on how to improve.

• In general, there seems to be a colorspace issue with the conversion to CMYK, as most designs ended up too dark on print (this is of course beyond the fact that the above photo is not necessary correct white-balance-wise), can you help us resolving this with Diginate? Jan-Erik will also include one of you on the future orders to review the proofs so this doesn't happen again. :)
• The holographic stickers are a bit underwhelming, maybe it would make sense to make the background semi-transparent on these so the "holo" part shines through?
• On these same stickers I think having the filled (not outlined) RustFest logotype might be a better choice? Would make the text less "busy".
• I'd like to have a die cut version of the logo with a dark outline/border (instead of circle ones with white border). If Diginate offers this, I'd prefer to have these as vinyl (transparent) stickers!

@badboy could you take a picture of the stickers from a few angles with a white sheet behind them (for easier adjusting for white balance) and share them please?

[RafaelaWetzel]

Hey @ergish & @elioqoshi ! Could you create a flyer / poster with our artist line up? https://hackmd.io/qXOcgVPTSEeQej5YyFDRsQ

We would like to spread this flyer digitally. One of our artists asked for it and mentioned "[...] a digital flyer for RustFest which would contain a list of all of the performing artists, speakers, entertainment, etc. Here is an example. The example is only a music festival, but the idea is that it would be in RustFest branding and be an easy way for contributors to promote the event on social media."

I reckon mentioning the artists only would be sufficient so the flyer won't be overloaded, taking into account the amount of speakers.

[badboy]

Two notes on the above: the artist names as written, so including the brackets ([...]) for that one name. We would also use that as a social image, but a larger version could be nice as well. see comment below

[RafaelaWetzel]

Thanks @badboy, forgot about this detail.

[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	after the break.
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!