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.
Great work! I agree that importing a current site/design would be a killer feature. But, forcing to host is a non-starter...and would probably cause more issues for your company as well.
This is very impressive! I'd love to use this on new projects. I have some new projects coming up just around the corner. Do you have any ideas when you plan to release?
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/
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!!!!
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?).
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.
Thank you! Hopefully it doesn't look horrendous on iPad :)
Absolutely agree with you about hand-coding. I'm one of those folks! It's hard (impossible?) to compete with the flexibility and power of pure code, but we can try right?
I completely agree. Being able to hand-code doesn't mean it's always the easiest way to develop an idea.
And well done guys. Getting this far in 7 months is very impressive.
Having been part of the team that designed and built Typecast (http://typecast.com), it took us over a year to really get somewhere. Building browser-based design tools is way harder than it looks.
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.
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!
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
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.
Is this the same vlad from vladstudio.com ? I always loved his work there. probably not considering vladstudio.com is more about photoshop designs and not about web development.
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.
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.
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.
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.
Making changes to the code to bring support to new "OS's" in this case is easy as long we're talking about the webkit gang + Firefox, which makes up most users who will have interest in webapps.
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. :)
In case you are wondering, we did not do any downvoting of the parent. He/she voiced a very valid concern which we've heard from many people, so no negativity sensors triggered here :)
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).
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.
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.
As a KnockoutJS fan, this is completely awesome to hear. It's nice to see my technology of choice pushed to the limit. You guys have really delivered some phenomenal work.
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!
136 comments
[ 2.0 ms ] story [ 166 ms ] threadGetting out of previous mode wasn't immediately apparent. Perhaps more of a tab on the hidden tray?
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.
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.
If you don't mind me asking, what were your backgrounds before you starting working on this?
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/
Freakin gorgeous!
Anyway, I'm signing for updates because I know people that would be interested on your current offering.
I worked with Brackets team. I know which direction they are going and this is so inline with that.
Good luck.
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?).
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.
Absolutely agree with you about hand-coding. I'm one of those folks! It's hard (impossible?) to compete with the flexibility and power of pure code, but we can try right?
And well done guys. Getting this far in 7 months is very impressive.
Having been part of the team that designed and built Typecast (http://typecast.com), it took us over a year to really get somewhere. Building browser-based design tools is way harder than it looks.
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.
Just one thing - much of the text doesn't seem to render so smoothly. Is that intentional or is it just me...? Chrome on Windows fwiw.
I really hate that: on a lot of sites videos plays just fine on Chromium / Linux without Flash.
How hard is it to create a website which serves videos in several formats depending on the client?
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.
The browser becomes the OS for web apps, and in this case Webflow only supports one OS, Chrome.
Or is it because of my negativity toward web apps and an appearance of ignorance on the state the art?