When building anything, there is a necessary conflict between form and function.
Entirely functional products lack visual appeal and can be uninspiring to use. While products too obsessed with aesthetics can be confusing to handle, or expensive to make.
As a frontend developer, you’re on the frontlines of the battle between form and function. Because you’re the bridge between visual designers and functionally-focused developers, when deadlines start closing in and feedback flies fast, you’re the one on the hook. Whether that’s fair or not, frontend developers are responsible for ensuring effective team collaboration when it comes time for final review, bug fixes, and finally, delivery.
In this article, we'll show you how to balance form and function; collaborate effectively as a frontend developer:
- Why it’s important to think like a user
- Speaking up early and frequently
- Essential tools for effective team collaboration
- Continuous learning makes you a better frontend developer
- Feedback is essential and how small 'picky' design changes can add up to a big problem
- How to make front end collaboration an organizational priority
We'll also recommend some of our favorite tools and resources to make it easy, too.
1. Thinking like a user
The key to achieving a good balance between form and function is to get to know your users — and how they intend to use your product.
Good design and product development teams build intimate familiarity with the various personas of their users. By building empathy with your audience, you'll be able to spot issues with usability in advance and make better decisions when prioritizing new features or bug fixes.
Some of the most successful startups start by developing their products to solve actual customer problems - where the customer need precedes the product itself. Regardless of the role your customers play in the creation of your product, it’s critically important to maintain direct feedback channels with your users.
By seeing the issues your customers experience with your product, you'll identify where pain points occur in real life — not just in Figma or VSCode.
If you are building a website or other product without ready access to customers, try one of the websites below to gain impartial insights:
- UserTesting: Used by Facebook, eBay and Walmart, UserTesting is the quickest way to get impartial feedback from customers. You pick your target market, assign them a series of tasks to complete and get a screen recording, spoken commentary and written feedback within hours.
- UsabilityHub: Amazon, Google and AirTable use UsabilityHub. They allow you to create your own surveys (first click tests, preference tests, five second tests and design surveys) and invite your own participants, or make use of the UsabilityHub panel — comprising over 170,000 users.
- Remote Testing: You can also use stakeholders or your existing contacts to get insights on your product. The U.S. Department of Health & Human Services has put together a guide on how to test remotely here.
2. Speak up early and frequently
You’re sitting in a planning meeting with the product manager, designers, management and other developers. You listen carefully, as the stories for the next sprint are discussed or longer term issues are debated.
Inside, you know there are usability problems with the product — and that while these issues would be simple to fix, they’re being ignored by the rest of the team. Whose responsibility is it to speak up?
This is a common pattern in many development teams, where opinions are bottled up and frustrated developers eventually move to a new job.
The good news is, it doesn't have to be this way. By speaking up, you'll improve the overall quality of the product, have a say in the direction of the product and work on improving your soft-skills.
As a frontend developer, you bridge both design and development. You are uniquely positioned to see when design or functional issues are harming product quality. And, as such, you should never be afraid to share your insights.
3. Leverage productivity tools to stay on track
Even if you're the quiet type, preferring to focus on work rather than attend meetings, effective collaboration still requires communication.
You should make a continuous effort to be aware of what the rest of your team are doing - and that means staying on top of your team's productivity tools. The benefits are:
- Alignment: Teams that share a common vision build incredible products, as everyone is working towards the same goal.
- Empathy: By staying in touch, you'll understand your teammates skills sets and how you can help them be more effective.
- Compromise: Make designers aware of technical limitations early. Cutting back an overly ambitious design around technical limitations can be soul destroying for a designer. By communicating early, you can avoid these issues before they occur, proactively compromising on form or function, as appropriate.
You should also frequently reach out to your designer during the development process. This certainly beats waiting until the end of the development cycle, to discover a design issue.
Some tools we recommend are:
Framer
Framer is a great design tool for building advanced prototypes that look and function like the final product. It works a lot like Sketch or Figma and should be familiar to both designers and developers.
You can see some examples of what is possible with Framer here.
Prototypes are a critical but often forgotten part of the development process. They allow designers to think of the product in a tangible way (rather than an abstract design) and let developers flag complexity early in the design process.
FeaturePeek
With traditional development environments, you need to deploy a branch to staging before you can get feedback, or hope the designer knows Git enough to set up a local environment. This wastes time and makes it difficult to roll out quick changes. In short, working with the design feels laborious rather than inspiring.
With on-demand staging from FeaturePeek, a preview URL is generated for every pull request with built-in feedback tools, allowing you to share and get valuable feedback quickly. When collaborators do give feedback, FeaturePeek automatically records the URL they are on, and their browser metadata, making it easier to resolve issues.
4. Always be learning
Frontend development is always evolving. New tools and frameworks are released almost weekly, each unlocking new possibilities to build better websites and products.
As a frontend developer, it is your responsibility to continually learn and adopt new technologies, as they might make a technically difficult design more feasible.
But how should a frontend developer approach continual learning? Here's what we recommend.
Subscribe to newsletters and RSS feeds
Great newsletters keep you informed with no action needed. Just hit ‘subscribe’ and once a week you'll get curated insights in your inbox. Some newsletters we recommend are:
- Daring Fireball: A sarcastic weekly forum on technology (especially Mac-related), design, and culture
- The CodePen Spark: A weekly newsletter, podcast, and community oriented around frontend development
- JavaScript Weekly: A weekly email roundup of JavaScript news and articles
- Frontend Weekly: A weekly roundup of front end related articles and news
- Frontend Focus: A weekly email newsletter covering HTML, CSS, WebGL and other associated technologies
- Pony Foo Weekly: A deeper dive into web technologies, sent every Thursday
Join online communities
Just lurking in online communities is fine for entertainment, but relevant online communities are a great way to stay at the cutting-edge of web technologies. Here you'll find discussions about real issues other developers are facing — and how they solved them. Become an active contributor through comments or, even better, post original content about your own trials and experiences.
The top online communities for frontend development are:
- Hacker News: Ignore the dated appearance, this online community is at the forefront of software development and entrepreneurship. People post links they find interesting, then (attempt to) have civilized discussions about the topic. You can also post your projects in the 'Show' section and get feedback from the community.
- Dev.to: DEV is a "community of software developers getting together to help one another out". DEV is a unique hybrid platform, feeling like a blogging platform, forum and chatroom all at the same time.
- Indie Hackers: If you are building a product of your own, talk about it on Indie Hackers — a community for tech entrepreneurs.
- Product Hunt Makers: You might have heard of Product Hunt as a place to discover new products, but they also offer a 'virtual co-working space' for 'makers'. With over 25,000 members, this is one of the fastest growing communities in the space.
Learn by doing
Adopting an unknown technology on an urgent project is a recipe for disaster. New technologies are often poorly documented, so there’s not a lot of support if things go wrong.
Instead, create a sandbox project around the new technology and try it out. By building a tiny application or tool with no repercussions on your larger project, you'll learn the new technology and discover it's limitations first-hand.
Other examples of side projects you could build with a new framework are:
- To-do list: A basic to-do list is a great way to learn a new language. There is an on-going project on GitHub which aims to build the same to-do app in every programming language — check it out here.
- Weather: Try displaying the weather by using an innovative web technology. Could you use Lottie to animate weather icons, or WebAR to show the forecast?
- Calculator: A calculator is a great way to learn state management frameworks, like Redux, Mobx or Flux.
Once you're ready to test your new skills, or just want to build up a portfolio of side frontent projects, check out Mintbean. They host weekly hackathons with simple frontend challenges, as well as free workshops to help you upskill and improve job hunting strategies for new developers.
5. Get feedback often
Feedback is a key part of effective front end collaboration.
Developers should give feedback on designs as they are being created, flagging technical limitations as early as possible. Equally, designers should give continual feedback throughout the development process, too.
In the past, this was difficult for both parties. Designers could not see in-progress development work and developers couldn't see design locked away in desktop applications.
But in 2020, cloud design tools like Figma, Sketch or Framer include commenting tools. Designers can see in-progress development work by using on-demand staging environments when using FeaturePeek.
6. Small design changes; big impact
Have you ever reacted badly to negative feedback, particularly 'picky' or small changes to the design?
Sure, you could choose to ignore these small tweaks, but they eventually build up — taking a big toll on product quality.
Remember, design is a highly skilled job that requires years of experience and specialist knowledge. If a non-programmer told you that a bug-ridden function was ‘good enough’ and ignored your feedback, you’d be frustrated too.
The next time you receive feedback from a designer, react positively and consider the change as an essential part of refining the overall product. You’re all on the same team, and small positive interactions over time are what make up great work cultures!
7. Change your organization
If collaboration between designers and developers within your organization is difficult, you might need to discuss a few internal changes.
Teams with effective front end collaboration:
- Include developers throughout the process: By including developers from the start of the project, technical limitations can be considered and overcome at the start of the design process — rather than worked-around later.
- Choose balanced project managers: Some project managers have tunnel-vision, focusing too much on one particular discipline, such as business, design or technical considerations. This works well for highly specialized teams, but is a blocker when front end collaboration is needed. A well-rounded project manager understands all disciplines involved in the project; facilitating collaboration and compromise.
- Work closely: Where possible, designers and developers should have tight, frequent feedback loops. Remote teams can use video chats and screen sharing to help with this.
- Avoid jargon: Just like developers, designers have their own jargon. A designer might ask for more kerning, tracking and leading and get blank stares from a developer. A developer might ask for the 'letter-spacing' of a H3 and get the same blank stare back. Instead of relying on technical language, encourage your organization to adopt tools for visual communication — a screenshot, Loom recording or Figma design is much clearer than a written or verbal explanation alone.
We hope these tips help you work more collaboratively with designers (and fellow developers!) to build high-quality products.
In 2020, it is not enough for a frontend developer to just write code. You are responsible for effective frontend collaboration. Truly exceptional frontend developers bridge the gap between design and development, helping the designers and developers on their team to build the best possible product.
Learn More
FeaturePeek deployment previews are the easiest way for UI/UX teams to collaborate on frontend code.
FeaturePeek provides collaborative frontend staging environments on-demand, so you can collect implementation feedback from stakeholders sooner. FeaturePeek works with all frameworks and hosting providers, so you can keep your tools and you’re never locked in.
Learn more about FeaturePeek Teams, our collaborative tool that supercharges deployment previews for development teams.
Top comments (3)
Eek! Headless penguins. Hoping the image formats better for the rest of you!
😭
I swear no birds were harmed in the making of this blog post... 🐧🧊🐧🧊🐧🧊