Are you interested in product stories about design and code? Subscribe to our unique series The Grit where we interview top-notch designers and developers every week.

Avocode Blog - Curated design & code stories worth reading

We asked 4 freelance developers with decades of experience about their workflows, what problems they face, how they solve them, and what techniques they employ to do their best work fast and efficiently. 

Read their full answers below or scroll down for the conclusion to see the list of 18 essential frontend development tools, skills, and practices. 👇

<Bio name="Tomas Livora" role="Freelance Software Developer" image="https://cdn.marketing.avocode.com/pupushify-staging/livora_01473c239a.jpeg" />

### Tomas is a full-stack developer with 15 years of experience in coding. Recently, he has been working remotely as a contractor for various companies worldwide. He specializes in building single-page applications (SPAs) and enjoys transforming beautiful designs into smoothly-working products used by many people.

### Describe your typical workflow for us, Tomas. 

I usually work on web applications built using one of the leading JavaScript frameworks - Angular, React or Vue. They are often complex products where a deep understanding of a given framework is needed in order to deliver a result that is both easily maintainable and doesn’t suffer from any performance issues.

Typically, I start by analyzing the work handed off to me by a designer. I study the requirements, identify the most complex parts of the implementation, and communicate my findings back to the designer so they can modify the design. I find that communication with your designer is especially important at this stage when working on projects with really tight budgets.

We usually collaborate using one of the work tools that allow me to quickly inspect various design elements, measure distances between them, and see the corresponding CSS code. But I never copy this code. I take it just as a guideline. Instead, I try to deliver the same result with the least amount of CSS code possible. I create global SCSS variables for colors, repeating dimensions, etc. to make my code clean. This way, it's also easy to apply design changes later on as you only need to change it in one place in the code and it will get propagated everywhere. 

>I create global variables for colors, repeating dimensions, etc.

### What’s the number one problem you face in your work, and how do you solve it?

I often receive the desktop version of a given application, implement it, and later get the mobile version with a completely different UX. It introduces a lot of unnecessary rework, and it's super time-consuming to implement something like that and then make the app switch between desktop and mobile versions seamlessly when resizing the browser window. 

> I always ask for both the desktop and mobile design versions before I start on the implementation. 

So now, I always ask for both the desktop and mobile design versions before I start on the implementation. And I try to use the same components for desktop and mobile as much as possible. I only apply different styles to them based on the screen size, otherwise developing and maintaining the application becomes really hard. 

### What’s your tool stack, and what do you like about it most?
I use [Storybook](https://storybook.js.org/) in almost every project where a designer is involved. It allows me to develop reusable UI components in isolation outside of the actual application and then share them with designers to get their feedback. 

It is especially useful when developing a UI library since it also serves as a testing ground and documentation base for components. Having your components used outside of an application also forces you to make them truly reusable and avoid unnecessary dependencies on other parts of the app.

And when it comes to coding, the single tool that saves me the most time is [WebStorm](https://www.jetbrains.com/webstorm/). The way this IDE (Integrated Development Environment) can handle JavaScript, TypeScript, Angular, and Vue.js code refactorings and move code pieces around is just astonishing. 

I take WebStorm for granted now. But when I try to use Visual Studio Code from time to time, I'm always surprised how far behind it is in this area, even with all available plugins. I don't get why most developers prefer VS Code. Especially when I see them typing JS imports manually while doing a live demo on a tech talk. It doesn't sound like the 21st century.

### What tips can you give for faster and easier frontend development?

> Take your time to analyze the screens you get from designers and think about what is the best way to structure your application and how you would split it into components. 

I would advise front-end developers not to rush into implementation but take your time to analyze the screens you get from designers and think about what is the best way to structure your application and how you would split it into components.

> Make sure your components are as small as possible - no more than three HTML elements.

Make sure your components are as small as possible - no more than three HTML elements. Making them super-small will force you to come up with the most logical component structure with a lot of reused parts which will make the application much easier to maintain. This may sound like basics, but I've seen so many apps with huge components.

And when it comes to learning resources, I think the best way to start with something new is an online course (e.g. on [Udemy](https://www.udemy.com/)). But then, to go deeper, you need to read the documentation and a lot of articles.

In my opinion, the best way to find such articles is via email newsletters which will also help you stay up to date. For me, [JavaScript Weekly](https://javascriptweekly.com/) is the single best resource since it combines articles and news from the whole ecosystem. [Frontend Focus](https://frontendfoc.us/) is also a good one, but there were too many things fighting for my attention, so I had to unsubscribe from this one.

<Bio name="Daniel Strelec" role="Frontend Developer since 1997" image="https://cdn.marketing.avocode.com/pupushify-staging/Daniel_Strelec_2dcb1f4c8a.jpeg" />

### Daniel is a frontend developer with over 20 years of experience and hundreds of commercial and non-profit projects under his belt. He is passionate about web optimization, speed, and accessibility. He is an active member of a front-end community [Frontendisti.cz](https://frontendisti.cz/) and gives occasional talks on coding and web performance. 

### Describe your typical workflow for us, Daniel. 
I always start by uploading designs to Avocode. I create variables for design colors, export icons in SVG, and set up typography. Doing this preparation work allows me to start coding without losing focus. Again, I use Avocode at this stage to generate code, quickly copy text, and export images as I go.

<Image caption="How Daniel exports icons in SVG" alt="Avocode Export" src="https://cdn.marketing.avocode.com/pupushify-staging/ss_3_1f95f54c2a.png" external/>

### What’s the number one problem you face in your work, and how do you solve it?
As a developer, I often find that some designers forget to think about the implementation of their work. They don’t think about how their design and responsive elements will show in ultrawide or medium (in-between desktop and mobile) resolutions. Having the option to communicate with a designer directly and with context is helpful, but I try to prevent such issues from the start and always ask in advance for design format and specs.

>Always ask in advance for design format and specs.

### What’s your tool stack, and what do you like about it most?
I use Visual Studio Code, various extensions, [Browserstack](https://www.browserstack.com/), [Fork](https://git-fork.com/), and Avocode, of course. I’ve been using Avocode for 3 years now, and I can’t imagine how I worked without it.

>I’ve been using Avocode for 3 years now, and I can’t imagine how I worked without it.

I can run Avocode on any OS, and I don’t even have to install the [desktop app](https://avocode.com/download) if I am working on a different computer. Instead, I can open the web app and pick up my work from there.
Avocode allows me to work with all design formats without paying for design tools. I can even open Sketch files on Windows. I can copy design text in one click, export images in various formats and resolutions, define variables, and get object properties and sizes.

<Image caption="How Daniel defines variables in Avocode to customize his code" alt="Avocode Variables" src="https://cdn.marketing.avocode.com/pupushify-staging/ss_5_b20d6a220f.png" width="50%" external/>

I use Avocode to display the grid and guidelines on top of my designs, set the right design scale and units. Being able to select different code output and adjust the order of declarations for my needs is great. And having properties for various elements like shadows and transitions generated for me is a huge time saver.

<Image caption="How Daniel sets the grid and guidelines in Avocode to speedup coding " alt="Avocode Grit" src="https://cdn.marketing.avocode.com/pupushify-staging/ss_6_2624b5a049.png" external/>

I think one of the most powerful tools in Avocode is the [Pixel Checker](https://avocode.com/pixel-checker). I cannot imagine coding without it.
<Image caption="How Daniel uses Pixel Checker in Avocode to deliver pixel perfect development " alt="Avocode Pixel Checker" src="https://cdn.marketing.avocode.com/pupushify-staging/ss_1_468dd18347.png" external/>

Simply put, if you code HTML/CSS websites - you must try Avocode, and after customizing the app to your needs - I guarantee you will realize what a huge timesaver it is.

>Simply put, if you code HTML/CSS websites - you must try Avocode, and after customizing the app to your needs - I guarantee you will realize what a huge timesaver it is.

### What tips can you give for faster and easier frontend development?
I always try to automate routine tasks. How? Configure your code editor to fit your needs, use Emmet, snippets, boilerplate templates, create your own simple grid.
I have my CSS/JS declarations sorted and linted directly in devstack. I use automatic deploy after pushing the project into the right branch. I have set up processes and auxiliary scripts.

If you are bothered by routine operations that can be automated - try to find a tool like Avocode to solve this problem for you. For example, I can just copy the font-size and line-height from Avocode. I prefer to specify the font size in PX to better imagine the size when coding, and the conversion to REM can be done automatically.

> Write the code so that you are familiar with it in a few years. 

In general, I recommend using the KISS principle to all developers. Write the code so that you are familiar with it in a few years, and passing the project on to another developer is simple.

<Bio name="Lukas Bartak" role="Frontend Developer since 2008" image="https://cdn.marketing.avocode.com/pupushify-staging/lukasbartak_23ece8361e.jpeg" />

### Lukáš has been coding websites for over 12 years now. He is passionate about bleeding-edge technologies, accessibility, UX, gorgeous design, automatization, open-source communities, and not so happy with coding newsletters. 😀

### Describe your typical workflow for us, Lukáš. 
I mainly work with JavaScript, whether it is front-end frameworks, hybrid mobile applications, Node.js, lambda functions, or server-side rendering.
I have participated in various global projects that have a daily traffic of hundreds of thousands of visitors. I am particularly glad that I can bring new ideas to projects I work on and make a difference.

### What’s the number one problem you face in your work, and how do you solve it?
When I cooperate with designers on a project, I always make an effort to structure our work. I find that thinking in atomic building blocks, working with grid layouts, and keeping principles of reusability makes the process much easier.

> I’m glad we’ve come a long way since the days of designing UI in Photoshop and estimating values from rasterized images.

I’m glad we’ve come a long way since the days of designing UI in Photoshop and estimating values from rasterized images. Fortunately, the market for UI design tools is way more competitive these days, and I see more designers increasingly using them!

### What’s your tool stack, and what do you like about it most?
Recently, I have been working mainly with Adobe XD, Sketch, and Figma. I used Photoshop, Adobe AI, and Zeplin before. Each of these tools has its advantages and disadvantages, of course, but I’m excited that Avocode is trying to bring all tools into one and do it with passion.

### What tips can you give for faster and easier frontend development?
I often come across people spending their efforts on repetitive tasks without realizing that they are not the only ones solving the problem. Most likely, someone has already thought about it, and there may be a way to automate “the process”. Look for a solution that solves your problem and focus on more important and fun things in your life and job instead. 

>I often come across people spending their efforts on repetitive tasks. Look for a solution that solves this problem.

<Bio name="David Tyemnyak" role="Frontend Developer since 2011" image="https://cdn.marketing.avocode.com/pupushify-staging/davidtyemnyak_de6f58d1b9.jpeg" />

### David is an advanced front-end developer with over 9 years of intense experience in making web and mobile apps and 5 years in UI design.

### Describe your typical workflow for us, David. 
I start by preparing a “stack” of essential technologies, frameworks, and packages to work efficiently and setting up specific things for my projects, such as colors, fonts, and basic components. After that’s done, I move on to more complex structures, pages, and the whole app skeleton.

>The best way to communicate with your designer is directly in the handoff tool.

### What’s the number one problem you face in your work, and how do you solve it?
Most often, I face problems with incomplete tasks and flow specifications from a design perspective. How do I solve this? [Communication](https://avocode.com/design-review-process) for sure. The best way to communicate with your designer is directly in the handoff tool like Avocode or InVision, but using a chat app or comments in Figma can work too. 

<center><video width="100%" autoplay controls loop style="pointer-events: none;"><source src="https://avocode-mailing.s3-eu-west-1.amazonaws.com/mailing-app/digest/avocode_comment.mp4" type="video/mp4"></video></center>
<Image caption="How to collaborate on your design-to-code projects in Avocode">

### What’s your tool stack, and what do you like about it most?
My favorite tools are VS Code, terminal, and Figma. Oh, and also a web browser. I use Google Chrome most of the time. I like how easy these tools are to adopt, and how Figma, in particular, handles multiple people working on the same project.

<Image caption="How to inspect designs side by side inside VS Code with Avocode" alt="Avocode Visual Studio Code Integration" src="https://avocode-mailing.s3-eu-west-1.amazonaws.com/mailing-app/digest/avocode_vccode.gif" external/>

### What tips can you give for faster and easier frontend development?
First, look around for the code or style of other developers. Open up the source code of your beloved framework or package and study it. It is not so hard, and you can learn a lot. 

>Open up the source code of your beloved framework or package and study it.

And secondly, set up a workflow with your designer to make your cooperation easy and efficient. I personally worked out such a flow. I don’t need all the screens designed in detail to start my work. Instead, I need the designer to hand off all necessary components like buttons, inputs, headings, states, and a basic structure first. This flow saves both a designer and a developer a lot of time. And remember that good communication and constructive feedback is the best way to avoid any problems in your cooperation.


## 🧐 Conclusion

Here is the list of 18 recommendations and best practices to improve your development process and save time on coding. 

### How to efficiently collaborate with a designer on a project?

1. Set up a workflow with your designer to make your cooperation easy and efficient.
2. Study the design and tell your designer about the rabbit holes you find before starting on the implementation. This way, your designer can make changes based on your feedback and save time and money on the project. 
3. Use your handoff tool to communicate with your designer with context. 
4. Ask in advance for design format, specs, and task specifications. 
5. Ask in advance for desktop and mobile versions of the design to make your application truly responsive and avoid the time-consuming process of reworking your code later. 
6. If the final design is not done yet - start by coding your components first, and then move on to more complex structures.

### How to work smart, write your best code, and save time on repetitive tasks? 
1. Start by preparing a “stack” of essential technologies, frameworks, and packages to work efficiently. 
2. Configure your code editor to fit your needs, use [Emmet](https://emmet.io/), snippets (if you like), and boilerplate templates.
3. Use a tool like Avocode to export assets in SVG or a different format and resolution, inspect various elements, and measure distances between them. 
4. Make your components as small as possible - no more than three HTML elements - to force yourself to develop the most logical component structure with many reusable parts and make your application much easier to maintain.
5. Create global variables for colors, repeating dimensions, etc., to make your code clean and easy to change globally.
6. Automate routine and repetitive tasks.
7. Look for a solution that solves your problem and focus on more important things instead.
8. Use a good code editor like Visual Studio Code, WebStorm, tools like Figma, Avocode, Adobe XD, Browserstack, [Pixel Checker](https://avocode.com/pixel-checker), Google Chrome, and various browser extensions for a quick, precise, and efficient workflow. 
9. Use the KISS principle - write your code in a way that you’ll be familiar with it in a few years and can easily pass the project over to another developer. 

### How to educate yourself and stay updated on the latest trends and practices in the space?

1. Open up the source code of your beloved framework or package and study it. 
2. Take an online course to start learning something new and improve your skills. 
3. Subscribe to newsletters such as [JavaScript Weekly](https://javascriptweekly.com/) and [Frontend Focus](https://frontendfoc.us/) to find helpful articles, get into the details, and stay updated on the most recent developments in the space. 


🔗 Bonus tip from our friends at Toptal.com: [How to Hire a Front-end Developer](https://www.toptal.com/front-end#hiring-guide?ref=avocode)

Do you find these recommendations useful? Join the discussion on [Twitter](https://twitter.com/avocode) to let us know what you think.

We asked 4 freelance developers with decades of experience about their workflows, what problems they face, how they solve them, and what techniques and practices they employ to do their best work fast and efficiently. 

18 tips on how to do frontend best & improve design-to-code collaboration

large_frontend.png

medium_frontend.png

small_frontend.png

thumbnail_frontend.png

frontend.png

18 tips on how to do frontend best & improve design-to-code collaboration 

## Hi Christina. Thanks for taking the time. To break the ice, as a content designer, what do you enjoy doing in your free time?

Hello! Thanks for having me. These days with a toddler, my free time is pretty limited, but I always manage to make time to play word games on my phone. I’m obsessed! Scrabble is one of my favorites, but there are many others like Boggle and Bananagrams. I also enjoy crossword puzzles. Hit me up on Boggle or Words With Friends (@hellochristina). I’m always looking for people to play with.

## Very cool. Can you introduce yourself a bit and tell us what makes you busy these days?

I work at Facebook with the newly minted title of Content Designer (formerly Content Strategist). More on that later. I’m a San Francisco Bay Area native. Growing up, my parents didn’t pressure me to get top grades or pursue a career in medicine or computers, even though they themselves worked in those fields. I felt like I had a lot of leeway in whatever path I chose. This was a huge relief since I was absolutely terrible at science and math. The one thing I had was a love of reading and writing, which was bolstered by a kind and encouraging English teacher I had in high school.

After graduating college with an English degree, I worked various temp jobs while looking for something permanent and happened to get placed at a small advertising agency doing administrative tasks. I loved the energy of the place, particularly the creative department where the art directors, designers, and copywriters were gathered. The owner’s 74-year-old mother worked in the proofreading department. After learning that I was looking for a job, she talked with her son, who then hired me as a proofreader. Over time, I was given a few copywriting projects to work on by the creative director, and that’s where my career started. I’m forever grateful for the people in my life who have taken a chance on me, and that’s why I try to pay it back by helping others where I can, whether it’s by making connections, giving them feedback on their portfolio or offering career guidance for people interested in working in content design.

Fast forward a few jobs, and I eventually made the switch to Product Content Design. In some ways, it’s flexing the same muscles, and in many other ways, it’s building many new skills that, to this day, I feel I’m still learning and will continue to do so.

## Tell us about what you do at Facebook.

Content designers at Facebook are embedded in product teams and work on things like naming, interface writing, information architecture, and planning content to scale across the massive system that is Facebook. I spent a couple of years working on the Profile team, and for the last few years have been on a team that focuses on people in emerging markets. Most teams at Facebook take a global approach to build products, and my team is unique in that we focus on addressing barriers that certain populations face in using Facebook.

> Content designers at Facebook are embedded on product teams and work on things like naming, interface writing, information architecture, and planning content to scale across the massive system that is Facebook.

This minority approach is actually a majority stake for Facebook. More users are in emerging markets than in developing countries. This means many people either use Facebook in a language other than English or use Facebook in English but may have varying comprehension levels. I was intrigued with the challenge of how to scale the English language so it’s understood by every type of user - from a fluent American to someone who may barely be able to make out a few words here and there. For example, in India, nearly everyone is using Facebook in English, but the level of comprehension varies wildly in the country.

> For example, in India, nearly everyone is using Facebook in English, but the level of comprehension varies wildly in the country.

One of my favorite examples of how English isn’t a one-size-fits-all is the phrase “What’s on your mind?” It’s one of the first things you see when you open Facebook, prompting you to create a post. The data showed that posting was low in India, and after digging into why this could be, we learned that people in India didn’t understand what the phrase meant and didn’t realize what they were supposed to do. After rounds of testing different content dimensions, the winning variant was “Write something here.” Being direct and instructional clarified the action we wanted people to take as well as where to take it. This is now what everyone in India sees.

<Image caption="How Facebook localizes the 'Create Post' component" alt="Creating a post in Facebook" src="https://cdn.marketing.avocode.com/pupushify-staging/post_cccc0f56f8.png" external/>

## The Content Design team at Facebook recently changed its name from Content Strategy. What are your thoughts on that?

My personal opinion is that the Content Strategist title has been going through somewhat of an identity crisis over the years. The title has grown to mean a lot of different roles and responsibilities. The word “strategist” is so broad and can be applied to many content practices. I love that we’re better defining our function and aligning it with our closest counterpart, product design. We design experiences for people using words. We partner with product designers on how best to visualize these experiences in a way that is clear and straightforward.

> We design experiences for people using words.

## You have a journalism degree. What pushed you toward copywriting and eventually content design?

I went to graduate school with no idea of what I wanted to do after. I just felt that journalism was a nice base to work off to pursue some kind of career in writing. My motivations for grad school are a little murky as I was drawn to the opportunity to live in London. It turned out to be an unforgettable year, both academically and personally. When I came back to California, I ended up back in the same industry I was in before I left advertising. I worked as a copywriter for companies like Gap and Williams-Sonoma before landing at Hotwire, a travel company owned by Expedia. It was there that I first heard about the UX practice and UX writing. By then, I was feeling burnt out with trying to write catchy headlines and was intrigued with the challenge of solving people and business problems. I had a few roles at Hotwire and the last one was on a product team, helping to set up a new CMS. While it wasn’t UX work, it was a step in the right direction.

## What are the main differences in responsibilities and tasks of a Copywriter vs. a Content Designer?

The goals and the ways the roles function are the primary differences. As a Copywriter, you’re writing with the intent of getting people to want to buy something. You tend to use subjective adjectives and can be abstract, playful and clever in communicating the benefits of the product. You’re usually working off of a brief, with many decisions already made for you. Communication with the client or stakeholder is more disconnected than a content designer, who’s usually embedded on a product team.

> As a copywriter, you’re usually working off of a brief, with many decisions already made for you.

As a Content Designer, you usually have a stake in deciding what products to build and how they will be built. You define frameworks to guide the content direction as part of a system, accounting for scalability in size and locales. Your words are simple and straightforward with the goal of getting the user through a flow with as little friction as possible. In both roles, you consider the audience, choose your words wisely and follow established voice and tone guidelines.

> As a Content Designer, you usually have a stake in deciding what products to build and how they will be built.

## As a Content Strategist at Facebook, you are talking to a global audience, but how do you approach the issue of localization?

Content designers at Facebook create content in English first, and the content is then translated into all of the languages we support. While we work at scale, we’re thoughtful about localization and ensuring that the content not only translates well but meets the needs of each locale. We make sure that terminology is well-defined and that translations carry the same tone as was intended in English. Our voice is simple, straightforward, and human, so we can be sure we always sound like Facebook, no matter the language. Content Designers work closely with the localization team in all phases of our work.

> While we work at scale, we’re thoughtful about localization and ensuring that the content not only translates well but meets the needs of each locale.

<Image caption="Creating a Story with the Facebook app. Source: facebookblueprint.com" alt="Creating a Story with the Facebook app" src="https://cdn.marketing.avocode.com/pupushify-staging/facebook_story_1056704418.gif" width="35%" external/>

## When somebody in the room says “people don’t read”, how do you react?

I hear this phrase in meetings from time to time, and it’s like nails on a chalkboard. On the one hand, I know what people mean to say, that yes, not everyone reads every word on a screen or wants to parse through paragraphs of text. People tend to scan. But it can come across as dismissive and inconsiderate of the needs of our users. Of course, people read. If an app had no text and was full of empty boxes, how would people know what to do? Every word matters. And every word should be there for a reason. Content Designers have run countless A/B test results that show changing the content - whether it’s the tone, value proposition, or even the verb choice - can make or break an experience.

> Of course, people read. If an app had no text and was full of empty boxes, how would people know what to do? Every word matters. And every word should be there for a reason.

## The chicken or the egg conundrum. What comes first - content or design?

I’d say it depends on the situation. A content- vs. a design-led initiative seems self-explanatory but when it’s not as clear cut, I would say either could come first. The Content Designer may have more on their plate and is unable to start a project as early as the product designer, and vice versa. I don’t think it matters so much as the importance of collaboration and early sharing of work between the two roles.

## What is your best practice regarding the collaboration between content and design?

Design and content work very closely at Facebook. Oftentimes, we’re literally sitting next to each other (when we were actually in the office). If the partnership is working at its best, we are each other’s right-hand person. We make decisions together. Run ideas by each other. Create principles and frameworks. We run brainstorms together and use data to inform what we should work on. We gain alignment and make sure our work tells a cohesive story before presenting it to the team.

## What problems are you facing when it comes to the collaboration between design and content?

One of the biggest challenges I’ve faced is being outnumbered by the number of product designers I support. When a Product Designer is able to dedicate 100% of their time to one product or pillar, they’re able to work at a deeper level, and produce work that shows depth and breadth. This makes it easier to build subject matter expertise and be seen as a key player. A Content Designer can only be so effective when they’re splitting their time between two, three or more workstreams.

On a more tactical level, collaboration in asynchronous design tools like Sketch is a challenge for content designers. We either have to rely on the Product Designer to make content updates, or we have to figure out some type of process of taking turns updating the Sketch file. Figma solves this big problem, and I’m so glad that teams are moving in this direction.

## Where is the best place for people to connect with you online?**

You can find me on [LinkedIn](https://www.linkedin.com/in/hellochristinawu/). If you like word games, find me @hellochristina on Boggle or Words With Friends.

**Bonus Question: What’s your favorite way to eat avocado?**

Can I start with my least favorite way to eat avocado? I love avocado, and I love sushi, but the two do not go together! I’m a sushi purist and feel it’s wrong to include avocado in a roll. Now my favorite way to eat avocado, and this is going to make me sound so Californian, is avocado toast. Toasted sliced sourdough with avocado, then sliced tomato and topped with a fried egg. Drizzle a little salt and pepper. Perfection.

Christina Wu leads the Content Design Team at Facebook. She is an expert at how to design experiences for a global audience using words, clearly visualize them, and remove friction. Now she reveals her approach to effectively pairing content and design for The Grit by Avocode.

On how to effectively pair content and design with Christina Wu from Facebook

large_Christina-Wu_for-the-Grit-Avocode.png

medium_Christina-Wu_for-the-Grit-Avocode.png

small_Christina-Wu_for-the-Grit-Avocode.png

thumbnail_Christina-Wu_for-the-Grit-Avocode.png

Christina-Wu_for-the-Grit-Avocode.png

The Grit - Christina Wu, Content Design Manager at Facebook 

Hey, at Avocode, we use Shape Up methodology to manage our product and deliver updates faster and in better quality. Errhh, hold on, what's Shape Up? Good question! In this blogpost, I, Josef Kettner, the Product Manager at Avocode, would like to walk you through what Shape Up means and give you 👉🏽 [the tools](https://www.notion.so/avocode/Shape-Up-template-by-Avocode-9478361c11c64a5ebe83abe74e39f9b8) and practices we used to implement it in our 30+ member team!

## How we worked

Before we start, let's jump back to 2019 real quick.

At that time, we realized that we had a couple of weak links in our process, which looked something like this:

<Image caption="Our teams working in silos" alt="Our teams working in silos" src="https://cdn.marketing.avocode.com/pupushify-production/flow_25a7402969.png" external/>

**Here are the problems we had:**

- **Know when to stop:** We didn't have any mechanics to stop the development of the features. In reality, it meant that we developed everything till the very end, which often took 2x longer than we originally planned. But, hey, at least it's out, right...
- **Focus on your priorities**: Our developers were out of focus. Often, another team would send a request for some ad-hoc task, which meant that instead of focusing on the ongoing project during the week, devs had only about 2.5 days of uninterrupted development time.
- **Feature creep is real**: It often happened that ideas came after something was already in the final stages of development. So we decided to add it to the scope anyways. Yet, we quickly found it was the most expensive form of iteration.
- **You can't delegate what you don't know**: Yeah, the tasks, feature descriptions.. let's be honest. There were serious holes in them. We didn't spend enough time to think things through because we were always busy with something else, and the devs needed to do something.

*You probably didn't encounter any of these, right? 😛*

Back in those days, we tried to use the so-called Scrum-like workflow (coz agile was cool, so everyone was doing agile, and we were too). The truth is it wasn't Scrum at all. We took some parts from Scrum and adjusted them to our needs. But as our team grew and updates became more complex, the workflow somehow stopped working. So we tried to tweak it a bit:

- Pair programming
- Estimations
- More meetings and discussions
- *Yelling, arguing, crying... (at home in the shower)*

![https://media.giphy.com/media/hmE2rlinFM7fi/giphy.gif](https://media.giphy.com/media/hmE2rlinFM7fi/giphy.gif)

Guess what, it didn't work. It made me feel that we should consider a complete switch rather than keep patching and tweaking the existing workflow.

Around that time, one of my devs sent me Shape Up book written by Basecamp's Ryan Singer. Coincidentally, I had plans to take a short vacation. So here I was, in the back of my car looking after my kid and reading the book.

My first impression of it was - this sounds like the answer to all of our problems. Yet, I was a bit hesitant because every management book makes the same promise.

> My first impression of it was - this sounds like the answer to all of our problems. Yet, I was a bit hesitant because every management book makes the same promise.

But there was something else about this one. I liked Basecamp's take on work and life, in general. So I decided to run it by my direct manager and one of the co-founders of Avocode, who got equally excited about it. In fact, we believed in the concept so much that within a month, we managed to fully implement Shape Up at Avocode. 

## So what is Shape Up?

With respect, I'll borrow this from Tom Hombergs

> Shape Up covers the process from "shaping" raw ideas into low-risk, time-boxed projects to finally implementing the solution in small teams within 6-week cycles. It also discusses how to fight scope creep and monitor progress during a cycle.

The key takeaways are well summarized in his [book review](https://reflectoring.io/book-review-shape-up/)

## How to implement Shape Up?**

Follow this guide to find out how you too can easily implement Shape Up in your team.

👉🏽 [Shape Up - template by Avocode](https://www.notion.so/avocode/Shape-Up-template-by-Avocode-9478361c11c64a5ebe83abe74e39f9b8)

### 1. **Documentation**

We started by documenting the method according to its main parts -
Shaping, Betting, Design & Development, and Cool-down - to make sure everyone at Avocode can quickly get on board with it.

Luckily, all the documentation is available for you in the template. And I get that every company is different, but I promise, it's a great place to start and change things as you see fit. 

**Documentation templates**

- 🔄 [Shape Up lifecycle - template](https://www.notion.so/avocode/Shape-Up-lifecycle-template-8dec9be5cbbb4346acfa44c7e80463ec)
- 🙇 [To Shape - template](https://www.notion.so/avocode/To-Shape-template-484290584877478988decb193f856c57)
- 💎 [Shaping - template](https://www.notion.so/avocode/Shaping-template-102e082d09be4d7e8c4e93b92f8f115f)
- 💰 [Betting table - template](https://www.notion.so/avocode/Betting-table-template-2e0b86bff21b4294b3463b06178f9f99)
- 👨‍🎨 [Design - template](https://www.notion.so/avocode/Design-template-e395794ebbb2492982b3bd2bec289393)
- 👨‍💻 [Development - template](https://www.notion.so/avocode/Development-template-2ebd82d14a3c4b16889f86fd07188f81)
- ⛄ [Cool-down - template](https://www.notion.so/avocode/Cool-down-template-5b501e49e30f4d5ea421efb457b06e6c)

### **2. Shaping & dev cycles**

The second part of our preparation journey was to set up the process, i.e., create one source of truth for tracking shaping and development cycles.

We start every new cycle by creating a Pitch for every idea we picked at the To Shape meeting.

**Pitch templates**

- 📝 [Pitch - template](https://www.notion.so/avocode/Pitch-template-40c3cf223f974f93ad392ca4dcd21904)
- 📝 [R&D Pitch - template](https://www.notion.so/avocode/R-D-Pitch-template-5c37f6b2c1744d8c9fb7bdbe76281834)

<Image caption="Pitch table" alt="Pitch table" src="https://cdn.marketing.avocode.com/pupushify-production/shapping_bd30893dd0.png" external/>

For this, we've developed two different Pitch template with several checkboxes, i.e., things you don't want to forget about while writing your pitch.

<Image caption="Pitch template" alt="Pitch template" src="https://cdn.marketing.avocode.com/pupushify-production/pitch_82979bec71.png" external/>

You don't have to check all of them every time, but here is a couple we find most valuable to us:

- **Expectations from stakeholders**: It helps shapers align their thinking with the stakeholders and avoid misunderstandings at the betting table.
- **Onboarding**: Onboarding is crucial if you want your users to adopt the features you release. So we have a dedicated person who comes up with a plan for it.
- **Consultation with devs:** Our process is inclusive. Before assigning tasks to our dev team, we consult with them on the implementation mechanics.

After the checklist comes the central part of the pitch, which pretty much reflects the structure from the book:

- Identifying the Problem
- Shaping the Solution
- Identifying the Rabbit holes
- Watch out for No-gos
- Outlining the Release plan

**Development cycles**

After we finish shaping and betting on the new ideas, we pass them on to the development cycle table, set due dates, and assign team leads and members. At this stage, we try to reduce overhead and make our devs their own managers as much as possible.

<Image caption="Development cycles" alt="Development cycles" src="https://cdn.marketing.avocode.com/pupushify-production/projects_824b4bcca2.png" external/>

### **3. Company-wide implementation**

All in all, it took us about a month to get everything ready (and we're happy to save you time with our 👉🏽 [template](https://www.notion.so/avocode/Shape-Up-template-by-Avocode-9478361c11c64a5ebe83abe74e39f9b8)).
Now we had to assign shapers and introduce the process to the whole company.
Initially, we thought that all team leads could double as shapers. But we quickly realized that 1. good shaping takes time and 2. some people are better equipped to deal with particular issues. Eventually, we decided to involve a group of people best qualified for the job, i.e., our VP of Product, Product manager, CPO, and CTO.

What we did right from the very beginning was the way we introduced the team to Shape Up. We held two separate workshops: one for everyone in the company and the other for the devs, each with a particular focus/goal in mind.

> What we did right from the very beginning was the way we introduced the team to Shape Up.

## **What we learned from the first Shape Up cycle?**

The first cycle was the beginning of a new era at Avocode. Here is what we learned from it:

- **The Shaping:** Shaping can be a full-time job. We were too ambitious about how many projects we can deliver. But, we learned how to prioritize!
- **Betting table:** Make sure to prepare for the meeting. Get familiar with the pitches beforehand, invite the shapers, establish a way to assign capacities efficiently, and do check your devs' vacation plans in advance.

<Image caption="Assigning developers offline vs. online" alt="Assigning developers offline vs. online" src="https://cdn.marketing.avocode.com/pupushify-production/capacities_8f393bf194.png" external/>

- **Development**: You need to work with your devs and help them grow, make decisions as you go when things are missing in the pitch, and extend some projects into the cool-down if necessary. Don't expect everyone to get used to the flow from day one and become a team lead, but the ability to fully focus on the project at hand delivers great results.
- **Cool-down:** To give your devs some real cool-down time and avoid burnout, allocate at least one developer outside of Shape Up to work on smaller tasks. And do run retrospectives to identify problems and adjust your flow for the next time. 

All in all, since we implemented Shape Up, we had no regrets! I hope this guide and our template can help your workflow as well. Let me know on [Twitter](https://twitter.com/Crashmajstr). Cheers.

### **Resources**

- [Shape Up template by Avocode](https://www.notion.so/avocode/Shape-Up-template-by-Avocode-9478361c11c64a5ebe83abe74e39f9b8)
- [Original Shape Up book](https://basecamp.com/shapeup)
- [Shape Up community forum](https://discourse.learnshapeup.com/)
- [Shape Up meetup community](https://www.meetup.com/shapeup-practitioners)
- [Rework podcast from the authors of the Shape Up](https://rework.fm/shape-up/) 
- [Shape Up book review by Tom Hombergs](https://reflectoring.io/book-review-shape-up/)

**P.S.** If you are unsure about what we actually do at [Avocode](https://avocode.com/), we help teams build great digital products. We have the best Inspect tool on the market. You can work with Figma, Sketch, Adobe XD, PSD, and Illustrator files to quickly export assets in multiple resolutions and formats, generate and copy code in 10+ languages, get the text from your designs in two clicks, keep track and download design versions, leave contextual comments on top of the designs, and, of course, share, store, organize, collaborate, you name it. Check it out. We have a [free 14-day trial](https://avocode.com/login?signup).

At Avocode, we use Shape Up to speed up our development process and deliver quality product updates. Here is a complete guide on how we implemented Shape Up, how it improved our process, and how you can benefit from it using the documentation we prepared. 

How Avocode Improved Development Process 10x with Shape Up (+ Workbook)

large_shape-up-avocode.png

medium_shape-up-avocode.png

small_shape-up-avocode.png

thumbnail_shape-up-avocode.png

shape-up-avocode.png

How Avocode Improved Development Process 10x with Shape Up

Do you know what design trends to expect in design in 2021? See the trends predictions from 13 top designers for the year, and get tips and techniques to put them into practice for your brand.

Design Trends Predictions for 2021 From Top Designers

large_2021_design_trends.png

medium_2021_design_trends.png

small_2021_design_trends.png

thumbnail_2021_design_trends.png

2021_design_trends.png

Design Trends Predictions for 2021

What a year! What a year indeed for all of us. We all had to make sacrifices in 2020. We all struggled in different ways dealing with the new reality, and the challenges 2020 threw at us. We can only hope that you, too, were able to cope, make sense of it, and come out stronger on the other side.

And how did we do at Avocode? Did we stay focused on our mission **helping teams to build great digital products by making the design process inclusive for everyone?** It was not always easy. But we pushed through it. We are proud of what we managed to accomplish and want to share the highlights with you! 

## Avocode 2020 in Numbers

- Can you believe it’s been 5 years since we first launched Avocode? We want to thank our users for being with us all this time and helping to improve Avocode. 🎉
- Our Product team [shipped 29 new features and 39 product improvements](https://avocode.com/changelog) requested by our community.
- We have improved our design file processing performance for large files (2x), design view performance (2x), and app performance by significantly decreasing its CPU usage. 
- Our API uptime and processing uptime were at 99.99%.
- We redesigned our [website](https://avocode.com/), improved the menu for easy navigation, added lots of playful illustrations and screencasts showcasing Avocode, and received almost 1 million unique visitors.
- Our Marketing team released [30 articles](https://avocode.com/blog) featuring inspiring stories, best practices, & community news.
- We published [6 helpful ebooks](https://avocode.com/books) full of tips, data, and useful insights designers and developers would undoubtedly love.
- We successfully launched [The Grit 2](https://www.producthunt.com/posts/the-grit-season-2) and [Avocode Write](https://www.producthunt.com/posts/avocode-write) on Product Hunt. 
- Our Customer Success team answered over 14,000 of your questions and comments, with a 94% satisfaction rate.
- Last but not least. We developed new and cemented existing partnerships with [Ceros](https://avocode.com/blog/case-studies-open-design-api-ceros), [Adobe XD](https://blog.adobe.com/en/publish/2020/09/14/avocode-write-plugin-adobe-xd.html), [Figma](https://www.figma.com/community/plugin/821674268995163810/Avocode), and [Sketch](https://us17.campaign-archive.com/?u=d0d26003e4fc2a50827731b93&id=80d4b273f9). They've been tremendously great partners, we really enjoyed working with them. Cheers! and thank you for your help! 

## Top 6 Releases in 2020

### <img src="https://avocode-mailing.s3-eu-west-1.amazonaws.com/mailing-app/newsletter/odapi.png" alt="Open Design API" width="18" style="margin-right: 10px;">Open Design API

It is hard to underestimate the value of the technology behind Avocode. We always knew its enormous potential. But year, we are excited and proud to launch [Open Design API](https://opendesign.avocode.com/).

<center><img width="95%" src="https://avocode-mailing.s3-eu-west-1.amazonaws.com/mailing-app/newsletter/opendesign-api.png" alt="Open Design API"></center> 

👉🏽 [How Ceros launched Sketch, Photoshop, & Illustrator import thanks to the Open Design API by Avocode](https://avocode.com/blog/case-studies-open-design-api-ceros)

As developers in the design space ourselves, we understand the struggle of accessing data from design files.

- Even a simple square has a very different code representation in Sketch, Figma, Photoshop, Illustrator, and Adobe XD file formats.
- To work with each format, devs need to study new APIs, write new parsers, and maintain them against constantly evolving design tools - which is a costly activity that also defocuses product teams from building user-centric products.
- Design teams in larger organizations work with different design tools, and design systems cannot be auto-synced due to incompatibility issues.

We’re here to change that. We’re here to open design formats with one readable and well-documented format, one API that runs in the cloud and can also work in the private cloud for an extra layer of security.

> We’re here to open design formats with one readable and well-documented format, one API that runs in the cloud and can also work in the private cloud for an extra layer of security.

With the Open Design API, developers can easily access design data and use it to sync design systems, different file versions, enable the import of design files into their product, and much more.

Would you like to solve some of your internal design workflows with our API? [Let us know](mailto:team@avocode.com).

##Avocode Tools

The multiartboard design rendering in the browser enables us to build various features on top of it - to support workflows like copywriting, user flows, or better design review. 

### <img src="https://avocode-mailing.s3-eu-west-1.amazonaws.com/mailing-app/newsletter/avo-write.png" alt="Write" width="16" style="margin-right: 10px;">Avocode Write Beta

Good copy is essential to driving engagement and conversions. So we’re happy to built Avocode Write, our new tool for crafting and editing copy online directly from Adobe XD, Sketch & Figma files.

<center><video width="95%" autoplay controls loop style="pointer-events: none;"><source src="https://avocode.com/static/images/homepage/product/design-copywriting/screencast.mp4" type="video/mp4"></video></center> 

Upload your design, click on text in any artboard, and start rewriting it. Avocode Write will count your characters & indicate if the new copy is not overlapping text layer bounds.

Every copy iteration is recorded on a timeline so you can pick the best one during the final review and pull the text changes back to the design file.

We hope you will enjoy using Avocode Write to run more copy experiments in 2021 and grow your business. 

### <img src="https://avocode-mailing.s3-eu-west-1.amazonaws.com/mailing-app/newsletter/avo-flow.png" alt="Flow" width="15" style="margin-right: 10px;">Avocode Flow Beta

It is essential to understand the logic among various screens in your new app or website. The same goes for presenting, coding, and testing its functionality. Avocode Flow solves this problem.

<center><video width="95%" autoplay controls loop style="pointer-events: none;"><source src="https://avocode.com/static/videos/flow-demo.mp4" type="video/mp4"></video></center> 

Finally, you can easily create & share screen flows from Adobe XD, Figma & Sketch design files and play them on both desktop and mobile devices. Simply sync your design, edit screen connections, create new ones, and click through the flow.

Now everyone on your team will understand the user flow and have the opportunity to provide feedback and discover potential UX fails early in the process. So you can save valuable time to focus on making your product better. 

### <img src="https://avocode-mailing.s3-eu-west-1.amazonaws.com/mailing-app/newsletter/avo-comment.png" alt="Comment" width="15" style="margin-right: 10px;">Avocode Comment Beta

We redesigned the way commenting works in Avocode. Based on our users’ feedback, we have been working hard on bringing you this new feature. 

<center><img width="95%" src="https://avocode-mailing.s3-eu-west-1.amazonaws.com/mailing-app/newsletter/avocode-comment.png" alt="Avocode Comment "></center> 

With [Avocode Comment](https://help.avocode.com/en/articles/4480205-commenting-in-avocode), you can comment and review UX changes on multiple artboards from one view, filter and preview the most relevant comments, and get notifications when someone mentions your name. 

We hope it will help you to explain your design thinking & share feedback in a seamless way. 

### <img src="https://avocode-mailing.s3-eu-west-1.amazonaws.com/mailing-app/newsletter/Avocode+Private+Cloud.png" alt="Cloud" width="18" style="margin-right: 10px;">Private Cloud & SSO

At Avocode, we are driven by two fundamental principles in our approach to [security](https://avocode.com/security): transparency and defense-in-depth. This year we made significant strides to bolster the safety of our users and their data.

That’s why apart from being compliant with the most notable industry-standard certifications, like SOC 2, we took an extra step to establish trust with our Enterprise customers and added an extra layer to our defenses - [Avocode Private Cloud](https://avocode.com/books/private-cloud).

<center><img width="95%" src="https://avocode-mailing.s3-eu-west-1.amazonaws.com/mailing-app/campaigns/private-cloud/private-cloud.png" alt="Private Cloud & SSO"></center> 

Avocode Private Cloud provides isolation at the infrastructure level as opposed to just the application level, thus eliminating entire classes of security issues like cross-tenant privilege escalation, so your most sensitive data can be safe with us.

And you can further secure your teams by requiring users to authenticate with [Single Sign-On](https://help.avocode.com/en/articles/3720329-how-to-use-single-sign-on-sso-to-log-into-avocode) (SSO). 

### <img src="https://avocode-mailing.s3-eu-west-1.amazonaws.com/mailing-app/img/logo_black.png" alt="Custom Avatars" width="16" style="margin-right: 10px;">Custom Avatars

Avocode is a collaboration platform. So for this holiday season, we prepared a little gift 🎁 for you! You can now make your Avocode team even more personal by setting your own custom avatar or selecting one from our gallery of cute Avocode characters.

<center><video width="95%" autoplay controls loop style="pointer-events: none;"><source src="https://avocode-mailing.s3-eu-west-1.amazonaws.com/mailing-app/newsletter/avotars-avo.mp4" type="video/mp4"></video></center> 

And the good news is - you don't have to worry about the file size of your custom image or its format. Just pick a photo or image you love, and Avocode will do the rest. Go to your [profile settings](https://app.avocode.com/personal-account/profile/) to add your avatar. 

## **Remote work & new teammates**

We stayed focused. This year a number of new talented people joined our team. We created new meeting spaces and started ordering healthier snacks for our kitchen. Yet, overnight, we found ourselves working remotely and connecting via Zoom calls. And it worked!

<center><img src="https://avocode-mailing.s3-eu-west-1.amazonaws.com/mailing-app/newsletter/avo-hoffice.gif" alt="Avocode Home Office"></center> 

We were lucky to go into this new work mode without any issues. Sure, we still miss seeing one another in the office, but we make it work by having an occasional virtual drink or playing an online game together during lunchtime. Turns out, one can even stay in shape, challenging your teammates to do a set of push-up every day at 11 am.

## **What’s next?**

It was a challenging year, but we also learned a lot on the way. And we won’t stop making Avocode even better in 2021, so you can build your products faster and grow your business.

To see what’s next feature-wise, keep checking our [product roadmap](https://avocode.com/product-roadmap). But, to give you a little sneak-peek about the Open Design API:

- We will be adding rendering endpoints to the API to enable developers to preview sharp designs and export assets at scale.
- We will be improving design file format support, especially for Figma and Adobe XD.
- We will be releasing more design file converters, starting with Figma to Sketch.

Sign up for our [newsletter](https://avocode.com/blog) to stay up to date on the latest product updates, trends, best design stories & tips. And join us on social media to become a part of the community.

**Cheers to the new year and all the great things to come! 🥳**

An annual review of our favorite updates and stats from the past year. 2020 was not always easy. But we pushed through it. We are proud of what we managed to accomplish and want to share the highlights with you!


How we elevated the design to code workflows in 2020

large_2020-review.png

medium_2020-review.png

small_2020-review.png

thumbnail_2020-review.png

2020-review.png

How Avocode elevated the design to code workflows in 2020

We've spent years building our flagship product Avocode to enable people to work with design files in the browser. To do that, we developed technology to transform each design format into a JSON-based design format (we call it Octopus 🐙), which enabled us to work only with a single design format (instead of five). We had to ask ourselves, could the Octopus and our design parsing power other apps besides Avocode? Short answer - it can.

In January 2020, we started working on a project with [Ceros](https://www.ceros.com/) to give them access to our Octopus format via an API to enable Ceros’ users to be able to import Sketch, Adobe Photoshop, and Adobe Illustrator design files and instantly turn them into production-ready websites.

After almost a year of close partnership, we’re excited to go public with this story. The Ceros dev team has successfully leveraged the Octopus format to work with design files in their web app and released the design file feature with their [Ceros Studio 7 update](https://www.businesswire.com/news/home/20201029005224/en/Ceros-Introduces-Release-7-a-New-Standard-for-Digital-Design). Ceros is now the third web app after [Avocode](https://avocode.com/) and our [Photoshop to Sketch Converter](https://avocode.com/convert-psd-to-sketch) that is able to work with third-party design file formats via an API.

As more companies and app teams requested access to this technology, we’re excited to announce that both our format Octopus and our API are now open to the public as the [Open Design API](https://opendesign.avocode.com/) - and yes, documentation is a part of it; check it out. 🎉

<Image src="75/1.png" caption="&nbsp;<a href='https://opendesign.avocode.com/' target='_blank'>Documentation of the Open Design API</a> for reading data in design files." />

To help you understand better the potential of the Open Design API and how it can help products out there, we sat down with the Ceros team to understand their new Ceros Studio 7 update and what role our API played in its development.

**Without further ado, let Molly O’Connell, Director of Partnerships at Ceros, introduce you to what is Ceros and why you should keep an eye out for it.**

Ceros is a cloud-based design platform that allows marketers and designers to create immersive content without writing a single line of code. It is a tool that can transform and liberate your digital presence across all touchpoints, and it’s backed up by a team of experts.

Our team has pivoted to be entirely remote-first in 2020. We are around 225 people, but the Avocode team worked with our Product, Engineering, Partnerships, and Design teams.

We're a group of people who are wildly passionate about changing the way content is created on the web. We believe content creation has been constrained by technology for too long, and creativity has taken a backseat. We exist to unlock creativity. Our platform empowers the world's leading brands to share their stories and engage their audiences.

## What value does the integration with Avocode bring to Ceros' users?

**Jack Dixon, Creative Director at Ceros:** Ceros’ partnership with Avocode empowers our customers to import Photoshop, Illustrator, and Sketch files into Ceros, instantaneously converting them to web-ready HTML5, without writing a single line of code. This cutting-edge file conversion technology integrated into Ceros’ cloud-based design studio offers unparalleled creative efficiency. Through this partnership, Ceros is now the world’s only design platform to offer this service.

Even prior to this integration, Ceros customers had a tremendous amount of flexibility in designing and building content within our design studio. But with this integration, we can now offer unparalleled design efficiency, giving our users more time to be creative.

<Image src="75/2.png" caption="The design file import feature inside the <a href='https://www.ceros.com/educate/help_center/ceros-import/' target='_blank'>Ceros Studio.</a>" />


## What business value does Open Design API bring to you?

**Jack Dixon, Creative Director at Ceros:** When I initially discovered Avocode in [an article I read](https://avocode.com/blog/sketch-xd-figma-graphics-engine-in-the-browser), I felt like I’d struck gold. This was something that had been on my mind for almost 6 years of my time at Ceros.

> Avocode’s Open Design API has essentially saved us years of development if we’d built this with our own product team.

Prior to finding Avocode, I wasn’t sure it was even physically possible to achieve this with the constraints of today’s web technologies. When I dug deeper and realized there was an API in development, I knew that this was a perfect fit for Ceros.

Avocode’s Open Design API has essentially saved us years of development if we’d built this with our own product team. We worked closely with Avocode’s technical team, ultimately developing and delivering a seamless experience for Ceros’ customers at break-neck speed.

**Alan Delong, Engineering Team Lead at Ceros,** puts it this way:

> Avocode has been one of our favorite partners to work with from our very first meeting. Their expertise is invaluable, and they have been consistently responsive to all of our requests. Collaborating with their team has often felt like they’re part of our own. They helped us build a killer feature, and it’s saved us both time and money - I wouldn’t hesitate for a second to work with them again in the future.

<Image src="75/3.png" caption="A Sketch design file being uploaded to the Ceros Studio." />

## What was your biggest struggle that you had before you started using Open Design API by Avocode?

**Jack Dixon, Creative Director at Ceros:** Ceros independently conducted several research and discovery projects with the goal of building our own file conversion engine, but ultimately struggled to make any meaningful progress due to the resources required to complete a feature of this scale.

> With our latest offering, Ceros Release 7, our customers are now at the forefront of unmatched creative freedom, power, and efficiency. A part of that magic is powered by Avocode, and we are so excited to see what our users create with it.

While Ceros has made incredible progress in the way content is created for the web in the last 8 years, we knew that integrating with the existing tools designers and marketers already know and love would broaden our user base, and build more brand loyalty over time.

With our latest offering, Ceros Release 7, our customers are now at the forefront of unmatched creative freedom, power, and efficiency. A part of that magic is powered by Avocode, and we are so excited to see what our users create with it.

## How would you assess the cooperation between Avocode and Ceros engineering teams?

**Alan Delong, Engineering Team Lead at Ceros:** After the terms of the project were agreed upon; we involved our lead designer efficiency engineer, two developers, a product manager, and our Head of Product Design. They all collaborated closely with the Avocode team throughout the course of the implementation. We also set up a shared Slack channel between the Ceros and Avocode teams, and despite the time zone difference, the Avocode team always responded to us in a timely manner. 

## Would you recommend Open Design API to other companies? If yes, what would be the reason?

I don't know of any other offering in the market that can transform all these different design formats into a single universal design schema. If any company is looking to work with files from multiple design programs, the Open Design API is hands down the right choice.

> If any company is looking to work with files from multiple design programs, the Open Design API is hands down the right choice.

## How are you satisfied with Avocode backend infrastructure?

**Alan Delong, Engineering Team Lead at Ceros:** The Avocode team provided us with the results of a penetration test they commissioned and remediated the few vulnerabilities that were found in a timely manner. There were no major vulnerabilities discovered. Overall, we've had no problems with the infrastructure Avocode put in place for us. 

## Can you explain how is Ceros using Octopus - the Avocode open design format - to import Sketch, Adobe Photoshop, and Adobe Illustrator files?

**Alan Delong, Engineering Team Lead at Ceros:** Prior to our partnership with Avocode, designers that wanted to initially prototype their Ceros experiences in a visual design tool such as Photoshop or Sketch would need to manually upload, realign, and tweak all the assets from that design file into a blank Ceros experience.

Now, with Octopus, Ceros is able to automatically convert these designs into a Ceros experience, saving designers quite literally -hours- per experience. Without Avocode's expertise in proprietary design file formats, we would have spent an inordinate amount of time creating a conversion pipeline for every format. The Octopus design format allowed us to short-circuit that and write a straightforward translation from Octopus JSON into Ceros JSON.

## How helpful is the Octopus format to you, and why?

**Alan Delong, Engineering Team Lead at Ceros:** The Avocode team created examples of Octopus from our collection of testing design files at the beginning of our cooperations. These turned out to be invaluable to us when we were implementing our side of the design file conversion pipeline.

> Without Octopus, our Design File Import feature - one of the most game-changing things we've ever released - simply wouldn't exist. It's been immeasurably helpful.

We’re extremely happy to have helped with the design file import feature to Ceros. If you are tacking similar use cases, need to import design files to your product, convert file formats, sync design system tokens or automate some pipelines around design files, we’d be happy to help. 

The easiest way for you to verify if the [Open Design API](https://opendesign.avocode.com/) is good for you, is to simply [generate a token and trying it on your own](https://opendesign.avocode.com/docs/quickstart).

Do you need to enable users to import design files (like Sketch, Photoshop, or Illustrator) into your product? Ceros (a cloud-based design platform from the USA) faced the same challenge with their Ceros Studio no-code tool. We partnered with them to solve it thanks to our newly released Open Design API and our custom JSON-based design format Octopus.

 How Ceros launched Sketch, Photoshop, & Illustrator import thanks to the Open Design API by Avocode

large_hero.png

medium_hero.png

small_hero.png

thumbnail_hero.png

hero.png

Ceros Design Import - Powered by the Open Design API - Case Study

Are you planning to build a Sketch, Figma, or Adobe XD plugin? This is a complete guide to building your first plugin, including our personal experience from developing design tool plugins and working with design formats for 5 years.

How to quickly develop Sketch, Figma, and Adobe XD design tool plugins

Guide to Developing Plugins for Sketch, Figma, and Adobe XD

## Hi Ilona. Thanks for taking the time. Let's start with who you are and what you do?

Happy to be here! I’m Ilona and I head up the Content Team at AppSumo. Truth to be told, I’ve been a bit of a word nerd for as long as I can remember. This probably has to do with the fact that English is my second language (Russian is my first), so I’ve been a little bit obsessed with getting it right.

I grew up in New York, found my love for tech and startups in Seattle, and decided that there is such a thing as too much rain so I packed a U-Haul and drove to Austin, sight unseen. In what can only be described as kismet, AppSumo was the first job I applied to when I arrived. I was instantly drawn in by the punchy, irreverent copy in the job description and knew it was the place for me.

In my current role as Head of Content, I oversee our copy, design, video, email, and content marketing teams. If you’re looking at something on our site, chances are, the incredible people I work with had a hand in it.

## Tell us a bit about what AppSumo does and what is the (success) story behind it?
[AppSumo](https://appsumo.com) gives everyday entrepreneurs the tools they need to grow their business. That means deals on client-management software, social media tools, design apps — you name it. There shouldn’t be a barrier to entry when it comes to starting your side hustle (or main hustle, for that matter!) so really, our audience is anyone looking to start, grow, or streamline their business.

Here’s our backstory: Once upon a time in 2010, Noah Kagan had the idea to bundle and discount software products that he, himself, wanted to use. Turns out, a lot of people use software and not a lot of people want to pay monthly subscriptions for it. We partner with startups and match our audience of digitally savvy folks with insanely discounted access to cutting edge tools. In exchange, our audience offers founders really valuable user feedback, social proof, and capital to flesh out their roadmap or build their team.

<Image src="73/1.png" caption="" />

## You are an expert on outreach and outbound marketing. How do you keep your messaging natural, engaging, and not spammy?

Great question! I think the key is letting your personality shine through. Everyone has received an email that they know is just a mail-merge tag of their name and website. Frankly, those are easy to ignore. But when you take time to really understand who you’re speaking to, what their pain point is, and how you can fix it for them — that’s the kind of message you want to respond to.

Thankfully, AppSumo has always had a really distinct and funny voice. So when I took over our copy, I definitely had big shoes to fill, but I was also able to sound like me. The advice that I received was to write copy like I was speaking to a friend, and to make the conversation about them — not whatever I was selling. For instance, you could say ‘this software is intended for collaboration’ or you could say ‘never deal with miscommunication again.’ One of these focuses on the feature — the other focuses on the person and the problem you’re solving for them.

> The advice that I received was to write copy like I was speaking to a friend, and to make the conversation about them — not whatever I was selling.

Emails sound spammy when they’re over-optimized. Instead of trying to fit in as many CTA buttons as you can, or using the word FREE in capital letters — focus on relating to your audience and solving a problem for them.

> Instead of trying to fit in as many CTA buttons as you can, or using the word FREE in capital letters — focus on relating to your audience and solving a problem for them.

## How do you work with target audiences, segmenting, and buyer personas?

There are a few ways to answer this question! At AppSumo, I think of our target audience in terms of their stage along the entrepreneurial journey: you have your wantrepreneurs (people that view starting their own business as aspirational), your side-hustlers, your full-timers, and your I’m-growing-my-own-business-and-hiring-ers (we should probably come up with a better name for them, huh?). These stages come to play when we’re thinking of how to effectively message to people, and what kind of content we want them to resonate with.

We also segment customers based on their stage in the purchaser funnel: casual buyers, super buyers, referrers, and affiliates. Identifying levers to get a customer from one bucket into the next increases our lifetime with that customer, and helps get new customers through the door. For example, celebrating milestones (e.g. a first purchase) with an incentive to repeat that action (say, offering a discount) positively reinforces the behavior amongst your audience.

When it comes to email, you should also segment based on activity. Having an active segment and inactive segment allows you to know who to send to more frequently, who you need to re-engage, and how to measure the overall health of your list. I use the size of the active segment as a pulse-check on how the rest of the list is doing, and how effective our retention tactics are.

## Content is not just words, but also design. How do you make sure the marriage between the two works in your content strategy?

Design is an incredibly powerful and important part of the content umbrella, namely because:

- 1. people learn and process information differently,
- 2. visual media compels emotion.

I’ll use the AppSumo content strategy as an example. For a while, our design was cartoony. Our brand is informal and jokey — not to mention, software tends to be abstract (there are only so many ways you can showcase spreadsheets). But as we started to delve deeper into the AppSumo brand promises and values, we realized that at its core, our ethos was about **serving and honoring the entrepreneur**. Our cartoon-like images did not adequately capture the feelings we wanted to evoke. This led to our decision to tell more customer stories and partner case studies. With that comes a stronger emphasis on human-centric imagery and design.

<Image src="73/2.png" caption="" />

## As a content strategist, you need to worry not just about the textual message, but also how it looks. How does your content department work with the design team?

We’re blessed to work with some of the best designers in the game, who can visually translate even the most complex concepts. That said, designers aren’t mind-readers, so it’s important to have clear examples of what we’re looking for. Recently, we got into the habit of creating mood-boards via Pinterest and [Really Good Emails](https://reallygoodemails.com/) to draw inspiration and be able to accurately communicate what we want.

<Image src="73/3.png" caption="Really Good Emails’ Collection feature has been a game-changer when it comes to categorizing and sharing inspiration for new campaigns and designs!" />

This might sound really basic, but one thing we’ve only recently started doing is creating a strong visual style guide, both for internal and external use. Keeping an up-to-date repository of our colors, logos, fonts, etc. has allowed us to become more streamlined and consistent. And this goes without saying but as a team grows, documentation is everything!

<Image src="73/4.png" caption="AppSumo design system." />

At AppSumo, the design team is an integral part of the content team — and we work closely on just about every project. Jeir, our amazing Creative Director, sets the tone and direction for a campaign. For example, we’re cooking up something. 🔥

for our Black Friday event this year. Jeir and I met to discuss potential themes and landed on a visual identity we were excited about. From there, his team works with the video, ads, and affiliate teams to create assets that match for each channel. Our copy team then brings it over the finish line with choice words that match the look we’re going for.

<Image src="73/5.png?v1" caption="AppSumo Black Friday campaign last year (2019) — a 1990’s throwback theme, reinforced with copy" />

The start-off point is important here: for a campaign like Black Friday, we led with design. Other campaigns, like say, a Back-to-School Giveaway, start with an idea or a feeling expressed by copy. Then it’s the design team’s job to translate that into a visual. Collaboration is key here. Having a team that feeds on each other’s energy and wants to supplement and improve what’s already there is the missing ingredient between good and great.

## Many people nowadays think that humanity has stopped reading and that the average attention span is shortening. What do you think? Do you think people don’t read online?

People definitely don’t read as much as you want them to, but I also don’t think the situation is as dire as it seems. We actually polled our audience about this last year and the results were about what you’d expect (picture on the left). While there were many "skimmers", we did have some customers tell us that the copy is an integral part of the experience for them (picture on the right).

<Image src="73/6.png?v1" caption="" />

> People definitely don’t read as much as you want them to, but I also don’t think the situation is as dire as it seems.

But we did have some customers tell us that the copy is an integral part of the experience for them:

Words definitely matter — that’s why newsletters like Morning Brew have seen a resurgence recently! Ultimately, there are many different kinds of people, all with their own preferences and proclivities. So my answer is: **repurpose the same kind of content in every medium so each visitor can choose their own adventure**. We have fun, engaging copy if you care to read it; a high-energy video if you prefer to watch; and screenshots and GIFs sprinkled throughout the page for those that need to visualize. Instead of lamenting that audiences have shorter attention spans, ask yourself: How do I get a piece of that attention pie?

> Repurpose the same kind of content in every medium so each visitor can choose their own adventure.

## I’m sure that at AppSumo, you are often talking to various audiences. What’s your take on localisation?

Lucky for us, entrepreneurship exists worldwide. Add the secondary layer that we sell software tools to grow online businesses, and our target market is the entire world. (No big deal, right?)

That being said, we are definitely experimenting with localization. For example, we created a task force to translate one of our deal pages into Spanish — including copy, video, and a webinar. We then ran ads exclusively to a Spanish-speaking audience. Our main learning from this experience is that it is not easy to do!

There are tools that can help, however! We recently featured [Alugha](https://alugha.com/) on AppSumo, which allows you to translate video content into the language of your viewer.

I would recommend using insights from tools like this to better understand who your audience is, and what opportunities are your biggest levers before making massive time/resource investments.

## You are very passionate about e-mail marketing. To make sure you send the most compelling e-mails with good frequency and timing, you need to have some sort of framework or calendar. What do you use?

You’re so right, I AM very passionate about e-mail marketing! This is a tough question to answer because it really depends on who your audience is, what product you’re marketing to them, and how frequently you’ve been sending emails in the past. We started by sending two emails per week. Then, as our deal calendar grew, we experimented by slowly adding more emails to the week and monitoring how our audience responded to them. Now, we send closer to five emails per week — many of them digest-style featuring multiple tools in one.

I don’t think there’s a magic cadence, but I would keep this framework in mind:

1. Provide value every time by being entertaining, giving something away for free, or solving a problem

2. Don’t send an email just to send an email (see point #1)

3. Monitor how your audience is reacting to what you’re sending them. A/B test length, copy, subject lines, etc. Keep your lists smaller but more engaged. Know your key metrics, like unsubscribe rate, and course correct when your leading indicators tell you to.

## What’s your take on simply textual vs visual templates? Which works best and when?

I love a plain-text template! Our Chief Sumo, Noah Kagan, sends mainly text-based emails for his [YouTube channel](https://youtube.com/okdork?sub_confirmation=1) and they have great engagement!

<Image src="73/7.png?v1" caption="" />

Plain text emails make more sense when they’re coming from a person, rather than a company. Visual emails really let your brand shine!

I also think that if your product is visual, then that should be conveyed in your emails. An important call-out for visual emails is accessibility. Make sure that you leverage alt-text where your images are in the event that someone is visually impaired and leans on apps to translate your messages, or even if someone has the HTML turned off on their ESP. The last thing you want to do is send an email that’s basically null because you didn’t consider accessibility!

## How do you test the quality of design and code in your emails and generally your content strategy?

When I first started at AppSumo, I introduced a completely new email layout. In order to effectively do this, I rolled it out in stages to make sure that I didn’t completely confuse and alienate our audience. That’s why I started with A/B testing to our newest customers, and when I saw that my variation was equal to or better, I moved on to the rest of the list.

For example here is the progress of one of our emails:

1. Added our logo and a nav bar so it’s clear that we are the brand behind the email;
2. Added a live timer to capitalize on the FOMO component of the time sensitive deal;
3. Shortened up our copy considerably with more focus on a call-to-action

<Row col="2"><Image src="73/8.png?v1" caption="AppSumo email template in 2017" /><Image src="73/9.png?v1" caption="AppSumo email template today (2020)" /></Row>

## Social media apps. We all use them. They steal our time and we can’t help it. As a content strategist, which are the best social media channels to deliver your message?

So full disclosure: I’m terrible at Instagram—at least when it comes to my personal page. No one’s made me a brand ambassador yet (holler at your girl, @Madewell). But when it comes to content strategy, I think IG is still king for visual brands.

For a company like ours, YouTube is probably the channel I have the most faith in. Its algorithm is scary-good, and it’s free to host! We’ve seen a lot of success when we started taking it seriously — more so than on any other platform. (If you want to give our channel a follow, you can [find us here.](https://youtube.com/appsumo?sub_confirmation=1))

I also wouldn’t underestimate the value of a Facebook group — doing the grunt work upfront to find relevant groups that have high engagement can seriously pay off! I would recommend doing your research and putting time into crafting a post ([here’s](https://growgetters.substack.com/p/posting-to-facebook-groups-100s-of) how I recommend you do that).

## Every successful design or tech driven company ends up with building a sales team. What’s your take on cold e-mailing and generally outbound marketing? How can you do it to break the ice, build relationships instead of bothering people?

Ok, so here’s the thing: no one likes receiving emails from a robot. And while I’m sure a lot of people will tell you it’s a numbers game, I say it’s always better to start with your warmest leads (aka your personal and secondary network) and write real messages, even if it takes longer. I would also definitely recommend my friends over at [lemlist](https://www.lemlist.com/), whose software is killing the personalized outreach game.

Here are some fast and loose tips for outreach:

1. Act like you know the person! Say something like, "I see you’re based in Austin! I love the al pastor tacos at Veracruz!" (Related side note: Make sure you don’t spell someone’s name wrong! This happens to me all the time and it’s an instant dealbreaker.)
2. Don’t say generic things like: "I hope this email finds you well during these unprecedented times." (And if you do, make a joke acknowledging how generic that is.)
3. Follow up! I often respond to the second or third email. But please, don’t make your follow-ups sound like a lyric from Eminem’s “Stan.” Instead, give people a kind way out. Say "Hey I’m a big fan and I’d love to collaborate with you - but no pressure." The relationship shouldn’t feel contingent on them taking your preferred action. Who knows? Maybe there will be a door open in the future if isn’t right now.

If this topic really gets you going (I respect that, you weirdo), I’d also recommend checking out this [Outreach 101 blog series](https://blog.appsumo.com/defining-your-buyer-persona/) we put together!

## Can you share your favorite resources?

- [https://reallygoodemails.com](https://reallygoodemails.com/)&nbsp;-&nbsp;The best place to find inspo for an email campaign! They just came out with an SMS version of this and it’s also awesome. Plus, their emails are…really good.
- [https://www.figma.com/community](https://www.figma.com/community)&nbsp;-&nbsp;I’ve been loving Figma as a collaborator and am really impressed with the community posts!
- [https://open.spotify.com/playlist](https://open.spotify.com/playlist/6MURYpgRMJbdnmXUJQ4aJ3?si=4GNtyOKoSgCdl3FOMrOzFA)&nbsp;(Yes, I made this playlist. No, I’m not embarrassed. [#FallOutBoy4Ever](https://paper.dropbox.com/?q=%23FallOutBoy4Ever))
- [https://www.nytimes.com/crossword](https://www.nytimes.com/crossword)&nbsp;-&nbsp;Best yearly subscription money can buy! Helps with writers block, word association, and cultural references.

## What’s your greatest worry when it comes to the content strategy as a profession in 2020?

I’m always concerned with balancing SEO-led content with strong, community-driven stories. Ultimately, I think you need both: a way for new people to find you, and high-quality content to keep them engaged and subscribed. Marketing of any kind is always easier when you’re selling a good product, so creating read/watch/shareworthy content will always be priority #1.

## Where is the best place for people to connect with you online?

Hit me up on [LinkedIn](https://www.linkedin.com/in/ilona-abramova/)! I’ll be quizzing you on your outreach skills. 😂

---

## Bonus Question: What's your favorite way to eat avocado?

On toasted sourdough, with EVOO and Za’atar.


Ilona Abramova leads the Content Team at AppSumo. After years working in community management, copywriting and content strategy, she has learned many tricks on outbound messaging, a/b testing, and UX writing in the design process. Now she reveals them for The Grit by Avocode.

 Why words matter not just in marketing but also in design with Ilona Abramova, Head of Content at AppSumo

The Grit - Ilona Abramova, Head of Content at AppSumo | Avocode Blog

Sara Kalinoski is a Product Design Lead with over 12 years experience from both agencies and in-house. After having crafted brand and product experiences for Apple, Audi, Visa, Medtronic, Contentful, Zalando, and most recently, Delivery Hero, she now shares her life story with Avocode for The Grit.

On continuous learning and the importance of mentorship with Sara Kalinoski from Delivery Hero

The Grit - Sara Kalinoski, Product Design Manager at Delivery Hero

## Hi Lubos. Let’s start with who you are and what you do?

Hey! I’m Luboš, a product designer based in Prague, Czech Republic. In the past 10 years, I’ve worked on the forefront of design with many influential global brands, including Netgear, UnitedHealthcare, and L’Oréal. When I am not designing, I am trying to educate the next generation of designers on my Instagram or mentorship sessions.

Currently, I’m leading one of the design teams at Toptal. In fact, I was the very first designer at the company working there for more than 7 years. I helped to establish key user interface frameworks, hired key design team members, and established the foundation for future product and brand development.

> In fact, I was the very first designer at Toptal, working there for more than 7 years.

## Tell me about how you got started and what led you into design?

In high school, I studied electrotechnical engineering, which was focused on math, physics, technical drawing, and design of electric circuits. I designed and successfully launched my own functional sound amplifier during my last year in high school. After high school, I went to the Czech Technical University to become an engineer.

However, at that time, I have discovered Photoshop (yes, Photoshop was used for interface design at the time) and my love for design and solving complex problems. I decided to take a leap of faith and quit the university to become a user interface designer.

At that time, my skills weren’t good enough, I locked myself at my room for almost one year, and I practiced on my own (free) imaginary projects, everything from web design to complex user interfaces. After one year, I started sharing my work on Dribbble, and I got a job offer from Silicon Valley-based startup; that’s how my long journey started. It was almost ten years ago.

> My skills weren’t good enough, I locked myself at my room for almost one year, and I practiced on my own (free) imaginary projects, everything from web design to complex user interfaces.

<Image src="71/1.png" caption="Moneto – Mobile Banking Application [In Development]" />

<Image src="71/2.png" caption="Moneto – Mobile Banking Brand Guidelines" />

## What did you do before you joining Toptal?

Before Toptal, I was working with digital agencies and also freelancing, mostly with the US-based clients, since the quality and overall startup culture (at that time) was way more developed over there. I touched everything from the user interface, branding to motion.

It was definitely a valuable part of my career since it gave me a strategic oversight of different design disciplines. That was later very valuable at Toptal.

<Image src="71/3.png" caption="Ntgr – Gaming Dashboard Interface" />

<Image src="71/4.png" caption="Ntgr – Gaming Dashboard Interface Guidelines" />

## You’re leading the Design team at Toptal right now. Can you briefly describe what Toptal is about and how your design team operates?

Sure. Toptal is an exclusive network of top freelance software developers, designers, finance experts, product managers, and project managers in the world.

I’m at Toptal for more than 7 years, so I have seen and helped the company to grow from 10 ppl to 650 ppl. My hiring process was straightforward, I got an email and skype call from the CEO, and I got hired almost immediately after that. That’s how my journey started.

The entire company is remote. Toptal is the world's largest fully distributed company. We do not have any office; our entire team is fully remote from day one. We got people from 126 countries, which is pretty impressive in my opinion.

At this scale, our operation is fully automated and driven by our [playbook](https://www.toptal.com/remote-work-playbook) and own tools developed specifically for us. Like most people, we use Zoom for all our meetings, and we always follow these rules to stay as productive as possible.

- Be flexible with time zones
- Have an agenda
- Keep your camera on
- Mute notifications
- Cancel or end early if needed
- Rate your meetings

We also use asynchronous work to our advantage. With asynchronous communication, a team member provides information, and the recipient sees and responds in their own time. Working this way helps maximize productivity when team members are located in very different timezones. In order to work asynchronously, we need to use the right set of tools. The most important ones are listed below.

- Zoom, Slack (Communication)
- Figma & Sketch (Design)
- Abstract (Version Control)
- Miro (Brainstorming)
- Google G Suite (Storage and Collaboration)
- Trello and Asana (Tasks)
- Confluence (Wiki)

## Tell us more about your role. What are your key responsibilities?

My focus changed over the years, based on the company's needs. In the beginning, my focus as the only designer was everything design-related, from the user interfaces to the website experience. However, my biggest focus was the design of the Platform UI (Platform is a proprietary piece of technology created to run all operations.).

After three years as the only designer, I started hiring, leading, and mentoring my own design team (UI/UX Designers, Illustrators). I end up hiring 7+ people to kickstart the Design Team at Toptal. A huge majority of them are nowadays at leading positions.

These days, when the Design Team and the entire organization are much bigger, we split into multiple design teams and lead one of the teams. My day to day work is focused on specific design problems, where I work with cross-functional teams to solve them. I am also involved in project planning, roadmaps, brainstormings with other functions, or hiring.

## As a Design Lead, how do you approach your designers' team to work with front-end developers successfully?

For me, it is communication and following the best practices. We always like to review our designs with developers early on, often there is a developer paired with the designer so they can collaborate and discuss the potential design challenges even in the lo-fi phase of the design. They can brainstorm potential solutions together even before showing the designs to the stakeholder. This more collaborative process allows us to avoid scope creeps and delays in the product releases. The cadence of these sync ups between developer and designer is determined after the official kickoff call, and it highly depends on the complexity of the project. However, the communication line between designers and developers needs to be always open with regular check-ins on progress.
Since we use Sketch for product design and our entire design system is hosted there, we also use the Abstract for version control and handoff. It currently suits best our workflow the best. However, that can change in the future as we try to stay flexible. We also track every single issue and task on Jira, and we document everything in the Confluence, which is used as our internal wiki. Developers are using Jira, LucidChart, and RetroBoard.

<Image src="71/5.png" caption="" />

## You’re very active on Instagram. How relevant, in your opinion, is self-promotion for designers?

In my opinion, it is more and more important these days. You are essentially building your digital brand, and followers are giving you more credibility. I’m not saying it is right; however, it is how it works. Social media helps you to get more points during the hiring process.

Along with that, social media or the audience, in general, is always valuable. Imagine you release a new product, or you need to get hired. In the past, my audience played a major role in the releases of my [digital products](https://ioswireframingkit.com/). They not only purchased my tools, but they also promoted it on their own social media, which helped me to generate even more sales. Obviously, this only applies if you create something which our audience cares about.

> Imagine you release a new product, or you need to get hired. In the past, my audience played a major role in the releases of my digital products.

## Why did you decide to go with Instagram?

Good question. I’m on Instagram from the beginning when everyone was posting selfies and photos of their food (try to scroll down my feed). However, over time, I found out that Instagram is a good way how you can engage with the audience and tell the stories. Plus, the audience over there is huge, not only designers but also potential clients. However, for the clients, it is usually working as validation, they will more likely not hire you directly on Instagram, but they are going to review your profile to see if you are a legitimate designer and if they can work with you. I highly encourage everyone to curate their social media since prospective clients and going to google their name and Instagram or Twitter will be the first thing that will popup.
Technically I am everywhere from Dribbble, Twitter to Youtube. But I do not post that often to these platforms. I plan to put more effort into Dribbble and Youtube later this year.

## Having in-depth knowledge of your Instagram target audience is an important part of every successful social media strategy. How do you find your target audience, and what are your targeting tactics to reach them?

Totally, it’s is the key. However, Instagram analytics tools are very limited. But my posts are always targeting designers (from juniors to seniors), I do not target clients. If you create a profile with valuable content, high-quality visual people are going to find you. For example, I was interviewed on 180k+ design [Youtube](https://www.youtube.com/channel/UCN7dywl5wDxTu1RM3eJ_h9Q) channel, specifically due to my Instagram. Ran Segall, who is running the show, found me on Instagram. We started to chat in the DM and agreed on a short interview. This helped me to build an even bigger audience, plus I have a nice social proof for my portfolio.

I always try to follow and stay in touch with accounts with a similar niche and similar size. I engage with their posts, chat with them in the dm, or share their stories. Then they do the same for me, which allows me to reach their audience and eventually grow my account.

## How do you create content that grabs the attention of your audience and entices them to engage?

I always ask myself if this is a topic, I would like to read about and then create a post about it. It is that simple there is no magic behind that. However not every single post is successful, it is always hard to predict since the Instagram algorithm is unpredictable.

> I always ask myself if this is a topic, I would like to read about and then create a post about it. It is that simple there is no magic behind that.

My goal is to help designers to elevate their design skills or learn something new in a very short period of time. Instagram carousels are perfect for that since you need to focus only on the core of the problem and remove everything else. Below are a few examples of very successful ones:

- [7 Tips On Colors in Interface Design](https://www.instagram.com/p/BuBhhSPBEjl/)
- [7 Tips How To Get Started In Interface Design](https://www.instagram.com/p/Bu6MPJhhYM2/)
- [8 Great UI/UX Design Tips & Tricks](https://www.instagram.com/p/CAXpDxzFpAi/)
- [15 Best (Free) Google Fonts by the Numbers](https://www.instagram.com/p/B_UscJRFhrX/)

<Image src="71/6.png" caption="Example of my popular Instagram posts" />

## Repurposing content is a great way to bring back old ideas and make them fresh and new. How do you repurpose your Instagram content to be more consistent across all of your social media platforms?

I don’t do that often (I should I know). I have flexible design templates for almost everything (From Instagram to Twitter) these are usually used for some time until the next version is created.

## How long does it take to create quality social media content for you?

It takes anything between 1-4 hrs per post, but it depends if it’s a carousel or photo since each of them requires a different approach. For me, the most time consuming are the photos, since I have developed a very “sterile” style of the photos which require a lot of preparation and clean up before every photo shoot. I like to say that my table is popular on Instagram not me haha. I usually try to post twice a week, which allows me to focus on quality.

## Where do you get inspired?

I got two types of inspiration digital and offline one. For digital, it is usually [Dribbble](https://dribbble.com/), [Abduzeedo](https://abduzeedo.com/), [Awwwards](https://www.awwwards.com/websites/), or [Instagram](https://www.instagram.com/projektmono/). I like to observe things there, collect mood boards inside the design tool, and then craft designs based on the inspiration and then iterate.

For the offline one, people around me such as my family, friends or colleagues. Then traveling to different countries or hiking. This type of inspiration is more like an influence that is not immediate and appears only after some time. For example, you see a certain pattern on the building at Lisbon, Portugal, and 5 months later, you use it in one of your projects.

## Give our audience 5 actionable tips if they think of kicking-off their Instagram game.

1. Share stuff you are passionate about
2. Set up a strict sharing schedule
3. Do not worry about every single detail, just post
4. Engage with your loyal audience (dm’s, comments, etc)
5. Instagram is not everything, do not forget about your own life

## Did you have any good mentors that helped you shape your design career?

I personally didn’t have any sort of mentor, I always have been learning by trial and error which was definitely harder and longer, however, it helped me to form my own process and perspectives without being a replica of someone.

I would give one advice to starting designers. Do not wait for the perfect moment and do not worry that others know more than you, take action. If you do not have a portfolio create your own practice projects (find a problem and solve it). If you do not know how to do something google that or read a book about it. Make it happen.

## Where is the best place for people to connect with you online?

You can follow me on [Instagram](https://www.instagram.com/lubosvolkov), [Dribbble](https://dribbble.com/OtherPlanet), [Twitter](https://twitter.com/0therPlanet), or [LinkedIn](https://www.linkedin.com/in/lubosvolkov/).

## Bonus Question: Avocado vs. Guacamole?

Avocado!

Currently, I’m leading one of the design teams at Toptal. In fact, I was the very first designer at the company working there for more than 7 years. I helped to establish key user interface frameworks, hired key design team members, and established the foundation for future product and brand development.

 Lubos Volkov has founded the Design Team at Toptal, followed by more than 60,000 designers on Instagram. He has worked at the forefront of design with brands like Netgear, UnitedHealthcare, and L’Oréal. Now he reveals his career path story for Avocode.

Top product design news,
tips, and stories

18 tips on how to do frontend best & improve design-to-code collaboration

On how to effectively pair content and design with Christina Wu from Facebook

How Avocode Improved Development Process 10x with Shape Up (+ Workbook)

Design Trends Predictions for 2021 From Top Designers

How we elevated the design to code workflows in 2020

How Ceros launched Sketch, Photoshop, & Illustrator import thanks to the Open Design API by Avocode

How to quickly develop Sketch, Figma, and Adobe XD design tool plugins

Why words matter not just in marketing but also in design with Ilona Abramova, Head of Content at AppSumo

On continuous learning and the importance of mentorship with Sara Kalinoski from Delivery Hero

How Lubos Volkov founded the Design Team at Toptal and built a 60+K Instagram following

Top product design news, tips, and stories

Top product design news,
tips, and stories