Show HN: Webflow - Design responsive websites visually

http://playground.webflow.com?s=hn

by callmevlad • 13 years ago

503 132 13 years ago

playground.webflow.com

ErikRogneby• 13 years 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?

callmevlad24• 13 years 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• 13 years 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?

callmevlad24• 13 years 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.

mkeung• 13 years ago

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

mcdowall• 13 years ago

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

callmevlad24• 13 years ago

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

hadem• 13 years 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• 13 years 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.

thesergie8• 13 years 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• 13 years ago

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

callmevlad24• 13 years ago

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

ameen• 13 years ago

Wonderful work. The hardwork really shows.

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

aeon102• 13 years ago

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

callmevlad24• 13 years 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/

uribs2• 13 years ago

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

nickfrost• 13 years 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!!!!

callmevlad24• 13 years 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• 13 years ago

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

Freakin gorgeous!

marcosdumay• 13 years 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• 13 years 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.

callmevlad24• 13 years ago

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

modarts• 13 years ago

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

loceng• 13 years ago

The "For Funsies" are great.

mnicole• 13 years 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• 13 years 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.

callmevlad24• 13 years 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• 13 years 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), it took us over a year to really get somewhere. Building browser-based design tools is way harder than it looks.

callmevlad24• 13 years 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• 13 years ago

quality is top notch, good work.

johnnyn• 13 years 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• 13 years ago

Doesnt seem to work on android + chrome.

joonix• 13 years 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.

callmevlad24• 13 years 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• 13 years ago

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!

callmevlad24• 13 years ago

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

jumpbug• 13 years ago

this is pretty amazing

polskibus• 13 years ago

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

callmevlad24• 13 years 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• 13 years ago

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

wodow• 13 years ago

I also get this, including entering "test@example.com"

callmevlad24• 13 years 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• 13 years ago

Same with my email ...

mkr-hn• 13 years 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• 13 years ago

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

ebahnx• 13 years ago

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

aeon102• 13 years 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.

callmevlad24• 13 years ago

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

martinced• 13 years 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?

callmevlad24• 13 years ago

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

fduran• 13 years ago

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

webwielder5• 13 years ago

Divshot vs. Easel vs. Webflow: Go.

asilis• 13 years ago

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

eurodance• 13 years ago

buyout incoming, well done

lignuist2• 13 years ago

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

jimmybook• 13 years 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.

webwielder5• 13 years 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• 13 years 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.

webwielder5• 13 years 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.

artursapek2• 13 years 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.

webwielder5• 13 years ago

>universal compatibility regardless of OS

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

path411• 13 years ago

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.

webwielder5• 13 years ago

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?

lignuist2• 13 years ago

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

Kiro• 13 years ago

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

callmevlad24• 13 years 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• 13 years ago

Looks awesome - nice work!

bsaul• 13 years 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• 13 years 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.

tharshan09• 13 years ago

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

stackthatcode• 13 years ago

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.

henbo• 13 years ago

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

thesergie8• 13 years ago

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!

tnorthcutt• 13 years ago

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

justplay• 13 years ago

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

prelud• 13 years ago

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

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

nobleach• 13 years 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.

maxbrown• 13 years 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• 13 years 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!

callmevlad24• 13 years 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• 13 years 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.

michaelpinto• 13 years ago

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

serkanyersen• 13 years 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.

mtmcfarl• 13 years ago

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

mrtksn• 13 years 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• 13 years ago

This is just beautiful

js-coder• 13 years ago

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

klemmytheklam• 13 years 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• 13 years 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.

uribs2• 13 years ago

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

How do they compare to Webflow?

webosb• 13 years ago

very nice, good job guys!

eob• 13 years ago

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

callmevlad24• 13 years 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• 13 years 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• 13 years ago

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

blufox• 13 years ago

Great UI. Awesome work!

thesergie8• 13 years ago

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

ttcbj• 13 years ago

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

shurcooL2• 13 years 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

thesergie8• 13 years 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. :)

shurcooL2• 13 years 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.

Axsuul• 13 years ago

Awesome execution guys and great design!

mangoren• 13 years ago

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

jplur• 13 years 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

Congrats!

IznastY• 13 years ago

Beautifully done. Looking forward to the launch!

bgnm2000• 13 years 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.

callmevlad24• 13 years 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• 13 years ago

Very well done!

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

thesergie8• 13 years 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• 13 years ago

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

sfaruque• 13 years ago

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

pknight• 13 years 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• 13 years 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)?

thesergie8• 13 years 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• 13 years 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.

thesergie8• 13 years 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• 13 years 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• 13 years ago

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

notmuchtotell• 13 years 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• 13 years 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.

Show HN: Webflow - Design responsive websites visually

Related Stories