thesergie

Rock on Chris! Glad you're liking the product!

Hey Craig thanks for the feedback! The examples are not representative of actual website design/layouts, but we wanted to show off the roots of grid design (which originated in print media) and demonstrate that you can build equally expressive designs on the web. With CSS grid there is no limit!

As for providing affordance for what each example should look like, we have a button in the top left corner that you can hover over. Unfortunately we only point it out in the very first example, like we do with the CSS export button. It would be better to show the notes that draws attention to these buttons until you actually interact with them. Thanks again for the feedback. :)

Thanks for the feedback! The interesting thing about the CSS grid is that the cells are not actual empty elements, but we want to represent the cells visually somehow to help with affordance. We'll be adding some much needed enhancements to the copy-paste interaction (I mean, it's so fundamental) soon, like giving you the ability to select these non-existent cells so that you can paste inside of them. Let us know if there's anything else that can be improved.

The next big release will include grids with contents that auto-flow vs having to always manually position them.

I'm one of the co-founders and designers at Webflow. I have never coded an entire site by hand, but I built this entire responsive site in Webflow. This WYSIWYG doesn't disregard how the web works - users actually have to know some CSS to build a responsive layout. This restriction limits a lot of Average Joe's (so no Geocities here). I actually learned all the intricacies of CSS by building sites in Webflow. Same goes for the designers out there using tool and building actual sites for the first time.

It boils down to investment and return. If designers can build responsive sites faster and easier with great code output (see source code) using a WYSIWYG, then it makes more sense to invest in that versus learning how to write the same code. Front end devs use frameworks like Bootstrap and Foundation to cut development time. Webflow serves the same purpose, but all the framework components are made visual.

This visual abstraction makes it more accessible for more people just like these frameworks made web dev easier. There is always the possibility of people using Webflow and creating poorly-coded websites, but anyone trying to code can do the same.

Sure was! Click on the "Play with Demo" button at the top of the page and you'll be able to edit the Webflow homepage in Webflow.

Love the minimalist style. Give me some more design options and I'll pay for it.

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.

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.

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

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.

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.

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

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

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!