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

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 […]

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 […]
Singapore is recognised globally as a prime destination for foreign investors. Its business structure is well-developed, and its tax system is favourable to business owners. The government has a strong support system for entrepreneurs and provides legal protection for intellectual property rights. All of these conditions create an environment that is ideal for Singapore company […]
2020 has been a year that represents aggressive and sustained volatility with a confluence of unexpected situations, including economic shifts and market disturbance confluence. The COVID-19 pandemic forces businesses to adjust their methods of operations to ensure survival. These adjustments become the trajectory and guidance of what 2021 should look like and what companies should […]
COVID-19 pandemic has affected Thailand’s economy and labor market. World Bank’s Thailand Economic Monitor predicted that it would take Thailand over two years to return to its pre-COVID-19 growth and domestic product output levels. Although the country has successfully curbed the pandemic tide over the last few months, the economy remains severely hit. Nevertheless, heavily […]