User interface and graphic design

[janbaykara]

Discussion thread for exploring how we can build up a simple, coherent design system based around the LBC brand, focusing on an initial release by the end of April.

We are likely going to build on top of bootstrap so I'd say the emphasis of this discussion is on typography, visual design language and #flourish / #vibes, so to speak: things that can be translated into a theme for bootstrap and specific visual treatments.

Some screenshots from the current website illustrating the range of graphic elements they're currently working with:

[janbaykara]

CC @GemCopeland

[melaniepatrick]

Hi Jan and Gemma thanks for starting this. I have lots of thoughts on design! (graphic design is my main job at Pluto).

I've never been happy with the LBC site as the typography is terrible. We ended up with one font throughout the entire site as the last developer had problems getting any fonts to render properly.

What I'd like is a really flexible layout where I can change the elements on the page as I need to. So adaptable column layouts and all text/imagery changeable.

Typography:
-- The current site has text that is too wide in many places. I know you can sort this out so we don't end up with weird wide columns of text!
-- I'd like to establish a clear visual typographic identity. I don't like Monserrat. But I do like a clean sans-serif that contrasts with the Caslon used on the book covers. So the website looks very clean & modern & minimal, and contrasts with the books
-- Maybe something like this for the main copy? https://fonts.google.com/specimen/Inter
I like the sans on the Verso book club section: https://www.versobooks.com/bookclub
I like graphik from Commercial Type: https://commercialtype.com/catalog/graphik
-- I'm happy to stick with using the same font for headings (Verso do this very neatly) but I would like true italics and small caps (spaced) and the ability to use a true bold if we have to (though this will be rare and probably limited to displays for prices or discounts).
-- I'd definitely consider using caslon for some elements of the website, but I think this should be limited and that the overall feel of the site should be driven by a more minimalist look that contrasts with the covers, rather than matching them. Maybe we could use it on things like the book biblio data for instance (isbns, page counts, that kind of thing)
-- The events page Jan has uploaded above takes images from our social media accounts. These are created by my colleague in Canva and use a variety of branding. It would be good to start matching these to our new website branding.
-- Here are some original very plain LBC covers, with that plain utilitarian look:
https://en.wikipedia.org/wiki/Left_Book_Club#/media/File:Left_Book_Club_editions.jpg

Layout:
-- Simple is good
-- In general I'd like the site to feel more playful and fun.
-- I'd like to establish a palette of key colours that I can use alongside the yellow and black (and red).
-- Our style is angular corners rather than curved corners -- to go with the books -- I'd like to keep that
--This seems like a better version of our books page layout:
https://www.sternberg-press.com/all-products/
-- I very much like the playful element on the book covers that places the text 'NOT FOR SALE TO THE PUBLIC' around the edge very small. This is definitely something we could incorporate somewhere to give a more playful feel? for instance I made some stickers like this:

Please let me know if you have specific questions!
Thanks.

[janbaykara]

This is great feedback, cheers Melanie!

[GemCopeland]

Hey Melanie, thanks for this, there's loads to get started with!

Can you tell me which version of Caslon you use?

Are those Book Club posts ("Join the Finsbury Park reading group to discuss…") also in Caslon? It looks a bit different to me but I really like it.

Do you have any budget for a font? Graphik is super nice but I think it can get expensive. Inter is a really nice font and has the added bonus of being free! I'll have a look for a few more options too, but it'd be good to know budget up front.

Cheers,
Gemma

[melaniepatrick]

Hi Gemma I think it's adobe caslon? The book club posts are in something called Ovo which is a popular font on canva. I like it too -- looks like it's a google font -- but it just comes in single weight that looks better medium/large so not sure how we'd use it? I hadn't put aside a particular budget for a font but I do think it could be worth it. We pay by number of visitors is that right? I've never used a web font previously. How much do you think we'd have to spend? Inter looks good but looking at it again I see it has no italics which is a pity.

…

On Thu, Mar 31, 2022 at 12:20 PM Gemma Copeland ***@***.***> wrote: Hey Melanie, thanks for this, there's loads to get started with! Can you tell me which version of Caslon you use? Are those Book Club posts ("Join the Finsbury Park reading group to discuss…") also in Caslon? It looks a bit different to me but I really like it. Do you have any budget for a font? Graphik is super nice but I think it can get expensive. Inter is a really nice font and has the added bonus of being free! I'll have a look for a few more options too, but it'd be good to know budget up front. Cheers, Gemma — Reply to this email directly, view it on GitHub <#25 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AYBPO54FGBPSQXM4DPYRD3DVCWDANANCNFSM5RQUAUOQ> . You are receiving this because you commented.Message ID: ***@***.*** com>

[GemCopeland]

Ok great, I'll work with Adobe Caslon.

Thanks for letting me know about Ovo. I've downloaded it so I'll see whether it works. Will probably be better to keep things just Caslon + one sans serif though.

My copy of Inter does have italics, so it's still a good option.

Two weights + italics of Graphik, for 15k monthly visitors is $150 (once off payment). The next level up (500k monthly visitors) is $375, but I don't think we'd need that, right?

[melaniepatrick]

Thanks. That's good on both counts -- glad inter does italics. And yes $150 one-off payment is ok, we could do that. But not the higher rate! And you're right, we're definitely not getting 500k people right now!

…

On Thu, Mar 31, 2022 at 1:34 PM Gemma Copeland ***@***.***> wrote: Ok great, I'll work with Adobe Caslon. Thanks for letting me know about Ovo. I've downloaded it so I'll see whether it works. Will probably be better to keep things just Caslon + one sans serif though. My copy of Inter does have italics, so it's still a good option. Two weights + italics of Graphik, for 15k monthly visitors is $150 (once off payment). The next level up (500k monthly visitors) is $375, but I don't think we'd need that, right? — Reply to this email directly, view it on GitHub <#25 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AYBPO5YSAXFLB2Z6Q2CCUTLVCWLVLANCNFSM5RQUAUOQ> . You are receiving this because you commented.Message ID: ***@***.*** com>

[GemCopeland]

You never know… we might get 500k after we're done with this amazing redesign 😂