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.
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
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
1px border #757575 (50%)
Highlight
Floating just above the body
Floating just above the body
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.
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.
- Unordered list – Barlow Light 16px.
- Unordered list – Barlow Light 16px.
- Ordered list – Barlow Light 16px.
- Ordered list – Barlow Light 16px.
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
A collection of open source designer web fonts.
Material is a design system that helps teams build digital experiences.
Wordpress plugin which enables users to switch between Night and Day Mode.
