Need to transform design to code? Don't hardcode it, Avocode it!
See how
GET A FREE MONTH
Design
·
LAST UPDATED
July 1, 2016

5 things that will skyrocket your design workflow

Content Marketing Manager at Avocode.

"I write for those who want to be seen..."

Show more, tell less

If you can meet everyone on your design/production team and discuss everything face-to-face whenever you desire, I’m quite jealous. But, if your team goes way beyond meeting rooms (and maybe even borders), you probably discuss your projects online. There are a bunch of project managment tools and chats which help you with that. When it comes to designs, it's better to show more and tell less. Here's how you can do that.

1. Share

Your your designer just finished the first draft of your Photoshop or Sketch design. What now? Print it? Dropbox maybe? Export in pdf and e-mail it? Probably not.

Just open up Avocode, go to your project (or create a new one), drag and drop the design, and once it's uploaded just open it with a click.

Open your design and look in the upper right corner. See the Share button? Use it to:

  • Share a Public link (to those who you need only to comment).
  • Invite new team members (who need to do more, say add designs or extract assets).

2. Comment

Something doesn't feel right? Maybe it should be redone. In that case:

a) Click wherever and leave your comment

b) Select an area and then comment

3. Iterate

Hardly any design is ready after the first draft. That's normal. To get the most out of it you have to push it further by asking for feedback and rethinking the individual part or even the whole thing.

How can you add revisions?

a) Upload a file from the computer or from Dropbox

b) Drag your file straight on top of the design thumbnail in any given project and drop it  🎤

4. Watch the progress

Whenever you add a revision, you can just click revisions and see chronologically all added revisions. Then you can choose if you want to just fill the screen with revision to look at all its details or compare any two revisions down the road side by side.

BTW, now you can even preview and open the revisions in the Avocode app.

TIP: Your developer might appreciate this when extracting assets from the designs later on. Even a "final_superfinal_forreal.psd" design can be missing something. If that accidently happens, then the developer can just look it up in the previous revisions and take it.

Would you like others to know when you upload a revision or leave a comment? Keep reading.

5. Notify and get notified

If you're in a real business, you probably already have Slack (and also the Business plan in Avocode). Good.

First go to Slack and create new channel in which you'd like to collect all notifications about your Team's design projects.

Then go to the Avocode Manager, point your cursor at your avatar pic in the upper right corner and click “Manage Account”. Down left you'll see “Connections”. Click Slack and then “Get the Webhook URL“. This will redirect you to a Slack page where you can choose the channel which you created before. Click the green button below and a red url link should show up. Copy it. Go back to tab where your Avocode Account settings is opened and paste it in the Webhook URL field. There, you're all set.

Any new design, any uploaded design revision or any added comment should appear like this in you Slack. If you click it, it will take you straight to the design or to the particular comment.

When something changes, get automatically notified in Slack.

See all of the above in action

 

Ready for code?

After some client/user feedback and a couple of iterations, your design should be done. Now’s the time to notify your developer. Just share a public link of a desgn and they can open it in the Avocode app. If something is missing, they can always comment on the design and ask for more revisions. Once they are satisfied it's time to start taking all of the design assets like this.

get guacamole
Free 3-in-1 UI kit
Are you a modern designer with taste? Get Guacamole
- a free UI kit  for Adobe Xd, Photoshop and Sketch.
Get a free UI kit
Available for: