Skip to content

Commit

Permalink
Add zine empower designers
Browse files Browse the repository at this point in the history
  • Loading branch information
sandrina-p committed Dec 4, 2019
1 parent a9991a4 commit 1a1aa72
Show file tree
Hide file tree
Showing 7 changed files with 71 additions and 0 deletions.
Binary file added zine_empower_designers/0_cover.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added zine_empower_designers/1_tips.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added zine_empower_designers/2_tips.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added zine_empower_designers/3_tips.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added zine_empower_designers/4_back.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
71 changes: 71 additions & 0 deletions zine_empower_designers/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
# Psst, you can empower the designers on your team
Tips from a frontend developer to another.

This zine is based on the article [How Frontend Developers Can Empower Designer’s Work](https://www.smashingmagazine.com/2019/10/frontend-developers-empower-designers-work/) that I wrote for Smashing Magazine a few months ago. At the bottom, you can check the written version but for now check out the illustrative version! Feel free to [download the printable version](./print.png).

### Digital Version

<img src="./0_cover.png" alt="" width="400">

<img src="./1_learn.png" alt="" width="800">

<img src="./2_understand.png" alt="" width="800">

<img src="./3_talk.png" alt="" width="800">

<img src="./4_back.png" alt="Back" width="400">


### Written Version

## Look beyond your code editor
Remember these design principles when implementing user interfaces:
- Hierarchy
- Alignment
- Spacing
- Contract

## Teach them code, not how to code.
Show to designers the joy of tweaking visuall stuff in the browser.

### Dev Tools
Refine layouts, fonts, spacings and animations.

### Code Playgrounds
Explore and tweak on [Codepen](codepen.io/) or [Glitch](glitch.com/)


## Include each other in the process
Ask designers to include you in their design process and include them in the development process as well.

You'll discover they do much more than _"make things pretty"_.

They'll better understand the web constraints and why a feature takes time to implement.

## Have doubts about the design specs? Ask First!
Do not let assumptions turn into bad decisions. You’ll be risking the trust the designers put on you.

Whenever in doubt, reach out and clarify the specs. This will show designers that **you care as much as they do.**

## Don’t make workarounds by yourself
When a designer asks you to implement a tricky design, don’t say _“It’s impossible”_ nor try to implement a cheap version of it.

Explain to them, in simple terms, the constraints and be open to collaborating on a new solution.

## Go off-the-record once in a while
We all have tasks to deliver and roadmaps to finish. However,
some of the best work happens off-the-record.

Go sneak into their workspace and explore new things. You never know what can come from there!

## Let designers be picky
What it truly means to be picky:

- Choose with care
- Ensure cohesion
- Create the best

**be picky together <3**

---

Thank you for reading!
Binary file added zine_empower_designers/print.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 1a1aa72

Please sign in to comment.