Standardising the "look and feel" aka "style guide"

D by duncan on 10 Nov 2020, edited 10 Dec 2022 #

I've pulled/plagiarized/copied some text from one of @Moult discussions topics away from the OSArch Website Design thread to give it more space here.

The idea is that we would benefit from standardising the "look and feel" of the Wiki, Community, and OSArch landing page. There are three aspects to this:

A logo, repeated across all three sites
A colourscheme, repeated across all three sites.
A typeface, repeated across all three sites

@Moult current fonts: Open Sans for all headers, and Lato for all body text

We also need this consistent style for other things:

Teaching content with fliers, slides, videos etc.
Social media content

A color scheme should standardise background colours, text colours, link colours, button colours, across all pages. Doing this step is relatively easy and can do a lot for unification of the design. Do we want to continue with a light colour scheme, or do we want to swap to a dark theme?

Here is the community's current scheme: https://coolors.co/ffffff-22252c-e14658-555555-888384

Here is the wiki's current scheme: https://coolors.co/ffffff-555555-eaecf0-3366cc-8e36ae

Things to consider:

Links are extremely important in a Wiki. They should be clearly identifiable, with three distinct colours for regular links, visited links, and non-existant page links.

Pages may have lots of graphics, including screenshots of applications. How does this work with the colour scheme?

( @JanF this is the place for your logo ideas! )

D by duncan on 10 Nov 2020, edited 10 Nov 2020 # +1 votes

How about something like this for links. Look at the image before you read the description - does it make sense without reading my description?

Spoiler alert:

I've used Lato Heavy underlined for links with a random dark grey for visited links. Missing pages are dashed underline. Mouse over removes the underline. I'm sure I've seen this scheme somewhere, it seems logical to me.

Neither Open Sans nor Lato were installed on my system. Is that not a problem? Won't my browser just substitute?

S by stephen_l on 10 Nov 2020, edited 10 Nov 2020 #

In google fonts days should not be an issue at all, fonts are downloaded by the browser given proper css is setup (Moult may not want such things).

-pro: things are the same everywhere

-cons: load time and tracking

As far as i can tell, Arial or some kind of frutiger native font may look nearly the same ?

And yes, when not available, the browser does substitute with respect to a font list, eg: google-font, Arial, Helvetica, non-serif.

M by Moult on 10 Nov 2020 # +1 votes

Your browser will substitute, but as @stephen_l says not to worry since I'm linking to the Google font repos. In the future I will self host the fonts so that we don't need this Google connection, which basically serves as one big tracking network.

J by JanF on 14 Nov 2020 # +7 votes

Ok, so here goes my draft of the osarch.org homepage, to start the discussion.

You can add notes and scribbles here: https://dev.first-draft.xyz/d/or7ia3v4l1

Or if someone likes to take it further, the original inkscape svg is attached.

The title image is from unsplash.com, the other two form luxcore gallery.

D by duncan on 15 Nov 2020 #

OSarch.org

=========

Nice work. I say let's do it without the logo for now. I have some small comments on text and link targets. But let's save those until some others have commented on the overall look. I'd love some pictures from our projects, but looking good must be a priority for now.

Osarch logo

=========

I'm happy to support that logo, but I think the logo deserves a dedicated discussion. Let's get talking about that - does it need it's own thread?

@JanF can you say something about how you arrived at the logo?

OSArch Wiki

========

I hope people think the wiki is looking good. I've suggested some changes to links, what do people think about them? The only problem with them is that they drain the page completely of color. So we need a color scheme to bring to other elements on the page before it would look good.

M by Moult on 15 Nov 2020, edited 15 Nov 2020 # +1 votes

Great work @JanF! I do think though that the logo deserves its own thread, and at least a few options by a few people before we settle.

I'm a little concerned about content. I'm a strong believer in the layout being there to support content, whereas right now, apart from the news headers, the philosophy is repeated again and again throughout. Here's a list of content I think should exist somewhere on the site:

A bold statement about philosophy, with a link to a more detailed page on philosophy. This detailed page currently exists on the wiki.
Links to the community, wiki, OSArch twitter / linked in / YouTube (@duncan ?)
News articles! Yes! I love your idea! Currently there isn't an "AECMag" that dedicates itself to FOSS! Where do users find out about the latest FOSS in AEC? Social media? Forum threads? Naaah. We can do better! The closest I can think of is LibreGraphicsWorld, and then there are application specific ones like BlenderNation, but AEC includes much more than pretty pictures! We should totally make this the centerpiece of the website as you've done. It should have pretty pictures and so on. (Also, once we have news articles, the search bar makes sense)
A community supporters page, this can include avatars of users who support OSArch, and corporate logos of companies that support OSArch. This gives us weight as a community, I believe, and may also be a form of revenue in the future.
An events page! A calendar that shows cool stuff! Like @Sabufrancis 's upcoming talk. Or the ArBIM talks. Or the buildingSMART FOSS talks. Or... or...!

What do you guys reckon? Is it appropriate to make the main OSArch site to be primarily a news and events outlet? It seems like FOSS & AEC news is something that doesn't yet exist, and we can help provide that "go to" outlet.

I think the colour scheme could be a bit more exciting - it's very desaturated. I think we're a pretty funky bunch and it should reflect that ;)

M by Moult on 15 Nov 2020 # +2 votes

I've scribbled all over it on first draft, hopefully it makes sense.

J by JanF on 16 Nov 2020 # +1 votes

@duncan said:

Osarch logo

=========

I'm happy to support that logo, but I think the logo deserves a dedicated discussion. Let's get talking about that - does it need it's own thread?

@JanF can you say something about how you arrived at the logo?

I started a topic and a first-draft for the logo, added also a short explanation for mine there.

J by JanF on 16 Nov 2020 #

@Moult said:

I've scribbled all over it on first draft, hopefully it makes sense.

What do you mean by "youtube" in the splash image and those "d"s scattered all over the place?

M by Meetlat on 16 Nov 2020 #

@JanF For inspiration you can take a look at https://www.osgeo.org/ I like the fresh white colors (positive mood!) and position of the content. In my opinion your proposal is to dark, also the black letters on grey background is not readable.

J by JanF on 16 Nov 2020 #

@Meetlat said:

@JanF For inspiration you can take a look at https://www.osgeo.org/ I like the fresh white colors (positive mood!) and position of the content. In my opinion your proposal is to dark, also the black letters on grey background is not readable.

I am not a huge fan of dark themes myself, but it was propsed somewhere here on the forum also for environmental reasons and that is why I went with it.

Thanks for the feedback, I don't mind a bit lower contrast personally and I wanted to see what others say.

M by Moult on 16 Nov 2020 #

@JanF hehehe I think my browser as acting up and kept on spewing "d"s everywhere. I've deleted it!

@Meetlat I like the OSGeo page! Light and clean!

D by duncan on 17 Nov 2020, edited 17 Nov 2020 #

@JanF said:

I am not a huge fan of dark themes myself, but it was propsed somewhere here on the forum also for environmental reasons and that is why I went with it.

I noticed that comment. As I understand it that is nonsense unless you have an OLED screen, or e-paper reader - all LED screen have constant backlighting regardless of the screen color. That's why screen with high contrast costs more.

B by brunopostle on 17 Nov 2020 #

I like these proposals, the sketchy drawings are good, though I wonder about this one:

Since it is the GNU logo it implies that this is GNU sponsored software (the GNU project hosts and maintains various software projects). It is also a representation of Stallman himself - I'm sure we all love him for his delightful qualities, but this picture will be off-putting for many.

J by JQL on 17 Nov 2020 # +5 votes

I'm sorry to get into the discussion, but I thought I would give my onw opinion on this.

I would go for a simpler look and overall approach. Streamline everything and throw the less info possible to users so the info you do throw is clear and concise. We cannot possibly read everything at once and that is the main issue with the wiki layout. I don't know what to focus on.

The website should avoid that if possible.

The Logo should undergo a similar process as Blenderbim's logo that turned out quite nice.

Here's a quick doodle on the Layout using JanF's base. New SVG attached.

D by duncan on 17 Nov 2020 #

Maybe we don't need the GNU on this page. It is other places.

On this front page maybe just repeating the OSArch logo is fine beside the "who we are" text?

What are peoples thoughts on color? I think we need to introduce a consistent element of color. Was it @JanF who had a suggestion in another thread? The one where @Jesusbill was sad about us not liking his swamp-monster green. I can't find it.

What about my suggestion for links on the wiki. I think text should be plain, headings, borders, backgrounds and images introduce color.

M by Moult on 17 Nov 2020 #

We can swap out the Gnu logo with the OSI logo instead? Looking at Wikipedia, they use the Gnu to denote free software, without implying it is part of the GNU project:

D by duncan on 18 Nov 2020 #

@Moult this is at the core of our discussion the other day about licenses which I won't bore this thread with.

I don't think our front page needs to get into the woods about licenses. Let's just avoid the issue for the front page. I for one would be unhappy to have the OSI icon and not the GNU. SO let's just drop it. The front page is not the best place for raising these issues.

M by Moult on 19 Nov 2020 # +5 votes

I had a shot at designing the OSArch site! (note: logo is just a placeholder of course - pending the results of the logo design)

I chose a more nature image. I think the built environment and nature is one and the same, and I think that the siloed nature of the disciplines of the AEC industry is something that free software can help with - thinking about more holistic design. The header curve reinforces the earth concept.
I made news content the main part of the page. Nobody in the industry is currently providing FOSS + AEC news so this is a gap that OSArch can fill, and I think it is a suitable function for the main OSArch site.
It's a 1200px 12-column layout, split 4, 4, 3, 1. This makes it easy to make responsive.
The news will have tags like "Arch" "Mech" "Fire" "Struct" "Landscape" etc to help people filter what they're interested in.
At the philosophy section, I changed it to more about what actions we're taking, instead of what we believe in. That section needs to be polished and have a read more link.
At the bottom I am playing with the concept of having logos or avatars or something which shows community support. Maybe we can have a bunch of gravatars down there of people who support OSArch. I didn't draw in the avatars since it's a bit of work to do but hopefully you can imagine it :)

GIMP XCF file is here: https://gitlab.com/dionmoult/tmp-osarchorg

M by Meetlat on 19 Nov 2020 #

@Moult I like it! Clean, fresh and playful with the arch. Perhaps adding some language flag somewhere, so users can change the language? Next to the YouTube logo or search bar at the top? And what about upcoming events? Below the Subscribe part? Also I can see you added ARCH/ESD/ELEC buttons below the article. Are those Tags? Perhaps adding a tags cloud somewhere, like this forum has.

M by Moult on 19 Nov 2020, edited 19 Nov 2020 #

@Meetlat completely agree with having a language option around the social media icons, and adding upcoming events below the subscribe portion.

Those are tags, yes, but the idea is to keep them limited to disciplines. That way someone can easily find what's relevant to them. For example a mechanical engineer may not be interested in news about architectural rendering features. There needs to be a "browse by discipline" link somewhere.

J by JanF on 19 Nov 2020, edited 19 Nov 2020 # +1 votes

It is very pretty, but I'd like it to be graphically further away from the osgeo.org site. They also have pretty much exactly the same inage there which I think works great for them, but will be confusing for people expecting architecture from Open source architecture web.

J by JQL on 19 Nov 2020 # +2 votes

From the latest sites I've visited lately the one I think would relate more to how OSArch should be explained is

https://www.ladybug.tools/

I don't mean graphically but in how it simply explains what it is and how it connects to/with existing software. A connection map like what they have there could make sense in OSArch too and it could derive from a collaborative mindmap.

B by bruno_perdigao on 19 Nov 2020 # +1 votes

I like the "nature" approach and the idea of moving way from the "tech" look. But I agree with @JanF, I guess is too nature and it might confuse new visitors. Maybe there is middle ground?

I really liked how the logo looks in this context