Blog

Mikuláš Beskyd

We've put together 6 quick tips we are following in Webscope that could help you when handoff your design to the developer team.

When you're kicking off a design project, it's totally fine to hold off on picking text styles and colors right away. At Webscope Design, we prefer waiting until we're super clear on how we want our design to look. This helps us be more creative because, at the start, things can change quite a bit. If we decide on styles too early, it might put limits on our creativity, and we might end up spending more time fixing things later on. Waiting a bit allows us to be flexible and make choices that really fit the project.

This is one of the things that makes many designers nervous 😀. We admit that even at Webscope Design, we don’t always manage to follow it, mostly depending on the project’s size or deadline. If it’s a project that needs to be done quickly and time is pressing, then layer naming isn’t as crucial. However, for large projects where we know we’ll be working long-term, we do name our layers. Give it a try, it’s not as complicated as people say. You’ll definitely feel proud of yourself, and your colleagues working on the project will appreciate it, too.

Making sure designers and developers work well together is really important. That's why we think about all the different ways a user might interact with our design. This way of working helps the collaboration between designers and developers go more smoothly, making the whole process faster and more efficient. By planning for different user interactions, we create a foundation for a design that's not just pretty but also easy for people to use.

Whether it’s a large or small project, we always design for both desktop and mobile. This makes the work easier for the development team, and we know that the design will function perfectly on smaller devices as well. We’ve also encountered cases where it was necessary to create multiple templates for various sections (Hero Section, Text Row, Image Row, Icon Rows…). These sections were then prepared for different breakpoints and used throughout the entire website.

We have two options to choose from. We can either use a pre-existing design system, or we can create everything from scratch. If we opt for the second choice, we centralize all the components, colors, and fonts. Essentially, we create a catalog that encompasses everything from design to instructions on how to maintain and correctly utilize these individual elements.

At Webscope Design, our use of sitemaps is tailored to assist both designers and developers by visually mapping the connections between pages. By outlining all pages and their connections, our sitemaps become a strategic tool in our workflow, helping to enhance handoff between designers and developers and making the entire process more efficient.

We dare to say that this is something that is most often forgotten, yet it is one of the most crucial aspects of UX. Often, this empty state can provide the user with very useful information. 

We recognize several categories of empty states:

Error or Failure: Empty states in this category appear when something goes wrong, such as a network error or an invalid input.

Search Results: If a search query returns no results, an empty state can inform users about the lack of results and provide suggestions for refining the search criteria.

No Data: This occurs when there is no content available to display. It's important to communicate to users why there is no data and what actions they can take to populate the screen with content.

Onboarding: These empty states are used to introduce users to the application or feature for the first time.

Subscription or Upgrade: In applications with subscription models, empty states may encourage users to upgrade their subscription or unlock additional features.

We believe these insights can be a valuable resource for designers, enabling a more effective handoff to developers. By incorporating these points into your daily design practices, you can contribute to a seamless collaboration, helping developers in their work. 🚀🚀

How we prepare design for development team

Andrej Marfiak

Do you use Figma for your web&mobile designs? We love this tool so we decided to share with you 7 plugins we are using daily to boost our productivity. Keep reading!

This plugin integrates all accessibility tools to ensure your designs are accessible and meet legal requirements and standards. Its main functions are contrast checker and colorblind simulation.

Learn more about Stark here

With this plugin, you can easily create the most popular charts using random data, tabular data (Google Sheets, Excel, Numbers, and CSV files are supported), or JSON data. The built-in edit feature allows you to change chart type or style.

Read more about this Chart here

This plugin allows you to batch rename layers and frames. Rename the current layer name, sequentially rename layers or replace any word(s) or character(s) from selected layers. Keep your design files organized.

Learn more about Rename It here

Using this plugin you can select similar layers based on a whole range of properties. It’s perfect when you want to change all layers with a specific Text Style to a new one or just select all “cards” with the same corner radius.

Find out more about Similayer here

Do you need to remove the background of the image? There is no easier way how to do it than using this plugin which allows you to do it automatically with just a single click. It works perfectly!

Learn more about Remove BG here

This plugin contains literally tons of icons, (the well-known packs are included) which you can easily import into your designs. With the built-in edit feature, you can also change icon color, size, and rotation.

Find out more about Iconify plugin here

Do you struggle with the content of your designs? This plugin offers a palette of text strings, images, avatars, icons, and many more. Just find what you need and make your content look more real.

Read more about Content Reel plugin here

We hope these plugins will help you increase your productivity as in our case. Do you have your favorite ones? Let us know, we’re all ears!

Blog

Our design journal