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

M by Moult on 22 Nov 2020 # +2 votes

@JanF and @bruno_perdigao can I propose a different solution: not to fix a single header image? The built environment is large. It covers small residential buildings to skycrapers, to regenerative design, heritage preservation, disaster relief, urban planning, transport and infrastructure, the artistic, homely, to the corporate and modularised, and so on. I propose we have many images that are randomised and reflect the diverse disciplines and nature of our industry.

Here are a few images I collected to help reflect a bit of this. We can change / collect more as time goes on.

A little oriental, a little organic ....

... a little traditional, a little human scale ...

... a little urban, the stereotypical skyscrapers ...

... a little community, a little humanitarian ...

... a little historic, a little cultural ...

... and it never ends ... :)

Thoughts? Should we also set an arbitrary 2 week with no changes deadline to move ahead and start building this news homepage? Just so that we have a target to move towards? We can always refine it over time, just as how the Wiki and forums have evolved over time.

@JQL right now, I think it is more powerful to the industry to make the homepage centered on news articles. Can you try and create a mock-up of how you think we can explain OSArch better here? https://wiki.osarch.org/index.php?title=Open-Source_Architecture_Community

J by JanF on 22 Nov 2020 # +2 votes

@Moult looks cool. Do you think we can manage a vote once a month on a new photo from community submissions? Perhaps together with the meetup, we announce the winner and the new vote for the next month? We could of course later do projects as well, but for starters I think photos should be enough. (Of course only your own, but I think we all have plenty of similar photos from holidays and so)

M by Moult on 22 Nov 2020 # +1 votes

@JanF that sounds like a fun activity! You should totally lead it! We can also have a gallery of photos and the thoughts behind them :)

B by bruno_perdigao on 23 Nov 2020 #

@Moult said:

I propose we have many images that are randomised and reflect the diverse disciplines and nature of our industry.

That's great! I guess we would have to use neutral colors so it can work with different images. Did you try anything?

M by Moult on 23 Nov 2020 #

@bruno_perdigao yes, I think for this to work the logo would have to be shown in monochrome or silhouette (white silhouette, in the case of the design I've shown) to ensure that it consistently works with different images.

J by JanF on 23 Nov 2020 #

Well we can simply add some css filters to have a similar feel to all of them, for example I kind of like this:

.filter {

position: relative;

-webkit-filter: contrast(120%) brightness(110%) sepia(20%) grayscale(10%);

filter: contrast(120%) brightness(110%) sepia(20%) grayscale(10%);

}

.filter::before {

content: "";

display: block;

height: 100%;

width: 100%;

top: 0;

left: 0;

position: absolute;

pointer-events: none;

mix-blend-mode: color;

opacity: 0.5;

background: -webkit-linear-gradient(to top, rgba(128, 98, 15, 1) 1, rgba(0, 59, 24, 0.53));

background: linear-gradient(to top, rgba(128, 98, 15, 1) 1, rgba(0, 59, 24, 0.53));

}

(generated by https://www.cssfilters.co/ I unfortunately didn't find out how to share the settings on that site)

M by Moult on 23 Nov 2020 #

@JanF yes, and a slight opacity / black overlay tweak can ensure readability.

D by duncan on 21 Apr 2021, edited 21 Apr 2021 # +6 votes

Bringing this thread to life again. If you're new to this thread then remember also the thread hunt-for-the-new-osarch-org-logo

I've got a posting ready for https://opensourcedesign.net/jobs/job-form/

Comments?

Project: Style Guide advice for OSArch.org

OSArch.org is all about "Creating a built environment with free software, increased transparency, and a more ethical approach. OSArch is for the architects, engineers, designers, builders, planners, operators, and you. Let's change the industry together."

So there are a ton of projects we are involved in which all need UX love. This job is about OSArch as an organization getting our own brand together.

Quite a few of us have design educations, there is a bunch of architects & different types of engineers all with a decidedly tech angle.

Here's how far we are now:

https://osarch.org is looking presentable

https://wiki.osarch.org/ is okay but suffers from a lack of design cohesion

https://community.osarch.org/ is also okay but also doesn't connect very well with any specific style.

https://learn.osarch.org/ is kind of doing it's own thing. Again, without a Style Guide it's hard to know where to start.

We've done some work on an OSArch logo on got a good result if you ask me. Variants of the logo are on the intro page.

Now we need to take this logo, be more specific about its use, and find out what it means for our general style.

We've had some general discussion before about the look and feel of our website which led to some good things. Focus then moved to the logo.

This is a not a weekend project, we're looking for someone, or a small group of people, to help us collect our ideas and make a concrete proposal. We have opinions about design, some of us spent years in design educations, but hopefully we also have also enough humility to be guided. Like I said this is not a weekend project, it's gonna be a process and there's no massive hurry.

About the money - we don't have any. But if you have an account on LiberaPay / Patreon or whatever we can work together to get some sponsorship. We support design as a paid profession, but we're not a legal organization yet, so we can't pay bills.

Deliverables

Facilitation and guidance on making a Style Guide (or whatever it should be called) that we can keep referring to and updating as we bring new projects online. It would include things like:

logo (the curve design is fixed but we're still discussing the implementation of colors/background etc)
color scheme (the red of the logo is one color)
fonts (we have Open Sans for all headers, and Lato for all body text)
usability guidance
Examples for website/SoMe/forum/wiki/print/video/newsletter

B by bitacovir on 22 Apr 2021, edited 22 Apr 2021 # +1 votes

I think this "Style Guide" could remain in a format of wiki like https://wiki.freecadweb.org/Artwork_Guidelines.

D by duncan on 29 Apr 2021 # +3 votes

The post is avaiting approval. Of course the work should be as accessible as possible. A wiki is not suitable for all types of files and for showcasing all types of design aspects. So I expect we'd end up with a variety of files types for different purposes. OpenDocument files, SVG, XCF (GIMP), Scribus files etc.

What I'm thinking of here is quite different in scope to what FreeCAD has. The FreeCAD page is about icon design. To be honest their branding in general is not as impressive as their community - but they have a product, so that's what gets focus. We have no product so our branding needs to be spot-on and easily recognizable. We're selling an idea not a product so that's a different kind of thing. We need a branding people can use for internal promotion at work, for presentations to groups, for coursework, for our different online services and so on. Everything needs to fit together.

The harsh reality for me is that if we can't impress Architecture student then we have a problem. If we have something that impresses them then most other parts of AEC should be on board. Hopefully someone from OSD can challenge some of these ideas and make them better and more relevant to our project.

B by bitacovir on 29 Apr 2021, edited 29 Apr 2021 #

@duncan said:

To be honest their branding in general is not as impressive as their community - but they have a product, so that's what gets focus.

Graphic design has not been a priority in the FreeCAD project. And artists are not big fans and users of this kind of software, either. Anyway, I agree with you about a good image is needed to communicate ideas and concepts. But keep in mind that as FLOSS project, even this branding design could take some time and several collaborators to be completed, because there is no money, at the moment.

D by duncan on 30 Apr 2021 # +2 votes

@bitacovir said:

branding design could take some time and several collaborators to be completed, because there is no money, at the moment.

Maybe. But we could also just agree that a small groups comes with a proposal in several rounds to accept suggestions and then we vote to accept the design or not. I have a groups of three or four names I'd be happy to leave ti to. I'm hoping this process is what someone from the graphics design / UX community would be good at facilitating. We'll see what happens.

A by amitlzkpa on 29 Jun 2021 # +1 votes

Hi folks,

This looks an interesting challenge and would love to join the discussion on this.

I'm new around here and liked what I read about the project. I also have a background in architecture and currently working in a web development oriented role.

We have a similar effort ongoing at our workplace and it resonated with me when I saw the the posting on Open Source Design jobs board. Can't quite say I have expertise to address this specific challenge but would love to contribute what I can.

D by duncan on 30 Jun 2021 # +1 votes

Hi @amitlzkpa nice to see you here. Sorry I've been so busy. Let's see where this goes, I don't have time to keep momentum just now, maybe someone else will step up so we can agree on some framework for making these design decisions.

D by duncan on 19 Jul 2021 #

My suggested priorities

Replace the current set of logos with the more regular design we'll call the circular logo. Overwrite the current files. Read: https://community.osarch.org/discussion/comment/8053/#Comment_8053
Design a process for trying out some different colors and fonts (there are some old suggestions earlier in this thread). Think website, slides, folders, letters, badges, stickers, swag ... something that works for them all.
From there we can look at how to implement them in our current online presence. Maybe we'll lose the zink roof and the seagulls along the way?

M by Moult on 24 Jul 2021 #

@amitlzkpa would you like to help create some new designs related to @duncan 's suggestions?

A by amitlzkpa on 25 Jul 2021 # +3 votes

@Moult

Yes. That sounds great.

I'll carve out some time this week to start work on it and will post updates here.

Thanks for the prompt!

A by amitlzkpa on 25 Jul 2021, edited 25 Jul 2021 # +1 votes

I tried starting off things in a way that I am familiar with (sort of) and putting together things I gathered from different threads. (The first-draft.xyz links didn't open for me so I have missed discussions from that channel).

Wanted to get some quick feedback on it. Mainly to avoid redoing/duplicating things if they've already been attended to.

https://design.penpot.app/#/view/1bce3c30-ecf7-11eb-9b24-4c4b7a420f0b/1bce3c31-ecf7-11eb-9b24-4c4b7a420f0b?token=Fp59pNrTmccEl8DzDq06uA&index=0

Would appreciate any comments on this. It isn't much - but if it looks like it's going the right direction (or not) please let me know.

I was thinking of mocking up the different front-page designs I found on the threads in a similar format.

D by duncan on 26 Jul 2021 #

Looking good. The first-draft.xyz page has graphical examples from our process. I find I often have to visit the link more than once before it opens correctly.

We need to find an easily sharable format. I didn't see any way to download in an open format, is that functionality there? Maybe penpot doesn't support that?

Some quick mockups for front pages would be great. Of course it might not be possible to implement totally as wished but is always a good exercise. Maybe also a mockup for a slide presentation and the front page of a newsletter / flier.

D by duncan on 28 Jul 2021 #

@gokermu & @JanF your input would be very welcome here. You both have important grasp of our visual identity.

A by amitlzkpa on 31 Jul 2021 # +2 votes

@duncan

Penpot Share Link

Penpot has an option to let you download the files as png/svg/pdf. Please use the URL above and have a look at the image below to try that.

The first-draft.xyz pages did not load for me after multiple attempts at refreshing in Chrome and Firefox. (I can see an error log in the console when I load the page).

I could also share the project with anyone who wants to access the editing workspace for this project on Penpot. Please let me know your email.

I would be curious to hear about your opinions about Penpot. They are an OS alternative to Figma, Adobe XD etc. and have been pretty active with us at Open Source Design. It's still in alpha so I see rough edges here and there. But I thought this was a good opportunity to try out something like that. If we feel it's not working as we need I'd be happy to switch to any other medium.

I've reorganized the file to move the colour palette, typography and the front page mockup to different "pages" within penpot.

This makes it easier for making clickable mockup. (Try clicking on 'What's New' and 'Upcoming' on the website mockup).

For using consistent icons across all media I started with material icons.

Please have a look at the links below:

The website mockup is the first light themed mockup adjusted to work with the styling discussion and new logos I found across the thread.

Planning to do the curvy masked mockups next and then move to slides, presentation etc. This has been a good way for me to learn more about the project.

Please share your thoughts :) .

J by JanF on 5 Aug 2021 # +1 votes

My first comment is that penpot doesn't work very well on phone screens ? so I'll add my comments tomorrow when I open it on a computer.

Did anyone manage to load the first draft pages? To me it seems like they fot erased for some reason.

G by gokermu on 6 Aug 2021 #

@duncan said:

@gokermu & @JanF your input would be very welcome here. You both have important grasp of our visual identity.

Just saw this. Will take a look at it asap

G by gokermu on 6 Aug 2021 #

hey @amitlzkpa ,

Thanks for sharing what you have done, great job. I would like to make a few points:

I couldn't quite warm up to the colors of our logo. If you can try different color alternatives, It would be great (if this matter has not been closed ). Because the colors of the logo will actually influence the color palette of the entire identity.
There are some problems with the proportions. Texts and icons in the header are way too big (or normal text size is small.)

There are alignment issues. Slider text and headings, normal texts do not align.

Instead of creating the entire homepage, I think you can start small. Maybe start with logo and colors. Thank you?!!

J by JanF on 6 Aug 2021, edited 6 Aug 2021 #

@gokermu said:

hey @amitlzkpa ,

....

Instead of creating the entire homepage, I think you can start small. Maybe start with logo and colors. Thank you?!!

Well he did some work on the mock-up I created. But I thought we simply dropped it when Dion made the new website and if we wanted to progress, we should propose changes to the online version at OSArch.org.

Colour Palette

The Secondary color palette doesn't match the rest. I'm not sure what the intended use is, but I would suggest:
C97754/#EBBA53/#EEDD87

Typography

I'd show just the sizes and styles we use (drop italics almost everywhere, bold only for emphasis in paragraph?)
What's the difference between body and paragraphs?

Website

see above

Assets

What is this supposed to be?

Why can't I change anything there? Do I need permission or something? Also why can't I browse the directory?

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

C97754/#EBBA53/#EEDD87