Welcome to Edit Room, the sweet spot between Photoshop and designing in the browser.
I've created this tool for designers to make our lives easier. Edit Room lets you spend more time making your work better, and less time fighting your tools.
Problem #1
Photoshop gives you freedom, but with a price. Designs don't look the same in a real web browser. You don't have the semantic structure of HTML.
Using Edit Room for the design and visualization step lets you create and design with real design production tools, but the elements you create are real DOM elements, and the styling you do creates real CSS. Designing in the browser finally meets a real design production toolset.
With Edit Room, you start with content and semantics first. You design content-out, and have a more direct relationship with the finished product.
Problem #2
Creating static comps and then handing them to developers to re-create wastes everyone's time, and costs you money.
Edit Room respects everyone's time. Designers can quickly style content with visual tools and the end result is standards-compliant, cleanly organized HTML and CSS. Use it to present your ideas to clients in a real web browser. You can even grab quick CSS snippets of individual elements to copy and paste, or let Edit Room generate the entire page, and then use that as a development head-start.
Edit Room is not designed to replace hand-coding. The output is intended as a starting point for developers to add interactivity and polish. Using Edit Room in your design and production workflow lets you use your time wisely and more profitably.
Problem #3
It's impossible to test flexible designs in a static canvas.
With Edit Room, everything you create is based on flexible proportions. You can tweak your design immediately across a wide range of screen dimensions. Coming soon, you will be able to set responsive breakpoints and fine-tune design elements for different widths.
Problem #4
You want to use modern web fonts, but they are a pain to get working in your desktop software.
Edit Room allows you to link a Typekit account with your API key, and then you can use fonts from Kits you create directly in this app. No more wondering or wishing that Photoshop or Fireworks can render text like a browser, you can directly control your typography and see the design the exact way your audience will see it.
Fontdeck and other web type services are coming soon!
Problem #5
Markup is complicated. CSS Animations are tedious to write and need a visual editor. Coding is not a great way to be visually creative.
Good thing I've got a visual editor right here. Edit Room is inspired by the best of desktop motion graphics applications, but simplified and designed for speed. Animations are time-based with keyframes that can be finely adjusted to bring the right emotion to your message.
You may have learned how to code HTML and CSS, and that's a valuable skill to have. But it's not a great way to explore different ideas quickly, or allow for happy accidents that you get when messing around with Photoshop. Edit Room changes all that - you can layout and style all your content however you like, and not worry about the code until you're ready to develop an idea further.
I'm in this for the long haul. Bootstrapped and proud. I'm planning on constantly working to make Edit Room better. Here are some things that aren't ready for prime time yet, but are coming in the next few months:
Image Support
Right now, I've left out adding images to content or to backgrounds of elements. That will come, and you'll be able to control what versions of what images get delivered to what screen resolutions.
Responsive Breakpoints
The style editor has a responsive width preview tool built-in, but you can't yet specify different designs for different widths. That too will come, and Edit Room will be more and more useful for creating truly responsive web sites.
Multiple Shadows and Gradients
You'll be able to create complex visual effects by using multiple drop or inset shadows and gradients for each element.
Sharing URLs
You'll be able to generate shareable, public URLs to preview your work and share it with colleagues or clients. There are lots of ways this feature could go, so please let me know what would be useful for you. Basecamp integration? Dropbox? What-have-you?
Your Suggestions Here
You don't have to yell in public and have your feedback be ignored by large corporations that don't really care about your interests as a web designer. I'm here, and I'll listen. I'm dedicated to rapidly update and enhance Edit Room for my customers. Email feedback@edit-room.com with your workflow problems, and I'll make sure this tool keeps up with your requirements.
Try out the style editor by editing any of the sample designs below. They're a bit simple, so see if you can make them better!
Philosophy
Philosophy
“Distraction Free Web Design”
I have built Edit Room for professional designers, because I believe that it is a waste of time to use Photoshop to build websites.
The natural medium of communication on the Internet is markup and style sheets rendered by the web browser, not flat pixel-based formats created by image editors. Therefore, the best way forward is to design within the natural canvas that has been provided.
This application is that way forward, giving designers like you an easy and powerful way to create real web design.
Edit Room allows you to do layout, design, and animation directly in a web browser. The output of this tool is clean, semantic HTML, and intelligently organized CSS style sheets. You won’t have to rely on coders to re-interpret your work from static pixels ever again. Of course, since the output is standard and simple, it’s easy for development teams to build upon the code provided to create the rich interactive experiences that we all expect from the Internet today.
This app provides all the benefits of a visual layout tool but none of the limitations.
You start with the content, and a curated collection of the most useful semantic markup tags. The available design tools provide fine control of the presentation of your words, allowing you to quickly craft and fine-tune your message. Since the focus of this application is enabling visual communication, the use of Markdown, a syntax for writing for the web, is a natural fit, and is supported in the content editor to allow further control of the created HTML elements.
Once you have a draft of your content, it's time to start designing.
You compose your design in the basic unit of Edit Room, a “Screen”.
You start by drawing layers with natural layout interactions - just click (or tap) and drag out the dimensions of the layer.
The layers you create are immediately populated with your content and you can get right to the important work of finding the best way to visually communicate your message.
There are no modes or different tools to confuse or distract - drawing in empty space creates new layers, dragging on existing layers transforms them directly, and selects them for further modifications.
You don’t have to worry about huge sets of complicated toolbars filled with features that you paid for but you will never use.
Edit Room is focused on what’s important to web design: content, form, color, type, rhythm, and context.
The panels you will see on both sides of the screen contain logical groupings of all the visual properties you can control.
Individual controls are generously sized and allow direct manipulation - just drag directly on the values to modify that property.
They only appear on layer selection, and are hidden otherwise, allowing you to focus on your work without distraction. These panels are always in easy reach with key shortcuts that allow quick access to the controls you need.
The panels will disappear temporarily so you can see immediately the effect of your change, and quickly dial in the right value. Shift and control modifier keys do the right thing while dragging (coarse and fine adjustment), and you can also directly type in values for numeric properties.
Since the possible variations of devices, displays, and dimensions of web views are growing ever faster, we need a design tool that naturally compensates for this variety.
Layers are positioned relative to each other by default. This results in the ability to visually design and tweak with relative freedom, but still retain the natural flexibility and flow of HTML documents.
Designs created with Edit Room have the best practices of “Responsive” web design built in.
Layer position and dimensions are entirely based on percentages, so the work you create automatically responds to different display sizes. You can easily see how your design flexes across different ranges with the built-in width preview tool.
In our modern world of moving pictures and short attention spans, not only is static design important, but also the discipline of “design over time”.
Edit Room is inspired by the best of desktop motion graphics applications, but simplified and designed for speed. Animations are time-based with keyframes that can be finely adjusted to bring the right emotion to your message.