UX & UI

Design

Moodboard showing a user interface concept and user flows
I am creating high-end interface designs based on strong user experience concepts.
Case Studies

Website redesign for an architecture studio

The briefing was pretty straight forward: "spreeformat" needs a new web appearance which represents them as the design company they are.
The time constraints were set pretty harsh so we agreed on just changing the overall look and feel of the current website.

Timeframe

3 days

My Job

UX/UI design & photography

Client

spreeformat architects
comparison of the old website and the redesigned website

Target Audience

During our first meeting I learned that getting good employees in the architecture business is hard. For this reason the website has to speak to potential clients (B2B & B2C) as well as potential employees.

Persona

Our Persona Tina is a 23 year old millennial who is studying architecture. Right now she is busy searching through all of Berlins architecture studios to find out which one she wants to apply to.

current user flow and new, optimized user flow

User Flow

As a millennial Tina is used to fast consumption of web content. Her goal at the moment is to click through a few projects of every studio.

It was important to reduce this flow to the most important steps and make the projects easily reachable from every point of the website.

To attract young professionals Spreeformat needed a state of the art design for their website that reflects their studio in the best way possible.
Mood board for the branding of an architecture studio by Alexandra Linortner

Moodboard

After a first call and going through the clients online portfolio I tried to summarize the studios main values.
Based on these I created a moodboard which we discussed and agreed on during our first meeting.

Aesthetics

Spreeformat is a design company

Transparency

Full disclosure of the project process

Professionalism

Building spaces is a serious business that requires competence

Look and Feel

The overall light and exquisite feeling is created by the use of a lot of whitespace. It was important to give the images enough room to unfold their aesthetic potential without any distractions.

As architecture is all about constructed geometric lines and perspectives I aimed to counteract the strictness by using an open grid on which the pictures are able to float through the white space.

The Font

Creating a state of the art design also means following trends. I did so in treating the headline font as a style element. In addition to Avenir, their corporate font, I opted for Conglomerate — a strong and bold font with rough edges that adds character to the design.

Minimalistic graphics for the website of an architecture studio designed by Alexandra Linortner

Graphic Elements

An architectural project always comes with a lot of construction drawings. As transparency is one of the studios core values these drawings are incorporated in every project page.

I also created a set of geometrical forms — abstractions of architectural elements such as stairs or more particularly for the studio: an abstraction of the panorama rotunda. These forms are loosening up the strictness of an all white background.

High-fi wireframes by the Webflow designer Alexandra Linortner

Homepage

This important page ought to feel like an exhibition of curated projects. Each represented with a teaser image that follows a calm and muted color scheme.

Project Page

Here the transparency value finds its visualization in behind the scenes graphics and detail shots with material descriptions.

Scrolling through a project a button appears on the right corner with a shortlink to the next project. This provides our persona Tina with the needed flexibility to browse through the whole portfolio.

Photography by Alexandra Linortner for an architecture studio

Photography

I found the existing pictures for this Pergamon museum project to generalized and missed seeing the effort and the attention to detail the architects invested into the project.
I wanted people to be able to see and feel the bigger picture.
So I spontaneously decided to go to the museum and catch the spirit by myself. I took ten detail shots of objects and corners which are shown on the project page.

UI Redesign for a
Yoga Studio

After working on their branding and graphic design material for the studio launch the team asked me to redesign their website after a successful first year.

My Job

UI Design, no Code Design

Tools

Figma, Webflow

Client

Every Damn Day Yoga

Target Audience

The Every Damn Day Yoga studio is a place where you can find Berlin business moms and young urban people alike.

On a scale from Hippie to Hipster the target group in Berlin Friedrichshain is definitely more on the Hipster side. A state of the art branding and web appearance was a must.

Focussed Message

I learned from the team that they often have a problem with people not being on time. Running a tight schedule starting classes on time is a very important aspect for the studio to function.

.

To make this message pop I placed it very prominent on the homepage. The usage of big typo with a scroll animation turns it into a style element of the website.

Mood board showing a design direction for a yoga studio in Berlin by Alexandra Linortner

Moodboard

I created this one by the time I did the branding for the studio. A reduced, minimalistic and calming tonality for a place of peace within a busy city like Berlin.

Shadow & Light

Yin & Yang - Keeping your inner balance. Especially during these times of hyperstimulation we are searching for some calm reflection time.

Look and Feel

Yoga is all about a mindful treatment of your body. So I had to create a calming and lighthearted brand feel.

The studio is a place of calm in a busy city.
Palm leave shadows in combination with the sandy primary color spread some tropical Bali vibes to emphasize this oasis like feeling.

Meeting the target group in the best way possible  the elements and interactions had to be stylish and innovative yet easy to use.

I tried to get the most out of Webflow and implemented scroll effects as well as hover menus.

High-fi wireframes for the website design of a yoga studio in Berlin

Instagram Feed Concept

instagram was a crucial part we couldn't ignore. It had to fit the new tonality With followers consuming content on a daily basis this channel is the most important factor to build brand awareness.

The new feed had to go beyond yoga class announcements and studio pics.

Topics like mindfulness, positive attitude and body awareness - all associated with the yogi lifestyle - are part of the new content strategy which we transport with casual wording.

With a mix of reposted mood pictures and graphic posts we create a clean, aesthetically appealing but yet professional look which transports the new tonality in the best way possible.

Instagram feed concept design for a yoga studio in Berlin

UI Redesign - portfolio website of high-end photographer Alex Waltl

After years of using a website template, Alex Waltl decided that it is time to invest in a custom design. He needed to stand out against his competitors as some of them were using the exact same template.

My Job

UI Design
and website building in Webflow

Client

Photographer Alex Waltl
comparison of the old design and the redesign of a website for photographer Alex Waltl
Alex photos are pieces of art, therefore I needed to provide something that feels like a virtual exhibition room. A surrounding that supports his work in an unobtrusive way.
Working with a lot of white space - the user has the chance to digest the pictures one after the other without being overwhelmed by the amount of content.
An exhibition room lives and breathes with the arrangement of the shown art. I carefully picked which pictures are placed next to each other, creating an overall harmonious tonality that’s easy on the eye.
By differing the amount of the shown pictures and their sizes in every consecutive section we are keeping it interesting for the user to explore the whole page.
Minimalist graphic elements designed by Alexandra Linortner for the photography portfolio of Alex Waltl

Style Elements

To not get in the way of the main attraction -  the pictures themselves, we needed to keep the elements to a minimum and their appearance as simple as possible. Still this was a very crucial part of the project. These elements - in combination with the overall layout - are creating a brand feeling and making the design outstanding and individual.

I opted for simple geometrical shapes like the circle and crossing lines. Both elements are an abstraction of what can sometimes be found when looking through camera viewfinders.

The Font

As Alex is shooting for high-end magazines like "Vogue" and "Harper's Bazaar", it was clear to me that we needed to find a headline font which shows elegance like the classicist fonts used in the magazines logos.

The high contrast in line thickness of "Condor" reminds us of the classicist fonts while the extremely compressed sans serif style ads a modern touch.

Chosen custom font for photographer Alex Waltl

Webflow - No Code Design

After finishing the prototype in Figma, I used Webflow to build the online presence. This is an extremely straight forward way to bring websites to life without the help of a developer.

Webflow not only allows me to create fully custom designs without writing any code - it also makes it easier than ever for the client to maintain his website.

An important aspect of my work is always to create sustainable designs. Something that is easily adjustable by the client himself.

Webflow's Editor mode allows the user to just click on the websites texts and images for updating information and assets.