The future of web development is hanging in the balance. On the one hand, you have the designers who create the beautiful pictures that eventually become a website. Then you have the developers, who take that design and translate it into code that a web browser can understand—transforming the code into a working website that looks and feels like the designer’s design.
That was Then
That’s how things are typically done, but that’s not how they will be done in the future. There is a strong push for web designers to learn how to code (there’s actually a push to teach EVERYONE how to code, but that’s a different story) so they can better understand the process of creating a website.
If you know what’s possible, what isn’t possible, what’s hard, and what’s easy, then you’ll design websites accordingly.
That way, when you hand off your designs to a developer, you can avoid this all-too-common reaction: “This can’t be done and the person who built it doesn’t know what they’re doing.”
This is Now
In a perfect world, your designers know a little bit of code and your developers know a little bit about design. Actually, in a perfect world you have a person who is a killer UI/UX designer, can come up with beautiful concepts, and is also a cutting-edge developer.
Those kinds of people are few and far between, but that’s where the industry is headed—at least according to people who know what they’re talking about.
Right now the trend is toward integrating the design phase and the development phase as much as possible. Why? Well, for a few reasons:
- It’s faster
- It’s more streamlined (less back and forth)
- It’s less expensive
- Clients won’t know the difference anyway
One way to do that is by having your designer and your developer sit side by side and rely on osmosis to work its magic. This way you aren’t going through two separate, discreet steps. You wind up with one line item in your project plan: design/development.
Or you can do it another way: you can take the design tools a designer uses to create those pretty pictures of a website and overhaul them. Better yet, you can replace them. Tools like Photoshop are great for image manipulation, but they aren’t efficient as part of the web-development process.
Designers spends a fair amount of time creating comps in Photoshop that a developer is going to have to cut up and “convert” into pieces that play nicely with HTML and CSS (the language of the web).
That’s not very efficient.
What if you could just have your designer do what they usually do but instead of handing off these pictures to a developer, they could hand off something more useful? Something that would actually integrate tightly with the development process? Something that is going to be responsive from the beginning?
The Software is Already Here
There are quite a few options if you’re looking for a piece of software that does this. Among the most popular are:
The basic premise of these tools is this: designers create the picture of the website as they always have, but in the background the tool is generating HTML and CSS that can be used as a starting point for a developer, thus saving a bunch of time.
Also, if a designer can’t get it to do exactly what he/she wants, then it probably means it’s either impossible or very tricky to make this work on the web, which should spawn a dialog between designer and developer. Having this happen before a client sees a design is a huge advantage.
That’s the theory behind the software, anyway. It was a big talking point at SXSW Interactive this year, and in one keynote a guy mentioned using it in his shop. I really wanted to hear how this idea fared in a real-world workflow—but then he said these words:
Once we were done designing, we passed it along to our developer and all he had to do was clean up the code a little bit.
I’ve worked with a lot of developers over the years, and I know exactly how they’d react to someone telling them they “just have to clean up” some code generated by a piece of software.
You’d have a grumpy developer on your hands, trust me.
Another Way to Think About It
I doubt we’ll ever get to a place where a piece of software can perfectly unite the design and development process, but tools like these can definitely help.
They’re relatively easy to use, which means more and more people can get a better understanding of how something visual looks when it gets transformed into code. If it can make code less intimidating to designers, then that’s a huge win.
People like myself (digital PMs) can fool around with this and create prototypes that can help give clients/account folks a feel for what the project could look and feel like. The more feedback we get earlier in the process, the better.
I’m not naive: I know that expecting a tool to simply “skip” the entire dev process is ridiculous. But I really believe that integrating these two parts of the process is a good, helpful thing.
I’ll leave you with a comment from SXSW that has stuck with me. A developer raised his hand and shared his experience with one of these tools (I believe it was Webflow).
I used to be a designer, and I started using these tools to generate code. It was really cool to see how my designs were transformed into code right in front of my eyes. It really helped me understand and learn how my designs looked in code. Eventually, I realized I wanted to be a developer, and that’s what I am now. I don’t use these tools anymore, but they were very helpful to me in teaching myself the basics of web development.