My role

UI design

Coding Development


Sketch - Photoshop

Mockup - Photoshop

Prototype - Adobe XD


1x UI Designer

1x UX Designer

1x Brand Designer

Project Type


Website Design

The Process







About the project

Karla is a fashion magazine that has expanded into the digital world. She has a focus on fashion from the 50s and 60s and as an influence of fashion today. My role was to develop the website's interface for the brand. It is not necessarily a blog, because a blog has a different interface format. It is a website focused on talking especially about the brand, the photo sections, fashion shows, and fashion in general.

The Problem | Challenge

Our goal was to develop a clear interface integrated into the brand guidelines and with the users as our focal point.

How can we create a clear digital platform for users accustomed to physical magazines?


This kind of brand usually has a lot of competitors because the industry is big and it's always regenerating its rules, although Karla is more about a specific subject in the matter, the process of evolution since the 50s and 60s.

Competitive Analysis

Method 01

Analyzing our strongest competitors, I noticed how some little details make all the difference when using the product (website), for example, the time spent on each reading. It's basically a magazine in a website shape, so it contains a lot of subjects. For that reason, a search engine is very important so that can better users filter their reading choices based on what they are interested in. Karla doesn't have a very large information architecture. The brand only talks about fashion, unlike some competitors who talk about other subjects as well.

Getting to know our target audience

Method 02

Our target audience is mostly women. 77% of our readers are women interested in fashion. Karla is a site focused only on fashion, unlike competitors. This means a reduced number of clicks. For this reason, it's important that there is a good interface and experience to make up for it. We have a large group of stylists interested in making their own clothes and professionals wanting to innovate. The adaptation of magazines to a digital platform is a big step.


These are the insights I collected from the research. Fashion is an expansive theme, especially nowadays, so there are a lot of competitors for this kind of matter. They helped me to get some insights about the projects since they have more experience in the digital industry adaptation.


Most sites use a standard number of colors (usually 3). The reason for this I think is not only for the sake of simplicity since all these sites are printed magazines as well, but also to make a contrast with the site.

Result: The number and color palette used on the Karla website brings more personality to the style we are trying to create. A pattern break can cause us to create this.

My main role was to develop the user interface, but being a team, we noticed that some details on the design interaction could bring us an advantage, as for example, the time reading for each subject. This saves the user time in utility.

Result: Users will be more efficient when accessing the subjects, making the experience more pleasant.



I noticed that there are simple details on the usability of the site that can make a difference in use, a good example are the pop-ups. Although at first, for some people pop-ups can be annoying depending on the frequency, after some tests users got more interested in what the site has to offer by increasing the number of clicks.

Result: It helps to make the user go deeper into the subjects of the site and come back.


My strategies are based on the insights, and ideas I collected from the research and the UX process. Below you will see some ideas I had for the construction of the website interface.

Color Pallete


Karla has a differential in the color palette because despite having a classic look, the brand also shows the mixture of tones as fashion has been adapting over the years. Although colors have their seasons depending on the trend, overall, all of them are well used.


Getting the feeling

The images I chose to use are all in black and white. The history of the brand is based especially on the 50s and 60s so I collected images of women who were important for the transition in the fashion world, and to give a contrast with the colors chosen above. It didn't necessarily have to be old photos, but photos that have a portrayal of the fashion of old times.


high fidelity

Karla doesn't have many categories like other brands, so information architecture wasn't an issue. Something I also noticed is that the navigations menu follows a pattern, and they all have a hamburger menu because there are many categories within the site. There is a balance between text and images so that the essence of reading a magazine doesn't get lost. The material titles are concise and straightforward, like hashtags.



I tried to make the website look as clear as possible, and the brand helped me a lot with that since their style is more classic. Usually, we don't fit a lot of information on the pages. The information architecture is more organized and concise. I had to do reformulations about the hierarchy and information because at the beginning I had something in mind, but in the end, things always change depending on the necessity and user preference.

As with all the creative projects, I had an idea in the begging and in the end turns out to be different. With this project, it wasn't different but also it wasn't anything too radical. Stylescape is the first thing that I create in a project like that because after I work on the website I need to have a good view of what we are trying to build and the most important question: is this going to work out?


Karla was the most productive project I worked on so far. I believe it was one of my projects that I could improve myself the most and the project that I most enjoyed. I love the fashion industry and creating different things that challenge me.

©   Stefanie FreitasAll rights reserved.
Design by Stefanie Freitas, Base Code by Templatemonster