网站设计指南资源

杨柳青
847 阅读5分钟
原文链接： styleguides.io

456 Website Style Guide Resources

Examples

Real life pattern libraries, code standards documents and content style guides.

  • <img src="/images/screenshots/carbon.png" />

    Carbon Design System

    By IBM

    Carbon Design System is a series of individual styles and components, that when combined make beautiful, intuitive designs.

    • frontend
    • code
    • patterns
    • voiceandtone
  • <img src="/images/screenshots/code-for-america.jpg" />

    Code For America

    • frontend
    • patterns
  • <img src="/images/screenshots/http_codepen.io_guide_.jpg" />

    Codepen's design patterns

    The design patterns used in Codepen

    • patterns
  • <img src="/images/screenshots/css-guidelines.jpg" />

    Harry Roberts's CSS Guidelines

    By Harry Roberts

    High-level advice and guidelines for writing sane, manageable, scalable CSS

    • code
  • <img src="/images/screenshots/lonely-planet.jpg" />

    Lonely Planet

    • frontend
    • patterns
  • <img src="/images/screenshots/mailchimp.jpg" />

    Mailchimp's Pattern Library

    • frontend
    • patterns
  • <img src="/images/screenshots/mailchimp-voice-and-tone.png" />

    Mailchimp's Voice and Tone

    By Mailchimp

    • voiceandtone
    • writing
    • designlanguage
  • <img src="/images/screenshots/mapbox.png" />

    Mapbox

    An extensive guide featuring HTML and CSS patterns, a writing guide, and tutorials for implementation.

    • frontend
    • code
    • writing
    • patterns
  • <img src="/images/screenshots/http_www.yellowshoe.com.au_standards_.jpg" />

    Mark Brown's Standards Guidelines

    By Mark Brown

    To aid a shared understanding of front-end development best practice at PUP.

    • code
    • frontend
  • <img src="/images/screenshots/quattromani.jpg" />

    Max Quattromani

    • frontend
    • patterns
  • <img src="/images/screenshots/salesforce.jpg" />

    Salesforce

    • designlanguage
    • frontend
    • patterns
  • <img src="/images/screenshots/css-tricks.jpg" />

    Sass Style Guide

    By Chris Coyier

    Chris Coyier’s personal style guide for writing Sass

    • code
    • frontend
  • <img src="/images/screenshots/south-tees.jpg" />

    South Tees Hospital

    A style guide for an NHS hospital’s website

    • frontend
    • patterns
  • <img src="/images/screenshots/starbucks.jpg" />

    Starbucks

    • frontend
    • patterns
  • <img src="/images/screenshots/us-design-standards.png" />

    U.S. Design Standards

    Open source UI components and visual style guide to create consistency and beautiful user experiences across U.S. federal government websites

    • frontend
    • patterns
    • code
  • <img src="/images/screenshots/yelp.jpg" />

    Yelp

    • frontend
    • patterns
See all 184 examples…

Articles

Things people have written about style guides.

See all 108 articles…

Books

Books written about style guides.

  • A Pattern Language - Towns, Buildings, Construction

    By Christopher Alexander, Sara Ishikawa, Murray Silverstein, Max Jacobson, Ingrid Fiksdahl-King, Shlomo Angel

    A Pattern Language helps lay the basis for an entirely new approach to architecture, building and planning, which will we hope replace existing ideas and practices entirely.

  • Atomic Design

    By Brad Frost

    Atomic Design details all that goes into creating and maintaining robust design systems, allowing you to roll out higher quality, more consistent UIs faster than ever before. This book introduces a methodology for thinking of our UIs as thoughtful hierarchies, discusses the qualities of effective pattern libraries, and showcases techniques to transform your team’s design and development workflow.

  • Design Patterns - Elements of Reusable Object-Oriented Software

    By Erich Gamma, Richard Helm, Ralph Johnson, John Vlissides

    Capturing a wealth of experience about the design of object-oriented software, four top-notch designers present a catalog of simple and succinct solutions to commonly occurring design problems.

  • Designing Interfaces

    By Jenifer Tidwell

    By capturing UI best practices and reusable ideas as design patterns, Designing Interfaces provides solutions to common design problems that you can tailor to the situation at hand.

  • Front-End Style Guides

    By Anna Debenham

    Learn how to create comprehensive style guides for the web, whether you’re starting from scratch or assembling one for an existing site.

  • Frontend Architecture for Design Systems - A Modern Blueprint for Scalable and Sustainable Websites

    By Micah Godbolt

    This book takes experienced web developers through the new discipline of frontend architecture, including the latest tools, standards, and best practices that have elevated frontend web development to an entirely new level.

  • Mobile Design Pattern Gallery, 2nd Edition

    By Theresa Neil

    This handy reference provides more than 90 mobile app design patterns, illustrated by 1,000 screenshots from current Android, iOS, and Windows Phone apps.

  • Web Anatomy - Interaction Design Frameworks that Work

    By Robert Hoekman Jr., Jared Spool

    Web Anatomy delivers a complete guide to using interaction design frameworks, an examination of the psychology behind major frameworks, and a thorough look at how frameworks will change the way you work for the better.

See all 13 books…

Podcasts

Episodes from various podcasts where style guides are discussed.

  • Design process with Samantha Warren

    Big changes in web technology are forcing us all to look at what many have been saying for a while — the web design workflow that was enshrined over the last decade really doesn’t work. The creator of Style Tiles, Samantha Warren, joins Jen Simmons to talk about workflows, design processes, and how new ideas about our tools can help us all better design websites for the modern age.

  • Jeremy Keith on Everything Web

    Jeremy Keith joins Jen to talk about Mobilewood, future-friendlying websites, responsive design techniques, digital preservation, html5 semantics, Firefox 7, and much more.

  • Modular Design

    Ethan and Karen explain how a modular design process that puts content modeling and design patterns first will help you.

  • Starbucks

    Starbucks considers mobile to be the first customer touchpoint. Lincoln Mongillo tells us why managing for “one web” forces them to focus on what’s important, and puts performance, accessibility, and security at the center of their design process.

    • responsive

  • Successful Product Design, pt. 4 - Atomic Design with Brad Frost

    Brad discusses Atomic Design, designing systems, Pattern Lab, style guides, and why these are good practices.

See all 11 podcasts…

Talks

Conference presentations about style guides.

  • <img src="/images/screenshots/future-friendly-styleguides.jpg" />

    Future Friendly Style Guides

    By Luke Brooker at Web Directions

    How style guides can help in a responsive design workflow.

  • <img src="/images/screenshots/style-guides-are-the-new-photoshop.jpg" />

    Style Guides Are The New Photoshop

    By Stephen Hay at Fronteers 2012

    Use of image editors for creating web design mockups has worked until now, but responsive design is forcing us to find alternatives, as we can’t simply create more mockups as we design for more screens… Let’s take a look at one of the most important aspects of this method: the creation of clear, semi-automated, self-updating style guides.

  • <img src="/images/screenshots/styleguide-driven-development.gif" />

    Styleguide Driven Development

    By Matt Fordham at Seattle Interactive Conference 2014

See all 35 talks…

Tools

Things to help you make your own style guide.

  • Barebones

    By Paul Robert Lloyd

    An initial directory setup, style guide and pattern primer

    • PHP

  • Bootstrap

    By Twitter

    Sleek, intuitive, and powerful front-end framework for faster and easier web development.

    • HTML
    • CSS
  • <img src="/images/screenshots/foundation.png" />

    Foundation

    By ZURB

    Front-end framework created for developing fully responsive web apps.

  • KSS

    By Kyle Neath

    Structured documentation for (pre-processed) CSS with generated live style guides

  • KSS-node

    By kss-node

    A Node.js implementation of Knyle Style Sheets (KSS), “a documentation syntax for CSS”.

  • <img src="/images/screenshots/patternlab.png" />

    Pattern Lab

    By Brad Frost and Dave Olsen

    Create atomic design systems

  • <img src="/images/screenshots/snack.jpg" />

    Snack

    By Snack

    Library to give the ‘kick-off’ on a web project with Style Guide option included.

  • Style Prototypes

    By Sam Richard

    Tool for creating pattern libraries and atomic design systems

  • Style Tiles

    By Samantha Warren

    Style Tiles are a design deliverable consisting of fonts, colors and interface elements that communicate the essence of a visual brand for the web.

  • Web Fundamentals

    By Google

    A comprehensive resource for multi-device web development.

  • <img src="/images/screenshots/web-starter-kit.png" />

    Web Starter Kit

    By Google

    Google’s Web Starter Kit includes an HTTP server, responsive boilerplate, live reloading, and a component style guide.

See all 105 tools…

Contributors

Resources on this site have been added by the following contributers:

    View on GitHub

    Add
    avatar
    文章
    阅读
    粉丝