Design header and nav components to unite FEC-alpha and OpenFEC

[jenniferthibault]

Goal: Design a navigation system for the two sites that unifies the information architecture and the visual design.

[noahmanger]

I picked this up last week and here's some stuff to react to.

First things first, don't sweat the visual design too much. I wanted to take Jen's style work for a test drive, so chose to use the colors and typography instead of grayscale, but just know that I'm not suggesting this as how we style it.

Second, the language is also rough, but I'm playing with some concepts here. Personally, I like the idea of "Registration and Reporting" as the overall label for the committee filing stuff. It feels more descriptive than "Filing".

Neutral state:

• The primary nav contains the main sections of the site, with "TBD" placeholders where additional sections will go (reinforcing that this is a work in progress)
• The utility nav contains pages that are useful references, but don't fall in any particular category. Notably, this is where "Calendar" lives.
• There is no search bar. Because we do not yet have plans for a true universal search, I opted to leave it off. When you're in a section with search available (e.g. campaign finance data) it shows in the breadcrumb bar.

Campaign finance data:

• Contains links to the main landing page, the elections search page, the api docs, and all of the browse pages.
• Contains a brief description of the section on the right

Registration and reporting:

• Same concept as above
• "Registration and reporting essentials" goes to the registration options page
• Links below for the individual checklists
• "Forms and Tools" category is a new one I started thinking about, which basically is direct links to the forms and efiling tools hosted on FEC.gov. Need to do more thinking about what actually goes there, but it occurred to me that we should give people the option to go straight there instead of going through the checklists.

And example of "Active state" when you're in a section:

• Highlights the active menu item
• Shows breadcrumbs
• Contains a search input for that section (in this case, a search for the campaign finance data)

And then here's mobile:

• Traditional off-canvas menu
• Accordion-style navigation so child pages are nested below parent pages