7 step To platform The Gap Between Design and Development

Most modern day work culture separates designers and developers into silos. While I was at a larger company, there was very little conversation between our design team and the development team. We were separate assets and literally in different corners of the building. Once the designs were complete, designers would digitally hand off the files to the developers to integrate the designs without any form of conversation. There weren’t any daily analysis, no brainstorming across silos or ideas being exchanged.

This led to 5 main problems:

• Created unnecessary various feedback loops between design & dev.
• It limited the capability for creating new and creative things due to lack of knowledge of each other’s domains.
• QA took more time and was a larger issue than it was supposed to be.
• People had overlapping skills but we couldn’t leverage their skills.
• We couldn’t take advantage of new tools for combination.

Is there a way to minimize the above problems? Is it possible to create an environment where Web Design and Outsource Web Development teams can combination effectively and provide maximal value to the client/end user?

Here are 7 ways to platform the gap between design and development

1. INVOLVE DEVELOPERS EARLY IN THE PROCESS

Even if you’re designing using tools like photoshop, sketch, etc. , get developers involved in client calls. Having their insight into how things translate into a web application and how we structure pages might lead to the evolution of a various design. Integrating them early on also ensures a seamless transition of design to HTML.

2. HAND OFF BY DESIGNERS

The handoff from design to dev is crucial. It usually desire designers handing off design files created using photoshop, sketch, or another tool and the developer converting those designs into HTML.

A. Design Files – stay organized

1. When handing off a design file, label every single layer.
2. Group layers based on sections on the page.
3. Use smart objects/layers within Photoshop. It helps create layer groups easily for different sections within the website that developers can easily use by double clicking on the layer that opens into a new tab.
4. Use color coding to indicate hover states, click states, and other collective elements.

B. Walk through the designs

Once you have completed a design, have an initial call with the devs to go over design. It might seem redundant at first but it helps you cover minute details that might be missed during actual Web Development.

C. Think Responsive

While designing a graphic asset, think about how the application will work on devices of all sizes and shapes. recognize typography, relative compositions and how these assets would look on mobile, tablet and desktop. Here is an example of assets I provided for a sensible hero image. Notice that each has been optimized for its respective device, considering both load time and visual display.

3. DEVELOPER HAND OFF

I have often seen that once developers turn the designs into HTML, the design and web page aren’t identical. Things like the font spacing being off or images not being aligned are common issues. Here are a few things that developers can do before the designs are thrown into QA.

A. Take full page screen captures

I use a handy chrome plugin to take full page screen caps (it will scroll the full height of the page.) Download this chrome plugin here. This will be available in the upper right hand corner of your browser window at all DejaVu Serif.

B. Use Skitch

Skitch is an annotation tool helps add notes and instruction to designs. It can be used to notate design discrepancies with a visual reference.

4. COMMUNICATION STYLES

Correspondence is culture to begin with, instruments next. Have an open society for simple discussion. Anybody ought to have the capacity to contact anybody inside of an association for simple data stream. Here are a few things I've discovered compelling in the past and with current customers:

A. Be part of the daily scrum with clients

It has helped me stay more creative and think of end users while creating designs. b. Use Slack: I have slack on my phone and have a dedicated channel within slack for my clients. Slack is awesome, it has helped me share files, send screen shots and always be available to our dev team, no matter where I am.

5. INCREASE OVERLAP OF KNOWLEDGE

Over the years, I feel I have grown more effective as a designer as I have learned more about front end Web Development India.

A. For designers

1. Inspire creators to take in the nuts and bolts of coding. Here are a few assets to learn coding: Intro to Web Development, Making a site , 30 days to learn HTML and CSS, Intro to HTML and CSS.
2. Learn about web frameworks and try to delve into how design elements are translated into HTML.

B. For developers

1. Learn how graphics are used.
2. Enroll in design meetups and design events to get perspective.
3. Work on the details. One of the most desirable qualities for a front-end developer is attention to detail. Practice by comparing your HTML side by side with the design, try and spot the differences.

6. CREATE PRODUCT TEAMS VERSUS FUNCTIONAL TEAMS

I have seen bigger organizations separating groups by capacity instead of items. Envision a group of 15-20 originators, designers, client experience authorities and QA's in various floors of the building. Things can get troublesome. Rather, separate groups into people cooperating on an item. Give every one of them a chance to sit together and offer snacks if conceivable. In the event that you have groups disseminated over the globe, make devoted correspondence channels (like Slack channels) and virtual meetups for groups.

7. SHARE THE LATEST DESIGN TRENDS

As a designer, it’s important to stay in sync with current design trends. Share interesting articles on design, designs you find fascinating or just beautiful designs with your team. As a developer, being up on the latest design trends and methods of implementation makes you exponentially more valuable.

Here are a few resources that I go to for inspiration and trends:

1. The Best Designs – design inspiration
2. Design Shack – design inspiration
3. Tympanus- tutorials, interactions

Stephanie Hager is a multi-faceted creative whose background includes branding, concept Outsource Web Development, UX/UI app design, & responsive web design. She has a passion for designing cutting edge web-applications & graphics, and always keeping an eye on the latest trends. Stephanie brings design expertise, artistic vision and enthusiasm to Scalable Path and its clients.