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
- When handing off a design file, label every single layer.
- Group layers based on sections on the page.
- 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.
- 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
- 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.
- Learn about web frameworks and try to delve into how design elements are translated into HTML.
B. For developers
- Learn how graphics are used.
- Enroll in design meetups and design events to get perspective.
- 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:
- The Best Designs – design inspiration
- Design Shack – design inspiration
- 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.
