This is a general guide that can be used by designers to help spec their comps for development handoff.
Creating products requires effective collaboration and communication between designers and developers. A clear spec is a great tool to efficient collaboration in addition to avoiding costly implementation mistakes. It will also get everyone on the same page to make the right decisions in achieving a look that is consistent with E*TRADE's aesthetic.
Do: Link to our component pages / code snippets.
Do: Use Design Language naming convention where applicable.
Do: Clearly label grids, properties, and spacing.
Don't: Use specific pixel values and hex codes unless an element is custom built.
Our front-end style-guide is a living collections of UI- elements’ descriptions and corresponding code snippets that you can use to direct a developer to the correct component in your mockup.
This spec communicates the space between two elements.
Do: Use our naming convention and point to our spacing page.
Don't: Use pixel values.
This spec provides information on specific properties such as fonts, icons and images.
Do: Clearly label properties using Design Language names.
Don't: Use points or hex values.
Our bootstrap grid system uses a series of 12 columns to layout and align content. Your grid spec informs the developer on how your design will be placed on desktop, tablet, and mobile.
Do: Show grids.
Do: Show nested grids to highlight positioning inside other elements.
Speccing interactive properties can sometimes be misinterpreted. With a prototype, you can share the experience with your team and together discover possibilities and limitations.
It's ok to use explicit hex and pixel values for code that would only be used for your project.