Skip to content
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
Closed

Visually develop the projects character #542

equivalentideas opened this issue Sep 23, 2014 · 10 comments
Assignees
Labels
Milestone

Comments

@equivalentideas
Copy link
Collaborator

@equivalentideas 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
Copy link
Collaborator Author

@equivalentideas 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
Copy link
Collaborator Author

@equivalentideas 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
Copy link
Collaborator Author

@equivalentideas equivalentideas commented Sep 24, 2014

@equivalentideas
Copy link
Collaborator Author

@equivalentideas 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
Copy link
Collaborator Author

@equivalentideas 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
Copy link
Collaborator Author

@equivalentideas 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
Copy link
Collaborator Author

@equivalentideas 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
Copy link
Collaborator Author

@equivalentideas 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
Copy link
Member

@mlandauer 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
Copy link
Collaborator Author

@equivalentideas 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
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
2 participants
You can’t perform that action at this time.