Design

The graphic profile remains unchanged

SLU's new websites will be built based on the same graphic profile as the current ones, but of course, we want them to feel new, fresh, and more contemporary than the existing ones. However, it has been over eight years since SLU's last web project, which in web terms is quite a lot. Since then, we have gotten new and stricter laws and guidelines to adhere to, such as GDPR, Cookie law, and DOS law. Mobile usage has continued to increase, smart watches have made their entrance and focus on climate has increased also in web contexts. And then there's AI.

Today's websites are often minimalist and preferably with a dark mode. A clean design contributes to a better user experience by providing fewer distractions and more focus on content. A dark mode is gentle on the eyes and saves battery life. Less content and fewer elements such as icons, fonts, and images overall result in less data to be sent to the user. This means that pages load faster and that we can reduce our environmental impact.

Increased mobile usage also makes it less relevant to think in terms of columns, and we must ensure that clickable elements are large enough to function well on a small screen.

Following trends or standing out?

Trends are all well and good, but we also ask ourselves how SLU should feel and where the recognition lies. For example, is it given that we should provide our fonts to the user, or can we instead use standard fonts already available on the user's computer? Does performance and climate weigh the heaviest, or is it more important that the web truly feels like SLU and follows our graphic manual to the letter? In this question, we lean towards a compromise – we reduce from today's three to two custom fonts for the web.

Another question we're pondering is how we can best distinguish our different websites from each other while still making it clear that they are all part of the SLU brand. This is about balancing parameters such as efficient management, meeting user needs on each website, and ensuring that everything feels like SLU without it being unclear which of our websites you're on. In this case, we lean towards working more clearly and consistently with color themes on the different websites.

Design system for consistency and efficiency

In the pre-study, we identified some views on the current design that are perceived as somewhat scattered. And even though within the framework of the iceberg project, we've merged a lot of code and reduced the number of design elements, we're prepared to agree. It's easy for a large website that grows more or less organically over time to simply go off track.

So, to create a more pleasant and predictable experience for our users and also streamline our work, we've begun the hefty task of building what's called a design system.

A design system is like a detailed graphic manual for one or more websites. Here fonts, colors, and design elements such as buttons are defined, but also details like how much space should surround a button and what happens to the button when the mouse hovers over it.

To all these elements, the code itself is also connected. It simplifies the entire process from sketching new features, through development where the different components are pieced together, to the management phase where it's relatively quick to adjust a component if needed.

In the work, we've enlisted the help of our contracted communication agency Advant.

From design system to design concept

Also, in the application of the design system, we've received some initial help from Advant, who is assisting us in developing a design concept for the target audience of prospective students. In a workshop in early May, participants from the communication department, education department, and learning and digitalization were guided through the prospective student's intended journey on slu.se. Based on this, we have developed concept sketches with an application of the components in the design system to determine how the different page types, blocks, and other components should look and function.

We hope that by the summer vacation, we can share some sketches of what the new slu.se might look like Do you have questions or concerns already? Don't hesitate to reach out!

//Caroline Backman