Co-founder here. My brother and I quit our jobs 7 months ago, and have been working on this day and night off of our savings since then.
The CSS Playground is a preview of our CSS styling tools, and we'll be adding some of our other components (layout, adding new elements, code export) soon. Currently, it only works in Chrome, but we're working hard to add Firefox support.
Super awesome and very well done, just played with this for a couple minutes..love how you can choose the different platforms on the left and side and when you click on an element you can edit everything on the right hand side. How do you plan on monetizing this?
Looks great! One thing: Please don't force me to host my stuff with you. I'd rather pay twice to have the freedom to dl my designs. Also: Let me pay-as-I-go. As a designer I'd like to use this but I would not want to pay X bucks per month. I would pay X dollars per project.
Edit: After studying the video: I'll pay triple! Any thoughts on importing bootstrap?
We're actually big fans of the MailChimp pricing model (both pay-as-you go and monthly options), so it's a possibility.
About Bootstrap, the current demo already uses it for the non-visual elements (grid, etc), but we're still not sure about a whole-scale import yet. There are a lot of changes afoot with Bootstrap and Foundation (mobile-first being a big trend), so we're noodling on a ton of options.
Will you guys be doing the whole startup process or bootstrapping this like Github? If you'd like help with your AngelList page, let me know. I'll help optimize your profile and get you some traction :) I love your product btw!!!!
Very well done. Without looking at the docs (sorry) can you import existing css files and full-on frameworks? That's the #1 thing I'd be looking to use. jsFiddle is great but the window is so tiny... Webflow CSS looks even better.
Thanks! These are some of the questions we've been mulling over. We are working on importing existing CSS, but as far as importing the framework - that's another hurdle. We will be giving our designers either choices of frameworks to work from (bootstrap, foundation, etc) when creating a new website or our own framework - it all depends on the goal of the designer (to export the code or continue to use Webflow to build the website). Really, our personal goal is to give designers the best tools so they don't have to worry about frameworks. All they have to do is design and everything just works.
I'm not sure how far back you want us to go. Born in the freezing winter lands of the former USSR, Vlad and Sergie Magdalin embarked on a... oh, not that far? :)
I've been doing freelance web design on the side for a long time (actually bought the webflow.com domain in college for that purpose, going into a lot of debt in the process), then worked at Intuit for several years on an a social enterprise product. Studied CS at CalPoly, and spent a few years wandering through art school in SF before that.
My brother (Sergie) studied at UCSD and worked as a creative director for MuirSkate.com prior to starting work on Webflow. You can see his (now outdated) portfolio here: http://sergie.info/
First of all: congrats on launching! 7 months is a long time, it has to feel good!
A long time ago I built "squeeze page" manager which had an editor like this (it was simpler and more focused on content management). I sunk a lot of time into it. However, I ran into the same problem I bet you guys will run into: "the design tool chasm". On one end are simple tools for publishing on the web (Weebly and Wordpress) and on the other are professional tools (Photoshop and Sublime Text 2/Textmate). In between are tools that no-one really wants.
Basically, don't stop at the editor. Its a feature. Take a look at Unbounce or HubSpot for "marketing tool" inspiration and Weebly and Wordpress for "publishing tool" inspiration. Or, if you want to be used by professional designers, you'll need to go in a whole different direction (which is likely the one you are on now). Of course, if you have target customers that love this as is, their feedback vastly trumps mine. But never stop talking to your target customers (steal them from the big boys with your personal touch and solve their problems)! Good luck guys!
Holy wow, great work guys! This is exactly the type of tool a lot of designers are looking for to bridge the gap between design and code (or at least get their feet wet before diving into it full-on). Hopefully this will get more visual artists using services like CSSDeck and Codepen, unless you plan on venturing into this realm yourselves to allow the community to create assets for everyone else to use - which would be fantastic.
Personally, because I still prefer writing from scratch, I'd use it after I thought I had a good framework coded up already just to quickly tweak it and try out some other ideas. Not sure how you plan on monetizing, but a tiered system for those of us who wouldn't use it to create from scratch would be appreciated, even though I'm not sure how you'd determine that (imports only?).
This is really nice, but I just can't get too excited over web apps. Whether it's not having direct access to my source files, relying on the service to stay up (either from server or business issues), working when offline, not having access to OS-level services, the clunkiness and slowness compared to native, or the cognitive overhead of the app being inside another app, I think I'll always prefer desktop apps.
These limitations are all slowly disappearing as web standards are advancing fast to fill these gaps. I think soon we'll be able to give trusted web apps permission to read/write to our file systems and reach out to more OS-level interfaces that our browsers have access to.
Web apps also offer advantages over native apps, like zero installation, universal compatibility regardless of OS, and the ability for publishers to put updates/patches out instantly.
This sounds like something perhaps the dropbox api would be useful for? The webapp would simply modify files in your dropbox through the api, and changes could then be pushed to your local machine through dropbox's service.
Serious question, as I enjoy posting on HN and don't want to run afoul of the community. Was my comment negged because I was seen as hijacking a thread by making general comments about web apps rather than addressing Webflow specifically?
Or is it because of my negativity toward web apps and an appearance of ignorance on the state the art?
Don't worry. I have been downvoted just for mentioning a project that has the same name. Just wanted to make sure, that the creators are aware... I think, some posters have strong negativity sensors, which cause false positives from time to time. :)
Don't be sad, it's only the top post because I just posted it. As for how it's relevant, I believe I'm saying in a roundabout way that I'd much prefer Webflow if it was a native app, while making a larger point about my reservations over web apps, especially the web design web apps I've been seeing a lot of lately.
This is so well done. Really impressive. It seems like a great tool for both designers and developers. The more I develop responsive sites, the more I realize how difficult and tedious it is. Hopefully, this takes a lot of the pain away.
I'm also super jealous you have a brother that you can develop a product with. My brother is a systems guy and doesn't want to create software at all.
Are you spying on us? Haha! We love the Bootstrap scaffolding, but their library is kinda boring IMO. That's why we are focusing so much on custom design and giving designers/devs the tools to do it (easily). Shoot me an email so I can understand more what you're thinking.
Hey guys, looks really awesome. I built Jetstrap (http://jetstrap.com/) which is attacking the problem in a different way for probably a different type of user, but this is really impressive. Great work!
I found the scroll bars very frustrating. They are so small that I could not drag the bar around very easily (reminds me of default scroll bars in Ubuntu these days). The contrast is so bad between the part that is dragged and its background that it took me a few seconds to actually make out which is which. The contrast of some of the text being grey on a darker grey background in the right sidebar was hard on my eyes. That part wasn't as annoying to me as the scroll bars though.
I do like the idea of this. The functionality seems to be there.
Incredibly well done and beautiful too - well done guys!
One route you may not want to get sidetracked down yet... I'd love compontents from this to use inside a CMS. Whether tools from the sidebar, or the easy WYSIWYG editor (if people could drag pre-prep'd text + photo layouts into the page, even better) -- I'd pay money for these, to build them into client sites.
Just a thought - everyone is inventing these standalone SaaS apps, but for all us doing custom software development - it'd be great to gain the benefit too.
This looks fantastic, if it works smoothly it solves so many problems for me. Great work, great idea.
Have you thought at all about price point? IMO I wouldn't try to enter the hosting space, at least not yet. That's not the value for me. I think you have a great product in the works just as a front-end development platform. If it works as described, I'd put money down for it today (customer validation, check).
Congrats guys. I haven't had a chance to check out the full thing yet (reading HN on my iPad) but from a quick glance it looks incredibly thorough and well-done.
I think there will always be a contingent of folks who prefer to hand-code this stuff, but there is a larger contingent of folks for whom a great set of visual design tools will be incredibly valuable. So good on ya and good luck.
Disclaimer, I'm not a designer and don't know much css. When I look at that wall of buttons I don't know how to use them to do what I want. I feel like if I knew css, I could probably code up what I want faster that pressing a bunch of buttons. Thoughts from designers/front end developers?
Had this conversation with a co-worker yesterday. As much as I love Chrome, they are heading right down that slippery slope. Soon they're going to figure out something better for drawing than Canvas or SVG, and they'll integrate that Chrome only technology. We'll come full circle when they name it VML.
I'm both amazed and skeptical. This is some very nice work. I'm not sure if, in its current form, it would work well for all aspects of the design process. I think there are some trade offs compared to coding with text editors and dev tools.
I like having a tool that is super fast and responsive, and you lose some of that when it's embedded into the same page the site is being designed in. Having said that, it's easier to play with a design when you have an ui such as this. This mixes some of the advantages of photoshop with some of the advantages of designing in the browser. It's tricky to compete with the strengths of both tools and merge them into one.
Thanks! At first we thought it would be a good idea to record the whole tutorial in one pass, without edits. That didn't work out - it was too hard to keep it concise and focused. I ended up recording different sections of the script (5 total) and piecing them together. I recorded it all in the storage area of my apartment because it would have been too loud at the Hacker Dojo (where we have been working). After recording the audio and putting that together, I exported the audio and listened to it while recording my screen. The screen recording took 1 shot. I threw it over the audio and exported it. It's not perfect but it works!
Moral of the story: if you don't have a good sound room - find a storage room. :)
That sounds like a better workflow than what I've tried in the past (recording video first, audio second), I'll be sure to give it a shot next time.
I'm also curious if having a Vine-like ability to record while a button is pressed (or something) would make record-all-in-one-go more feasible. That way, you could take breaks while recording and think through next section before committing.
Sure thing! I don't know if hold-to-record would make it easier. I think recording it in sections would make it easier. For example, the beginning of the video was pretty easy and straightforward. Only when I started talking about selectors and derivation did it get hard to keep it flowing. So break it up and get a good mic. I'm not really happy with the macbook retina mic - change the angle or distance of your voice a bit and you your audience will be able to hear it.
I like the idea and it is very much a need of aspiring entrepreneurs who know little about tech. But I generally believe that it can cater to even those who know how to code good HTML and CSS to save time.
Do let me know how well does your tool cater to generating mobile / responsive websites.
Responsive design is out #1 goal. On the playground.webflow.com you can either resize your browser or select the device on the left. Then all you have to do is design. All the responsive code is generated for you.
Sorry about that! Can you send me an email (in my profile) so I can manually add you. I know the service we are using (KickoffLabs) does some sort of filtering in their code, and yours might be a false positive.
Definitely love the fact that it's pre-designed. I think the FireFox support + responsive functionality is the right direction to go as those are the things I hate worrying about when doing front end work. As a Firebug user, I think this definitely fits into my toolbox.
Sure! It's Node.js (pretty vanilla Express) on the backend, but most of the heavy lifting is in the browser. After trying Angular, Backbone and Ember, we settled on KnockoutJS for multiple reasons (that's a whole post in itself), the main one being performance (though some may find that statement shocking).
Good choice with Knockout. I use it in many apps because of how lightweight and easy to implement it is. I've hit some performance problems when tracking large number of observables but overall it can handles 99% of situations nicely.
Yep, that's been our experience so far. Believe it or not, but there are north of 100,000 observables on the CSS Playground page alone, so we had to really optimize things. It's still sluggish in some areas, though.
I'd be really curious to read that post if you ever write it. When i saw the binding betweeen editor widgets and code, i immediately thought of angularJS bindings between model and multiple views, but i don't know KnockoutJS very well, so i'm really curious.
Hi! Sergie, the designer here. I'm glad you like it! Everything was designed in Illustrator CS6. It's the fastest prototyping tool IMO because you don't have to worry about layers (Photoshop) - you just click and edit. Exporting to Hi-DPI is super fast too!
Thank you for the feedback! It's definitely a big challenge to make things like this intuitive, and we know we have a ways to go. I'd love to know if you have any specific thoughts on how you would approach the UX there.
Thanks! That means a lot. There will definitely be a way to edit links and so forth. Webflow would be very limited without that IMO. We decided to release the CSS Playground to see how people would like the design tools. :)
Sorry about that - we're currently focusing on desktops and laptops for the app itself, and haven't added a fallback for other devices yet. If you'd like to see more of an overview that should look great on your device, check out www.webflow.com