Skip to content

~ Style Guide ~ #4

Description

@bmershon

Keep it minimal.

Current Design

The dimensions of the popup are 489 x 600 pixels. The form suggests one of those small Moleskine or Fieldnotes books.

The current design relies on one column of thumbnails that do not scroll on mouseover, but rather lift up with shadows from Material Design Lite. The space left over to the right of the thumbnails is the next area that the eye will scan, so it makes sense to present words related to the search in this space.

I've experimented with sizing words and providing text decoration based on their Inverse-Document-Frequency (i.e. rarity/specificity with respect to the database) and type (i.e., category or tag).

I'm not sure if it makes sense to softly demarcate search results based on the types of "hooks" that generated them (e.g. Title hook, See Also hook , Alias hook, Category hook, etc.). Currently, these different types are assigned weights which impact scoring on the backend and thus determine the strict ordering of results.

Style

  • Typography
  • Text for each search result.
    • Rank number (subtle)
    • Matched tags and categories
    • context focus/highlight on mouseover
  • Loading animation (currently pulses color transitions of the Article title)
  • Errors
  • Navigation buttons, links

Interactivity

  • Click a Gist and the block opens in a new window at bl.ocks.org. What if the link is dead?
    • The categories present on the article are added to the clicked gist
  • Click "More Results" button to get the next page of results. Perhaps you just scroll to the bottom of the page and that triggers search for more matches.
  • Click about tab to learn about the project.
  • No results? Click link to learn how to make a block, in case you are so inclined...
  • Error? Link to email?

Activity

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions