Oskar asked us to design his visual identity and to design and develop his new portfolio website. We wanted to create a no-nonsense identity that reflected the nature of Oskar’s work without being overly descriptive.

Identity & printed matter

A monogram, based on Oskar’s initials, with the ‘K’ placed within an abstracted ‘O’ mimicking the shape of a camera lens, became the base of the identity.

Sticking with the reductive approach we decided that onlyone typeface, in one weight and point size was to be used throughout the identity. For the stationery, we only used one paper stock (Kaskad Light Grey) and single colour printing. Oskar’s sparse nature photos were printed on the back of the letter paper and correspondence card.

Website design & development

For the website we wanted to create an interesting way of navigating through the site. In the initial phase of planning, we realized that the ‘Layers’ theme, recently released by Emil Olsson, was close to what we wanted to achieve and decided to use it as a starting point in the development process.

We added and tweaked a few features, as well as the design of the theme, customizing it to meet the needs of the client.

The first major change was going from a fixed height for each case to a responsive solution. This includes scaling images to fit the screen, but the ratio for each case is calculated so that the largest image will always fit. This is to ensure that no images are cropped when presented to the viewer. Another addition to the original theme was adding a thumbnail overview, to help stressed Art Directors and other potential clients swiftly find what they are looking for.

He’s the author of two well-received books, Too Fast For Love (PowerHouse books 2004) and Hair Wars (PowerHouse books, 2007).

David commissioned us to redesign his graphic identity and web presence. One of the main issues with his previous website was that it was Flash-based and did not work on his presentation platform of choice, the iPad. With that in mind, we designed a responsive website that adjusts to the browser (or device). This solves the problem of clashing image ratios as a simple turn of the iPad will make the site switch from landscape view to a standing view. The images, which is, naturally, the main content were split up into six different categories, each one with a specific clientele in mind.Due to the high, and steadily increasing, number of images in each category, we designed a thumbnail overview that opens on top of the active image. The layout of the overview is based on a mathematical equation dividing the total amount of space available on the screen with the number of thumbnails. The thumbnails are then scaled and positioned to fill up as much as possible of the total area, while still keeping in line with the grid.

Another focal point of the development process was the loading time of the site. For the busy Art Director of the business and magazine worlds, loading all images at once was just not an option. Therefore, we did a long series of tests, trying out different loading scenarios on different devices and connections, in order to calculate how to best decrease the time spent waiting for images to appear. Eventually, we ended up with a solution that loads a first set of images enabling the visitor to browse through these, while the next batch is loaded. This procedure is repeated until all images in the gallery have been loaded.

With a website dating back to the early 2000’s, World Match Racing Tour was in desperate need of a refreshed digital presence. Together with IT-Partner Sigma, WMRT commissioned us to redesign and restructure the website and to advice a long term strategy aimed towards commercializing the site.

Note: The website was not developed by us. Some changes, not in line with our design proposal, have been made since the implementation of our original design.

The Tweet Race

As a response to the need of attracting more people to the website, we came up with the Tweet Race. The main idea behind the Tweet Race is to use Twitter’s basic idea of easy updates to get fans involved in the community surrounding the WMRT. By simply following WMRT and tweeting using the hashtag #wmrt, users join the race on the website and compete for prizes. Each tweet gives the user one point in the competition, though any and all tweets posted with the same four hour period will only result in one point.

On the website, users can follow the race in real time and the top ten tweeters are displayed visually on a map simulating an actual Match Race. Each user’s current score is turned into a position along a race course on the map. One point equals one step on the map.The main advantage of this Twitter-based competition is that it encourages users to actively promote the Tour and become part of the WMRT community.

Head To Head (Skipper Comparison)

WMRT is the oldest sailing competition in the world and the vast amount of statistics, collected over the years, are a very important factor to show prominence over competing events. Statistics are generated from 2006 years tour to the current tour and include wins/losses and price money collected over the years. To visualize this data and emphasize the completive nature of WMRT we created a section for Skipper Comparison where visitors can drag and drop two skippers to a highlight field in order to compare their achievements.

Our professional relationship with Cora goes back several years and our friendship even further. Apart from documenting our own work we have involved her in several client projects where here keen eye has been a great asset. Lacking a proper business card and a printed portfolio, Cora was in dire need of both promotional material and a cohesive visual presence. To make matters even more urgent, she had an old insufficient website that she had previously designed herself during a short web design class in school.

Identity

Often carrying heavy equipment, Cora wanted something that she could leave behind to clients that would not require an extra visit due to its sheer size. A business card with a URL to her online portfolio would be the default choice but we felt that there was a possibility to do more than that, adhering to Cora’s enthusiastic approach towards new work.

The solution was a combined business card and mini portfolio. We designed a sturdy envelope (using textured Rives Silkstock), in the shape of a Polaroid picture, with an open front. On the envelope we printed Cora’s contact details, much in line with a traditional business card. The insides of the envelopes were printed in bright blue.
We selected nine different images from different projects undertaken by Cora that were printed on cardboard and perforated for easy detachment. This allows Cora to compose various mini portfolios customized for different client types. We also perforated printer friendly paper for quick updates.

Website

Cora’s new website is a responsive presentation of both her photographic work and her videos, which are all scaled to best utilize the area available for each portfolio item. Videos are pulled from Vimeo and are then integrated in to the slideshow using the Vimeo API.

Wanting to do something unusual and quirky for Cora’s start page, we went in the complete opposite way of the standard photographer website. Not a single image is featured on the start page which instead focus heavily on typography, utilising Aperqu from Colophon through Fontdeck.

AmEx, along with Stockholm based agency House of Radon, commissioned us to create a set of brand assets along with a new website and touch-application.

The AmEx SAS EuroBonus Icon Set

In order to create visual cohesiveness throughout all communication, ranging from newspaper ads to campaign sites and TV-spots, a clear connecting thought was needed. An icon set turned out to be the ideal toolbox for demonstrating the different offers available through the SAS EuroBonus card, whether on a touch screen or in print.

Three different types of icons were to be drawn; travel related, destinations and merchandise. The icons of these categories are used together, in different combinations, to illustrate the full circle from purchase (merchandise) to trip (travel/destinations).

Inspired by old airport signage and passport stamps, the icons were hand drawn and only polished to a certain extent, in order to retain a crafted human touch.

The full icon set includes around 60 icons and will grow over time as American Express develops its SAS EuroBonus offer.

The motifs range from the Blue Mosque in Istanbul, a dry Martini and a roll of toilet paper to the beloved Cinnamon Bun – the only pastry that has its own day of celebration in Sweden (The Cinnamon Bun Day).

Some of the icons, which are used in American Express’ online Travel Calculator, are available in several different grades measuring different habits and conditions of its customers.

The AmEx SAS EuroBonus homepage

The original homepage for the EuroBonus card was designed and developed several years back. Consequently, it was time for a redesign. Based on the feel of the new icon set with the structure of the, more up to date, touch application in mind, a new design for the homepage was set. Not wanting to move too far away from the old website, AmEx wanted the new site to be Flash-based. However, in order to make future updates easier, we linked all content to an XML-file.

Application for touch screens

AmEx’s sales teams, present at every major airport throughout Scandinavia, is a key asset in gaining new customers for the SAS EuroBonus card. As an aid in the sales pitch, a touch application has been developed. The application needed to be updated, not only to match the new design of the website and campaign material, but also because it was not as dynamic as needed. Therefore, while updating the design we also rebuilt parts of the Flash-based functionality to load data from a more easily managed XML-file.

With a focus on clear ideas of functionality, Sebastian’s products are left intentionally bare, undecorated and honest. Working in materials usually not considered appropriate for high-end products, the finished pieces are often a bit ‘rough around the edges’ (literally speaking).

Hard at graft
- A day at Lyckholms

We followed Sebastian for a day in his studio at Lyckholms Bryggerier, an old brewery in the outskirts of Gothenburg. We art directed a series of shots that will be used in forthcoming promotional literature and marketing.

All photos by Cora Hillebrand.

Functionality first
- Printed matter & Stationery

The notion of functionality and honesty present in Sebastian’s work, paired with his ability to see the beauty in the simplest of materials, was something we used as a starting point when designing the identity. It guided us throughout the project and informed our choices of paper stocks for the stationery.

For the business cards, we used heavy gray board (a scrap material by many considered unrefined and therefore not fit for use in stationery) with the contact details and logotype stamped onto it by hand, much in line with the crafted nature of Sebastian’s work.

Besides the letterhead and invoice and quotation sheets we designed a blueprint template and printed tape. Interdepartment envelopes were deviced for filing projects and an address stamp for outgoing post was designed.

Göteborgstryckeriet (henceforth GBGT) is one of Sweden’s leading print houses. With four divisions, each with their own specialty, they can handle every type of job ranging from the most technically advanced to the most extensive. Founded in 1918, GBGT have established themselves as the printer of choice for both designers and Marketing Executives.

After having undergone a recent rebranding, led by Happy F&B, GBGT approached us to rethink and redesign their website. Early on, we identified some key needs and features that we, being buyers of their services ourselves, thought would make the site not only a reference hub, but a good starting point when planning a print project. For that reason, we decided to build the site around an inspiration gallery, containing a vast selection of reference projects. This was to become the natural focal point of the site and the feature that would attract the most visitors.

Inspiration Gallery

By categorizing projects both by type (e.g. book), printing technique/s (e.g. embossing) and paper type (e.g. uncoated) we allow visitors to sort reference projects according to their interest.
Perhaps a designer wants to see what silver foil on coated and uncoated paper looks like before making a final decision on which one to go for? The Inspiration Gallery will then serve as an aid in helping the designer to make an informed decision.

The second part of the project was art directing and photographing all the projects that were to be featured in the gallery. Wanting to release the site with a solid number of posts, we gathered quite a few pieces of printed matter from the GBGT archive (32 projects resulting in 145 images) that we shot together with photographer Cora Hillebrand. Mixing overview images with close-ups and detail shots we displayed both the objects in full and specific printing techniques.

Designing the Inspiration Gallery proved to be quite a challenge. With the large amount of images there was a need to keep each post in the overview section rather small. At the same time, as many images highlight a certain printing technique, there was a need for an option of easily switching to larger scale images. This was solved by designing three different gallery layouts.
The Thumbnail Overview allows the visitor to get a quick overview of the projects. The Gallery View is more of a classic blog layout with larger images and additional information. The next step, the Fullscreen View, maximizes the images on the screen while still offering an easy navigation, either through using the arrow keys of the mouse. By hovering the left and right edges of the screen, a part of the previous or next image slides into view.
The multiple layouts also ensure that the website is visually attractive and function well across all devices and platforms.

Switching between the different gallery views is seamless. By clicking a thumbnail, the thumbnails of that specific post grows to gallery size and clicking an image again leads to the fullscreen view.

The same seamlessness is utilized throughout the site for a smooth browsing experience. Many sections of the site can be collapsed in order to swiftly reach content further down. In many sections, additional content appear automatically when a user interacts with an element. For instance, a full thumbnail overview (containing every image in that project) appear when the visitor hover a thumbnail on the main page and images of staff members appear when the visitor hover their names in the contact section.

After having stumbled across their products and realized that P.A.P. was a local brand, we contacted Ulf to suggest a collaboration. As it turned out, P.A.P.’s office was located a mere five minute walk from our own. Having met for a chat, we decided that the first stage of the project would involve designing a look-book and redesigning their website and web shop.

When designing the website we wanted to tell the story behind P.A.P. and its products. With a local production, good values and an interesting background we saw a good opportunity for building the site around story telling. We got in touch with copywriter Johanna Lenander (in New York) to work with us on the project. After having split the main content in four sections (Story, Manufacturers, Philosophy & Places) we started working on gathering the needed material.

A colour scheme, made up of five natural colours found in everyday P.A.P. material was chosen and used throughout the site. The overall design, as well as the photographic style, was kept light to give the products full focus. A display typeface, inspired by the P.A.P. logotype, was drawn and used for headlines while the main body copy was set in Georgia (Bodoni for print).

The shop section, while still on a separate e-commerce system, was visually integrated into the main WordPress site.

We were approached by Ericsson and Radon to design a part of Ericsson.com with the purpose of advertising Ericsson’s Business Support Systems. The site contains five different sections with the main part being a news feed, which is updated on a daily basis by Ericsson staff members. Other sections include a media gallery, reference studies, offerings and additional information about their services.

What makes the application unique is the fact that all businesses and discount offers are connected to a local sports team and by using the application to claim your discount a part of the profit is donated to that team. This creates a win-win situation where you get a discount and support your team. At the same time the local business owner attract customers by showing his or her support for a specific team.

We were approached by Mobilrabatten to design their identity, which use the rounded square shape of an iPhone application icon to emphasize the nature of the product. The initial ‘m’ and the ‘r’ (initial letter of the second stem of the compound) are joined in a ligature that reads ‘mr’ and creates a strong, memorable mark. We also designed basic stationary and a map of Sweden made up of lots of mr:s.

Loft approached us to design their identity, stationery, website and digital presentation material.

In a highly conservative market Loft needed an identity that, with subtle quirkiness, would separate them from the bulk without scaring anyone off. The logotype was designed in a constructed manner corresponding with the nature of Loft’s approach when developing new products. A bold graphical approach, with bright colours, strong typography and use of infographics, was chosen in order to establish a feel of trust and illustrate the steady hands (or analytic minds) of the individuals steering the company.

The website consists of a primary site of four sections, for the main company, and two sub-sites for their products; Loft Securities & Loft Credit Relative Value. Illustrating Loft’s different approach to a traditional field of business, the main page highlights both their blog section and their manifest – a collections of vows and values deeply rooted in the company’s approach.The website also contains financial statistics and data automatically aggregated from a number of online sources. A set of three clocks how whether or not three major stock markets (Nasdaq OMX, Hang Seng & Dow Jones) are open or closed and the current stock index. These utilize the HTML5 Canvas to work across all devices.

The business cards were duplexed using one sheet of Munken Polar paper and one sheet of Rainbow Intensive Red. The red sheet was overprinted with PMS 1795 to give it just the right tone of red. This was quite the balancing act and several versions was turned down before the right tone was achieved. The logotype was foiled on the back of the card which had to be punch cut because of the precision required by the square grid on the front of the cards.

For Apple ELS 2011, in collaboration with Relevent, who was responsible for the ELS roundup party, we designed the invitations, the printed program and a website where the visitor could find the full program and also mark what lectures or seminars they would like to attend, which was then sent in a form along with their personal information.

The printed program was designed to work both as a teaser for the program and as an actual aid to the visitors when attending the summit. The 26 page folded program includes, beside the actual program and info about the event, a custom London map with the lecture venues marked out along with the location of the Apple headquarters and the May Fair Hotel, which is hosting some of the seminars as well as serving as the residence for some of the visitors. Four pages (the backsides of the day overviews), were separated into four stripes (one for each day) with the London skyline, the main graphic element of Apple ELS 2011, moving from top to bottom to illustrate the impermanent state of the passing of time and its contrast to the fixed state of the skyline. Every other skyline has a striped sky illustrating the fact that it in London in January, according to statistics (BBC World Weather), rains every other day.
The pages of the program were perforated, so that the visitor would only need to bring the program for the current day along with them during each day of the summit. On the back of the program cards we designed a ruled blank page on which the attendees can take notes during lectures and seminars. The page also holds a space dedicated to web links.

The program was printed on sturdy (300gsm), uncoated Munken stock that would withstand the wear and tear during the four day long summit.

When designing the website we focused on creating a seamless experience for the visitor. We managed doing so by creating a logical structure and a solid navigation that would guide the visitor all the way from the first text to the final submission of the form. No Flash was used to make sure that everything would work just as well on an iPhone or an iPad. By using unobtrusive JavaScript we could get the interactive feel of an application, without losing any core functionality for users without JS. The submitted data was sent to a Google Spreadsheet from which Apple could send out specific responses, again using JS with Google’s API.

The header, with a slowly spinning London Eye and skylights fading in and out, was animated using JavaScript.

Visit the website: www.els2011.se

The site was built so that it would give the visitor a quick overview enabling them to assess the information of interest rapidly. The aesthetic, both of the identity and website, follows the editorial tradition of classic newspapers, but with a modern twist. We used the WordPress CMS as a platform for the site which enables Johanna to easily edit the site and upload new work.
Printing techniques include relief and fluorescent inks and high quality paper stock such as the uncoated Munken Polar 400gsm was used for the stationery.

Visit the website: www.johannalenander.com

Working with a set of photos that Jennie Smith took of the roof of the Met Center in central Sydney we created three different business card backs. The images were cropped and printed in duo tone, with the turquoise used throughout the identity, to make them more of a graphical pattern than an actual image. The double N symbol used in the logotype was silver foiled on the back while the front on the card was kept really clean and sober, to avoid an overall busy look together with the patterns on the back of the cards.

Record label, Epic Records / Sony BMG, approached us asking for a full screen video solution for her music and videos. They also needed the site to be based on WordPress so that they could easily update the content.

Inspired by the look and feel of the drum machines and synthesizers used in Oh Land’s music we designed the site on a grid made up of squares. The content is placed at random, each time a new section of the site is opened, with the different modules always staying within the grid. The number of modules displayed is determined by the size of the visitor’s browser, to make sure each user has the best experience possible. This organic approach along with the minimalistic interface made sure that no part of the constantly changing video background would always be covered.

All content is loaded over a Flash video background and new content is fetched via AJAX. Much of the site functionality is custom written and the site includes a custom plug-in for the WordPress admin panel where the editor can edit the video background, including adding or removing clips and changing the timing of the loops. Another technique used is IP detection to show specific posts for visitor from selected countries.

Please visit www.ohlandmusic.com for the full experience.

Lundgren+Lindqvist were asked to design and develop the new Göteborg Nonstop based on a self hosted WordPress publishing platform. The first part of the project was structuring the existing material and separating posts in to the more personal blogs and a news feed. Göteborg Nonstop also requested some added functionality to the site; mainly an events calendar and the possibility to add advertisement, which is carefully selected so that the site will not fall in the same trap as previous mentioned website. Both functions are now integrated in the WordPress admin panel of the site, using a combination of existing plug-ins and code written specifically for the site. Other special features of Göteborg Nonstop include the round thumbnails for each post on the main page, generated automatically from the first image of each post.

The main page header illustration is designed by Karolina Eriksson from the Lula collective.

We were approached to design and develop The Healing Arts identity and web presence. After narrowing down the groups influences to a few key areas, such as mysticism, symbolism and alchemy, we started the process of developing the identity. In our research, we stumbled upon Antahkarana, an ancient Tibetan symbol for healing. The meaning of Antahkarana in many ways related to the values of the collective while also incorporating the mysticism and symbolism. Hence, we made the symbol the base for the new logotype.
The letters of the word mark, that is based on the Replica typeface (Lineto), were interlaced to make it more compact and unique.

The foiled business cards were designed as the three separate parts of the symbol, each card carrying one of the initials on the back.

The Healing Arts members are all active on a number of networks and websites across the web and therefore our main idea for their website was to aggregate as much of that activity as possible in to the collective’s site. Using the network’s API’s and RSS feeds we incorporated members feeds from Facebook, Twitter, Flickr and Soundcloud in to the site, as well as some of the members personal blogs.

We designed the identity for the show comprising a WordPress blog, a logotype, posters and flyers plus a set of stickers. The key words of the identity was recycling, collaboration, engagement and creativity. This was emphasized on the poster by cropping the logotype to six different pieces and mixing them to create a graphical pattern. Along the lines of each piece, the paper was perforated so that the pieces could easily be ripped out and fit together to form the logotype. This calls for the previously mentioned creativity and symbolizes the act of collaboration and recycling. The perforation lines were set to resemble stitches on garments.

The content is divided into different categories (useful, social media, entertainment, education), each assigned a certain colour to simplify the navigation.
The portal is designed to be useful for both existing students and the inhabitants of Borås and also to show potential students that Borås is a really happening city.

We designed Philip’s business cards and collaborated on a promotional poster for Victor Västernäs, a top sailor aiming for the London Olympics 2012. The poster was printed on Arctic Paper’s Munken Rough paper, a brand new quality that was not officially released at the time we printed the poster.