What Software Developers Wish Designers Knew About Creating Software

Let’s say you’re building a new house.

You start by choosing a contractor, drawing up plans, and putting together a building strategy.

Next, the construction team comes in to lay the foundation; put in the framing; add doors, windows, walls, and floors; install electrical and plumbing systems; construct the roof; and install exterior siding or brickwork.

Someone also has to plan the visible parts of the house: the wall colors, cabinets, fixtures, appliances, carpet, furniture, and wall hangings—all the things that people see.

Finally, a crew comes in to implement the design—painters, cabinet installers, appliance crews, carpet installers, furniture movers, and the staging people who make everything look shipshape.

Everybody has to work together to produce the final product. You can’t suddenly decide to add another room after the house has been framed in. And you can’t knock out a load-bearing wall if you decide the kitchen is too small.

You’ve probably guessed by now that we’re not really talking about building a house, we’re talking about building software. But the processes are surprisingly similar!

A Quick Introduction to Some Terms and Concepts

There are a few things every designer should be familiar with when you’re working with a development team. These are the teams and tools of the construction project, so to speak:

Back-End Development—This is the construction phase of the house. Back-end developers lay all the foundational groundwork and build the structure of the software using coding languages (Python, for example). This includes the server-side script, framework, database models, and API.

Front-End Development—Front-end developers create the parts of the software that users see. They handle the design implementation, including HTML, CSS, and Bootstrap tools. This is usually the person (or team) designers work most closely with, so it makes sense to understand the basics of how a design translates into coding at this level. In our analogy, these are the developers who handle everything you can see.

If you as the designer have a working knowledge of these two teams, you’ll be able to communicate more effectively with the development team. You’ll also be able to present your design to each group of developers in a way that makes sense within the coding framework.

Terms and concepts are a good starting point, but if you want to help the project move along more efficiently, there are a few more things you should know:

How to create designs that translate easily into code

Developers think in code, and designers think in visuals. The two don’t have to be mutually exclusive. Designers can make the process smoother by creating designs that developers can easily translate into code. Here are a few ways to do that:

Progressive enhancement

Developers love the latest technology and style developments as much as the next person, but not every browser will support them. (We’re looking at you, Internet Explorer.) Build your design so basic browsers can handle it, and then add additional features to enhance it progressively.

Style guides

Apply style guides universally to your designs. Include specifics about fonts, margins, headings, and colors. You don’t have to be fluent in HTML, but using HTML designations in your style guide whenever possible helps developers understand more clearly what the finished product should look like. This will save developers time while ensuring design consistency.

Mockups

Explain features and animations in detail in your mockup so the developer knows what is supposed to happen. Use annotations to designate when buttons can be removed or what should happen when the user reaches the end of the search results. Think about how the design should look on different screen sizes—especially the smartphone. Check out these mockup approaches for some inspiration.

Images

Understand the benefits of different file types and when to use them. Send us the highest resolution image you have, in as a large a size as you can—but ask developers when they need options for smaller images to ensure fast page load speed.

How to speak the language of development and avoid communication problems.

Problems occur when developers aren’t clear about what the designer envisions. If the designer has to improvise, you may not be happy with the final result. Here are some ways you can keep everyone on the same page:

Understand and Use Conditional Logic

Code is always constructed using conditional logic: “If this happens, then do this, else do this.” It’s important to include the “else” component in the design flow; otherwise the developers will have to guess. For example: If the user enters the correct login information, launch the member page, else display the designated error message.

Remember the Error States

What happens when things don’t work as expected? Do users get a generic error message? Or do they get something creative like this error message from Airbnb that provides additional options?

Know How Data Is Stored

Data storage can make your life easier or harder, depending on how well it is constructed. If you have a basic understanding of data storage, it will be easier to determine whether a developer can add sorting to the dashboard real quick or whether that’s actually going to be a lot more work than you think.

Learn HTML Speak

You don’t have to be fluent in HTML, but it does help to have a basic knowledge of HTML elements and what they do. Basic knowledge of HTML will help you communicate your vision more effectively. If you can include them on your style guides, even better.

Conclusion: How to Work More Effectively With Developers

We all have the same goal: to produce functional, user-friendly software that everybody loves. When designers and developers are on the same page, it’s much easier to reach the final goal without mishaps and misunderstandings. So here are a few final things you as the designer can do to work more effectively with the development team:

Involve developers early

Talk to them about how the software should function so they can provide input. Developers can tell you if the functionality you envision will work with the current database parameters and can offer suggestions based on what they have learned from other projects. This will save everyone time in the long run.

Understand that small changes may involve a lot of code work

How hard will it really be to make that one last change to the page design before the project goes live? Ask your developer. It may be a small tweak, but it may also require a significant amount of code work behind the scenes.

Keep file names simple and consistent

Use a system for naming files, and make sure everyone on the team does it the same way so that design assets are easy to find.

Communicate

The developers should be involved at every stage of the project, including the design stage. They need to understand user needs so they can create a functional and seamless user experience. At Worthwhile, we ensure that a developer reviews every design before it’s presented to a client, just to make sure everyone is on the same page.

Experienced architects know how to design a house so that the construction stage is fairly straightforward. As a web designer, the more you can consider the construction crew (i.e., development team) in your design, the easier it will be to create the final product.

And in the end, your users will think of your software as home sweet home.

About Worthwhile Storyteller

We'll never tell you a lie, but we might tell you a success story that protects the intellectual property of our clients and partners. Our Worthwhile Storyteller is an amalgamation of all of our thoughts, experience, and expertise brought together to give you the facts about our relentless improvement in the software development space.