
Show HN: Webflow - Design responsive websites visually - callmevlad
http://playground.webflow.com?s=hn
======
callmevlad
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
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
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
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
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.

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

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

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

~~~
artursapek
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
>universal compatibility regardless of OS

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

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

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

------
webwielder
Divshot vs. Easel vs. Webflow: Go.

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

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

------
uxabhishek
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/>

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

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

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

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

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

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

------
rye
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...](http://oleb.net/blog/2012/05/15-inch-mbp-
mid-2010-crashing-to-black-screen/) which I haven't given to them for repair
yet.

The Product button's visual transition repeatedly crashes my box. Otherwise,
looks pretty cool :)

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

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

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

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

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

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

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

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

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

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

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

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

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

------
ErikRogneby
Wow. This is incredibly well done.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

~~~
callmevlad
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

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

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

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

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

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

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

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

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

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

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

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

~~~
aeon10
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
Nope, though I do share your admiration of his work!

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

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

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

------
IznastY
Beautifully done. Looking forward to the launch!

------
Axsuul
Awesome execution guys and great design!

------
d2ncal
Doesnt seem to work on android + chrome.

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

------
blufox
Great UI. Awesome work!

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

------
damniatx
This is just beautiful

------
xfour
Very well done!

------
leeoniya
quality is top notch, good work.

------
eurodance
buyout incoming, well done

------
webosb
very nice, good job guys!

------
jumpbug
this is pretty amazing

------
martinced
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
Hmm, sorry about that :( Can you try the direct Vimeo link?
<https://vimeo.com/62227334>

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

How do they compare to Webflow?

