Skip to content

Instantly share code, notes, and snippets.

@tavisca-dpingale

tavisca-dpingale/1-reading-design-before-html.md

Last active June 19, 2018 10:55
Show Gist options
  • Save tavisca-dpingale/ef464c7e7110949a15e042757157c278 to your computer and use it in GitHub Desktop.
Save tavisca-dpingale/ef464c7e7110949a15e042757157c278 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
1-reading-design-before-html.md

  • Look design as boxes.

  • Ask if the application has mobile friendly requirement.

  • Identify design whether it is fixed width or a fluid (100%).

  • Identify the width of layout.

  • Identify the different sections in design.

  • Name the sections as per it's placement.

  • Identify floating sections.

  • Identify elements used in sections.

  • Common elements style will be same throught out the site eg. button, form fields etc.

  • Identify the font family used in visual design.

  • Identify if the font is google font family or a non google font family.

  • If it's google font it's free and easy to implement.

  • If it's non google font family get the font file to convert in different formats and use in application use fontsquirrel.

  • Identify the base font size and text color in visual design.

  • Identify the heading, titles font family, font size and text color.

  • Identify the icons base width ,height and color.

  • Identify the used icons library, if its fontawesome, google material, icomoon library or any else.

  • Logo should be in png or svg format.

  • Photograph images should be in jpg format for the purpose of quality.

  • Transparent images should be in png format.

  • Identify common link color

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