Design Responsive Websites Visually with Webflow

View gallery

Design Responsive Websites Visually
Design Responsive Websites Visually
Design Responsive Websites Visually
Design Responsive Websites Visually
Design Responsive Websites Visually
Design Responsive Websites Visually
Design Responsive Websites Visually
Design Responsive Websites Visually

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:

Buttons, Backgrounds, Typography

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?

Design Responsive Websites Visually

 

Callout Panels

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!

Design Responsive Websites Visually

 

Live CSS

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.

Design Responsive Websites Visually

 

Transitions

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.

Design Responsive Websites Visually

 

Responsiveness!

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.

Design Responsive Websites Visually

 

Design Responsive Websites Visually

 A grid

Several ways to show the grid for your design to make sure all elements are placed correctly.

Design Responsive Websites Visually

 Easy editor panels

You see, no coding needed. Just adjust some values and see the magic happen!

Design Responsive Websites Visually

 

Share your opinion

About the author

Author avatar
Houke de Kwant is a 31 year old frontend developer from the Netherlands and the creator of TheArtHunters (former Daily Inspiration, which was started as part of his study). He is currently working as a front-end developer at Ivaldi, an internet agency in Rotterdam, the Netherlands.

Follow our latest hunts

Facebook Twitter Google+ Instagram Pinterest

Loading...