1. Technology

Give Designers Tools To Get You What You Need

Let’s say you’re having a health back-and-forth between you, a front end developer, and a designer. All the best work comes through collaboration and iteration, right? I believe that. But I also believe there are time traps in there. If you feel you’re wasting time by getting peppered with tiny design tweaks, there might be salvation in giving designers tools to do the tweaks and then give you exactly what you need.

Let’s see some simple examples.

Positioning Elements in a Space

Let’s say you have some absolutely positioned elements. Their exact position is a big part of how the design feels. You could hook up a script to allow those elements to be dragged, and then report their position with the exact CSS you’ll need to put them there.

Here I’ve used David DeSandro’s Draggabilly to do that:

See the Pen Draggable Elements that Report their Position in CSS by Chris Coyier (@chriscoyier) on CodePen.

It’s a fairly small little script that allows elements to be dragged, and when a drag event stops, it creates the little bit of CSS needed based on that elements ID and top/left position, and puts that in the bottom right corner of the document ready for copy-pasting and providing to you, the front end developer.

Changing Font Stuff

How about little <select> that comes up over paragraphs that allows you to toggle between font families in development?

Or perhaps a range input that controls line-height:

Like this.

Color Pickers

Wouldn’t be too difficult to drop in a color picker that shows up around elements you choose and changes backgrounds, fills, borders, strokes, text color, etc.


JSColor

DevTools Training

Of course building your own tools is great because:

They can be designed just how you like them
You can build them to change anything whatsoever
They can be integrated directly onto the design

But… they are a bunch of work as well. You will likely get quite a bit of mileage out of just showing a designer how to use a browsers DevTools to tweak designers. Chances are, they will really take to it.

Have you ever done this?

While I prefaced the article with the idea that this could be time saving for the developer, since you’re giving designers tools in which to express exactly what they want, it could backfire. Meaning you could spend a ton of time on these little tools only to see them used very little. Communication, as always, is key.

Have you ever tried doing something like this in your team workflow?


Give Designers Tools To Get You What You Need is a post from CSS-Tricks

No Comments
Comments to: Give Designers Tools To Get You What You Need

Recent Articles

Good Reads

Welcome to A2 Logic Group, your premier destination for comprehensive training and consulting services. Specializing in a broad spectrum of Information Technologies, we have grown from a dedicated team of IT and management enthusiasts into recognized industry leaders. Today, A2 Logic Group supports a global clientele of students, professionals, educational institutions, and corporations. Our success […]
In Qatar’s fast-paced business landscape, optimizing fleet operations is crucial for success. A reliable and efficient vehicle tracking system offers numerous benefits, empowering businesses to streamline operations, enhance security, and improve overall efficiency. Whether you manage a small delivery fleet or a large transportation network, implementing a vehicle tracking system in Qatar can significantly transform […]

Worlwide

Overview VipsPM – Project Management Suite is a Powerful web-based Application. VipsPM is a perfect tool to fulfill all your project management needs like managing Projects, Tasks, Defects, Incidents, Timesheets, Meetings, Appointments, Files, Documents, Users, Clients, Departments, ToDos, Project Planning, Holidays and Reports. It has simple yet efficient layout will make managing projects easier than […]
Welcome to A2 Logic Group, your premier destination for comprehensive training and consulting services. Specializing in a broad spectrum of Information Technologies, we have grown from a dedicated team of IT and management enthusiasts into recognized industry leaders. Today, A2 Logic Group supports a global clientele of students, professionals, educational institutions, and corporations. Our success […]
In Qatar’s fast-paced business landscape, optimizing fleet operations is crucial for success. A reliable and efficient vehicle tracking system offers numerous benefits, empowering businesses to streamline operations, enhance security, and improve overall efficiency. Whether you manage a small delivery fleet or a large transportation network, implementing a vehicle tracking system in Qatar can significantly transform […]
Approximately 25 million Americans have been diagnosed with cataracts at some time in their life. Nearly three million people have been diagnosed with glaucoma. If you fall into either of these groups, you should understand the importance of seeing an ophthalmologist frequently. An ophthalmologist can help you handle diseases such as cataracts and glaucoma appropriately. […]

Trending

Turquoise Jewelry is one of the ancient healing stones used for personal adornment and astrological benefits. The rare greenish blue-colored pectolite is celebrated for its enchanting powers among many crystal lovers. It is a hydrated phosphate of copper and aluminum that ranks 5 to 6 on the Mohs hardness scale. It is deemed a protective […]