REDBULL SECRET GIG X ROBYN DESIGN – The strange and wonderful path that took us to the final look and feel

So we made a game for Robyn and Red Bull Music. This is the third post in a series of posts about this. Here our Designer Viktor talks about adding artwork to the app.

Post nr 1: Making the server side
Post nr 2: The making of
Post nr 3: This post…

 

Step 1: Interpretation of a Mood Board

So, first things first, we did not have much to go on when the design process started. Or let me rephrase that, we had A LOT to go on, but it was a 30 page long mood board for the stage design of Robyns tour, which was also put together by a whole range of different people. I took some parts of it (the left half of the image below, which turned out to be the wrong half) that felt like they would merge together quite well and got to work on creating a look that could support the simple UI elements and the overall secretive feeling we wanted the app to convey.

(not the actual moodboard)

 

Step 2: Designing the first look of the app

This is the first game board version, this is just a personal process but I like the idea of making the first draft of something as much as it can be and then scale down/remove stuff rather than the opposite way of adding stuff as you go along. The trade board was originally supposed to act like a radar so you could turn your phone and easily find people to swap with. Turns out (golfclap) almost no phones have the ability to do this in a good way, their favorite thing in the world is to to mindlessly spin around and point out west as north and so on. In retrospect this would neither have been needed since the players where awesome at organizing swap-meets!


A very early version of the achievement tab, it is always folded down over the current view so I wanted to experiment with a cut-out effect since video would be playing in the background.

 

Step 3: Design technology

I don’t know if this a broadly used terminology but in my experience it’s well worth spending a couple of hours on. Let me explain: one big challenge in this project was that we needed to test a lot of technical stuff as well as performance at the same time. What this means is that we had to have graphics from the get go that would change as little as possible. ‘Change as little as possible’ meant that we decided to render the app in 3 layers (simplified) one big animated background, one layer for ui elements, such as buttons, positions, well almost everything and last but not least, achievements as the third layer.
We also decided that we would use transparent pngs for all elements except text and backgrounds (video and or animated gifs) and that the transparent bounding boxes of the pngs would act as margins for layout purposes. This enabled us to update the entire look of the app without rewriting code each time. I set up all the assets as linked PSDs and arranged them in a couple of master files, one for each view in the app. So when feedback arrived I did not even had to work in any of the master files, I could update each asset on an individual basis and only really open master files for when the overall design was to be reviewed. I could also just replace files and they would almost automatically arrive in the app and update the whole look.

This might sound as small details but it enabled me to detach myself from developer deadlines and it made sure that the developers would not have to fear design feedback or changes, and we knew that we would have to make a lot of versions of the graphics since Robyn was working on artwork for both the first single, the album and the set design at the same time as we where building the app. All in all it made design a less stressful experience for all of us involved.

 

Step 4: Updated moodboard from Robyn

Robyns team got closer and closer to finished album artwork and the stage design so we finally had something to align the app against. So the first step was to tone down the crazy colors and achieve a more subtle feeling.

First draft of the game board was too much full on Miami 80s and the achievement notification REALLY went full on 80s! The third view of the game board is where we locked almost all elements and more or less only played with the colors up to the final version.

 

Step 5: Final colors for the album and a custom made Font

We got the final color scheme in the form of  5, 2 part color combinations and I thought: “wow those are some bold color combinations for an app, let’s do this, 100% throttle” and the result was, well let’s say it looked bold…

Game board & Achievements in extreme colors.

 

Step 6: The symbols

The symbols had a rather organic evolution, they started out in an asian calligraphy world, loosely tied to the name of Robyns label, Konichiwa, they however never felt right. They then went into something best described as computer OS icons, then to retro game, then to impossible stone shapes. When they where shown to Robyn she came up with a list of artifacts she felt would represent her and the album. In that moment they also changed name from pieces to artifacts. So in order of birth, here they are:

Evolution of the trade & unlock symbols.

First selection of artifacts to the final codes!

 

Step 7: Killing your darlings because of performance 🙁

Initially each and every single view of the app was supposed to have an animated background. We wanted to have this because the UI itself has little or no animation or visual feedback (you click a button on the home screen and go to another screen) and it would be the most effective way to bring the app to life and give it a sense of flow and dynamic. We hung on to the idea a long time but in the end it was too much of a risk performance wise to have anything interfere with the swap view. If the experience of swapping was slow the whole core and integrity of the app would be in jeopardy and we really, really wanted people to share artifacts with each other!

 

Step 8: The final product!

Step 9: Be really happy that you got to be a part of this!

Thank you Red Bull and Robyn for making this really fun and rewarding, I’ll repeat what the previous post about this project concluded: If you ever get the chance to make something for Robyn’s fans, take it.

Hur man gör en användbar flamingo-badring till Roblox


Sommarpyssel för dig och din unge.

Det låter kanske kul men det är ett litet helvete. Fast jo, också kul.

Roblox är en spelplattform med en egen utvecklingsmiljö för publicering av egna spel. Det har funnits sedan 2006 men på senaste tiden har det ökat snabbt i popularitet och är enormt stort i den yngre målgruppen med 65 miljoner aktiva spelare varje månad.

Todo:

  1. Modellera flamingon och exportera den som en .fbx-fil.
  2. Gör texturen och spara den i formatet png.
  3. Importera flamingo.fbx till Roblox Studio.
  4. Ladda upp texturen på roblox.com som en decal och para ihop den med modellen.
  5. Scripta och tjafsa runt med positioner och fysikvärden i Roblox Studio.
  6. ✨NJUT RUNT I DIN FLAMINGO! ✨

Till dom första två stegen använder jag Blender och lite Photoshop men det går ju bra med valfri 3D-programvara och eventuell bildbehandlingsprogram.

3D-modellering i Blender
👆 Här gör jag själva 3D-modellen i Blender.

Roblox har en gräns på 5000 polygoner per mesh. Detta är ju en rätt simpel form men håll modellen så enkel som möjligt.
Gör man modellen 3 enheter stor i Blender och sätter scale till 0.01 när man exporterar som fbx så blir det en rimlig storlek när man tar in den i Roblox Studio.


👆 Texturen skissade jag upp med Texture Paint i Blender och snyggade till i Photoshop.

Det här kan man ju göra på lite olika sätt. Jag valde att snitta upp min pippi på det här viset. Hur man markerar sömmar och ritar textur i Blender tycker jag den här videon förklarar bra.

Spara ut den som en png och ladda upp den under Create > Decals på Roblox.com. Då får du ett ID-nummer i urlen som du behöver klistra in som TextureId i Roblox Studio. Den måste inte vara modererad av Roblox för att använda i Studio. Dom är dock rätt snabba på att godkänna uppladdat material.

Att få in detta i Roblox Studio:

  • Öppna  Roblox Studio (ladda ner här).
  • Högerklicka på den gråa plattan på själva stagen och välj Insert Object > Meshpart
  • I properties-panelen – ändra klossens MeshId till din fbx-fil. Nu syns din flamingo!
  • Ändra material till Glass.
  • Kopiera in id-numret från decal-urlen i värdet till TextureId för att klä din mesh.

import to roblox

Om du testar spelet nu (F5 eller playknappen) så kan du inte greppa flamingon. I Roblox behöver man ett skapa ett objekt som heter Handle och placera det där karaktären ska greppa objektet. Man gör de två objekten till children av objektet Tool som finns beskrivet här. Tool är alltså till för redskap eller vapen egentligen. Jag följde den här beskrivningen för att få det att typ funka.

Tweaks
Genom att överdimensionera flamingon, placera handtaget på sniskan så att det ser ut som att man typ sitter på den istället för att hålla i den samt ändra fysikvärdena lyckades jag få den att agera som en användbar badring.

flamingo floatie
👆 YEEHAAW!

Utvärdering

Roblox Studio är en lite frustrerande miljö och det är väldigt mycket testande fram och tillbaka. Men fan alltså, det är roligt och leder till nästan lika många skratt som sammanbrott. 10 av 10.

Hej då.

/Andreas

Typsnitt med flera lager?

Typsnitt med flera lager – layered fonts. Vad hände med det egentligen?  Det var ett par år sedan jag labbade med det sist. Och tekniken har ju funnits i flera år innan det. Det har funkat väldigt tillfredsställande att jobba med det i Glyphs men andra programvaror har fortfarande begränsad support. Glyphs är iofs en programvara för att skapa och editera fonter så kanske inte så konstigt att det funkat där. Men nu känns det som att det börjar bubbla lite kring detta.
Det finns lite olika tekniker för att få det att fungera i en browser. Jag är inte bäst på att förklara det. Men enkelt beskrivet delar man upp lagren till separata fonter och lägger ovanpå varandra. Hur man gör detta utan att kladda ner sin markup finns det flera artiklar om redan. Det finns en del välgjorda typsnitt färdiga att använda men så här gjorde jag mitt eget. Se det mer som inspiration än en tutorial.



👆Nu var jag ute efter en handtextad känsla så jag började med att skriva alla bokstäver med en fet Faber Castell Brush pen och kalkerade av dom i Illustrator. Jag är så van med Illustrator att jag hellre styr upp ankarpunkterna där och kopierar över till Glyphs.

👆Övriga lager, i det här fallet highlights och skugga+outlines designade jag direkt datan genom att utgå från baslagret. Totalt 3 lager alltså.

👆 Här är alla tre lager importerade i Glyphs. Väldigt tillfredsställande när man kan testa sina bokstäver med tangentbordet.

Men ok!

Vad ska man med detta till då. Halvbra fråga. Fel använt skulle ju detta få internet att bli riktigt jävla fult. Men i rätt doser och kombinationer i rätt sammanhang är det fan fint alltså. I det kontextet hoppas jag på att få se mer av detta.

Detta var enkelt beskrivet. Att skapa ett typsnitt med bara ett lager är rätt tidskrävande och sällan försvarbart ekonomiskt för separata projekt. Men ändå. Det finns ju färdiga som sagt och det kanske inte alltid behövs ett helt typsnitt. Jaja.

👇 Den här är ju förresten baserad på en variant av exemplet ovan men med lite andra lager.

Hej då.
/Andreas