From a3dbc246e5a57db60b39664dd3229e9a0c404ac1 Mon Sep 17 00:00:00 2001 From: Peter Frank Date: Fri, 24 Aug 2018 12:39:18 -0700 Subject: [PATCH] Add design guidelines to docs (#422) * Add design guidelines to docs Design inspiration, notes, and acknowledgments * Update design guideline wording --- docs/design-guidelines.md | 23 +++++++++++++++++++++++ docs/readme.md | 2 ++ 2 files changed, 25 insertions(+) create mode 100644 docs/design-guidelines.md diff --git a/docs/design-guidelines.md b/docs/design-guidelines.md new file mode 100644 index 000000000..83f315ed4 --- /dev/null +++ b/docs/design-guidelines.md @@ -0,0 +1,23 @@ +## High Level Design/Brand + +DEV's design inspiration is meant to be a throwback. In personality and design it is ATARI inspired. Magazines like PAPER are also an inspiration in terms of being a [bold contrast with some more indy](https://www.google.com/search?biw=1440&bih=780&tbm=isch&sa=1&ei=KSN8W5WVLoy55gLI77TgBA&q=paper+magazine+cover&oq=paper+magazine+cover). + +We also think in terms of how people use the DEV brand for their own purposes. Profiles are very much public-facing records of what people have put out into the world. `dev.to/{username}` is your dev identity. + +Imagine a developer’s face with the DEV heading above them. If we existed in the 80’s we would be DEV MAGAZINE, with the exact same branding. + +## Misc Notes + +- [Joystick](http://www.pixelsagas.com/?download=joystick) should be used for logos, not for headlines/phrases +- Black and white is our default logo but the logo can be drawn in any color +- DEV is "old school cool" +- We use bold shadows (no gradient) for boxes +- We have a minimal approach to importing dependencies, so few if any custom fonts on-site for that reason. +- Refer to the `variables.css` [file in our main repo](https://github.com/thepracticaldev/dev.to/blob/master/app/assets/stylesheets/variables.scss) to reference commonly-used colors and fonts. + +## Acknowledgments +- We use the [Joystick](http://www.pixelsagas.com/?download=joystick) font by Neale Davidson and [Pixel Sagas](http://www.pixelsagas.com/) for the DEV Logo. We have a commercial license. +- Thank you to [EmojiOne](https://www.emojione.com/) for providing free emoji icons + +## TODO +We do not currently have a specific design guideline, but we will put this together over time. It may be easier to contribute new features once we develop a stricter guide. diff --git a/docs/readme.md b/docs/readme.md index 19af55deb..7c1b96e95 100644 --- a/docs/readme.md +++ b/docs/readme.md @@ -20,6 +20,8 @@ items: title: Installation Guide - path: liquid-tags.md title: Liquid Tags + - path: design-guidelines.md + title: Design Guidelines - path: vocabulary.md title: Vocabulary ---