About project
2023
In today's fast-paced digital world, it is imperative for businesses to keep up with the latest design trends and technologies. One such company, schlaufahren.de, recognized the need to update its outdated website to improve its visual appeal and improve user interaction. As the professional designer, I had the honor of working on this exciting project, striving to seamlessly combine form and function. In this article, I will take you through the process of redesigning the schlaufahren.de website step by step, highlighting the key elements and strategies that were used to achieve the modern aesthetic and responsive design.
Stages of work
- Redesign logotype
- Website redesign (for screens 1920 px)
- Responsive design
- UI-kit
Old site issues
The illustrations on the site look different in style, which disrupts the harmony of the design. This can cause users to feel careless or inconsistent with the brand.
Typography looks too simple and doesn't attract attention. This makes the site less attractive and modern.
Users expect to find car search functionality as the main feature of such a site. The absence of this feature limits the convenience and functionality for visitors.
The website has blocks with basic services that are designed as if they were news articles. This creates confusion and can disorient users, especially when there is another news section.
The website contains a lot of different information, but the structure is not intuitive. It is recommended to clearly divide the information blocks using subheadings and structuring the content into sections.
The logo looks too simple and teenage for a website that caters to an adult audience interested in car rental or leasing.
Children's logo
Services in the form of news articles
Not interesting typography
Unclear structure
Lack of a car search function
Inconsistent illustrations
3F434D
FFC225
061124
E5E6EF
E33C3C
Grid options
1920x1080px
100% (fluid)
12
Responsive
30px
100% (fluid)
12
Responsive
30px
Display resolution:
Max. container width:
Number of columns:
Column width:
Gutter width:
Max. container width:
Number of columns:
Column width:
Gutter width:
Design
Mobile version
