Although they may see the world differently, designers and developers both want to deliver a great user experience that combines amazing visuals with an in-depth understanding or user workflow. This requires continuous iteration until you reach your goal: design, prototype, review, and repeat. This process fosters collaboration between UX/design and development. Instead of throwing work deliverables over the wall to one another, team members continually share ideas and solve problems.

A key component to this workflow is prototyping. The road from design comp to functional website is rarely straight and without challenges. Prototyping helps take some of the guesswork out of web builds by allowing designers and developers to experiment and provide more informed solutions for their clients. 

Prototypes can be tools for internal deliberation or part of your client deliverables. They can be simple lo-fidelity storyboards to capture an animation sequence or fully coded components of an interactive style guide. What’s created will depend on the problem you’re trying to solve, the timeline and overall budget.

Here are some of the tools we highlighted during the webinar:

• CodePen: The ultimate front end developer playground. You can write HTML, CSS, and Javascript and get real-time previews. The “pens” have shareable urls and with a pro account designers and developers can collaborate in live coding sessions.
• Webflow: An online graphic interface tool that allows users to design and prototype in the browser without writing code. Although some of the code may not be production ready, web flow offers designer and institutive way to explore design concept inside the browser.
• Pattern Lab: Based on the atomic design principles developed by Brad Frost, a site generator that constructs a user friendly library of UI components. Although there is small technical hurdle to get it running, Pattern Lab provides an excellent client deliverable that can accompany the final site build as a functional style guide.

These are just a small sample of the some of the tools that are available. To learn about other ways to improve collaboration on your team, check out the webinar recording where we discuss various tools and process improving concepts.