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.

HTML5, CSS3 Tricks That Web Geeks Will Love!

HTML5 and CSS3 are the two foremost tools for web geeks nowadays. In case you had a doubt about the same then here’s how. These 10 web tricks will show you exactly how powerful these two languages can be. Take a look, you might find something useful for your own websites.

1. Pure CSS3 AT-AT: The animation here has been created without any coding. No programming languages have been used for this. It doesn’t do anything special, but you can use such a trick to make your website more attractive. 

2. Keylight: This is a nifty trick. What happens here is you click on the background to create small dots and based on the placement of the dot, a tone is played. Multiple dots make a full track. Further, once you’re done, you can share your track. How? Just copy the URL and send it to whoever you want to share it with. Your track is saved in the URL only.

3. CSS3 Man: This is another animation that doesn’t use Flash or any other similar platform. 

4. Sinuious: This one is a simple game that can be addictive for kids. You have to avoid hitting the red dots, while picking up power-ups on the way. The more you can avoid, better will be your score. 

5. Cubescape: This is all about cubes. Click on the screen to place the cubes wherever you want them. You can choose different colours for the cubes, move them and edit them. When you’re finished, you can watch an animation of what you just did.

6. Darkroom: This is actually one of the more useful tricks in this list. While the others are for fun, Darkroom actually works as a photo editor and comes with a number of editing tools along with an easy interface. You can edit brightness, contrast, exposure, tin/temperature, saturation, colour blindness simulation, red-eye and other aspects of your picture. You can do this to images that are saved on your hard drive.

7. Apple Gallery Demo: From the makers of the iPhone, this is a photo browser that lets you rotate images across the page, through 3D space etc. 

8. The Wildnerness Downtown: You have probably already heard of this experiment. This one asks you for your hometown and then creates a video using three things: Google Maps, CSS3 and HTML5.

9. Water Type: This is another nifty trick. It asks you to type in a message and it appears as if it’s being created out of water.

10. Destructive Video: You see a video in this one, but when you click on the video it blows up. Interestingly, the video is still playing. Stop for a few seconds and the video will automatically reintegrate.

For More Information:

6 E-Commerce Toolkits To Start Your Web