Reimagining Dreamweaver: Creating the Ultimate Modern UI for Web Design
After years of having the same look and feel, the Dreamweaver team knew it was time to design a sleek new interface that isn’t just beautiful to look at (though we like to think it is), but is made to help you work, code and create faster. The team’s product managers, designers and engineers came together and asked one overarching question about the UI: How can we design the ultimate modern UI for web designers and developers?
We imagined a web development tool with a flexible user interface which maximized productivity, minimized eyestrain, and included an added bonus of looking right at home with other Adobe Creative Cloud apps. That was the vision driving the first complete overhaul and modernization of Dreamweaver CC’s user interface since the software’s launch. While aspects of the UI are still a work in progress, you can get an early preview of it by downloading and participating in the Dreamweaver Beta which is currently underway.
There are several aspects to the updated UI which are currently available through the Dreamweaver Beta which the team is excited about:
Introducing a Contemporary Dark UI
There are numerous reasons darker UIs have become the standard for modern digital products. A dark UI increases productivity by minimizing distractions and putting your focus squarely on your code or design work. It also minimizes eyestrain, making it possible to concentrate and work effectively. Ultimately, a dark UI helps you work faster and get more done.
“Almost every product under Adobe’s umbrella has moved on to a dark UI. One of the main reasons is dark UI helps you concentrate on your content and prevents distractions from the other panels or controls that are all around it,” says Dreamweaver CC associate product manager Arun Kaza. “We want users to concentrate and to really focus on the content which is the core and center of their work. A dark UI is what many core coders and developers are accustomed to.”
Not Sacrificing Personalization
A dark UI might help you get more done and be easier on your eyes, but the Dreamweaver team knows personalization is key. Every designer has their own workflow, and the upgrade built in features which make it easier to customize your workspace. One feature that will be available during the Beta is selectable color themes which let users configure and tailor the tool to their desired experience.
“Color is really a personal preference. And that is the reason we have options for personalization, which also allows for a light UI,” notes Arun.
Removing Distraction and Clutter
When you’re deep in code, the last thing you want to do is get distracted by unnecessary buttons or by constantly having to scroll to find the code you need. The team designed a UI that’s lightweight and uncluttered – which will continue to be refined throughout the Beta.
“The UI is designed now in such a way that we have really removed a lot of clutter from the top and the bottom of the UI. That gives users a lot more vertical space, which means you can see more of your code and concentrate on that. Users won’t be distracted by unnecessary elements around the code view,” says Arun.
Yet even the most streamlined and uncluttered space needs to also provide quick and easy access to essential tools. Every menu and panel has been redesigned to be more intuitive, streamlined, and aesthetically pleasing. Contextual tools help users find what they need quickly, with the ability to add and hide key menus at will to keep the workspace as clean as possible or give quick access to certain features.
A UI That Supports the Visual Experience You Want
Dreamweaver’s team was aware that designers and developers have different workflows which really support the way they engage with the sites they’re creating. Specifically, Arun goes on to note that for hardcore coders, there are special UI considerations.
“For this audience, we wanted to create a workspace which takes away even visual panels and leaves you with just bare minimum code-only-centric workflow and a code-only-centric UI. Since the system isn’t bogged down with panels developers are not using or not interested in, Dreamweaver actually becomes much faster. It’s faster, including the launch time, and you actually feel this is a really lightweight and much faster Dreamweaver than you’ve ever used before.”
This is just a preview of the UI changes which are in store for Dreamweaver CC in the coming months. To learn more, we invite you to sign up for the Beta to try the latest version and explore new features forthcoming in future releases.