Sketching in code
0 likes789 views
Sketching in HTML helps promote communication between designers and developers. Our developers were happy going this direction since it makes their jobs easier. Key stakeholders can see concepts in HTML from the beginning and have more confidence in designs. The goals of the living style guide are to serve as a UX/VX lead style guide representing CustomInk design principles, be responsive, serve as documentation and support prototyping. Content needs come before designing for mobile. Typography is responsive to resize based on screen size. The living style guide provides pre-built elements and components.
Sketching in code
- 1. Dara Pressley, Lead Architect @ CustomInk twitter: @uxdiva Sketching in HTML
- 2. These were our teams design tools
- 3. Design could only be - Notional
- 4. But design tool is not a browser
- 5. So now we use this. Github
- 6. Sketching in code helps to promote communication between designer and developer. Our developers have been very happy that we went this direction. Because it makes their jobs easier. Key stakeholders can see from the beginning the concepts in HTML and so have more conďŹdence in the design.
- 7. Sketching in code is not ⢠Production level code ⢠DRY ⢠Works across multiple browsers
- 8. Instead We work to try to get our code to render the way we want the design to look. In 1 browser on 1 OS. ⢠Even if itâs messy ⢠Even if we repeat code ⢠Even if we build the module twice and hide/show as we go through breakpoints fake responsive module
- 9. Living Style Guide The secret weapon
- 10. Goals of the Living Guide ⢠UX / VX lead style guide ⢠representing the CustomInk design principles ⢠Responsive ⢠The coded expression of the style guide ⢠Ability to easily add to and update styles and components ⢠Documentation ⢠Prototyping Support
- 11. Content First mobile second It was very important to design that we be able to build the page according to the needs of the content. And then, designing for the small screen was the next step to assure that layouts were not to complex or heavy.
- 12. ⢠We had a notion of breakpoints ⢠But did not what to be restricted by them
- 13. The hardest thing to get our minds wrapped around was that there is no grid. That we needed to be the grid and wrap its structure around the needs of the content. We had a lot of discussion around the header and footer in particular. Because, regardless of what we did to the content area of the page, the users experience should be consistent as they move from page to page on their particular device
- 14. Elements & Components By using the living style guide, I get the beneďŹt of all the elements and components that are already developed.
- 16. Responsive Typography src: http://typecast.com/blog/a-more-modern-scale-for-web-typography Text needed to resize based on screen size. Large screen h1s look enormous on small screens.
- 17. Title TextDesign SpeciďŹcations ⢠Design speciďŹcations are already included in the html/ css ⢠Vertical Rhythm is inherited by the style guide ďŹrst, then can be altered by the designer if needed.