{"id":4019,"date":"2018-08-14T19:28:23","date_gmt":"2018-08-14T19:28:23","guid":{"rendered":"https:\/\/leap.staging.ribbitt.com\/insights\/how-design-and-development-work-together\/"},"modified":"2018-08-14T19:28:23","modified_gmt":"2018-08-14T19:28:23","slug":"how-design-and-development-work-together","status":"publish","type":"insights","link":"https:\/\/leap.staging.ribbitt.com\/insights\/how-design-and-development-work-together\/","title":{"rendered":"How Design and Development Work Together"},"content":{"rendered":"
Once upon a time, in the magical internet forest, Desi and Devy were walking along the banks of Web Creek. They had reached the widest and deepest part when they came upon Mr. User the turtle.<\/h5>\n
“Hi Mr. User!” exclaimed Desi and Devy. “What are you doing?” they asked.<\/h5>\n
“Hi Desi and Devy. Well, the creek is higher than usual, and I’m trying to figure out how to get to the other side.”<\/h5>\n
“We can help!” said Desi and Devy, and they started working out how to help Mr. User.<\/h5>\n
Desi, who always carried a notepad and pen, started sketching out a plan. She quickly finished and showed Mr. User a picture of a sail made out of leaves attached to his shell.<\/h5>\n
“That’s nice,” said Mr. User, “but…”<\/h5>\n
Just then Devy appeared from behind a tree with some sticks and branches wrapped together with twine.<\/h5>\n
“I made you a raft,” said Devy.<\/h5>\n
“Thanks Desi and Devy,” said Mr. User, “but my legs are powerful enough to propel me through the water, so I don’t need a sail. And my shell keeps me afloat, so I don’t need a raft. What I need is a rudder to help me navigate the fast-moving current. Can you work together to help me with that?”<\/h5>\n
“Yes!” said Desi and Devy, and they got to work.<\/h5>\n
“I’ll sketch a solution,” said Desi.<\/h5>\n
“And I’ll build it!” said Devy.<\/h5>\n
So Desi sat down to begin sketching, and Devy went off to find some materials that he might need.<\/h5>\n
When Devy came back, Desi handed him the final sketch and said, “I’m going to go talk to Mr. User about this while you build.”<\/h5>\n
As Devy was building, some of the parts of the sketch weren’t possible given the materials on hand, so Devy modified them a little.<\/h5>\n
Devy put the final touches on Mr. User’s rudder, and went back down to Web Creek where Desi and Mr. User were talking.<\/h5>\n
“That’s not what I sketched,” said Desi immediately.<\/h5>\n
“I know,” replied Devy, “but parts of your sketch weren’t possible with the materials I had.”<\/h5>\n
“Good work, both of you,” said Mr. User. “But I think if you really work together, you can come up with an even better solution for my rudder.”<\/h5>\n
So Desi and Devy sat down and discussed Mr. User’s needs, the materials they had, and the best way to create a rudder to help Mr. User cross the creek. Desi sketched and Devy built. And in the end, they created the perfect rudder for Mr. User.<\/h5>\n
“Thanks Desi and Devy!” shouted Mr. User and he set off across the creek.<\/h5>\n
“You’re welcome!” shouted Desi and Devy back. <\/h5>\n
\n

All great stories have lessons we can learn from. While this isn’t the greatest story, there should be some obvious lessons we can learn about collaboration between design and development.<\/p>\n

Before we can understand these lessons, we need to look at the design and development roles to see why working together is so important.<\/p>\n

In its most basic form, the designers role is to create a visual representation of the client’s goals that a user or customer will then use to reach those goals. This includes colors, images, headlines, body copy, and user interface design.<\/p>\n

The developer then takes these designs and translates them into code which a browser can read and then display to the user. This code, which eventually takes some form of HTML, CSS, and JavaScript, can be written in any number of languages or frameworks, from those that render in the browser, to those that are render first on a server, then sent to the browser.<\/p>\n

Essentially, both design and development are creating the same thing, each with their own tools, based on the goals of the client. Which brings us to our first lesson.<\/p>\n

1. Understand the User’s Needs<\/strong><\/p>\n

Both design and development need to be on the same page when it comes to understanding the client’s – and ultimately – the user’s needs.<\/p>\n

During the discovery phase of the project, the client should be able to give information about their goals that should dictate the direction of the project. As the discovery phase progresses, there may be more information gathered, such as industry trends or user feedback in the form of study groups, that may also help solidify the client goals.<\/p>\n

When everyone is on the same page about what the client and their users want, the outcome is a cohesive project that satisfies the requirements of the client and shows them that they were listened to and understood.<\/p>\n

And to be on the same page means we need to understand lesson two.<\/p>\n

2. Constant Communication<\/strong><\/p>\n

Design department and development department need to be in constant communication during all phases of the project, not just at the hand-off from design to development.<\/p>\n

During the design phase, as the designer creates elements for user interactivity. Development should be present to talk through those pieces to help decide what will work and what won’t.<\/p>\n

When design hands the project over to begin development, a style guide can help developers stay true to the designer’s vision, as well as stay on brand.<\/p>\n

Understanding the user’s needs, working together, and constantly communicating are the keys to successful projects.<\/p>\n","protected":false},"excerpt":{"rendered":"

Once upon a time, in the magical internet forest, Desi and Devy were walking along the banks of Web Creek. They had reached the widest and deepest part when they came upon Mr. User the turtle. “Hi Mr. User!” exclaimed Desi and Devy. “What are you doing?” they asked. “Hi Desi and Devy. Well, the […]<\/p>\n","protected":false},"featured_media":4020,"menu_order":66,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-4019","insights","type-insights","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized"],"acf":[],"_links":{"self":[{"href":"https:\/\/leap.staging.ribbitt.com\/wp-json\/wp\/v2\/insights\/4019","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/leap.staging.ribbitt.com\/wp-json\/wp\/v2\/insights"}],"about":[{"href":"https:\/\/leap.staging.ribbitt.com\/wp-json\/wp\/v2\/types\/insights"}],"version-history":[{"count":0,"href":"https:\/\/leap.staging.ribbitt.com\/wp-json\/wp\/v2\/insights\/4019\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/leap.staging.ribbitt.com\/wp-json\/wp\/v2\/media\/4020"}],"wp:attachment":[{"href":"https:\/\/leap.staging.ribbitt.com\/wp-json\/wp\/v2\/media?parent=4019"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/leap.staging.ribbitt.com\/wp-json\/wp\/v2\/categories?post=4019"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/leap.staging.ribbitt.com\/wp-json\/wp\/v2\/tags?post=4019"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}