9 ms·

Show HN: Webflow - Design responsive websites visually

503 points by callmevlad 14y ago

ErikRogneby 14y ago
Wow. This is incredibly well done. Getting out of previous mode wasn't immediately apparent. Perhaps more of a tab on the hidden tray?
callmevlad 14y ago
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.
- massarog 14y ago
  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?
  - callmevlad 14y ago
    Thank you! It's still early, but we're planning on offering a subscription service to create/import sites and host them on our platform.
    - digitalengineer 14y ago
      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?
      - callmevlad 14y ago
        Love the edit :) 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.
    - ActVen 14y ago
      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.
  - mkeung 14y ago
    what about also basing it on saved designs? the first x are free, then it costs y for additional
- mcdowall 14y ago
  It seemed to work fine in Safari for me. Love the tool, great work
  - callmevlad 14y ago
    There are still a few quirks in Safari, but since it's Webkit it does mostly work. Thank you!
- hadem 14y ago
  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?
- wheaties 14y ago
  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.
  - thesergie 14y ago
    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.
- JPKab 14y ago
  You beautiful bastards!! This is what I have been waiting for! Thanks!! Looking forward to using this when Saturday hits.
  - callmevlad 14y ago
    I just printed this comment out and pinned it to the wall. :)
- ameen 14y ago
  Wonderful work. The hardwork really shows. If you don't mind me asking, what were your backgrounds before you starting working on this?
  - aeon10 14y ago
    I'd like to know too. This is an absolutely amazing tool, functional and built beautifully.
  - callmevlad 14y ago
    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/ http://sergie.info/
- uribs 14y ago
  I tried it in Firefox and haven't found anything that doesn't work.
- nickfrost 14y ago
  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!!!!
  - callmevlad 14y ago
    Thanks Nick! We're bootstrapping pretty hard right now, but always open to options. I'd love to get in touch with you - can you send me an email?
- Sakes 14y ago
  I've been dragging for the past couple months, but seeing this beautiful product has just pumped me up. Freakin gorgeous!
- marcosdumay 14y ago
  Count me as another vote for exporting the data. I wouldn't hire your hosting, but I'd take a look at it if it was an independent tool. Anyway, I'm signing for updates because I know people that would be interested on your current offering.
- msoad 14y ago
  My first impression: Adobe wants to buy this so bad... I worked with Brackets team. I know which direction they are going and this is so inline with that. Good luck.
  - callmevlad 14y ago
    Well, I guess that would explain the LinkedIn requests ;)
- modarts 14y ago
  Amazing stuff. You guys are some talented mofos. Can't wait to kick the wheels on this!
- loceng 14y ago
  The "For Funsies" are great.
mnicole 14y ago
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?).
nlh 14y ago
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.
- callmevlad 14y ago
  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?
- paulmckeever 14y ago
  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 http://typecast.com), it took us over a year to really get somewhere. Building browser-based design tools is way harder than it looks.
  - callmevlad 14y ago
    Hi Paul, thanks for the kind words! You guys have built an awesome tool at Typecast! It truly is harder than it looks. Oh, and say hi to Jamie :)
leeoniya 14y ago
quality is top notch, good work.
johnnyn 14y ago
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.
d2ncal 14y ago
Doesnt seem to work on android + chrome.
joonix 14y ago
This is awesome, bookmarked. This will help me because I've always struggled with CSS since I never sat down and actually learned it. 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.
- callmevlad 14y ago
  It's a known Chrome + Windows issue at the moment - still trying to figure out how to best resolve it without failing back to just web safe fonts.
yesimahuman 14y ago
Hey guys, looks really awesome. I built Jetstrap (http://jetstrap.com/ 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!
- callmevlad 14y ago
  We love Jetstrap! It was actually a big inspiration when we first started working on Webflow. Keep being awesome! :)
jumpbug 14y ago
this is pretty amazing
polskibus 14y ago
Doesnt flow right on my htc desire. Both horizontal and vertical orientation. Seems like the width is always larger than the screen.
- callmevlad 14y ago
  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
ajaxguy 14y ago
Awesome!! I tried to signup on your launch, but it says email is wrong. Fyi, I gave my personal email.
- wodow 14y ago
  I also get this, including entering "test@example.com"
- callmevlad 14y ago
  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.
- labinder 14y ago
  Same with my email ...
mkr-hn 14y ago
My #1 holdup when thinking about a project is making a site for it. I could see paying for this if the price isn't prohibitive.
faramarz 14y ago
Very cool! Well done fellas, what's the plan going forward? Go after Weebly. ;)
ebahnx 14y ago
Incredibly useful and elegant tool. Well done Vlad (and bro)!
- aeon10 14y ago
  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.
  - callmevlad 14y ago
    Nope, though I do share your admiration of his work!
martinced 14y ago
Video ain't working on Chromium / Linux (no Flash, no Java). 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?
- callmevlad 14y ago
  Hmm, sorry about that :( Can you try the direct Vimeo link? https://vimeo.com/62227334 https://vimeo.com/62227334
fduran 14y ago
Looks very nice, reminds me of http://www.stylizerapp.com/ http://www.stylizerapp.com/ with added mobile/responsive
webwielder 14y ago
Divshot vs. Easel vs. Webflow: Go.
- asilis 14y ago
  Where is Froont http://froont.com/ http://froont.com/ Adobe Reflow http://html.adobe.com/edge/reflow/ http://html.adobe.com/edge/reflow/ Jetstrap http://jetstrap.com/ http://jetstrap.com/ ?
  - deleted 14y ago
    [deleted]
eurodance 14y ago
buyout incoming, well done
lignuist 14y ago
Another "Web Flow": http://www.springsource.org/spring-web-flow http://www.springsource.org/spring-web-flow
jimmybook 14y ago
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.
webwielder 14y ago
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.
- marknutter 14y ago
  I don't understand how this comment is relevant to this post, and I'm a little sad it's currently the top comment in this thread.
  - webwielder 14y ago
    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.
- artursapek 14y ago
  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.
  - webwielder 14y ago
    >universal compatibility regardless of OS The browser becomes the OS for web apps, and in this case Webflow only supports one OS, Chrome.
    - 14y ago
Kiro 14y ago
Do you mind telling us about the stack? It's a pretty impressive UI. Feels very native.
- callmevlad 14y ago
  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).
  - stevensanderson 14y ago
    Looks awesome - nice work!
  - bsaul 14y ago
    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.
  - ktavera 14y ago
    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.
    - callmevlad 14y ago
      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.
  - tharshan09 14y ago
    I would be very interested in hearing why you chose that framework. Look forward to the blog post.
tnorthcutt 14y ago
I submitted this yesterday, but linked to the home page: https://news.ycombinator.com/item?id=5396626 https://news.ycombinator.com/item?id=5396626
justplay 14y ago
I am desperately waiting for full launch . And, I am ready to sign up for whatever price.
prelud 14y ago
"The Webflow CSS Playground currently works in Google Chrome and Chrome Canary." Another fine example of how Chrome is the new IE6...
- nobleach 14y ago
  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.
fosfori 14y ago
One way to improve the looks in Firefox is to remove the default outlining of links. Working pretty good in FF Nightly though!
maxbrown 14y ago
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).
bryanh 14y ago
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!
- callmevlad 14y ago
  Hey Bryan, thank you for the feedback! (Btw, we love Zapier!) We're definitely looking far beyond just being an editor. What you see right now was an important pre-requisite to what we really wanted to build - hoping to share more on that soon.
  - stuffihavemade 14y ago
    Did/have you considered making this into a native application? I can see this competing with fireworks, but not if it's web based.
    - callmevlad 14y ago
      We've considered it, and it's definitely possible (the core of Webflow right now is actually just Webkit), but we're currently focusing on making sure it works really well on the web.
    - msutherl 14y ago
      Check out Sketch[1] as an already existing Fireworks-killer. [1] http://www.bohemiancoding.com/sketch/ http://www.bohemiancoding.com/sketch/
serkanyersen 14y ago
This is way better than any Adobe application I've ever used :) no joke. I'm very impressed with the UI components that's some masterpiece over there. I demand you to release a UI framework haha. Also this is probably first HN thread that everyone seem to like what they saw, no nitpicking at all. This must tell you that you guys are on the right track.
- brryant 14y ago
  | Also this is probably first HN thread that everyone seem to like what they saw, no nitpicking at all. This must tell you that you guys are on the right track. That's definitely true.
mtmcfarl 14y ago
Great job! I'd love to see more about the tech stack.
deleted 14y ago
[deleted]
mrtksn 14y ago
This is cool, but I feel there still something missing with all these browser based editors. For some reason I still prefer sublimetext2+firebug
damniatx 14y ago
This is just beautiful
js-coder 14y ago
This looks awesome! :) I hope it'll be useful for designing my side project when it's ready.
klemmytheklam 14y ago
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? The preview tools are awesome though!
kdazzle 14y ago
It doesn't really work on an iPhone. Not super responsive to my trying to scroll. But I'm excited to check it out otherwise.
uribs 14y ago
As a non-web developer, what are the current most popular HTML+CSS WYSIWYG editors? How do they compare to Webflow?
webosb 14y ago
very nice, good job guys!
eob 14y ago
This is great work! How do you plan on allowing people to add new elements? With a toolbox on the side?
- callmevlad 14y ago
  Yes, primarily. You can see a small preview right now on the Library ("+" icon), but we chose to disable it for now so we can focus the demo on CSS.
porker 14y ago
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.
duiker101 14y ago
This is amazingly cool. I have to say, the first of this tools that is will probably use! well done!
blufox 14y ago
Great UI. Awesome work!
- thesergie 14y ago
  Thanks! I can't tell you how many times we changed the UI for the different panels to make it super awesome.
ttcbj 14y ago
Wow, beautifully executed! Quite an achievement. Looking forward to trying it out.
shurcooL 14y ago
That is very impressive, congrats! I'd really like to know the following: what process did you follow to create that 10min UI Tutorial video [1]? Did you rehearse it and then record it all in one go? How did you memorize the script? Did you edit it with multiple takes of various scenes? Etc. Thanks so much. [1] http://vimeo.com/62227334 http://vimeo.com/62227334
- thesergie 14y ago
  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. :)
  - shurcooL 14y ago
    Thanks a lot for the reply, it's very helpful. 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.
    - thesergie 14y ago
      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.
Axsuul 14y ago
Awesome execution guys and great design!
mangoren 14y ago
This is great, nice job! What did you use to build?
jplur 14y ago
Amazing work with this! I'm working on something similar, so I know the monumental amount of work that must of gone into this app, really impressed and looking forward to seeing your other components. Here's a screenshot of mine: http://s3.amazonaws.com/s3.selfsamegames.com/tmp/screen1.jpg http://s3.amazonaws.com/s3.selfsamegames.com/tmp/screen1.jpg Congrats!
IznastY 14y ago
Beautifully done. Looking forward to the launch!
bgnm2000 14y ago
As a UX engineer & designer, I think this looks great. I could imagine many non-engineers or non-designers using it. However, the right side seems to be too unintuitive even for me.
- callmevlad 14y ago
  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.
xfour 14y ago
Very well done!
rye 14y ago
This website actually crashes my macbook pro. No really. I have this bug (verified by genius tech) http://oleb.net/blog/2012/05/15-inch-mbp-mid-2010-crashing-to-black-screen/ http://oleb.net/blog/2012/05/15-inch-mbp-mid-2010-crashing-t... which I haven't given to them for repair yet. The Product button's visual transition repeatedly crashes my box. Otherwise, looks pretty cool :)
uxabhishek 14y ago
Lots of companies I know use a custom version of bootstrap as their styleguide/pattern library. I'd pay a lot for a functionality that can enable us to use our visually different bootstrap somehow to make dev ready UI. That would be the most important differentiating feature for me. None of these do that http://playground.webflow.com/ http://playground.webflow.com/ https://www.easel.io/ https://www.easel.io/ http://froont.com/ http://froont.com/ http://html.adobe.com/edge/reflow/ http://html.adobe.com/edge/reflow/ http://jetstrap.com/ http://jetstrap.com/ http://www.divshot.com/ http://www.divshot.com/
- thesergie 14y ago
  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.
locusm 14y ago
I'm tempted to lick that interface, but alas am at work.
sfaruque 14y ago
Really interesting work. What about offering a hosted version, similar to what SqaureSpace offers?
pknight 14y ago
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.
toddmorey 14y ago
This is one of the first browser-based UIs for design that I'd actually use. Impressive stuff. Question: Is there (or will there be) a way to edit the content of a clickable element (button, link)?
- thesergie 14y ago
  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. :)
SamirSam 14y ago
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.
- thesergie 14y ago
  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.
jdrummond 14y ago
This is just GREAT! Made a tiny integrated app in under 5 min (including reading the docs). 100 times easier than using one of those odd-looking PDF classes (php dev here). Start billing me, I want to retribute your effort. Thanks for this! :)
nerdbites 14y ago
Absolutely amazing guys. Most innovative, genuinely useful, and usable web app I've come across. Just... awestruck.
notmuchtotell 14y ago
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.
frankyoo 14y ago
dope. can't wait to give it a whirl. and thank you for building tools that empower designers. we need more products like webflow.

503 points by callmevlad 14y ago

Wow. This is incredibly well done. Getting out of previous mode wasn't immediately apparent. Perhaps more of a tab on the hidden tray?

callmevlad 14y ago

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.

massarog 14y ago
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?
- callmevlad 14y ago
  Thank you! It's still early, but we're planning on offering a subscription service to create/import sites and host them on our platform.
  - digitalengineer 14y ago
    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?
    - callmevlad 14y ago
      Love the edit :) 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.
  - ActVen 14y ago
    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.
- mkeung 14y ago
  what about also basing it on saved designs? the first x are free, then it costs y for additional
mcdowall 14y ago
It seemed to work fine in Safari for me. Love the tool, great work
- callmevlad 14y ago
  There are still a few quirks in Safari, but since it's Webkit it does mostly work. Thank you!
hadem 14y ago
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?
wheaties 14y ago
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.
- thesergie 14y ago
  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.
JPKab 14y ago
You beautiful bastards!! This is what I have been waiting for! Thanks!! Looking forward to using this when Saturday hits.
- callmevlad 14y ago
  I just printed this comment out and pinned it to the wall. :)
ameen 14y ago
Wonderful work. The hardwork really shows. If you don't mind me asking, what were your backgrounds before you starting working on this?
- aeon10 14y ago
  I'd like to know too. This is an absolutely amazing tool, functional and built beautifully.
- callmevlad 14y ago
  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/ http://sergie.info/
uribs 14y ago
I tried it in Firefox and haven't found anything that doesn't work.
nickfrost 14y ago
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!!!!
- callmevlad 14y ago
  Thanks Nick! We're bootstrapping pretty hard right now, but always open to options. I'd love to get in touch with you - can you send me an email?
Sakes 14y ago
I've been dragging for the past couple months, but seeing this beautiful product has just pumped me up. Freakin gorgeous!
marcosdumay 14y ago
Count me as another vote for exporting the data. I wouldn't hire your hosting, but I'd take a look at it if it was an independent tool. Anyway, I'm signing for updates because I know people that would be interested on your current offering.
msoad 14y ago
My first impression: Adobe wants to buy this so bad... I worked with Brackets team. I know which direction they are going and this is so inline with that. Good luck.
- callmevlad 14y ago
  Well, I guess that would explain the LinkedIn requests ;)
modarts 14y ago
Amazing stuff. You guys are some talented mofos. Can't wait to kick the wheels on this!
loceng 14y ago
The "For Funsies" are great.

mnicole 14y ago

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?).

nlh 14y ago

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.

callmevlad 14y ago
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?
paulmckeever 14y ago
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 http://typecast.com), it took us over a year to really get somewhere. Building browser-based design tools is way harder than it looks.
- callmevlad 14y ago
  Hi Paul, thanks for the kind words! You guys have built an awesome tool at Typecast! It truly is harder than it looks. Oh, and say hi to Jamie :)

leeoniya 14y ago

quality is top notch, good work.

johnnyn 14y ago

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.

d2ncal 14y ago

Doesnt seem to work on android + chrome.

joonix 14y ago

This is awesome, bookmarked. This will help me because I've always struggled with CSS since I never sat down and actually learned it. 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.

callmevlad 14y ago
It's a known Chrome + Windows issue at the moment - still trying to figure out how to best resolve it without failing back to just web safe fonts.

yesimahuman 14y ago

Hey guys, looks really awesome. I built Jetstrap (http://jetstrap.com/ 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!

callmevlad 14y ago
We love Jetstrap! It was actually a big inspiration when we first started working on Webflow. Keep being awesome! :)

jumpbug 14y ago

this is pretty amazing

polskibus 14y ago

Doesnt flow right on my htc desire. Both horizontal and vertical orientation. Seems like the width is always larger than the screen.

callmevlad 14y ago
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

ajaxguy 14y ago

Awesome!! I tried to signup on your launch, but it says email is wrong. Fyi, I gave my personal email.

wodow 14y ago
I also get this, including entering "test@example.com"
callmevlad 14y ago
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.
labinder 14y ago
Same with my email ...

mkr-hn 14y ago

My #1 holdup when thinking about a project is making a site for it. I could see paying for this if the price isn't prohibitive.

faramarz 14y ago

Very cool! Well done fellas, what's the plan going forward? Go after Weebly. ;)

ebahnx 14y ago

Incredibly useful and elegant tool. Well done Vlad (and bro)!

aeon10 14y ago
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.
- callmevlad 14y ago
  Nope, though I do share your admiration of his work!

martinced 14y ago

Video ain't working on Chromium / Linux (no Flash, no Java). 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?

callmevlad 14y ago
Hmm, sorry about that :( Can you try the direct Vimeo link? https://vimeo.com/62227334 https://vimeo.com/62227334

fduran 14y ago

Looks very nice, reminds me of http://www.stylizerapp.com/ http://www.stylizerapp.com/ with added mobile/responsive

webwielder 14y ago

Divshot vs. Easel vs. Webflow: Go.

asilis 14y ago
Where is Froont http://froont.com/ http://froont.com/ Adobe Reflow http://html.adobe.com/edge/reflow/ http://html.adobe.com/edge/reflow/ Jetstrap http://jetstrap.com/ http://jetstrap.com/ ?
- deleted 14y ago
  [deleted]

eurodance 14y ago

buyout incoming, well done

lignuist 14y ago

Another "Web Flow": http://www.springsource.org/spring-web-flow http://www.springsource.org/spring-web-flow

jimmybook 14y ago

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.

webwielder 14y ago

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.

marknutter 14y ago
I don't understand how this comment is relevant to this post, and I'm a little sad it's currently the top comment in this thread.
- webwielder 14y ago
  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.
artursapek 14y ago
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.
- webwielder 14y ago
  >universal compatibility regardless of OS The browser becomes the OS for web apps, and in this case Webflow only supports one OS, Chrome.
  - 14y ago

Kiro 14y ago

Do you mind telling us about the stack? It's a pretty impressive UI. Feels very native.

callmevlad 14y ago
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).
- stevensanderson 14y ago
  Looks awesome - nice work!
- bsaul 14y ago
  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.
- ktavera 14y ago
  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.
  - callmevlad 14y ago
    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.
- tharshan09 14y ago
  I would be very interested in hearing why you chose that framework. Look forward to the blog post.

tnorthcutt 14y ago

I submitted this yesterday, but linked to the home page: https://news.ycombinator.com/item?id=5396626 https://news.ycombinator.com/item?id=5396626

justplay 14y ago

I am desperately waiting for full launch . And, I am ready to sign up for whatever price.

prelud 14y ago

"The Webflow CSS Playground currently works in Google Chrome and Chrome Canary." Another fine example of how Chrome is the new IE6...

nobleach 14y ago
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.

fosfori 14y ago

One way to improve the looks in Firefox is to remove the default outlining of links. Working pretty good in FF Nightly though!

maxbrown 14y ago

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).

bryanh 14y ago

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!

callmevlad 14y ago
Hey Bryan, thank you for the feedback! (Btw, we love Zapier!) We're definitely looking far beyond just being an editor. What you see right now was an important pre-requisite to what we really wanted to build - hoping to share more on that soon.
- stuffihavemade 14y ago
  Did/have you considered making this into a native application? I can see this competing with fireworks, but not if it's web based.
  - callmevlad 14y ago
    We've considered it, and it's definitely possible (the core of Webflow right now is actually just Webkit), but we're currently focusing on making sure it works really well on the web.
  - msutherl 14y ago
    Check out Sketch[1] as an already existing Fireworks-killer. [1] http://www.bohemiancoding.com/sketch/ http://www.bohemiancoding.com/sketch/

serkanyersen 14y ago

This is way better than any Adobe application I've ever used :) no joke. I'm very impressed with the UI components that's some masterpiece over there. I demand you to release a UI framework haha. Also this is probably first HN thread that everyone seem to like what they saw, no nitpicking at all. This must tell you that you guys are on the right track.

brryant 14y ago
| Also this is probably first HN thread that everyone seem to like what they saw, no nitpicking at all. This must tell you that you guys are on the right track. That's definitely true.

mtmcfarl 14y ago

Great job! I'd love to see more about the tech stack.

deleted 14y ago

[deleted]

mrtksn 14y ago

This is cool, but I feel there still something missing with all these browser based editors. For some reason I still prefer sublimetext2+firebug

damniatx 14y ago

This is just beautiful

js-coder 14y ago

This looks awesome! :) I hope it'll be useful for designing my side project when it's ready.

klemmytheklam 14y ago

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? The preview tools are awesome though!

kdazzle 14y ago

It doesn't really work on an iPhone. Not super responsive to my trying to scroll. But I'm excited to check it out otherwise.

uribs 14y ago

As a non-web developer, what are the current most popular HTML+CSS WYSIWYG editors? How do they compare to Webflow?

webosb 14y ago

very nice, good job guys!

eob 14y ago

This is great work! How do you plan on allowing people to add new elements? With a toolbox on the side?

callmevlad 14y ago
Yes, primarily. You can see a small preview right now on the Library ("+" icon), but we chose to disable it for now so we can focus the demo on CSS.

porker 14y ago

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.

duiker101 14y ago

This is amazingly cool. I have to say, the first of this tools that is will probably use! well done!

blufox 14y ago

Great UI. Awesome work!

thesergie 14y ago
Thanks! I can't tell you how many times we changed the UI for the different panels to make it super awesome.

ttcbj 14y ago

Wow, beautifully executed! Quite an achievement. Looking forward to trying it out.

shurcooL 14y ago

That is very impressive, congrats! I'd really like to know the following: what process did you follow to create that 10min UI Tutorial video [1]? Did you rehearse it and then record it all in one go? How did you memorize the script? Did you edit it with multiple takes of various scenes? Etc. Thanks so much. [1] http://vimeo.com/62227334 http://vimeo.com/62227334

thesergie 14y ago
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. :)
- shurcooL 14y ago
  Thanks a lot for the reply, it's very helpful. 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.
  - thesergie 14y ago
    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.

Axsuul 14y ago

Awesome execution guys and great design!

mangoren 14y ago

This is great, nice job! What did you use to build?

jplur 14y ago

Amazing work with this! I'm working on something similar, so I know the monumental amount of work that must of gone into this app, really impressed and looking forward to seeing your other components. Here's a screenshot of mine: http://s3.amazonaws.com/s3.selfsamegames.com/tmp/screen1.jpg http://s3.amazonaws.com/s3.selfsamegames.com/tmp/screen1.jpg Congrats!

IznastY 14y ago

Beautifully done. Looking forward to the launch!

bgnm2000 14y ago

As a UX engineer & designer, I think this looks great. I could imagine many non-engineers or non-designers using it. However, the right side seems to be too unintuitive even for me.

callmevlad 14y ago
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.

xfour 14y ago

Very well done!

rye 14y ago

This website actually crashes my macbook pro. No really. I have this bug (verified by genius tech) http://oleb.net/blog/2012/05/15-inch-mbp-mid-2010-crashing-to-black-screen/ http://oleb.net/blog/2012/05/15-inch-mbp-mid-2010-crashing-t... which I haven't given to them for repair yet. The Product button's visual transition repeatedly crashes my box. Otherwise, looks pretty cool :)

uxabhishek 14y ago

Lots of companies I know use a custom version of bootstrap as their styleguide/pattern library. I'd pay a lot for a functionality that can enable us to use our visually different bootstrap somehow to make dev ready UI. That would be the most important differentiating feature for me. None of these do that http://playground.webflow.com/ http://playground.webflow.com/ https://www.easel.io/ https://www.easel.io/ http://froont.com/ http://froont.com/ http://html.adobe.com/edge/reflow/ http://html.adobe.com/edge/reflow/ http://jetstrap.com/ http://jetstrap.com/ http://www.divshot.com/ http://www.divshot.com/

thesergie 14y ago
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.

locusm 14y ago

I'm tempted to lick that interface, but alas am at work.

sfaruque 14y ago

Really interesting work. What about offering a hosted version, similar to what SqaureSpace offers?

pknight 14y ago

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.

toddmorey 14y ago

This is one of the first browser-based UIs for design that I'd actually use. Impressive stuff. Question: Is there (or will there be) a way to edit the content of a clickable element (button, link)?

thesergie 14y ago
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. :)

SamirSam 14y ago

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.

thesergie 14y ago
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.

jdrummond 14y ago

This is just GREAT! Made a tiny integrated app in under 5 min (including reading the docs). 100 times easier than using one of those odd-looking PDF classes (php dev here). Start billing me, I want to retribute your effort. Thanks for this! :)

nerdbites 14y ago

Absolutely amazing guys. Most innovative, genuinely useful, and usable web app I've come across. Just... awestruck.

notmuchtotell 14y ago

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.

frankyoo 14y ago

dope. can't wait to give it a whirl. and thank you for building tools that empower designers. we need more products like webflow.