Style Guide by Meghan McPolin https://padlet.com/meghan_mcpolin02347/205kk7l2d5gu en-us 2017-10-10 18:27:59 UTC 2017-10-10 19:24:39 UTC hello@padlet.com What is a Style Guide? meghan_mcpolin02347 https://padlet.com/meghan_mcpolin02347/205kk7l2d5gu/wish/195766819 A Style Guide is a collection of pre-designed elements, graphics, and rules that designers should follow to make sure that the website pieces will be consistent and with create a solid experience.

]]> 2017-10-10 18:31:36 UTC https://padlet.com/meghan_mcpolin02347/205kk7l2d5gu/wish/195766819 Why is it important? meghan_mcpolin02347 https://padlet.com/meghan_mcpolin02347/205kk7l2d5gu/wish/195768643
  • Ensure that designers don’t interpret too much and don’t alter or adjust styles based on personal preference
  • Provides an easy guide to refer to when handing over the project
  • Makes websites look professional and everything is done for a reason
  • Helps maintain control of the design
  • Makes it easy for designers to reuse elements and codes
  • Includes all possible interactions on a webpage
  • Avoids cheapening the design

    • ]]>     2017-10-10 18:35:12 UTC https://padlet.com/meghan_mcpolin02347/205kk7l2d5gu/wish/195768643     How to create a Web Design Style Guide? meghan_mcpolin02347 https://padlet.com/meghan_mcpolin02347/205kk7l2d5gu/wish/195771736
  •  Study the Brand
  • Define Typography
  • Color Palette
  • Voice
  • Iconography
  • Imagery
  • Forms
  • Buttons
  • Spacing
  • Logos
  • Fonts
  • Layouts & Grids
    • ]]>     2017-10-10 18:41:40 UTC https://padlet.com/meghan_mcpolin02347/205kk7l2d5gu/wish/195771736     Study the Brand meghan_mcpolin02347 https://padlet.com/meghan_mcpolin02347/205kk7l2d5gu/wish/195775087 Designers need to study the brand to understand what it stands for and to understand the story behind it. It is important to observe the team and figure out the vision, mission, and values of the company. The style guide produced must visually and emotionally represent the organization. Designers that can’t code should open Photoshop and give the document a title and a short description of what the document is for. Designers that can code should create a html document with pre-coded assets that can be reused.  

    ]]>     2017-10-10 18:48:21 UTC https://padlet.com/meghan_mcpolin02347/205kk7l2d5gu/wish/195775087     Define Typography meghan_mcpolin02347 https://padlet.com/meghan_mcpolin02347/205kk7l2d5gu/wish/195776939 Typography is 95% of web design. Designers must have an accurate typography because it is one of the most important communication tools between visitors and the website. The hierarchy needs to be set and identified. 

    ]]>     2017-10-10 18:52:26 UTC https://padlet.com/meghan_mcpolin02347/205kk7l2d5gu/wish/195776939     Color Palette meghan_mcpolin02347 https://padlet.com/meghan_mcpolin02347/205kk7l2d5gu/wish/195778351 Designers should begin by setting primary colors from the style guide that will dominate the website. Dominant colors should have a max of three shades. Sometimes, there needs to be secondary and tertiary colors to illustrate the user interfaced. It is important to include neutral colors like white, grey, and black for the primary brand colors to stand out. 

    ]]>     2017-10-10 18:55:29 UTC https://padlet.com/meghan_mcpolin02347/205kk7l2d5gu/wish/195778351     Voice meghan_mcpolin02347 https://padlet.com/meghan_mcpolin02347/205kk7l2d5gu/wish/195779496 Voice is referred to an actual copy. If there are no directions for the voice of the copy, it needs to be defined. Defining the tone is a great way to keep a brand consistent. 

    ]]>     2017-10-10 18:58:13 UTC https://padlet.com/meghan_mcpolin02347/205kk7l2d5gu/wish/195779496     Iconography meghan_mcpolin02347 https://padlet.com/meghan_mcpolin02347/205kk7l2d5gu/wish/195783478 It is important to take advantage of using icons in projects because they will give an instant idea to visitors as to what is going on and what will happen. The right icons with give more context to content than color palettes. Designers should make sure to think about their target audience, religion, and history to avoid misconceptions and misunderstandings. 

    ]]>     2017-10-10 19:07:56 UTC https://padlet.com/meghan_mcpolin02347/205kk7l2d5gu/wish/195783478     Imagery meghan_mcpolin02347 https://padlet.com/meghan_mcpolin02347/205kk7l2d5gu/wish/195785139 The imagery should define the style and direction of pictures the website should use. Designers should establish a tone in their photographs and images. The values of the brand and mission should match of with the imagery. 

    ]]>     2017-10-10 19:11:46 UTC https://padlet.com/meghan_mcpolin02347/205kk7l2d5gu/wish/195785139     Forms meghan_mcpolin02347 https://padlet.com/meghan_mcpolin02347/205kk7l2d5gu/wish/195786208 Forms make the website interactive and dynamic so the user can enter the data and the designer can manipulate it and do the work. It is important to establish a hierarchy and include possible feedback forms. 

    ]]>     2017-10-10 19:14:29 UTC https://padlet.com/meghan_mcpolin02347/205kk7l2d5gu/wish/195786208     Buttons meghan_mcpolin02347 https://padlet.com/meghan_mcpolin02347/205kk7l2d5gu/wish/195787142 Buttons are a mixture of color palette, forms and voice. Designers can rely on previously created assets to create consistent buttons with different stated designs. 

    ]]>     2017-10-10 19:16:59 UTC https://padlet.com/meghan_mcpolin02347/205kk7l2d5gu/wish/195787142     Spacing meghan_mcpolin02347 https://padlet.com/meghan_mcpolin02347/205kk7l2d5gu/wish/195787575 Spacing can be in the form of a grid used for layouts, defined between headlines, buttons, images, forms, and other elements. Spacing is important because it gives more room to elements, and it makes the page look structured and professional. Designers can include a spacing reference, especially for the logo. This way, the space will be around the logo if it is big or small.

    ]]>     2017-10-10 19:18:06 UTC https://padlet.com/meghan_mcpolin02347/205kk7l2d5gu/wish/195787575     Citations meghan_mcpolin02347 https://padlet.com/meghan_mcpolin02347/205kk7l2d5gu/wish/195790121 Design  •, T. L. (2017, March 09). How To Create a Web Design Style Guide. Retrieved October 10, 2017, from https://designmodo.com/create-style-guides/

    Neville, K. (2010, July 21). How To Design Style Guides For Brands And Websites. Retrieved October 10, 2017, from https://www.smashingmagazine.com/2010/07/designing-style-guidelines-for-brands-and-websites/

    ]]>     2017-10-10 19:24:37 UTC https://padlet.com/meghan_mcpolin02347/205kk7l2d5gu/wish/195790121