New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Visually develop the projects character #542

Closed
equivalentideas opened this Issue Sep 23, 2014 · 10 comments

Comments

Projects
None yet
2 participants
@equivalentideas
Member

equivalentideas commented Sep 23, 2014

Drawing on our design principles, how is the project’s character to be visually represented?

@equivalentideas equivalentideas self-assigned this Sep 23, 2014

@equivalentideas

This comment has been minimized.

Show comment
Hide comment
@equivalentideas

equivalentideas Sep 23, 2014

Member

See voice and tone document:

The voice of this project is:

  • clear and inclusive
  • respectful but not boring
  • friendly but not assuming
  • simple but not patronising
  • accurate but not academic and jargony
Member

equivalentideas commented Sep 23, 2014

See voice and tone document:

The voice of this project is:

  • clear and inclusive
  • respectful but not boring
  • friendly but not assuming
  • simple but not patronising
  • accurate but not academic and jargony
@equivalentideas

This comment has been minimized.

Show comment
Hide comment
@equivalentideas

equivalentideas Sep 23, 2014

Member

Who is the parliamentary vote tracker?

  • distinctly non-government & not corporate
  • respectfully informative, not crowding you with "vibe". The positive experience of the design comes from it’s usefulness
  • striving for clarity and accessibility
  • It has a human voice 😄 rather than a computer voice 💻 👋 . It's pleasant, but not a joker.
Member

equivalentideas commented Sep 23, 2014

Who is the parliamentary vote tracker?

  • distinctly non-government & not corporate
  • respectfully informative, not crowding you with "vibe". The positive experience of the design comes from it’s usefulness
  • striving for clarity and accessibility
  • It has a human voice 😄 rather than a computer voice 💻 👋 . It's pleasant, but not a joker.
@equivalentideas

This comment has been minimized.

Show comment
Hide comment
@equivalentideas

This comment has been minimized.

Show comment
Hide comment
@equivalentideas

equivalentideas Sep 24, 2014

Member

Now jamming colour concepts from this.

Overall the system feels spacious, comfortable, light and friendly. The interface is not dominated by colour but a bold, spot colour identifies navigation and sets the project apart from government and corporate websites.

We use solid blocks of colour without gradients or other artificial shine used in government design.

Member

equivalentideas commented Sep 24, 2014

Now jamming colour concepts from this.

Overall the system feels spacious, comfortable, light and friendly. The interface is not dominated by colour but a bold, spot colour identifies navigation and sets the project apart from government and corporate websites.

We use solid blocks of colour without gradients or other artificial shine used in government design.

@equivalentideas

This comment has been minimized.

Show comment
Hide comment
@equivalentideas

equivalentideas Sep 24, 2014

Member

Typefaces:

The project is clear, precise and humanist; the typeface and typesetting reflects this. A humanist sans-serif, set with comfortable line-lengths and spacing sets it apart from densely-set government and corporate tools. Unambiguous hierarchy in weight and scale give structure to the interface.

I'm looking at three options Open Sans, Source Sans Pro and Fira Sans (all very nice and open source, free to download and use). They each have a different vibe:

  • Open Sans is the roundest and widest, the most 'open' and spacious
  • Fira Sans has a lot of character, readability, but the overall design needs to be softened to work it. Its quite different from
  • Source Sans Pro is more compact which helps our long titles and tables.

Much of the character and readability achieved in typography comes through how the typeface is used, rather than the character of the typeface itself. At the moment it's a choice to sit with as we do the actual typesetting. We can then move between them later on and make the necessary adjustments.

I think the most obvious choice is Open Sans and the least obvious is Fira Sans—which makes me think to use Fira Sans for now, do some typesetting and see where that takes us. That's iterative typesetting for you :)

Here’s a few screen shots, not that the typesetting weights and colours would need to be adjusted for each:

Fira Sans
screen shot 2014-09-25 at 7 11 46 am

Source Sans
screen shot 2014-09-25 at 7 11 00 am

Open Sans
screen shot 2014-09-25 at 7 09 49 am

Open Sans
screen shot 2014-09-25 at 7 10 17 am

Source Sans
screen shot 2014-09-25 at 7 37 48 am

Fira Sans
screen shot 2014-09-25 at 7 11 39 am

Member

equivalentideas commented Sep 24, 2014

Typefaces:

The project is clear, precise and humanist; the typeface and typesetting reflects this. A humanist sans-serif, set with comfortable line-lengths and spacing sets it apart from densely-set government and corporate tools. Unambiguous hierarchy in weight and scale give structure to the interface.

I'm looking at three options Open Sans, Source Sans Pro and Fira Sans (all very nice and open source, free to download and use). They each have a different vibe:

  • Open Sans is the roundest and widest, the most 'open' and spacious
  • Fira Sans has a lot of character, readability, but the overall design needs to be softened to work it. Its quite different from
  • Source Sans Pro is more compact which helps our long titles and tables.

Much of the character and readability achieved in typography comes through how the typeface is used, rather than the character of the typeface itself. At the moment it's a choice to sit with as we do the actual typesetting. We can then move between them later on and make the necessary adjustments.

I think the most obvious choice is Open Sans and the least obvious is Fira Sans—which makes me think to use Fira Sans for now, do some typesetting and see where that takes us. That's iterative typesetting for you :)

Here’s a few screen shots, not that the typesetting weights and colours would need to be adjusted for each:

Fira Sans
screen shot 2014-09-25 at 7 11 46 am

Source Sans
screen shot 2014-09-25 at 7 11 00 am

Open Sans
screen shot 2014-09-25 at 7 09 49 am

Open Sans
screen shot 2014-09-25 at 7 10 17 am

Source Sans
screen shot 2014-09-25 at 7 37 48 am

Fira Sans
screen shot 2014-09-25 at 7 11 39 am

@equivalentideas

This comment has been minimized.

Show comment
Hide comment
@equivalentideas

equivalentideas Sep 25, 2014

Member

Decided to roll with Fira sans for now through typesetting process. Will be interesting to see where this leads. #556

Member

equivalentideas commented Sep 25, 2014

Decided to roll with Fira sans for now through typesetting process. Will be interesting to see where this leads. #556

@equivalentideas

This comment has been minimized.

Show comment
Hide comment
@equivalentideas

equivalentideas Sep 25, 2014

Member

Started looking at Clear Sans (see review) as well as an interesting option. It's nice, but our citizens will be reading paragraphs of text more than reading lots of data and I think it's a bit geometric for our purposes.

So many great open source typefaces.

Member

equivalentideas commented Sep 25, 2014

Started looking at Clear Sans (see review) as well as an interesting option. It's nice, but our citizens will be reading paragraphs of text more than reading lots of data and I think it's a bit geometric for our purposes.

So many great open source typefaces.

@equivalentideas

This comment has been minimized.

Show comment
Hide comment
@equivalentideas

equivalentideas Sep 25, 2014

Member

moving this back to ready and going to work on different components for a while.

Member

equivalentideas commented Sep 25, 2014

moving this back to ready and going to work on different components for a while.

@equivalentideas equivalentideas added ready and removed in progress labels Sep 25, 2014

@mlandauer mlandauer added this to the Launch milestone Oct 3, 2014

@mlandauer

This comment has been minimized.

Show comment
Hide comment
@mlandauer

mlandauer Oct 4, 2014

Member

I'm closing this ticket as the ground work for this has been done. Anything to do with the visual character after this should be specific tickets for specific bits of work

Member

mlandauer commented Oct 4, 2014

I'm closing this ticket as the ground work for this has been done. Anything to do with the visual character after this should be specific tickets for specific bits of work

@mlandauer mlandauer closed this Oct 4, 2014

@mlandauer mlandauer removed the ready label Oct 4, 2014

@mlandauer mlandauer reopened this Oct 4, 2014

@mlandauer mlandauer added the todo label Oct 4, 2014

@equivalentideas

This comment has been minimized.

Show comment
Hide comment
@equivalentideas

equivalentideas Oct 5, 2014

Member

I'm re-closing this as I agree:

Anything to do with the visual character after this should be specific tickets for specific bits of work

Member

equivalentideas commented Oct 5, 2014

I'm re-closing this as I agree:

Anything to do with the visual character after this should be specific tickets for specific bits of work

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment