Good, yes, we are royal. The Royal Studio is a design vortex. It has deep and strategical approach to the design wonders. The Royal is anxious. Methodic. Scientific. Moves fast and creates value. The Royal has fun, knows not how to be funny and plays OCD like a monkey on metabolic steroids with a passion for reason. Contextual. Playful. Loyal to culture. Royal to business.

☂︎

United in Code

This was the motto for the graphic system of this year's The Lovie Awards. To thrive in a challenging web environment is as relevant to the code as it is to the growing dynamics of society. The Lovies are a celebration of what is groundbreaking in web platforms, embracing the realities of relational structures, evolving technology, thought-provoking social behaviors, ongoing technological advances, social awareness, political movements while still loving gifs and cats.
To have the honor to design this event is to be aware that reality doesn't come single-handed in a multi-dimensional presence. Taking action in London, United in Code is therefore a statement embracing the UE motto to tackle the unified web — a network where ideas thrive and frontiers are made irrelevant.

United, designed and developed with code and generative processes, breaking grounds between software and society, ladies and gentleman: 2016.

BICEP Debut Album LP & CD
BICEP Aura Single LP

One can find the pulse in the rhythm; the deep bass in the chest; experience audio waves as synapses spark the neurons and suddenly find emotions; but how does one translate music to a visual output without being finite or tremendously precise? In the design process, we have set our goal of communicating via ambiguity. Free from the individual and in tune with the audio: the collective brain is as ambiguous and as emotional as it might be as a visual system.

On a quest to find multiple interpretations we've started a collaborative design vortex, invited Lyft, Ana Types Type and Xesta Studio to step right in and to generate analogue graphics as systematic abstractions that would allow innumerous digital compositions to frame either specific rhythms — the singles — micro/macro spaces — the album, and live footage — the motion campaign.

How does one design feelings? By allowing silence to make music (the AURA label is plain black) and loudness to convey silence (the screen printed side of AURA's doesn't allow the vinyl to play music). We've framed the narrative in the rhythm, in the microscope and the telescope and on disruptive compositions as a continuity of the process of creating electronic music that breaks and grows.

As such, we've designed each moment as part of a system that has the flexibility to fuel content for printed objects as well as motion visuals for 4 singles and 1 debut album.

Objects of memory, the music is materially composed by 1 constant fluorescent acid yellow, a neutral typographical approach, and a plural series of printed outer and inner sleeves as well as screenprints over vinyls, inner and outer

Rain is a series of industrial-set compositions that follow the same rules as the first set of Bicep Bicep singles. A composition of urban tones, neon over flashing lights, the smell of concrete before the light turns green. Rain is a cinematic single that is designed to feel natural to a cityscape overnight, at 3 a.m. appealing to the the senses.

Being the most urban of the campaign, the system is toned down to a two-color system that is characteristic of the whole campaign: black, grayscale and yellow.
A fast-paced and technocratic approach to the composition introduce an honest depiction of the energetic single while keeping the campaign in tone without being repetitive in shape, structure, texture and color.

About Mucho Flow?
Yes. It is a festival built upon the will to make. A thrive to allow a small community to seek for the unknown in a realm where new ideas are rarely brought to life. That's Mucho Flow: a two-day-long festival that bridges the notion of what is the state of the arts in music together with what it is to question what it is acceptable as a trendsetter.

It is the significant other that is beyond: the gap between what it is believed to be set truth; the gap that can be fueled with triggers that ignite emotion.
This brief is met with an acute typographical tone that re-discovers itself in each and every moment where it needs to perform. It is, at first, the responsiveness of the type that ignites flexibility, while thereafter it is the repetition that sets the electronic and intense tone of the whole narrative.

Revolve set the goal to build a strangely visceral festival in an urban area that resides precisely in a big city while in the outskirts of the main cultural capitals of Portugal: Guimarães. Mucho Flow is a playful game of words that don't exist in the Portuguese vocabulary:
Mucho is Spanyish while Flow is anglo-saxonic.

Now, The Royal wasn't asked to do an evolving language, yet it created the rules for a Mucho typeface, a fluid set of layouts and a vivid accumulation of contemporary visual languages to build the grit, the fuel, and the guts to build the architecture for one to enjoy a groundbreaking festival in small village where electro, indie, and hybrid musical languages reach their culprit.

Mucho Flow seeks the gut; the instinct; the reaction and the prolapse. It is an outcry for what it is that is transcendent in an electronic and mindfull overlapse of reason.

Ladies & Gentleman,
Mucho Flow:

To showcase Bruta is a labor of historical awareness and contemporary practice. On one hand, it is a delicate sans-serif grotesk that might appear to be one more modernist Swiss player, on the other, it has a delicate and intriguing character that honors the mid-20th century with its clear nostalgic behavior on the most condensed weights.

How could we honor the century and hit a clear "we-love-this-font-so-much-that-we-could-fall-in-romance" at the same time? — Via History, Fun, Dialogue, and Confrontation. All the display images were designed to be part of a system that, working with the total of 64 different weights, generates a visual scape that tells the tale of the city walls.

From a specific research of graphic objects designed for musical venues between 1962 and 1976, we've designed a set that frames the typeface in the cultural arena while being the center stage for strict editorial principles, playful type compositions, and clear information hierarchies.

To depict such a time frame while consistently showcasing the major details in Bruta is an act of delicate typesetting, nostalgic echoes to compose to, and one beloved chance to study, to design, to play and to listen to Ella Fitzgerald for 2 months.

In such a demanding context that seeks cultural identity while questioning heritage and meaning, to design an identity that longs for space, doubts, tension and research in the art and curation practices is a honor and a privilege.

This is Pláka, and we are deeply happy to achieve form without framing the arts with a finite answer.

+ info
+ info

Scroll down to find out the reason why we Royal. Give us a shout-out to: hello@theroyalstudio.com At the moment we live in but not limited to: Porto, Portugal What we do: Culture, History, Business. We are Proud of: Collaborating with a huge set of bright boiling creatives. Being in love. Drinking music everyday. Being part of this generation. Addicted. We are. Caring about concept, poetry & people. Having a crush on flexible systems. Doing sports. Living fashion.


Event visual identity for the first PLUNC: a newborn Multimedia Arts Festival in Lisbon.
It happens in the water, on a boat in transit, between the two banks of the river Tejo.

Born out of code, process and a strictly utilitarian methodology, designing only the guidelines while we allowing the final result to be wild. As such, there is an infinite amount of posters, renderings and objects focusing on the representation of two elements (circles: the margins, the users and the input—output) and an interface (brackets: rectangles and boats) using cold code and strict reason.

Yes, there is poetry in the bits and data; there is human passion and coherency in the numbers; there is logic and there is fun.

PLUNC is a technological journey between the two banks of a river and a hybrid between communication and geographical space. As an experimental stage, the identity reflects the dialogue between the abstract and the figurative - a symbolic approach that characterizes the experimentalism, the connection, the code and the expressive elements. From a symbolic standpoint, the approach promotes dialogue between the figurative and experimental - the connection and the marginal, the scope, the interface and the user. Based on a visual system where language sets the tone of the communication Plunc is a coded system synthesis and message: a figurative stage on which the message is not restricted to a single illustration but to a graphic lexicon - 11 infinite posters in loop and a responsive system dictate the language. Among the synthesis and the system, just like the bank and the rive rises the creative freedom and the strength of the narration. The water and the reflections. The final reason ing in compositing the symbols is thrown to the background, allowing only the data and rules to define the visual system, looking forward to reach the abstract. The image as a reflection of the concepts and the concepts as the genesis of a lexicon. A code. Plunc.

To design a book cover and to dig deep in Craft. This comission to illustrate the Facebook's Annual Awards 2015 cover is rich in knowledge and loose on fun fun fun!

To work on Craft is a great challenge! On top of depicting creative thinking as a tool and understanding it’s constructive and enriching qualities, we've pushed to have a positive approach with an inspiring move that defines craft above any particular discipline.

In order not to overpower one creative field on top of another and staying away from the difficult task of emphasizing the area of a particular winner - we’ve studied the award winners and thoroughly browsed for a source of refined inspiration built from their work. Fun, Exciting, and Human After All!

Comissioned by Human After All.
Thank you for the bright athmosphere!

To Illustrate is to seek for the intimate and the unexpected: the conquest of an interpretation to make the translation of the literal to a new and inspired vision. In regards to UI and hardware processes the challenge rises higher - we are not talking about the action but essentially about what the user can do after mastering a given technique.

If the message is literal, then we are talking about software, when in fact what we aim is to look for the user's emotions in regards to what it will then create. Anything that is not obvious humanizes the action in an emotional way: if the file is converted - then ill t'll make a trip between programs; If the user draws between multi projects - then he plays ping pong with the interface.

Once you know the topic the conquering of the analogy is as rational as unpredictable:
Bingo! Dig deep in our concepts behind each illustration:

InDesign - How to Design a Logo: Technical and Poetic Storytelling | The logo thought and creation process as an explosion of possibilities | Editing from Glyphs & Opentype | To Build from template | The Library as source | The Cloud as content | Typekit and typographic elements as the main tools | CC color | Glyph usage and Symbol editing | UI elements as tools for thought process Color CC as the main element paired with typography | Creative freedom limitless exploration.

InDesign - How to Design a Newsletter: Technical Storytelling | Emphasis on processual elements and the act of designing | UI and Theme elements bridging realities between the act of design and the element to communicate | Musical elements in wireframe as part of the UI, bridging placeholders and assets | Layout elements | Margins and Layout | Styles (generic — character and paragraph styles) | Multiple pages in a strict connection to multiple styles and the act of scrolling with it’s native cropping | Multiple pages connecting newsletters to the editorial newspaper | Cursor, Typography & placeholders as a technical references.

InDesign - How to a Design Business Card: Poetical Emphasis on process and technique | The Layout | Margins | Structure | Output | Export for Print | Typographic Usage, Metrics and Composition | UI elements as key moments on process and thought process | Multiple Business Cards as infinite possibilities as a reference to Pages Typography as a reference to styles usage and experimentation | Focus on processThe tools of the designer | The pleasure of creating | Ice cream as playful lifestyle and service to depict | Metrics and Layout.

InDesign - How to Design a Letterhead: Technical Storyteller on layout and composition | The usage of preset layouts as a jumpstart to the Design | Multuple grids Layouts and golden sections as a reference to the importance of editorial design and layout setting | Structure | Layout | Margins | Columns | Paragraph Styles and Character Styles in use | Output elements and processual storytellers | Multiple Objects as a reference to multiple pages, Multiple Masters and Alternate Layouts | Placeholder Text and graphic elements as creative narrative keypoints.

Muse - Scroll Effects with Responsive Design: Abstract visual representation of movement | Screens is dissected in 4 composition breaks in relationship to HTML DIV structure | Each break switches the movement showcasing scroll effects in a mixed motion with speed and parallax effects | composition occupies all exhibition space showcasing that scroll effects are universal across screens | The continuum of movements ^Each section depicts diferent motion | 1 motion goes downward | 2 scroll triggers movement left to right | 3 movement is universal overlapping pannels (parallax) | 4 movement flows from left to right, overlapping divs.

Photoshop - Rasterizing a Vector Shape: Poetical material storyteller bridging vector graphics with papercuts — the process of materializing a vector in connection with Rasterization | Direct UI references to vector attributes such as anchor points, curves and path gradients Digital abstraction showcasing pixel behaviour in shape and color | The vector as an ever-changing shape | The Raster as a pixel-detailed dimension | The infinite nature of the vector vs. the finite dimention of the rasterization process Overlap of form to showcase the backend process between vector and raster | Process workflow hint between the vector notion of stroke vs. bitmap brush

Acrobat DC - Comment on a PDF File: Poetic approach to comment and revision actions | Symbolic elements in corporate and balanced composition to allow neutral communication to a broad targetWireframe lines as a reference to the logical thinking and icons as the notations and feedback on the comment action | Workflow athmosphere to allow active composition and as narrative enhancer.The pencil as the action and the pages as the file | Iconic approach to image to empower rigorous and broad concept language | Dynamic composition with balanced color approach.

Acrobat DC - Convert PDF Files to Microsoft Office: Poetic approach to switching software | Symbolic elements in corporate and balanced composition to allow neutral communication to a broad targetOffice briefcase as a referral to the output file for Microsoft Office| Iconic approach to image to empower rigorous and broad concept language | Dynamic composition with balanced color approachOffice briefcase as output (the navigation between softwares, to go into the office, transition) and PDF as input | PDF stamp as a reference to the original source (passport stamp).

Acrobat DC - Edit Texts and Image in a PDF File: Poetic approach to editing and edition | Symbolic elements in corporate and balanced composition to allow neutral communication to a broad targetGeneric Iconoclastic elements to symbolize text ‘A and editorial lines’ | Iconic approach to image to empower rigorous and broad concept languageDynamic composition with balanced icons empowering the symbolic approach to editing | The house, to build (content) and makeover.

Color Themes in Indesign: Color as an active element in the landscape | Showcase Color Integration in InDesign and Adobe CC Platforms (Cloud Libraries) | UI as storytelling elements | Poetic approach to color in the workflow | Explosion of color & typography to build narrative and dynamic composition.

Interactivity and Preview in Fixed Layout EPUB: Display of interactive elements over fixed composition with strong editorial context | Integrated UI elements of both InDesign and digital interface | Cursor hold & Cursor Pressed | Poetic storytelling of an open book crossed with interface elements to enhance digital content over a dynamic narrative.

Embedding or linking graphics: 2 Step active narrative | Link as dynamic refreshable and infinite embedding of files within the document | Copy Paste as static movement | Showcase of UI elements enhancing the edit abilities of the link in InDesign | Color & Type explosion to empower narrative | Symbolic approach to two moments: the difference between static placement and editable embedding.

Premiere - Apply Video Effects: Video effects as the virtual machine | Software empowered emotion | Poetic approach to color usage | User based narrative | Focus on edit and workflow usage | UI elements as the tools for storytelling.

Premiere - Work across Multiple Projects: Poetic approach to the workflow as a soft and expressive environment | Ping Pong as a reference to multiple projects and active relationship | 4 tables as the workflow | Library preview | Live Preview | Library
The Timeline.

Premiere - Create and Edit Titles: High dynamic composition | Display of type styles and graphic athmosphere | Showcase type as leader to the opening sequence | Focus on style display and graphic hierarchiesPoetic approach to title sequence and motion elements | Type as form and narrative

Photoshop - Intro to Design Space: Two step narrative on the topics to depict | UI based approach | Synthethic comparison of complex vs. clean workflow | Storyteller focus on tools, approach and clean web environmentShape, Vector and Type tools as main concepts for the shape behaviour | Poetic enhancement on Design and Mobile apps | Stylish clean color approach in connection to the style elements and stripped effect treatment streamlined for web usage.

Dreamweaver - Getting Started with Adobe Dreamweaver: 2 step narrative on workflow and outcome | Poetic abstraction on the workspace, toolset and different media | The tools, the creative freedom and the pre-built | Overlaying of technical and expressive elements as the two stages of Dreamweaver (Build vs. Design / Structure vs. Style) | Poetic approach to the narrative showcasing space objects as the launch of a new adventure | Space symbology not strictly correlated to “The Stargazer” theme.

InDesign - How to Design a Postcard: Poetical approach to postcard imagery and design process | Mix of realities integrating the design process, layout, structure, object with real world references and key elements to storytelling |Multiple postcards as cues to the infinite possibilities of designing with InDesign | Accent on layout, guides, columns and margins as technical elements to build narrative uponThe postcard as the collection of memories and motor to creativity.

Illustrator - Intro to Live Shapes: Poetic approach to workflow and simplification in the design process | Clear empty space to be filled via the absence of one main composition element (Smart Spacing) | Total alignment and distrubuition of graphic elements in direct connection to smart spacing and organization process | OCD storyteller as the conveyor or alignment and balance | Smart shapes (line, elipse & polygon) in clear representation on the design spaces as part of the artwork | Chairs varying in form in connection to Smart Shapes and live editing of fixed shapes.

Illustrator - Getting Started with Adobe Illustrator: Poetic approach to the concept of getting started | The showcase of the key elements as storytellers | The invitation to dig in and to try new experiences | Human figure to place the user in the center stage of the action | Worflow tools empowered by UI elements | Primary shapes, vector shapes, handles and transformation tools as elements for storytelling | The plate and elements displayed within their own artboard, | Intro to align and distribuition of objects as a reference to the workflow.

Media Encoder - What is Adobe Media Encoder: Focus on symbolic elements as storytellers for video and audio | Landscape elements as the queue of AME, road, nature and urban as different topics of input representing different projects Abstract approach to motion and transcodding | Top to bottom dynamic motion in relationship to this dynamics of input and output | 4 areas in close relationship to AME 4 pannels Explosion of color & typography to build narrative and dynamic compositions as a referral to media.
Media Encoder - Adding Image Processing: Visual abstraction on color and overlaying color treatments in close relationship to color profiles and workflow | Different graphic elements, visual textures, highlighting the different visual gamut that each profile allows | Strong dynamic tension to focus on the processual nature of editing actions | Highly visual and colorful approach.

Dreamweaver - CSS Animations & Transformation: High dynamic tension in composition to enhance movement | Timeline elements to focus on animation | UI elements to empower interaction (transition) and behavior (transformation).

Dreamweaver - Style your Webpage: Showcase an explosion of graphic styles and layout elements. | Web as a plural & flexible design platform. | Acknowledgment of modern web design rationale.

Dreamweaver - Design Responsive Layouts: Character story cross-platform | Media from composition to new technologies | Liquid Composition | Playful reference to Smart Watches | Tablet | Desktop | Mobile.

Dreamweaver - Planning your Website: Steps toward good planning | Focus on development | Wireframing | Early Comps | User Flow and Usage Profiles | Final Comp | Layout.

Dreamweaver - Planning your Website from Comp to Build: Dreamweaver as a portal | From graphics to code | Featuring the magic of the assisted coding | Graphic elements to the left | Code sketching to the right | Transitioning across languages.

Dreamweaver - HTML & Images: Inspiring approach to visuals on the web | Mixing digital and landscape elements to blur the line between code and real-world interaction | Colorful graphic approach | Syntax elements to focus the processual atmosphere | Thumbnail and grid approach to focus on the web and layout.

Dreamweaver - How to Make a Name Form: The Form as a crossing of information | Underlaying sheets symbolizing multiple categories of data | High tension composition to empower exchange | Graphic and typographic elements in relationship to simple form parameters | E-mail, Name & reference to multiple types of information | Upbeat approach to emphasize positive exchange of data.


Dreamweaver - Build From Template: Dramatic enhancement of templates as an active tool in the workflow for development | UI and code elements as an active reference to technical processes | Dynamic composition to focus on active elements | Line count, cursors, pixel count and DW interface references as a tool for narration and contextual background | The ladder as the leverage in template usage | The stairs as a reference to the already developed code | Layout elements to contextualize design.

Dreamweaver - How to Center the Layout: Narrative approach to the center in composition and layout workflow | Multiple showcase of movement | Technical approach to highlight the processual tutorial | Future usage of UI elements to empower workflow in DreamWeaver | Clean look, strong color presence to differentiate the ongoing actions.

Understanding dishonesty the unknown is the key. Taking it as a manifest regarding the global language, the beauty of globalization and how pure form tends to overlap conceptual meaning, this series is made to be enjoyed for the visuals. If one understands the language, then one would notice these are professional and coherent. All of them. Ultimately, they may be in fact telling you how ignorant you might be: though it doesn't matter: you'll love them anyway. In simple terms this could be funny.
Oddly enough, they are a serious compilation of posters for unique events and clients. All kinds of events and clients. Some of them even approached us behind the woods in dark blurry halls. Some of these have been in Switzerland's Soirée Graphique with David Willen; some starred in anachronistic events inside churches; others didn't.

We are dishonest ladies & gentlemen,
but we love a good concept & steroids.

Silent lips photo ©David Willen

The 5th Annual Lovie Awards

Language is tricky; Internet is universal: let's make it easy. Designing an identity system for the 5th Annual Lovie Awards, we had the hard task to showcase culture, power and awesomeness while transmitting the core values of award show:

"The Lovie Awards is the most prestigious, and the only, truly pan-European awards honouring online excellence.Now in its fifth year, The Lovie Awards continues to celebrate the most resonant and pertinent stories in Europe, those inside and outside of the prevailing trends."

Why is this so tricky? Because the show is American, the jury team is international and the projects are evaluated in their native language.

Making it easy: The concept - The Lovie Awards We Speak Your Language. Making it tricky: False Friends as storyteller. Making it fun: To articulate a conversation showcasing the meaning, it's loss, building new narratives mixing the 7 different languages of the 7 most important awards/jury members. Making it conscious: To be precise, respectful in style, contemporary in composition, historic in typographic form and experimental in illustration as a way to honor the groundbreaking creative ground that is intimate to Europe as a whole.


In line with the irrational narrative that derives from false-friends (using English as the main language), we empowered each combination of 2 unrelated concepts without trying to make rational sense between the two as a tool for narration, in one coherent and strict identity system.

We are looking at a series of signage pieces that overall sum up the experience in 2 gigantic vinyls, 14 human sized signage posters to hold the identity in the hall of the British Film Institute setting the tone, preparing an working in line with the motion pieces in the show.

to build an identity under simple principles while remaining utterly powerful and technically simple has as much to do with concept as it is a struggle for transparency. Under the context of a photography festival, the stage should be set so that the craft is respected: under the perfect light, the striking framing and the mind-blowing narrative, it is a game of respect and empowerment.

Ei Power & Illusion

Under the political and economical crisis, the act of depicting is a striking gesture. This identity is universal: from the web to the stage, from the poster to the editorial and growing bigger into minor touchpoints in exhibition design, the goal is to be relentlessly bold and utterly respectful. Playing cards with the universe, the ultimate sky, ladies and gentlemen, "it is time to leave the capsule"

A motion piece designed for The Atlantic. Under a time-stamp, how much can you research, argue, discuss and build? A lot!
Specially if the goal is to fuel a bright motion piece.

A collaborative project between The Royal Studio and Snack Studio requested by Atlantic Re:think to build a strong piece for Pitney Bowes, exploring a coherent and linear storytelling.

How do contextual influences and cultural values influence
the online purchasesof the users worldwide?

Fun, explorative and deeply intelligent.
A pleasure to build with, The Royal Studio & Snack Studio

Thank you Mary McGee for the creative direction;
Snack Studio for the supreme motion skills
Ana Types Type for the energetic illustration input.

The task: to design the most violent digital teaser experience.
The deliverables: 1 digital album cover + 1 digital web platform as a music clip. The Background: BlackHandPath (the client) will fight anyone for $20.

Main concept: "Obfuscant", the act of obfuscating content, a new word by the group Blackhandpath. The outcome? A typographical cover and wev experience that corrupt the content while preserving legibility — made as a breaking object to contrast with the previous visual releases while carrying their gut-violent musical approach. Being transparent to the content, the artwork derives from the actual lyrics in the release. Creating an intimate relationship with the content, the cover is an intimate speeach from the inside out subverting the very own album cover concept. As the lyrics get mashed, the information gets destroyed, the digital comes into play and the cover is an algorythmic dance between it's own corruption obfuscating the artwork and building identity. Playing with constraints, the web experience is a conceptual play between the content, the platform and the dialogue. The web is a key player to the transparent corruption: the previous BlackHandPath videoclips are destroyed and mashed into a single interactive action that derives their content while creating new narratives for the new release. It is a summary of the band's path and the ultimate digital void between the iconoclastic violence that builds their blasting identity and the new approach to the album.

To be built, and to be destroyed,
Designed with mind, drawn with care, destroyed with code;
Ladies and gentleman: Lock your retinas.
This is an outrageous path.

Click here for the Live Experience

Approaching 2014's London Fashion Week, Yahoo Lifestyle UK gave us the hard previledge to dig deep in the world of information, data and ultimately: fashion. Made for the web only, here is an exclusive on the evolution of the hottest fashion trends today over the course the decades from the 30's nowadays.
Researching databases, streamlining information and adding an extra spice and hype, we came together to tell a story: after all, infographics are a powerful narrative on top of being extremely important data visual tellers.

From history to hype. From the trends to the style. From the thermometer to the expression, ladies and gentleman grab on to your croptops & platform shoes.