OSArch Community

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

  1. A by amitlzkpa on 10 Aug 2021, edited 10 Aug 2021 #

    Some thoughts and replies:

    Colours

    I was referring to the first post on this thread where a colour scheme was put forth. The new colour scheme also looks very promising. Before exploring more options for those I wanted to check if there are there any guidelines on what basis the schemes are determined/preferred?

    Logo

    Logo seems to have been decided on this thread by vote. I think @gokermu is right in suggesting we fix the logo first before picking a color scheme. In some cases I've also worked with logos which don't have a fixed colour scheme but designed to be flexible to be adapted in different ways. I don't suppose we are trying to do something like that here.

    Font

    I agree on the apparent dissonance with font sizing. Thanks for pointing that out. I'll rework that. I read Lato and Open Sans being picked as the final fonts for the typography scheme. Please let me know if that is final or that is also being considered to be changed.

    Grids and Alignment for Main Page

    These were the gridlines and offsets/buffers I was trying to align to. The letters are indicative for responsive sizing.

    The alignment guides line up to the containers which hold text instead of the text themselves. (I believe for things like "What's New" and "Upcoming" the text would be dynamic which won't be suitable for alignment anchors).

    For offsets and sizing I was trying to be in multiples of 20px depending on the size of the content it is used around.

    Hopefully rules/guidelines like these would be reusable across templates and formats for other media as well (slides, flyers etc.)

    Text and linebreaks

    With text I believe it's important to have an idea of maximum number of words in a line. This depends on the font size and spacing around, but loosely speaking with large sized text (like the tagline above) it's good around to have a maximum of 6-10 words and physical width of 6-8".

    With more dense paragraph like text it's good with max of 10-15 words in a line and 3-4" wide.

    There are outliers for this, but few enough that they can be considered special cases. It might break symmetry at some places, but that is what we get for LTR writing systems I guess. Would like to hear your thoughts.

    @JanF

    Here's the page with sizes and styles. Same as the one above for Typography. Is that what you meant?

    Assets are the repeated graphic elements we might use. (eg: icons for social media, directional arrows, menu icons, icons for arch software like Revit or Rhino or something, any custom icon we design etc.) Main purpose is to avoid having to lookup which icons or assets to use when creating new content based on this system. Also nice to use the same visual elements for consistency.

    While we don't have to use all text styles on the website, if we are talking about a general design system I think it's worth it to have font-decoration (bolds, italics etc) be part of it. They might be usable in other contexts and if/when we use it there, it'd still be consistent with the overall visual identity.

    Can you DM your email address and I can add you as a collaborator to be able to edit.

    Thank you both for the comments and replies :) !

    What do you think might be a good next step? I'm still getting familiar with things but much better than before.

  2. D by duncan on 12 Aug 2021 #

    I'd like to add some thoughts. I'm not a graphic or website designer.

    I don't feel like what we need is to get deep into the details of pixel placement of blocks of text, columns etc. I feel like what we need is some quick mockups of how a design scheme can work in many different situations: homepage, wiki, forum, brochure, presentations, documentation and so on.

    Colours (nice to be using the queens spelling again for a moment)

    I'd be interested to see how some more colours could be used.

    Logo

    @amitlzkpa it is correct that the logo is fixed. There is however a little room to move

    1. the shade of red color of the logo seems to have broad support, so I don't see that changing

    2. the use of color(s) in the logo i maybe a discussion, like foreground / background, dark / light background. The only two options that I think work are black on white or red on white. (We tried red on black and it looks super cool. but it also looks like an anarchy symbol)

    My personal take is that a logo has a color and that color is one of the main colors in the theme. I also feel that the linework of our logo is so thin that we need to control the background color. In the post before this the eye is absolutely drawn to the "OS" next to the logo. That's a problem, The logo should be at least as eye catching as the text. I think we need to keep a white background for that to be possible.

    Font

    I've not heard any objections to Lato, although isn't there a problem that it's not installed on most systems? Currently for the webpage I believe we are relying on some google magic to fix this. But for presentations we send to people ...

    Great work happening here!

  3. A by amitlzkpa on 6 Sep 2021 # +1 votes

    Thanks for the input.

    I am working on a draft to bring the colours, fonts and other elements in the same view to try out how they feel.

    It's been a busy few weeks and will post the update soon. Thanks!

  4. D by duncan on 26 Nov 2022, edited 7 Dec 2022 # +5 votes

    I've been meaning for ages to make a presentation template. Please take a look at the attached LibreOffice Impress 'template' and let me know what you think.

    First slide:

    Template slide:

    Closing slide:

    Edit: deleted the old attachment

  5. T by theoryshaw on 26 Nov 2022 #
  6. D by duncan on 26 Nov 2022 #

    Perfect @theoryshaw , thanks.

    I'm a bit unsure about that Lato Thin. It's nice, but probably not easy to read from a projector on a screen at a distance. I'm thinking lecture halls & conference centres.

  7. A by Ace on 28 Nov 2022 #

    @duncan said:

    Perfect @theoryshaw , thanks.

    I'm a bit unsure about that Lato Thin. It's nice, but probably not easy to read from a projector on a screen at a distance. I'm thinking lecture halls & conference centres.

    It was the first thing I thought when I saw it, is there a bold version @duncan ? You are on the money it will be hard to read, everything else is great though!

  8. D by duncan on 6 Dec 2022, edited 7 Dec 2022 # +4 votes

    @Ace @theoryshaw here's Lato Light instead of Lato Thin. Better right? But good enough? We have a large projector over at the dining hall. I'll try and test it some time.

    The template now has some more styles and the earlier defined accent colors. There is also a master slide, I've been meaning for years to learn how they work.

    Edit: deleted the old attachment

  9. A by Ace on 7 Dec 2022 #

    Looking good @duncan way more legible

  10. D by duncan on 7 Dec 2022 # +2 votes

    small improvements. i've also renamed this to make clear it is for screen use. next template is for print.

  11. T by theoryshaw on 7 Dec 2022 # +2 votes
  12. D by duncan on 10 Dec 2022 #

    Love your input here @JanF do those accent colors make sense from your earlier post?

  1. Page 1
  2. 2
  3. 3

Login or Register to reply.