ReelAbout

E

M

A

N

U

E

L

M

Å

R

D

S

J

ö

I invigorate brand identities through visuals, ux and motion.

Looking for internship Nov-May

Support Group Network

Since the migration wave of 2015, Support Group Network has helped establish local support groups to empower migrants and encouraging their own initiative to an integration effort. They sought to further their cause by fortifying their vision on the web.

2019-03-21 thru 2019-04-25
Web, Brand and Logo
VIEW CASE
01
VIEW CASE
Support Group Network's cause means a great deal for many.

Having focused wholeheartedly on their mission, SGN has had little time for visual branding. When they reached out to my class, they needed a visual identity and website

Designed in collaboration with Andreas Palm Österberg, this solution aimed to create recognition and calling people for action.

An important cause calls for a noteworthy expression.

The palette reflects our idea of embedding bold visuals so that people would remember the visuals and through them the organization. A regular or mundane expression wouldn’t do, because SGN’s cause is everything but ordinary. It’s special.

Primary Palette

351AB0
Promising Blue
ED4146
Initiative Red
FAD834
Just Yellow

Secondary Palette

822CEB
Comforting Violet
ED4146
Sunny Orange
FAD834
Warm Cliff
Lively and playful yet professional, the illustrative mannerism I worked on utilizes the color palette to it’s fullest extent.

To further the cause, I wanted to incorporate symbolic meanings to the imagery; this hero image of dancers connects to the catchphrase “Together” in the heading field, and it symbolizes working in unison.

Artworks.

Holding on whilst falling together.

The symbolic spirit was conveyed using a mirrored character. Its shape is anchored in the golden ratio for aesthetically solid curves. That the silhouette pulls in to the center also gives off an action-like vibe, forwarding that something is happening right here right now.

Using three sections to summarise the entirety, the landing page utilizes a section scroll effect to reel in the attention of the user.

Information is often asked for but rarely consumed. Efficiently conveying SGN’s pillars was vital to attract the target groups: employees of higher instances, volunteers, contributors, participators, and also society in general.

SGN just can’t sit by and watch. We made plenty of room for them to showcase all of their excellent work.

The CMS intended for this page was blog-oriented. The client could dedicate a section for each project and fill a slider with stories and images. That way, they would be able to fill their cup to overflowing while keeping the design intact.

Each page footer was designed to make the organization easily reached out to.

The contact form also slides in when the user shows interest in getting involved or looking to contribute, only the proper errand would be highlighted. I incorporated airiness through animation to counteract hesitation to interact.

The Get Involved page was centered on accessible information and calling people for action.

In order for people to get involved they’d need to know where they could contribute. If a user finds their location isn’t yet featured they can easily reach out about organising a local support group. The same goes for any activity they’d like to see.

To add some flavour I paid a little extra attention to details.

Buttons and CTA:s are sure to be interacted with. A little extra care for micro behaviours can help set up a good vibe for the general user experience.

I made exhibition material and printables in order to cement the concept.

The mannerism made for an overall appealing set of printables that could be taken out on exhibitions when the client wants to discourse of their working model. Asylum queues pose a problem for many globally, and getting the model out there was expressed by the client as an ambition.

NEXT CASE
I made a comprehensive handbook so the client could approach the style methodically.

The visual brand guidelines specify colors and usage, patterns, typography etc. The illustrative characteristics are of course not something that could be easily recreated, but we figured the attitude could be maintained throughout the brand if properly addressed.

Island of Light

Island of Light is an annual festival held in Smögen, Sweden during late summer. Light artists are flewn in from all over the world to put on a light show reflected in the dark evening waters, but until now digital interaction has been missing from the programme.

2019-05-2 thru 2019-05-10
App and Gamification Design
VIEW CASE
VIEW CASE
02
The client was looking for an interactive installement that made use of everyday technology devices. You guessed it — smartphones.

In this one week-project I was tasked with coming up with a lights installement and a digital design solution that allowed visitors of the festival to interact with it using their phones.

My idea involved inviting interaction between visitors through gamification and space for contemplation.

The client’s color scheme features gold, cyan, magenta and dark blue.

Working with the sprawling saturated triad for the app design proved a bit challenging without ranking usage. Incorporating the brand colors in the app design was necessary to create to a cohesive overall impression for the festival’s visitors.

Secondary Palette

00CEFF
Distant Planet
ED4146
Magic Dust
FAD834
Dark Night

Primary Palette

FFBB00
Golden Star
Illustrations were created for on boarding purposes.

They were also designed with a younger audience in mind as the client had expressed the festival is family oriented and that the interactive installation advantageously could cater to kids.

So how does it work? Four simple steps were sufficient to describe the idea in it’s entirety.

The on boarding explains how the user can cast a star unto a projection under a ceiling. The star can be customised by gaining points, refered to as dust, which are attained by interacting with other visitors.

Level up! Gathering dust plays a magical animation which happens when interacting with other players.

What I wanted was for the users to mingle under a projection of stars while gathering points to further customise their mark. Progression is awarded by more visually appealing silhouettes and warm popping colors.

A star could symbolise…

The year before, the festival had around 30.000 visitors. Imagine each and everyone leaving a mark on a ceiling. It would quickly fill up to become an interactive artwork for everyone to marvel at.

QR codes would make the app accessible for everyone in the area.

It’s always a good idea to concretize an overall concept — these posters were meant to give the client an idea of how they could make their visitors aware of the installment and users in.

NEXT CASE

Nanvio

Clean air and water are essential to life. The team behind Nanvio technology strives for a cleaner world free from pollution and micro-plastics. I helped them further their cause by developing a brand identity and a suiting website.

2018-12-13 thru 2019-02-05
Web, Brand and Logo
VIEW CASE
VIEW CASE
03
The client was looking for an interactive installement that made use of everyday technology devices. You guessed it — smartphones.

In this one week-project I was tasked with coming up with a lights installement and a digital design solution that allowed visitors of the festival to interact with it using their phones.

My idea involved inviting interaction between visitors through gamification and space for contemplation.

Catalytic surfaces. The technological details of these advanced instruments are overwhelming.

Well, at least for a designer. Designing for something as vastly advanced as nano technology is intimidating. Thankfully, the users the client had in mind for the website were ordinary people, like myself and my companion Sanna Granqvist.

So basically, what we were able to grasp was good content, and we let that guide us in the process that would forge Nanvio as a brand.

The ocean and the skies. But clean.

It would be unwise not to incorporate blue in a blue-tech company’s color palette. The cold scheme uses four tones that can  easily be used and combined by the client.  The value-contrasting green was intended to be used for popping elements like CTA:s.

The logotype we created conveys the essence of the technology’s purpose: breaking down particles into less harmful ones.

I animated the logotype to further enhance what it stands for and to communicate the company’s value proposition through motion. I created a liquid feel for the mark and an airy transition with the letters.

The N shape connects with the name and make it so that the stand-alone mark can sit on its own and still remind of the company’s name.

The pattern we created was based off of the logotype to keep the mannerism cohesive, but also to have the technology’s essence (particle degradation) present throughout the design.

Work Sans is a modern typeface with a professional and friendly appearance optimised for on-screen text usage.

Using a typeface that's flexible and applicable to a responsive design was mandatory. Work Sans also works good with print.

So, who is the user of their website?

We wanted the platform to be the informative spot on which the public can learn about the technology and the possibilities it presents. If speculators are to catch on there’d also need to be pronounced CTA:s linked to a contact form.

A page that covers the greater goal, and how the presented team work towards it

This page was designed so that the user could learn more about what the technology battles, using copy I wrote and suitable stock imagery. The technological details, however, are left for the client to describe in dialog with stakeholders.

The accent color going strong.

To catch the attention of possible leads, we needed the clickable elements of the design to pop from the rest.

Got an idea of how this technology can be used?

Well go ahead and fill in the slick contact form over at nanvio.com.

A team section to mediate that startup spirit.

Among some of the tones of voice we let guide us were: Confidence, Modern, “Take Responsibility”, Environment and Start-up. Certain aspects were captured through copywriting, some through elements of design and others through laying out appropriate sections.

NEXT CASE

Flink Digital

Flink is a new hot digital marketing agency based in Gothenburg. They specialize in data-driven marketing strategies and wanted a cool and personalized visual identity featuring a mascot.

2019-06-01 thru 2019-08-08
Brand, Web and Logo
VIEW CASE
VIEW CASE
04
With a vision of a modern look and a mascot at its center, the Flink team searched me out to help forge a brand identity from scratch.

The design aimed to reflect their good-humored business approach and all-digital marketing strategy.

My work for them involved in developing a brand identity suitable for digital media and designing an appurtenant web design.

The Flink raptor in all its glory.

Much effort was put into developing a mascot with the right traits and characteristics to match the client’s vision of something nimble (swe. flink). I refrained from using comic style references to keep it fresh, unique and professional looking.

As presented, the mascot plays a central role in the brand identity.

The logotype is based on the mascot’s curious looking head to increase recognition and funnel a consistent tonality to the company’s stakeholders and clients.

Using alpha channels, the logotype retains proper values regardless of background.

A flexible mark is fitting for both web and printables.

Overview of brand identity on web platforms.

As requested by the client, the design was kept simple and editable to fit a word press theme.

The mascot is present throughout the web design to communicate a friendly and personal tonality.

Footers with a purpose are the best ones.

When pressing contact in the menu, an anchor pulls the user down to the footer where contact details are found.

A sprawling set of colors can be difficult to work with.

To prevent incorrect usage of the color palette, I was careful to define how and how not to use them in the brand identity guidelines. For example, this example lists contrast proof combinations for texts, versus non-usable combinations.

Flink Digital

Flink is a new hot digital marketing agency based in Gothenburg. They specialise in data driven marketing strategies and wanted a cool and personalised look featuring a mascot. Work is still in progress, check back soon!

2019-06-01 thru TBA
Web, Brand and Logo
VIEW CASE
VIEW CASE
04
Coming Soon

Designing for something as vastly advanced as nano technology is intimidating. Thankfully, the users the client had in mind for the website were ordinary people, like myself and my companion Sanna Granqvist.

So basically, what we were able to grasp was good content, and we let that guide us in the process that would forge Nanvio as a brand.

The ocean and the skies. But clean.

It would be unwise not to incorporate blue in a blue-tech company’s color palette. The cold scheme uses four tones that can  easily be used and combined by the client.  The value-contrasting green was intended to be used for popping elements like CTA:s.

The logotype we created conveys the essence of the technology’s purpose: breaking down particles into less harmful ones.

I animated the logotype to further enhance what it stands for and to communicate the company’s value proposition through motion. I created a liquid feel for the mark and an airy transition with the letters.

The N shape connects with the name and make it so that the stand-alone mark can sit on its own and still remind of the company’s name.

The pattern we created was based off of the logotype to keep the mannerism cohesive, but also to have the technology’s essence (particle degradation) present throughout the design.

Work Sans is a modern typeface with a professional and friendly appearance optimised for on-screen text usage.

So, who is the user of their website?

We wanted the platform to be the informative spot on which the public can learn about the technology and the possibilities it presents. If speculators are to catch on there’d also need to be pronounced CTA:s linked to a contact form.

A page that covers the greater goal, and how the presented team work towards it

This page was designed so that the user could learn more about what the technology battles, using copy I wrote and suitable stock imagery. The technological details, however, are left for the client to describe in dialog with stakeholders.

The accent color going strong.

To catch the attention of possible leads, we needed the clickable elements of the design to pop from the rest.

Got an idea of how this technology can be used?

Well go ahead and fill in the slick contact form over at nanvio.com.

A team section to mediate that startup spirit.

Among some of the tones of voice we let guide us were: Confidence, Modern, “Take Responsibility”, Environment and Start-up. Certain aspects were captured through copywriting, some through elements of design and others through laying out appropriate sections.

NEXT CASE

Emanuel Mårdsjö

1990-07-13

Jonsered

Vrångö

Göteborg

Ivalice

Engelbrektsgatan, 413 27

Göteborg

2018

2020

Digital Designer

2010

2013

Game Artist

SWE

ENG

HTML

CSS

Sketch

Figma

Flinto

Webflow

Divi

PS

AI

AE

PR

DN

XD

YRGO Högre Yrkesutbildning

Högskolan i Skövde

CLOSE ABOUT
CLOSE ABOUT
CLOSE CONTACT
CLOSE CONTACT
emanuel.mardsjo@gmail.com
CLOSE SHOWREEL
CLOSE SHOWREEL