A few days ago, Webflow was one of the ten websites I featured in our weekly web design series. Flat design is clearly a trend right now, and they did a great job with their illustrations on their homepage. But what was even cooler was the demo, where they actually showed their product. Playing with it, I was impressed with the possibilities they implemented. One of my first thoughts was “This could be an Adobe product”, cause it fits nice in their selection of products. I don’t believe that this will fully overtake the front-end proces, I am a frontender myself and I love to code my own stuff (if only you knew how many -not-yet-implemented- experiments for DI I have on my MacBook). Don’t get me wrong, I love it what they’ve made but if you can do it yourself, I don’t believe this is something for you. If you’re a designer struggling to get your designs into fully working websites on the other hand, you should at least check it out! Anyway, here are some of the things you can do:
Create beautiful call to action buttons, set the different styles (hover, focus, active, normal) apply a nice radius to the border, add some shadows,… Have fun with backgrounds and typography, now CSS3 is here there is so much more you can do, what about some nice 3D typography?
Create beautiful panels to get the users attention, for example by creating newletter forms, or login windows. But there is much more you can do with this, your browser and its support is the limit!
View the CSS of your designed piece directly below it. Create your layout, click on the button and you will see the CSS needed to create your beautiful web work.
The things I love about CSS3! Nice effects and no code needed, if you want to see some little experiment with transitions I did back in 2011 head over to the demo page.
This is something we can’t deny anymore, if you want your website taken seriously you should think about the smaller screens. Responsive design is one of the solutions for this, but don’t think this is an easy process, the code needed for this is, but figuring out what you want to show where is a really complex process.
Several ways to show the grid for your design to make sure all elements are placed correctly.
You see, no coding needed. Just adjust some values and see the magic happen!