Over the last three years, we’ve realized something important about running a product design agency so efficiently: communication. It’s not a new concept, it’s certainly not something we discovered, but across our projects, communication is what helps us deliver high-quality work.
Of course, we didn’t realize the importance of communication and the different nuances from the get-go. No, that wouldn’t make for a good blog post, right? Like most other startups, we made mistakes, learned from them, optimized our processes, and used them to chart our current successes.
As a product design agency, we work across web design projects for a variety of clients. In a previous blog post, we shared how ruttl, our website feedback tool, was conceptualized from a failure we had during the web development stage.] In this one, we want to share how we learned that commenting on website isn’t enough for website review.
First, what is a website review?
If you’re unfamiliar with the process or want to refresh the basics, website reviews happen when the designer looks at how the developer has coded the designs into the website wireframes.
At this stage, the designer conducts an aesthetic review. They’re checking to see if the website looks good, the illustrations and elements complement the font, everything is aligned correctly, etc.
Most designers will review the website and send all their corrections by adding screenshots with comments explaining the issues to a word doc. The developer will then try and fix these issues to comply with the designer’s requirements. Other designers will sit with the developer and take them through each issue individually, asking them to change it to fit the approved designs.
The gap in communication
This is when problems begin to crop up. The issue with comments on marked-up screenshots is that they’re vague and offer little value. “Move this element a little to the left.” How much is a little? Designers aren’t able to quantify their designs in pixels. So, how does the designer know where the designer wants to place the element? There is no precision when it comes to comments during a website review.
During a project with a client from the AI (Artificial Intelligence) industry, we resorted to sending the values to the developer through screenshots, asking them to use those marked-up screenshots as the reference to rework the elements. It led to a lot of friction — we kept going back and forth and the result was still not what we had envisioned.
Building ruttl, the perfect solution
Earlier, we used a design annotation tool that allowed us to post comment on the website — still no clarity on values for the developers, though. That’s when we realized the potential of a website design feedback tool that allowed designers to make edits on staging links.
We built ruttl, the future of design review, as the perfect website annotation tool to solve these problems. In ruttl’s EDIT mode, designers can edit live elements, change the font alignment, spacing, and so much more. This allows them the freedom to visualize their website design without any coding knowledge.
For the developers, ruttl is the best tool to achieve pixel perfection. All the values can be picked up and used to build the website exactly as the design needs.
Keeping room for change
It’s at the review stage when most designers and developers change important elements to improve their website. After all, when the designers see their website designs come to life, there are little aspects that they want to change to make sure the final product is absolutely perfect.
On ruttl, designers can save every single iteration of the website, allowing for helpful comparisons. Developers can tweak the codes to make sure that the live website reflects the changes after development.
Optimizing for Mobile View
Developers need to make sure their website is also responsive across devices. Most developers tend to do this by optimizing their web design by assuming the codes applicable for the different device sizes.
When you use ruttl to review websites, developers don’t need to assume the values for mobile view. ruttl’s Responsive View allows designers and developers to check how their website looks across mobiles, tablets, and other devices.
Pixel perfect websites
Commenting leaves a lot to be desired during website review. Clarity and understanding are often missing when developers have only comments to guide them. That’s why when we decided to build a review tool like ruttl, we wanted to give designers the independence to change live websites without any coding knowledge. Similarly, we wanted to give developers an easy way to get the correct codes and values to create the final products.
Designers, bring your designs to life on ruttl.
Developers pick up the codes directly from live staging links.
Create pixel perfect websites when you review them on ruttl.
Check out this here to improve your web design review: https://ruttl.com/
Follow us on social media for more design tips and tricks: Instagram | LinkedIn | Facebook | Twitter
