LLD Website Design

LLD Website Design
laura ljungqvist logo

The idea behind the design for lauraljungqvist.se comes from a merging of my design aesthetics with my vision for the internet.

I wanted to create a space that’s considerate of accesibility and dark patterns. A website which is reminiscent of a calmer internet, whilst feeling modern.

The website was build with WordPress, WP Oceana Theme and Elementor. 

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.

laura ljungqvist logo

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.

Home screenshot light black
Home screenshot light black
Home screenshot dark white
Home screenshot dark white

Currently I am testing WP Night Mode by Marko Arula. It’s easy to get it started, and works across devices. I’m looking for a different solution, and am open to suggestions.

Toggle darkmode.

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.

Layout

I’m attempting to keep the header, body, footer and widgets simple in their design, and focus on the diferences 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 hiarchy. The header is on top, and fixed in place. Widgets are slightly over the body. And the footer is loewered 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 hiarchy. The header is on top, and fixed in place. Widgets are slightly over the body. And the footer is loewered 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

The elements were chosen with both simplicity and the light and dark theme in mind. Keeping them simple makes 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

Image placeholder

Floating just above the body

Floating just above the body

Internal Link

Link description

Hovering over the body

External Link

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 hiarchy (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 greyscale, 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. Implimenting 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 contieously 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.

Laura

Laura Ljungqvist is a Dutch designer working from Sweden. She has a passion for organizing and her drive is ethical design. She's currently available for hire.

Leave a Reply