Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/sdras/design-for-developers

Design for Developers Workshop
https://github.com/sdras/design-for-developers

beginning-design design design-101 design-for-developers design-for-devs developers-learning-design learning-design

Last synced: 6 days ago
JSON representation

Design for Developers Workshop

Host: GitHub
URL: https://github.com/sdras/design-for-developers
Owner: sdras
Created: 2018-09-22T19:42:40.000Z (over 6 years ago)
Default Branch: master
Last Pushed: 2019-01-15T00:44:00.000Z (about 6 years ago)
Last Synced: 2024-12-22T02:28:59.171Z (2 months ago)
Topics: beginning-design, design, design-101, design-for-developers, design-for-devs, developers-learning-design, learning-design
Homepage: https://frontendmasters.com/courses/design-for-developers/
Size: 71.5 MB
Stars: 743
Watchers: 15
Forks: 156
Open Issues: 1
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

awesome - design-for-developers - Design for Developers Workshop (Others)

README

# Design for Developers

Author: Sarah Drasner

This repo houses the materials and resources for the [Design for Developers course](https://frontendmasters.com/courses/design-for-developers/) on Frontend Masters.

Sometimes it seems like designing is an unlearnable skill, or that if you’re a developer, you might not be able to learn it because it’s a different discipline. Luckily, designing has rules just like development does — rules that can be understood both in theory and in practice. In this workshop, learn to how to become self-sufficient for the entire process of execution from concept to design to implementation. This workshop is also ideal for those that want to be a better collaborator to their design counterparts, and better able to execute the creation of complex and beautiful Frontend experiences.

## Image Resources

### SVG

- Noun Project, Menu
- Noun Project, Square Arrow Up

### PNG

- Block of Text for easy grid templating

### Templates

First, second, and third stages.

## CodePen Resources

- CSS Grid, [example 1](https://codepen.io/sdras/pen/54dcd199a9f3dbf851b9a8f9c706b8f7)
- CSS Grid, [example 2](https://codepen.io/sdras/pen/927251d94ada804fea3af69537dbe212)
- CSS Grid, [example 3](https://codepen.io/sdras/pen/f79830e540a17a3690ab9a9e103b5256)
- CSS Grid, [example 4](https://codepen.io/sdras/pen/74d210572cdd934e60982fa742243ebd)
- CSS Grid, [example 5, minmax](https://codepen.io/sdras/pen/2c40c78b80eda0f03010a6182376f29e)

## Slide Decks

All slide decks are in the `slides-pdf` folder in pdf form ordered by number.

## Twitter Contact Info

- [Sarah Drasner](https://twitter.com/sarah_edo)

## License

[![Creative Commons License](https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png)](http://creativecommons.org/licenses/by-nc-sa/4.0/)

This work is licensed under a [Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License](http://creativecommons.org/licenses/by-nc-sa/4.0/)