Studio Direction Official Website is Out and About
Almost one year ago, we started this breathing project, which we refer to as our obsession, dream, design studio, a place to be extremely curious and witty, even drink an occasional beer, and as our bank likes to call it, a commodity :D
Naturally, we needed something to distance ourselves from this capitalist label, so why not a website.
Don’t panic.
Use(r) interface
Instead of making a wireframe, we discussed what we wanted to show. Obviously, we wished to let people know who we are, what our story is, and our individual expertise. The next important thing is our work aka our portfolio and clients. This means one page for all of our projects, and a single page for each one, with more details. Usually, people want to know how something is done, especially when it comes to design, a branch that is more or less still a bit stigmatized, so in order to bring closer our process to the potential clients, we designed a page that will show our approach, and step by step phases through every project. It was clear we needed a section for narrowing down our services, which have been finally defined over the last couple of months. The most fun part is, by all means, the inside page. If someone ever wondered how we actually spend our days together, well, here you can find the raw soul of this design studio. And last but not least, contact part of the website, pretty standard, but mandatory.
Layout
After this, we pretty much jumped straight into the design knowing in advance that we wanted a magazine layout. That was more or less our whole art direction at first. Slowly, we grasped the whole big image, bold typography idea. When you think of layouts in general, one of the biggest concerns is scale. With magazine look and feel, applied on a website, you can pretty much do everything that you like, and even more, because there are no animations in print. This means that you can duplicate images, considerably enhance font size, not follow the general guidelines for buttons, etc. Our goal was to create a sensation of reading, not browsing. So we used whole sentences for links and horizontal lines as amplifiers. Images were used as a contrasting tool to capitalized fonts. There are three overall dimensions, full screen used usually for the hero section (portrayed as a magazine front page), and two smaller sizes for further reading.
Somewhere along the way, an idea has surfaced, our deduction was something like this: magazine layout > let’s organize a photoshoot with us in main roles (designer’s worst nightmare), as any magazine would do and, well, does.
Time is an illusion. Lunchtime doubly so.
Photoshoot
After an obsessive and never-ending search for original photographs in a sea of stock images, with all sorts of licenses, we actually managed to find decent ones. Edgy, a bit partyish, editorial, partially dimmed, and the most important part was that we didn’t see them anywhere. Unfortunately, this doesn’t mean that they won’t surface up on some poster, website, or campaign. This was the moment we decided to make ourselves extremely uncomfortable and do a photo shooting.
Of course, this triggered a whole set of other problems. Luckily, Vlada’s friend, Igor Marinkovic, was eager enough to collaborate with us on this “original images for a website” project. In the beginning, we suppressed the fact that we will actually have to be on those photographs, and in front of the camera, and just worked on the art direction. The general idea was Berlin/80s/album covers. Of course, we consulted Igor, and he really liked the idea, especially because his studio is exactly the place for this kind of photography.
We were guided by Oasis, R.E.M., Rolling Stones, The Cure album cover, in other words, if you saw Atomic Blond movie (the story is set in Berlin, perplexed around spies, great music and interiors) that’s all you actually need to know about our vision for this photo shooting.
After weeks of planning and trying to squeeze it in Igor’s and our busy schedule, we finally were able to start and finish in one night. Literally, night, because we stayed up until 4 or 5 in the morning. When you think about it, it actually makes sense, regarding the neon/dim/party ambiance we wanted to achieve.
Some of us (all of us) weren’t really eager to strike a pose, but we were very happy with the overall result. Don’t be fooled by our serious faces, after all, Charlize smiles maybe two times in the movie.
After the photo shooting comes retouching, contrast, colors, etc. and of course deciding the placement on the website, as well as exponentially generating a huge number of ideas for their usage, from social media to any graphic material.
Igor Marinkovic is an acclaimed photographer with a particular sensibility for eccentric scenography and therefore the ability to create outstanding effects in a pretty small space. He plays with lights, all sorts of textures and materials. We never thought that some of our photos would look so good with lasers and smoke machines. If someone asks, yes, that was a corporate photoshoot, we just made it louder and worth remembering. Obviously, we had one try, or wait for who knows how long, so everyone brought different outfits. Needless to say, Igor got us covered. Even his albino dog became a part of our story.
A Hooloovoo is a super-intelligent shade of the color blue.
Visual language
Our visual language revolves around great contrasts. Black and white, bold and light, uppercase letters and lowercase letters, really big, headline-like logos and bright mockups of our projects.
You can imagine our struggle with the name of our studio, soon enough came the horror of designing our logo. Again, we agreed that we want to create a logo from a font, without any distinguishable mark or sign. As it always happens, you can have both, it was one of the most spontaneous things: while researching the real value behind having copyrighted our logo, it became clear that at this point this is unnecessary, and instead designed a small arrow in place of the copyright sign. The very witty solution, at least for the time being.
Text branding
Launching a website meant we needed to step up our game on social media. When you are running a small design studio, usually everyone does everything, so we were too busy with clients and projects to even think about our public presence.
Something we didn’t consider along the way was the text branding, in other words, the copy/caption on our posts can also be designed and branded. As I mentioned before, the arrow was a small turning point for us, but as it happens it has everything to do with our story and name. Our main hashtag is #followthearrow, so the text should reflect that. We redesigned the punctuation marks. This idea came from Nikola Jankovic, a journalist friend, needless to say, we really liked it and general rules were established:
Instead of colon > |
Instead of a full stop and comma > _
In front of the important links >
Frame for hashtags > [ ]
For quotes and mentions > //
For a moment, nothing happened. Then, after a second or so, nothing continued to happen.
Animations
We knew we didn’t want a bunch of animated stuff. A few transitions and small interactions were just enough. The home page is the most distinguished part because of the video in the hero section, the rest of the website should illustrate the overall magazine look and feel. This means using only subtle animations, like fine hovers, smooth scroll, letter flow, etc.
The color motion when you enter the website represents an immersion into our world, the abundance of ideas, and everyday movement. In a way our week looks something like that, full of colors, different tasks and challenges with a lot of laughter and music (you know, we have three rising DJs in our team), at best the video depicts all our personalities combined together into a cohesive, functional organism, infused with color.
So long, and thanks for all the fish.
Development
Luckily our vision was supported by a Belgrade based company, a fellow in trade, WRPM. You realize that we are just a bunch of designers, who don’t really believe in numbers, except for an occasional pixel counting, and a website will not be coded by itself. At this point, Velimir Matic (CEO at WRPM) took us under his wing and generously offered the sublime combination of letters, numbers, and signs, or in other words, our website for others to see also. Velimir was the center of our attention for such a long time, no pressure :D but, we couldn’t be happier with everything we accomplished together.
Additions
We try our best to curate our feeds, and not to be too predictable. Our website advocates this notion of movement and going out of our comfort zone, so our Instagram and Linkedin posts should also. One of our wishes was to show designers’ projects outside of the company, because, after all, personal projects are good for the studio also. For now, we share our knowledge and inspiration through a section on our website, Our stories.
Our stories were added later, realizing that we would really like to share something more than our portfolio. This section on the website allowed everyone to write about anything and everything. It can be personal, or descriptive, about color theories or a concept for an application. What we learned while designing for finance and assurance companies, or for great real estate businesses.
Down the road, our plan is to keep changing our website, and I don’t mean just some tweaks here and there, I mean user interface and user experience from the beginning. Studiodirection.com is an ongoing project, it will never be finished, we want to learn a lot from it, that’s why it is necessary to change it completely and constantly.
At some point in our future, it would be nice if we could look back at all the chapters we created for ourselves and draw conclusions. After all, things change, a website should reflect those changes.
I can’t even begin to imagine how fun it will be to do all this all over again :D
p.s. Subtitles were taken from The Hitchhiker’s Guide to the Galaxy, by Douglas Adams. The quotes were so appropriate, we couldn’t help ourselves ;)
