Show HN: Webflow - Design responsive websites visually | Hacker News Reader

Show HN: Webflow - Design responsive websites visually

playground.webflow.com

503 pointscallmevlad132 comments

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?

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.

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?

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.

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.

what about also basing it on saved designs? the first x are free, then it costs y for additional

It seemed to work fine in Safari for me. Love the tool, great work

There are still a few quirks in Safari, but since it's Webkit it does mostly work. Thank you!

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.

You beautiful bastards!! This is what I have been waiting for! Thanks!! Looking forward to using this when Saturday hits.

I just printed this comment out and pinned it to the wall. :)

Wonderful work. The hardwork really shows.

If you don't mind me asking, what were your backgrounds before you starting working on this?

I'd like to know too. This is an absolutely amazing tool, functional and built beautifully.

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/

I tried it in Firefox and haven't found anything that doesn't work.

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!!!!

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?

I've been dragging for the past couple months, but seeing this beautiful product has just pumped me up.

Freakin gorgeous!

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.

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.

Well, I guess that would explain the LinkedIn requests ;)

Amazing stuff. You guys are some talented mofos. Can't wait to kick the wheels on this!

The "For Funsies" are great.

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!

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.

Did/have you considered making this into a native application? I can see this competing with fireworks, but not if it's web based.

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.

Check out Sketch[1] as an already existing Fireworks-killer.

[1] http://www.bohemiancoding.com/sketch/

If you made a version that exported WordPress themes I'd kill for that!

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.

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.

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.

>universal compatibility regardless of OS

The browser becomes the OS for web apps, and in this case Webflow only supports one OS, Chrome.

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.

We're very close to having Firefox and IE10 support, so this will not be true for long.

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

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.

Divshot vs. Easel vs. Webflow: Go.

Where is Froont http://froont.com/ Adobe Reflow http://html.adobe.com/edge/reflow/ Jetstrap http://jetstrap.com/ ?

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.

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/ https://www.easel.io/ http://froont.com/ http://html.adobe.com/edge/reflow/ http://jetstrap.com/ http://www.divshot.com/

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!

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

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

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

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.

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

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

Congrats!

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!

"The Webflow CSS Playground currently works in Google Chrome and Chrome Canary."

Another fine example of how Chrome is the new IE6...

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.

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

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

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

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

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.

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.

Wow. This is incredibly well done.

Getting out of previous mode wasn't immediately apparent. Perhaps more of a tab on the hidden tray?

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.

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

I also get this, including entering "test@example.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.

Same with my email ...

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

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.

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

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

Looks awesome - nice work!

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.

I would be very interested in hearing why you chose that framework. Look forward to the blog post.

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.

I agre, the UI is exquisite. Would love to learn how this was made.

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!

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! :)

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.

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.

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

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

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

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

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

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

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

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.

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.

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

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

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.

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

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

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

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

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

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

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.

Nope, though I do share your admiration of his work!

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

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

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

Beautifully done. Looking forward to the launch!

Awesome execution guys and great design!

Doesnt seem to work on android + chrome.

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

Great UI. Awesome work!

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

This is just beautiful

Very well done!

quality is top notch, good work.

buyout incoming, well done

very nice, good job guys!

this is pretty amazing

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?

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

As a non-web developer, what are the current most popular HTML+CSS WYSIWYG editors?

How do they compare to Webflow?

Reply on news.ycombinator.com