18f / visual-design

Resources, assets, and discussion focused on visual design issues.

18F Visual Design

Resources, assets, and discussion focused on visual design issues.

This is a non-code repository. We use the wiki to gather common resources and assets that makes it easier to onboard new team members, and faster to respond to common questions from others.

visual-design's Issues

Build off of USWDS

How might we contribute to USWDS or use them as a jumping off point for 18F's design repo?

Visual design patterns and principles

Partner with Outreach

Work with Elaine to help gather designed materials and conduct a brand audit. Identify potential opportunities for collaboration around templates.

Guide for documenting / getting approval for projects

Here's a template for what should be described before starting a story:

• Description
• User needs this meets
• Team needs this meets
• Support needed
• Dependencies
• Next steps
• We can close this issue when...
• Identify collaborators

Update google slide template

• Review in the visual design huddle

• Review for accessibility (contrast)

• Assess need for logo

• Simplify slides that are common problems for non-designers

• Do we need to add any new slides? Are people creating things from scratch

• Add best practices on a master

• Save a copy when you start for the archives and save over the master

Provide guidance on usage of photos and icons

• Include a quick guide to attributions on design wiki

Other CC or public domain image resources

We recently had a discussion around sharing additional non-gov photo resources in addition to our government photography page.

Questions to answer:

• Are there other CC or public domain image resources we should include in our photo resources?

• Where should this (and other photo resources) live? As a separate page in this repo?

18F Business Development Materials

Visual asset library

A central listing and/or file structure for anyone to find visual assets (logos, icons, colors, fonts, etc...).

Such as this scenario - https://gsa-tts.slack.com/archives/visual-design/p1486134677000277

Similar to #11 but geared more towards "external" individuals and can possibly drive parts of the slackbot - #6

Develop 18F design principles (_visual_ design principles?)

Design principles are useful for team and project alignment.

For example, here are general design principles from gov.uk: https://www.gov.uk/design-principles
Guidance on design principles from 18F: https://pages.18f.gov/design-principles-guide/

Are there general design principles that we can and should have as an organization?
How do those principles intersect with any of 18F's other stated principles?

18F's code of conduct: https://github.com/18F/code-of-conduct/blob/master/code-of-conduct.md

Visual design resources wiki

Increase awareness of visual design project work

• Partner with another discipline to write a project recap or lesson learned blog post or internal design presentation.
• Post-mortem design brief. What went well / what didn’t. (Maybe a blog of findings?)
• Host an 18F design wide show and tell

Visual design capabilities materials

Documentation that describes what visual designers do in different phases of projects. This will aide in staffing and a broader understanding of the type of skills visual designers bring to project teams.

Here are examples started by the Front end designers:

https://docs.google.com/document/d/1E-SPOYfLEv0waaBkeWQ0SxcXWPUb7Cki7JnGuIefJd0/edit

https://docs.google.com/document/d/1fMCjMtJ-wutTlE1eFVeyLeRKqv911PN-3UhN2bhKFWM/edit#heading=h.reyo699f5i9g

Here is a link to the design wide capabilities deck:

https://docs.google.com/presentation/d/1aOeq5SsLSMhskchlJRtSLQ28OcIzAQgkanyDZy7bPiU/edit

18F Pattern Library

Create an easy to use 18F pattern library.

So that visual design team members can get set up with common practices and rituals faster, create an onboarding checklist

Create a list of important things to know about related to the visual design team on the wiki.

So that designers have shared documentation, start a visual design wiki in this repo

What should go in it?

So that visual designers can easily find possible image resources, compile a list on the wiki

Create a list for stock photography resources on the wiki.

So that 18F team members can ask for & receive visual design help in a structured way, establish visual design lab

Visual design lab where people file requests as issues, and vizdees pick them up as interest/time allows, no expectation of completion.

To make the best use of our team's time together, experiment & gather ideas for new huddle formats

Use our huddles as a time for inspiration–show & tell, guests, cross discipline collaboration success, etc.

• Invite collaborators from other teams to present about project work with us.
• Select various visual-specific discussion topics for our huddles, eg “How would you visually interpret this data problem i’m struggling with?”
• Nominate each other to present something we’re interested in learning that you know they’re good at. (easier to nominate others than think of what you have to offer?)

Create google doc template based on 18F branding

So that designers can share best practices, make a running list of helpful Sketch plugins

Description

We all use Sketch. We all like working better and faster. Create a common, accessible list of Sketch plugins in the wiki, along with a link to the plugin and a reason to use it.

User needs this meets

• Any Sketch user looking to work better and faster.
• Any Sketch user interested in Sketch best practices

Team needs this meets

Helps us share best practices and reduce inefficiency.

Support needed

Input from team Sketch users

Dependencies

Nope.

Next steps

• search through the slack channels for plugin posts
• ask the visual designers and other Sketch users
• create a page in the visual design wiki

We can close this issue when...

• there's a Sketch plugin resources page in the wiki
• each plugin listed is linked and has a statement of utility
• we've communicated this page to our Sketch users
• we've communicated the ongoing needs of this wiki page to our Sketch users
• we establish keeping this page current as a visual design priority

Issue collaborators

none

Administrative use only

• Approved!

So that 18F folks who need visual design help learn about how to find it, create Slackbot response

• Agree on an ideal process for documenting, deciding on, and agreeing to visual design work
• Write a simple response to requests for visual design help
• Create a slackbot response for requests for 18F templates or branding site

Add books/websites to visual design resources wiki

Create a way for designers to share common design assets

Create a visual design repo that contains components that can be reused.

Document 18F brand principles

Collaborators:
@amberwreed
@ericronne

• Gather opinions on how to documenting 18F brand principles

Feedback on 18Franklin typeface: how can it be useful to folks?

Visual design team collaboration

Visual design standards

Visual design at 18F presentation

Create a template for talking about our work as visual designers at 18F to share.

Sign up to work with GDS UK on International design best practices

more info here: https://designnotes.blog.gov.uk/2017/02/02/building-an-international-group-of-government-designers/

Include guidance for accessibility in the 18F Google slides template

@amberwreed

slide deck here:

https://docs.google.com/a/gsa.gov/presentation/d/1o0xr3Qx0Y7NG84VwZI1LOF4rKrWRPQsSrj_MD46uiw0/edit?usp=sharing

To ensure that materials reflect our brand and visual design best practices, learn what biz dev materials would be useful to make

Work with 18F Biz Development to assist with biz dev materials and ensure that materials reflect our brand and visual design best practices.

Federalist / USWDS?

Work with federalist team and WDS team to create templates that are in line with the recommendations of the WDS.

Document desgin

Assist content team to review and design hiring documents. Contact Nicole Fenton to help out.

Visual design community liason

How might we be more engaged with the visual design community outside of 18F?
Ideas:

• Set team expectation for outside 18F events attended/participation
• Liaison to keep team aware of external visual design events
• Team meet-up at an event

508 tool design feedback

Issue #26 itemizes many to dos which stand between a fully Official release of this WIP accessibility tool (@toolness's side/passion project), but i'm opening this issue to capture general comments, concerns, questions, etc.

Do you think something like this would be useful to you?
If so, how do you see it fitting into your workflow?
What might you do differently?
What's missing?

Check out the invision prototype of proposed design changes. But please note that as a "side project," we can't guarantee this will progress any further atm :/
Thx!

Invision prototype

Create blog graphics to help with state and city biz dev

Nikki Lee and Jordan would like 2-3 hours of non-billable time to create a flow chart or diagram to accompany a blog post.

Work with Atul to move accessibility color picker forward

Opportunity to advance functionality of a very useful tool for visual design in the accessibility world.

• Meet with Atul to understand the his availability & if this is an 18F tool
• Develop prioritized list of tasks to be take on
• Better understand goals and objective from the Accessibility Guild

Draft response email for requests to visual design templates

Have a response ready for requesters of 18F visual design templates. Direct them to the visual identity site.

Link to Picons on design wiki

Visual design supervisor checklist

Create a checklist for future visual design supervisors in order to better understand the daily, weekly, and occasional responsibilities of the role. Determine the best location for this checklist.

18F Brand

So that 18F designers better understand how to collaborate, coordinate with 18F Outreach

• Schedule a meeting with 18F Outreach to better understand priorities and goals for 18F visual communication
• Improve communication channels between 18F Outreach and 18F Branding initative

So that visual designers can collaborate and critique more frequently, organize visual design working sessions

Alternate visual design huddle with visual design “working session”.

Try to understand Github projects

How might we use Github projects, columns, and Trello functionality in our repo?