Skip to content
Laura Ljungqvist logoLaura Ljungqvist design logo
Laura Ljungqvist
  • Commercial Work
    • Totalmedia
    • NKPG Design
    • Sunsafe
    • Savback Helicopters
    • Sunus
    • Fogwise
    • Woodland Works
  • Self-Initiated Projects
    • This is the Remiix
    • You Only Live Once
    • What Happened Here
    • Alone Together
    • Laura Ljungqvist Design
    • Slow Magic
    • Revs de Cuba
  • Focus
    • Graphic Design
    • Web Design
    • Digital Marketing
    • Analytics
    • Brand Identity
    • Copy Writing
    • Rich Media
    • Community
    • Ethical Design
  • About
  • Contact
Menu
  • Commercial Work
    • Totalmedia
    • NKPG Design
    • Sunsafe
    • Savback Helicopters
    • Sunus
    • Fogwise
    • Woodland Works
  • Self-Initiated Projects
    • This is the Remiix
    • You Only Live Once
    • What Happened Here
    • Alone Together
    • Laura Ljungqvist Design
    • Slow Magic
    • Revs de Cuba
  • Focus
    • Graphic Design
    • Web Design
    • Digital Marketing
    • Analytics
    • Brand Identity
    • Copy Writing
    • Rich Media
    • Community
    • Ethical Design
  • About
  • Contact
Search

Laura Ljungqvist Website

The idea behind the design for the Laura Ljungqvist website evolved from my work, and the experience they gave me.
LauraLjungqvist.se 2020

Speed, accessibility and a mobile-first approach

The idea behind the design for the Laura Ljungqvist website evolved from my work, and the experience they gave me.

The initial balance between form and function I focused on, was wanting to optimize for speed, accessibility and having a mobile-first approach.

Combined with what I’ve learned about dark theme from Material Design. What started as a white simplistic design, became a dark minimalist design.

Infused with color, for navigation, for color cohesion with the content and for branding. Inspired by my experiments with color, and my love for rainbows. 

The design was inspired by the Material Design system. And was heavily influenced by the Polaroid and Studio Carreras websites. I still have plenty of work to do. Find a list of resources at the bottom of this article. Or read more about the scope and concept of the website.

LLD Website Concept

The scope and concept of lauraljungqvist.se

LLD Cohesive Branding

My goal is to find a balance with making the website cohesive with LLD branding. But also to allow for adjustments to the branding, based on things I learn about ethical design.

I’m planning to making it an open layout, with simple elements. Using high contrast, limited color. And big, legible typography.

Light and Dark Theme 

It was important for me to have both a dark and a light theme. There’s research advocating for either, and I also have personal reasons for wanting both. There’s so much interesting research, and articles, on the topic.

The light theme branding was inspired by Polaroid and the dark theme branding by Spotify. Initially my preference is towards keeping the header, body and footer in the same color. However to ensure seperate elements stand out from one another on dark theme, I may have to experiment with a brand color.

Home screenshot light black
Home screenshot light black
LLD Website Dark Mode
LLD Website Dark Mode

For a while I am tested WP Night Mode by Marko Arula, and was happily surprised with how easy it was to get started.

It created a simply toggle, with few customization options, which you can place anywhere on the website. The toggle would toggle back and forth, automatically switching the background and font site-wide.

It was quite easy to make  additional customization in CSS, however it wasn’t a long term solution. For the time I used it, it really forced me to think of the design in it’s most simplistic form, so I’d have minimum custom exceptions to add in the CSS.

This is also the reason I ended up using it longer than I had intended, this way I’d could experiment a little longer.

I’d say trying this plugin fundamentally changed the way I look at my designs. Both how I approach dark and light themes, but also the power of editing and minimizing.

Layout

I’m attempting to keep the header, body, footer and widgets simple in their design, and focus on the differences between the themes first.

With borders and shadow a slight elevation was created, to separate the elements from each other. The CSS for these elements is the same in both and light themes, and had to be a subtle middleground between the two.

Header

Widgets

Body

Footer

Based upon the idea of different layers of paper, the different sections overlap, creating a hierarchy. The header is on top, and fixed in place. Widgets are slightly over the body. And the footer is lowered below the body.

Light

#FFFFFF

#FAFAFA

#F5F5F5

#EEEEEE

Dark

#424242

#333333

#212121

#000000

Light theme background color
Light theme background color
Dark theme background color
Dark theme background color

Based upon the idea of different layers of paper, the different sections overlap, creating a hierarchy. The header is on top, and fixed in place. Widgets are slightly over the body. And the footer is lowered below the body.

This is one of the more annoying questions to resolve. My intent was to use a minimum amount of colors, nothing more but my own logo and colors in the artwork and use cases. Going forward I may have to give this more consideration. For the time being I’m letting the dark theme be inspired by Spotify’s color scheme.

Elements

We kept the elements simple and adaptable, originating from the original goal for the the light and dark theme. Simplicity will also reduce the code, make it a lighter load, and makes it easier to coordinate the colors.

Article

1px border left and right

Divider

1px border #757575 (50%)

Highlight

Floating just above the body

Floating just above the body

Button

Floating just above the body

Link Title

Link description

Flat on the body

Colors

Because the LLD logo a rainbow of color, I’m making it stand out by limiting the use of color throughout the design. Additional elements of color will be the images. 

The color focus was on contrast. Using a limited pallet, and being considerate of greyscale, throughout the design. Prioritizing simplicity, because I’d have to consider the dark and light version for each element.

Possibly I’m considering introducing a brand color, to ensure good contrast on dark theme. I’ll need to do some testing first, since this will also effect the direction of the brand identity.

I used borders and elevation to create a hierarchy (further explained in the layout and elements sections). And do it in such a way that it would be effective in dark and light mode, without being intrusive. 

By minimizing the use of color, I could keep the focus on the art work and branding. There idea to have the website in full grey scale, is currently tabled, while I work out the other topics on my to do list.

Font and background colors - light
Font and background colors - light
Font and background colors - dark
Font and background colors - dark

Currently there is no brand or highlight color used in the design. However this may change. Implementing both a dark and light theme can be made easier by using hints of color. But this most likely will happen in a bigger update, when I hopefully have found a better way to realize the dark and light theme.

Material Design

Material is a design system that helps teams build digital experiences.

Typography

The font paring I used on the website is is Work Sans with Barlow. This is cohesive with LLD branding.

They were selected because they are both Google fonts, which made it easy to ensure brand cohesion between the website and other materials. Both fonts are available in WordPress Elementor plugin,  in Google tools (Docs, Slides, etc) and can be downloaded and used in other programs.

  • Work Sans for headlines.
  • Barlow for paragraphs.

For the font size I’m trying to follow the Material Design guidelines. And for legibility I added a minimum font size of 16px.

H1 - Work Sans 800 60px.

H2 - Work Sans 800 48px.

H3 - Work Sans 800 36px.

H4 - Work Sans 800 24px.

Paragraph – Barlow Light 16px. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar eleifend sapien. Hyperlink – Barlow Bold Underline 16px.
  • Unordered list – Barlow Light 16px.
  • Unordered list – Barlow Light 16px.
  1. Ordered list – Barlow Light 16px.
  2. Ordered list – Barlow Light 16px.

Google Fonts

A collection of open source designer web fonts.

Updates

Additionally to adding documentation of my recent projects, I plan to contentiously update and recycle old content. Read more about these topics in future posts.  Stay tuned, or follow my Instagram, Twitter or LinkedIn for the latest updates.

Resources

Google Fonts

A collection of open source designer web fonts.

Material Design

Material is a design system that helps teams build digital experiences.

WP Night Mode

Wordpress plugin which enables users to switch between Night and Day Mode.

Read more

light and dark theme
Dark and Light Theme
Laura Ljungqvist Design logo
Laura Ljungqvist Design
Laura Ljungqvist Design logo
Laura Ljungqvist Brand Identity
Laura Ljungqvist
About me
Read more
Graphic
Design
Web
Design
Digital
Marketing
Data
Analytics
Brand
Identity
Copy
Writing
Rich
Media
Community
Building
Ethical
Design

lauraljungqvist.se © 2016 - 2022