Tell me what you think about this styleguide!

http://styleguide-clement-sinz.webflow.io/

This is a responsive styleguide project built to improve my skills, be able to work closely with agencies or developers and in order to create more consistent brand visual identity for a web project.

Tell me if you use Webflow to create styleguides, and if you like mine!

Have a nice day!

2 Likes

Great, I love style guides!

First, a style guide is primarily use as a supermarket for grabbing logos and colors. So the menu should be always in sight.

For each section, allow users to grab the detail (click on a color to copy the code) and the collection: propose the download of the color codes in .txt, allow to copy all the codes in CSS and Hex format in a <pre> box, propose to download a universal .acl (Photoshop) palette file.

In each section, make it clear what can be grabbed and downloaded same descriptive button + side label to explain the usages.

Spend some more time to better showcase your fonts.

For everything: describe the usage, write an intro, tell stories. Show examples: what to do, what not to do.

Propose icons in various sizes as PNG, also as vector SVG, also as packs. Bonus, as IconJar (open source) packs. Generate all the colors the icons will be used with.

Cover all social usages: open graph, banners for everything fb instagram linkedin etc.

Grab the specs for everything on Adjelly: https://www.adjelly.com/size-guide

Generate things like logo animation, video intro and outro etc

I can’t share a style guide I’m working on because the project is stilll in development but here are some screeshots of some parts:

http://vincent.polenordstudio.fr/snap/b4qmq.jpg


http://vincent.polenordstudio.fr/snap/va1dq.jpg


http://vincent.polenordstudio.fr/snap/4zk02.jpg


http://vincent.polenordstudio.fr/snap/7hgvn.jpg


http://vincent.polenordstudio.fr/snap/6l35p.jpg


http://vincent.polenordstudio.fr/snap/cir2y.jpg


http://vincent.polenordstudio.fr/snap/zm02j.jpg


http://vincent.polenordstudio.fr/snap/2ljfh.jpg

And LAST BUT NOT LEAST! There’s a wonderful article I stumbled upon just yesterday about making nice and creative style guides

8 Likes

Thanks Vincent for the info and for sharing those precious tips…
This is AWESOME info and it will help me a lot in the future.
Thanks again, have a nice Chritmas and a lot of success in your future projects.

“Merci!”

3 Likes

Let’s make our style guides shine! :wink: I have planned to make one and give it away for duplication. Will work on that soon.

Thanks for the nice words.

6 Likes

Here are some style guide components i’ve made @leetch

This one displays all fonts native to Webflow: http://annas-project-guide-template.webflow.io/

and this one is a color guide i made for one of my projects: Anna's Project guide Template